fix：修改大屏地图，修改接口请求超时时间，修改今日巡查，
This commit is contained in:
parent
a8fde34b5c
commit
453e7a64e9
BIN
src/assets/index/map-liaoning.jpg
Normal file
BIN
src/assets/index/map-liaoning.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 287 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 358 B |
BIN
src/assets/screen/index/map-liaoning.png
Normal file
BIN
src/assets/screen/index/map-liaoning.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
src/assets/screen/index/right-rate.png
Normal file
BIN
src/assets/screen/index/right-rate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/screen/index/screen-map-popover.png
Normal file
BIN
src/assets/screen/index/screen-map-popover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@ -17,7 +17,7 @@ const service = axios.create({
|
||||
// axios中请求配置有baseURL选项，表示请求URL公共部分
|
||||
baseURL: process.env.VUE_APP_BASE_API,
|
||||
// 超时
|
||||
timeout: 10000
|
||||
timeout: 30000
|
||||
})
|
||||
|
||||
// request拦截器
|
||||
|
||||
@ -692,6 +692,10 @@ export default {
|
||||
// 修改日期选择器头部样式
|
||||
.el-date-range-picker__header {
|
||||
color: #c0c0c0;
|
||||
|
||||
.el-picker-panel__icon-btn {
|
||||
color: #c0c0c0;
|
||||
}
|
||||
}
|
||||
|
||||
// 修改弹出层边框颜色
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 09:59:32
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-10 10:52:10
|
||||
* @LastEditTime: 2024-12-16 17:07:19
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-safety.vue
|
||||
* @Description: 病害巡检大屏-今日巡查
|
||||
-->
|
||||
@ -14,36 +14,66 @@
|
||||
</div>
|
||||
<div class="traffic-right">
|
||||
<div class="right-sum" @click="showDialog('')">
|
||||
<span>{{ all }}</span>个
|
||||
<span>{{ all }}</span
|
||||
>个
|
||||
</div>
|
||||
<!-- <div class="right-rate">
|
||||
<span> {{ scale }} </span>%
|
||||
</div> -->
|
||||
<div class="right-rate">
|
||||
较昨日<span v-if="state === '增加'" class="up">{{ state }}</span><span v-else class="bottom">{{ state
|
||||
}}</span> {{ count }}个
|
||||
<div class="right-rate-top">
|
||||
<span>{{ count }}</span
|
||||
>个
|
||||
<i v-if="state === '增加'" class="el-icon-top"></i>
|
||||
<i v-if="state === '无变化'" class="el-icon-minus"></i>
|
||||
<i v-else class="el-icon-bottom"></i>
|
||||
</div>
|
||||
<div class="right-rate-bottom">
|
||||
<span v-if="state === '增加'" class="up">{{ state }}</span>
|
||||
<span v-else class="bottom">{{ state }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 病害巡检弹窗 -->
|
||||
<el-dialog title="当前病害查看" :visible.sync="showDialogVisible" width="75rem" append-to-body
|
||||
:close-on-click-modal="false" destroy-on-close @close="screenCancel">
|
||||
<el-dialog
|
||||
title="当前病害查看"
|
||||
:visible.sync="showDialogVisible"
|
||||
width="75rem"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="screenCancel"
|
||||
>
|
||||
<div class="today-content">
|
||||
<div class="today-select">
|
||||
<div>
|
||||
<el-select :popper-append-to-body="false" v-model="roadSelect" @change="changeRoad" clearable
|
||||
placeholder="请选择路段">
|
||||
<el-option v-for="item in roadList" :key="`${item.name}-${item.index}`" :label="item.name"
|
||||
:value="item.name" />
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="roadSelect"
|
||||
@change="changeRoad"
|
||||
clearable
|
||||
placeholder="请选择路段"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roadList"
|
||||
:key="`${item.name}-${item.index}`"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div>
|
||||
<el-select :popper-append-to-body="false" v-model="companySelect" clearable @change="changeCompany"
|
||||
placeholder="请选择分公司">
|
||||
<el-option v-for="item in companyList" :key="`${item.name}-${item.index}`" :label="item.name"
|
||||
:value="item.name" />
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="companySelect"
|
||||
clearable
|
||||
@change="changeCompany"
|
||||
placeholder="请选择分公司"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in companyList"
|
||||
:key="`${item.name}-${item.index}`"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
@ -71,7 +101,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
// 新增病害数
|
||||
today: 0,
|
||||
today: "0",
|
||||
// 病害总数
|
||||
all: 0,
|
||||
// 病害增长率
|
||||
@ -79,7 +109,7 @@ export default {
|
||||
// 较昨日增长、减少
|
||||
state: "——",
|
||||
// 增长、减少数量
|
||||
count: "——",
|
||||
count: "0",
|
||||
// 弹窗显隐控制
|
||||
showDialogVisible: false,
|
||||
// 左侧路段选择绑定
|
||||
@ -306,6 +336,7 @@ export default {
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,0.65)",
|
||||
},
|
||||
minInterval: 1,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.2)",
|
||||
@ -507,6 +538,7 @@ export default {
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,0.65)",
|
||||
},
|
||||
minInterval: 1,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.2)",
|
||||
@ -627,9 +659,7 @@ export default {
|
||||
span {
|
||||
cursor: pointer;
|
||||
font-family: "DouYu";
|
||||
background: linear-gradient(to bottom,
|
||||
#ffffff,
|
||||
#2773d0);
|
||||
background: linear-gradient(to bottom, #ffffff, #2773d0);
|
||||
/*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text;
|
||||
/*将设置的背景颜色限制在文字中*/
|
||||
@ -652,7 +682,7 @@ export default {
|
||||
width: 100%;
|
||||
height: 45%;
|
||||
display: flex;
|
||||
padding-left: 1rem;
|
||||
padding-left: 2rem;
|
||||
justify-content: center;
|
||||
line-height: 3rem;
|
||||
// background-image: url("../../../assets/screen/traffic/right-sum.png");
|
||||
@ -665,12 +695,9 @@ export default {
|
||||
|
||||
span {
|
||||
margin-right: 0.5rem;
|
||||
|
||||
font-size: 1.2rem;
|
||||
font-size: 1rem;
|
||||
font-family: "DouYu";
|
||||
background: linear-gradient(to bottom,
|
||||
#ffffff,
|
||||
#21f1e1);
|
||||
background: linear-gradient(to bottom, #ffffff, #21f1e1);
|
||||
/*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text;
|
||||
/*将设置的背景颜色限制在文字中*/
|
||||
@ -679,42 +706,61 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
// .right-rate {
|
||||
// width: 100%;
|
||||
// height: 4rem;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// padding-left: 1rem;
|
||||
// line-height: 3rem;
|
||||
// // background-image: url("../../../assets/screen/traffic/right-rate.png");
|
||||
// background-image: url("~@/assets/screen/disease/right-rate.png");
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: 100%;
|
||||
// background-position: 100% 50%;
|
||||
// color: #aac6c7;
|
||||
// font-size: 0.9rem;
|
||||
|
||||
// span {
|
||||
// margin-right: 0.5rem;
|
||||
// font-size: 1.2rem;
|
||||
// font-family: "DouYu";
|
||||
// background: linear-gradient(
|
||||
// to bottom,
|
||||
// #ffffff,
|
||||
// #e9bc5c
|
||||
// ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
// background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
// -webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
// }
|
||||
// }
|
||||
|
||||
.right-rate {
|
||||
width: 100%;
|
||||
height: 45%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: "DouYu";
|
||||
font-size: 1rem;
|
||||
background: url("~@/assets/screen/index/right-rate.png") no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: 100% 50%;
|
||||
color: #aac6c7;
|
||||
|
||||
.right-rate-top {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
padding-left: 3rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
|
||||
span {
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
font-family: "DouYu";
|
||||
margin-right: 0.5rem;
|
||||
background: linear-gradient(to bottom, #ffffff, #9e7a06);
|
||||
/*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text;
|
||||
/*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent;
|
||||
/*给文字设置成透明*/
|
||||
}
|
||||
|
||||
.el-icon-top {
|
||||
font-size: 1.5rem;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.el-icon-bottom,
|
||||
.el-icon-minus {
|
||||
font-size: 1.5rem;
|
||||
color: #19eb27;
|
||||
}
|
||||
}
|
||||
|
||||
.right-rate-bottom {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
padding-left: 55%;
|
||||
|
||||
span {
|
||||
font-size: 0.7rem;
|
||||
font-family: "DouYu";
|
||||
}
|
||||
}
|
||||
|
||||
.up {
|
||||
color: #ff2e2e;
|
||||
@ -725,17 +771,6 @@ export default {
|
||||
color: #19eb27;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.el-icon-top {
|
||||
font-size: 1.5rem;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.el-icon-bottom {
|
||||
font-size: 1.5rem;
|
||||
color: #19eb27;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 10:06:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-19 09:35:47
|
||||
* @LastEditTime: 2024-12-13 17:09:48
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-statistic.vue
|
||||
* @Description: 病害巡检大屏-病害统计
|
||||
-->
|
||||
@ -181,8 +181,8 @@ export default {
|
||||
left: "center",
|
||||
top: "50%",
|
||||
textStyle: {
|
||||
fontFamily: "DinBm",
|
||||
fontSize: 15,
|
||||
fontFamily: "DouYu",
|
||||
fontSize: 14,
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
@ -293,7 +293,8 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #808c9f;
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.6rem;
|
||||
font-family: "DouYu";
|
||||
|
||||
.index {
|
||||
width: 0.8rem;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-13 10:44:04
|
||||
* @LastEditTime: 2024-12-16 17:42:38
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@ -163,13 +163,12 @@
|
||||
</el-checkbox-group>
|
||||
</fssm-scroll>
|
||||
</div>
|
||||
<!-- 大屏工单数据 -->
|
||||
<div class="work-order"></div>
|
||||
<!-- 地图图例 -->
|
||||
<div class="map-legend"></div>
|
||||
<!-- 图片背景 -->
|
||||
<div class="disease-content" v-if="elementDiv === 'OverviewScreen'">
|
||||
<div class="disease-title"></div>
|
||||
<!-- 图背景下选择框 -->
|
||||
<div class="map-image-select">
|
||||
<!-- 病害筛选下拉框 -->
|
||||
<div class="map-image-select" v-if="elementDiv != 'RoadScreen'">
|
||||
病害类型筛选：
|
||||
<el-cascader
|
||||
v-model="mapCareSelect"
|
||||
@ -180,10 +179,22 @@
|
||||
emitPath: true,
|
||||
children: 'subTypes',
|
||||
}"
|
||||
@change="getMapCare"
|
||||
@change="changeMapCareSelect"
|
||||
clearable
|
||||
></el-cascader>
|
||||
</div>
|
||||
<!-- 图片背景返回 -->
|
||||
<div class="return-image" v-if="showMap">
|
||||
<el-button type="info" size="mini" round @click="disabledMapCompany"
|
||||
>返回</el-button
|
||||
>
|
||||
</div>
|
||||
<!-- 图片背景 -->
|
||||
<div
|
||||
class="disease-content"
|
||||
v-if="elementDiv === 'OverviewScreen' && !showMap"
|
||||
>
|
||||
<!-- <div class="disease-title"></div> -->
|
||||
<div class="map-care">
|
||||
<div
|
||||
class="map-care-div"
|
||||
@ -192,20 +203,77 @@
|
||||
:key="`map-care-${index}`"
|
||||
:style="{ left: item.left, top: item.top }"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
<el-popover
|
||||
popper-class="screen-map-popover"
|
||||
placement="right-start"
|
||||
width="auto"
|
||||
trigger="hover"
|
||||
:visible-arrow="false"
|
||||
>
|
||||
<div class="screen-map-popover-content">
|
||||
<div class="item">
|
||||
<div>
|
||||
<span class="name" style="color: #18f7ff">路面病害：</span
|
||||
><span class="value">65431213</span>个
|
||||
</div>
|
||||
<div>
|
||||
<span class="name" style="color: #18f7ff"
|
||||
>每公里平均病害：</span
|
||||
><span class="value">65431213</span>个
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>
|
||||
<span class="name" style="color: #FFEA68"
|
||||
>交安设施病害：</span
|
||||
><span class="value">65431213</span>个
|
||||
</div>
|
||||
<div>
|
||||
<span class="name" style="color: #FFEA68"
|
||||
>每公里平均病害：</span
|
||||
><span class="value">65431213</span>个
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>
|
||||
<span class="name" style="color: #AE74F3">桥隧病害：</span
|
||||
><span class="value">65431213</span>个
|
||||
</div>
|
||||
<div>
|
||||
<span class="name" style="color: #AE74F3"
|
||||
>每公里平均病害：</span
|
||||
><span class="value">65431213</span>个
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>
|
||||
<span class="name" style="color:#6FC36F">绿化问题：</span
|
||||
><span class="value">65431213</span>个
|
||||
</div>
|
||||
<div>
|
||||
<span class="name" style="color:#6FC36F">每公里平均问题：</span
|
||||
><span class="value">65431213</span>个
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地图 -->
|
||||
<span slot="reference" @click="showMapByCompany">{{
|
||||
item.name
|
||||
}}</span>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 总览地图 -->
|
||||
<fssm-map ref="overViewMap" v-if="showMap"> </fssm-map>
|
||||
<!-- 病害巡检、道路资产地图 -->
|
||||
<fssm-map
|
||||
v-if="elementDiv !== 'OverviewScreen'"
|
||||
v-if="elementDiv !== 'OverviewScreen' && !showMap"
|
||||
ref="roadMap"
|
||||
:showChange="true"
|
||||
:controlStyle="{ top: '10%', left: '26%' }"
|
||||
@feature-select="featureSelect"
|
||||
@map-zoom="getZoom"
|
||||
></fssm-map>
|
||||
<!-- @map-moveend="mapMoveend" -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen-footer">
|
||||
@ -333,7 +401,6 @@ import {
|
||||
mapPciList,
|
||||
comppanyImg,
|
||||
getItemTypes,
|
||||
getRoadListTypes,
|
||||
getDefectTypes,
|
||||
getNoticeList,
|
||||
} from "@/api/xj/screen/index";
|
||||
@ -439,10 +506,10 @@ export default {
|
||||
mapCareSelect: "",
|
||||
// 图片背景下病害类型下拉选择数据
|
||||
dieaseOptions: [],
|
||||
// 路段下拉绑定
|
||||
roadList: [],
|
||||
// 地图打点-路段绑定
|
||||
roadSelect: "",
|
||||
// 总览页面是否展示地图显隐控制
|
||||
showMap: false,
|
||||
|
||||
// 图标类别切换标识
|
||||
bottomTipClick: "1",
|
||||
@ -505,7 +572,6 @@ export default {
|
||||
this.setTime();
|
||||
this.getSelect();
|
||||
this.getMapCare();
|
||||
this.getRoadList();
|
||||
this.getDieaseTypeList();
|
||||
this.getMessageList();
|
||||
// this.handleMessage();
|
||||
@ -623,18 +689,6 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 获取路段下拉数据
|
||||
* @return {void}
|
||||
*/
|
||||
getRoadList() {
|
||||
getRoadListTypes().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.roadList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 获取图片背景左上角病害类型下拉
|
||||
* @return {void}
|
||||
@ -647,6 +701,14 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 获取图片背景左上角病害类型下拉
|
||||
* @return {void}
|
||||
*/
|
||||
changeMapCareSelect(value) {
|
||||
this.getMapCare(value);
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 获取图片背景下坐标数据
|
||||
* @return {void}
|
||||
@ -663,6 +725,24 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 点击图片背景下公司名称切换地图
|
||||
* @return {void}
|
||||
*/
|
||||
showMapByCompany() {
|
||||
this.showMap = true;
|
||||
this.getLinePoint();
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 点击公司地图下返回按钮
|
||||
* @return {void}
|
||||
*/
|
||||
disabledMapCompany() {
|
||||
this.showMap = false;
|
||||
this.markLayerLines = null;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 点击病害日志详情打开弹窗进行地图打点
|
||||
* @return {void}
|
||||
@ -923,10 +1003,17 @@ export default {
|
||||
type: "line",
|
||||
},
|
||||
});
|
||||
if (this.showMap) {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.overViewMap.instance.get("map");
|
||||
map.addLayer(this.markLayerLines);
|
||||
});
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.addLayer(this.markLayerLines);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
@ -1102,6 +1189,8 @@ export default {
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
// 展示图片地图
|
||||
this.showMap = false;
|
||||
// 不接收小车位置消息
|
||||
const data = { type: "carLocation", status: false };
|
||||
this.$ws.send(data);
|
||||
@ -1151,6 +1240,8 @@ export default {
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
// 隐藏总览地图
|
||||
this.showMap = false;
|
||||
// 发送小车位置消息
|
||||
const data = { type: "carLocation", status: true };
|
||||
this.$ws.send(data);
|
||||
@ -1206,6 +1297,8 @@ export default {
|
||||
class: "one",
|
||||
},
|
||||
];
|
||||
//隐藏总览地图
|
||||
this.showMap = false;
|
||||
// 发送小车位置消息
|
||||
const data = { type: "carLocation", status: true };
|
||||
this.$ws.send(data);
|
||||
@ -1420,6 +1513,8 @@ export default {
|
||||
background-color: transparent;
|
||||
padding: 0 0.3rem;
|
||||
border: none;
|
||||
font-size: 0.7rem;
|
||||
font-family: "DouYu";
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@ -1446,6 +1541,9 @@ export default {
|
||||
background-color: transparent;
|
||||
padding: 0 0.3rem;
|
||||
border: none;
|
||||
font-size: 0.7rem;
|
||||
font-family: "DouYu";
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
@ -1459,6 +1557,26 @@ export default {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
// 筛选病害类型下拉
|
||||
.map-image-select {
|
||||
position: absolute;
|
||||
left: 28%;
|
||||
top: 10%;
|
||||
font-size: 0.9rem;
|
||||
position: absolute;
|
||||
color: #ffffff;
|
||||
font-family: "DouYu";
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// 返回图片背景下拉
|
||||
.return-image {
|
||||
position: absolute;
|
||||
left: 28%;
|
||||
top: 14%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// 图例
|
||||
.map-legend {
|
||||
height: 7rem;
|
||||
@ -1467,7 +1585,7 @@ export default {
|
||||
bottom: 16%;
|
||||
right: 27%;
|
||||
z-index: 1;
|
||||
background-image: url("../../assets/screen/index/map-legend.png");
|
||||
background-image: url("~@/assets/screen/index/map-legend.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
@ -1516,16 +1634,6 @@ export default {
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
// 筛选病害类型下拉
|
||||
.map-image-select {
|
||||
left: 28%;
|
||||
top: 10%;
|
||||
font-size: 0.9rem;
|
||||
position: absolute;
|
||||
color: #ffffff;
|
||||
font-family: "DouYu";
|
||||
}
|
||||
|
||||
// 打点部分
|
||||
.map-care {
|
||||
width: 48%;
|
||||
@ -1535,7 +1643,7 @@ export default {
|
||||
top: 13%;
|
||||
|
||||
.map-care-div {
|
||||
height: 8.5rem;
|
||||
height: 2rem;
|
||||
min-width: 3.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -1548,32 +1656,33 @@ export default {
|
||||
background-position: 50%;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.map-care-div-1 {
|
||||
background-image: url("../../assets/screen/index/map-care-div-1.png");
|
||||
background-image: url("~@/assets/screen/index/map-care-div-1.png");
|
||||
}
|
||||
|
||||
.map-care-div-2 {
|
||||
background-image: url("../../assets/screen/index/map-care-div-2.png");
|
||||
background-image: url("~@/assets/screen/index/map-care-div-2.png");
|
||||
}
|
||||
|
||||
.map-care-div-3 {
|
||||
background-image: url("../../assets/screen/index/map-care-div-3.png");
|
||||
background-image: url("~@/assets/screen/index/map-care-div-3.png");
|
||||
}
|
||||
|
||||
.map-care-div-4 {
|
||||
background-image: url("../../assets/screen/index/map-care-div-4.png");
|
||||
background-image: url("~@/assets/screen/index/map-care-div-4.png");
|
||||
}
|
||||
|
||||
.map-care-div-5 {
|
||||
background-image: url("../../assets/screen/index/map-care-div-5.png");
|
||||
background-image: url("~@/assets/screen/index/map-care-div-5.png");
|
||||
}
|
||||
|
||||
.map-care-div-6 {
|
||||
background-image: url("../../assets/screen/index/map-care-div-6.png");
|
||||
background-image: url("~@/assets/screen/index/map-care-div-6.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1714,42 +1823,42 @@ export default {
|
||||
|
||||
// 未点击样式
|
||||
.change-vue-OverviewScreen {
|
||||
background-image: url("../../assets//screen/index/button-overview.png");
|
||||
background-image: url("../../assets/screen/index/button-overview.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 95% 60%;
|
||||
background-position: 75% 15%;
|
||||
}
|
||||
|
||||
.change-vue-click-OverviewScreen {
|
||||
background-image: url("../../assets//screen/index/button-overview-click.png");
|
||||
background-image: url("../../assets/screen/index/button-overview-click.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 95% 60%;
|
||||
background-position: 75% 15%;
|
||||
}
|
||||
|
||||
.change-vue-DiseaseScreen {
|
||||
background-image: url("../../assets//screen/index/button-disease.png");
|
||||
background-image: url("../../assets/screen/index/button-disease.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 99% 60%;
|
||||
background-position: 50% 13%;
|
||||
}
|
||||
|
||||
.change-vue-click-DiseaseScreen {
|
||||
background-image: url("../../assets//screen/index/button-disease-click.png");
|
||||
background-image: url("../../assets/screen/index/button-disease-click.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 99% 60%;
|
||||
background-position: 50% 13%;
|
||||
}
|
||||
|
||||
.change-vue-RoadScreen {
|
||||
background-image: url("../../assets//screen/index/button-road.png");
|
||||
background-image: url("../../assets/screen/index/button-road.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 93% 60%;
|
||||
background-position: 15% 15%;
|
||||
}
|
||||
|
||||
.change-vue-click-RoadScreen {
|
||||
background-image: url("../../assets//screen/index/button-road-click.png");
|
||||
background-image: url("../../assets/screen/index/button-road-click.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 93% 60%;
|
||||
background-position: 15% 15%;
|
||||
@ -1868,7 +1977,7 @@ export default {
|
||||
|
||||
.el-input--medium .el-input__inner {
|
||||
height: 1.5rem;
|
||||
background-color: transparent;
|
||||
background-color: rgba(38, 38, 38, 0.7);
|
||||
color: #89c5e8;
|
||||
border-color: #6991cd;
|
||||
}
|
||||
@ -1940,4 +2049,28 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 大屏总览地图坐标弹出层样式
|
||||
.screen-map-popover {
|
||||
background: url("~@/assets/screen/index/screen-map-popover.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border: none;
|
||||
|
||||
// 图片地图打点popover弹窗
|
||||
.screen-map-popover-content {
|
||||
padding-top: 1rem;
|
||||
font-family: "DouYu";
|
||||
font-size: 0.6rem;
|
||||
color: #cccccc;
|
||||
|
||||
.item {
|
||||
margin-bottom: 0.5rem;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
|
||||
.value {
|
||||
color: rgb(227, 164, 27);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:25:29
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-05 15:08:14
|
||||
* @LastEditTime: 2024-12-16 17:39:06
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\patrol-order.vue
|
||||
* @Description: 总览大屏-巡查里程
|
||||
-->
|
||||
@ -11,25 +11,48 @@
|
||||
<div class="content">
|
||||
<div class="patrol-div">
|
||||
<div class="value">
|
||||
<span @click="showDetail">{{ formatNumber(patrolObject.len) }}</span>km
|
||||
<span @click="showDetail">{{ formatNumber(patrolObject.len) }}</span
|
||||
>km
|
||||
</div>
|
||||
</div>
|
||||
<div class="patrol-div">
|
||||
<div class="value">
|
||||
<span @click="showDetail">{{ formatTime(patrolObject.time) }}</span>h
|
||||
<span @click="showDetail">{{ formatTime(patrolObject.time) }}</span
|
||||
>h
|
||||
</div>
|
||||
</div>
|
||||
<!-- 巡查里程弹窗 -->
|
||||
<el-dialog title="巡查里程总览" :visible.sync="showDialogVisible" width="50rem" append-to-body
|
||||
:close-on-click-modal="false" destroy-on-close @close="screenCancel">
|
||||
<el-dialog
|
||||
title="巡查里程总览"
|
||||
:visible.sync="showDialogVisible"
|
||||
width="50rem"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="screenCancel"
|
||||
>
|
||||
<div class="patrol-content">
|
||||
<div class="patrol-select">
|
||||
<el-select :popper-append-to-body="false" v-model="companySelect" @change="changeSelect" clearable
|
||||
placeholder="请选择">
|
||||
<el-option v-for="item in companyList" :key="`${item.name}-${item.index}`" :label="item.name"
|
||||
:value="item.name" />
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="companySelect"
|
||||
@change="changeSelect"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in companyList"
|
||||
:key="`${item.name}-${item.index}`"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
<el-radio-group v-model="checkCycle" class="screen-checkBox" size="mini" @change="changCycle">
|
||||
<el-radio-group
|
||||
v-model="checkCycle"
|
||||
class="screen-checkBox"
|
||||
size="mini"
|
||||
@change="changCycle"
|
||||
>
|
||||
<el-radio-button label="day">今日</el-radio-button>
|
||||
<el-radio-button label="month">本月</el-radio-button>
|
||||
<el-radio-button label="year">本年</el-radio-button>
|
||||
@ -491,6 +514,7 @@ export default {
|
||||
background-color: transparent;
|
||||
padding: 0.3rem;
|
||||
border-color: #1cb6ff;
|
||||
color: #dddddd;
|
||||
}
|
||||
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 09:42:49
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-13 10:49:20
|
||||
* @LastEditTime: 2024-12-16 17:07:26
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\today-inspection.vue
|
||||
* @Description: 总览大屏-今日巡查
|
||||
-->
|
||||
@ -17,17 +17,19 @@
|
||||
<span>{{ all }}</span
|
||||
>个
|
||||
</div>
|
||||
<!-- <div class="right-rate">
|
||||
<span> {{ scale }}</span
|
||||
>%
|
||||
</div> -->
|
||||
<div class="right-rate">
|
||||
较昨日<span v-if="state === '增加'" class="up">{{ state }}</span>
|
||||
<span v-else class="bottom">{{ state }}</span>
|
||||
{{ count }}个
|
||||
<div class="right-rate-top">
|
||||
<span>{{ count }}</span
|
||||
>个
|
||||
<i v-if="state === '增加'" class="el-icon-top"></i>
|
||||
<i v-if="state === '无变化'" class="el-icon-minus"></i>
|
||||
<i v-else class="el-icon-bottom"></i>
|
||||
</div>
|
||||
<div class="right-rate-bottom">
|
||||
<span v-if="state === '增加'" class="up">{{ state }}</span>
|
||||
<span v-else class="bottom">{{ state }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 病害总览弹窗 -->
|
||||
<el-dialog
|
||||
@ -99,7 +101,7 @@ export default {
|
||||
// 较昨日增长、减少
|
||||
state: "——",
|
||||
// 增长、减少数量
|
||||
count: "——",
|
||||
count: "0",
|
||||
// 弹窗显隐控制
|
||||
showDialogVisible: false,
|
||||
// 左侧路段选择绑定
|
||||
@ -317,6 +319,7 @@ export default {
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,0.65)",
|
||||
},
|
||||
minInterval: 1,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.2)",
|
||||
@ -510,6 +513,7 @@ export default {
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,0.65)",
|
||||
},
|
||||
minInterval: 1,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.2)",
|
||||
@ -657,7 +661,7 @@ export default {
|
||||
height: 45%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding-left: 1rem;
|
||||
padding-left: 2rem;
|
||||
justify-content: center;
|
||||
line-height: 3rem;
|
||||
background-image: url("~@/assets/screen/disease/right-sum.png");
|
||||
@ -668,7 +672,7 @@ export default {
|
||||
font-size: 1rem;
|
||||
|
||||
span {
|
||||
font-size: 1.2rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
font-family: "DouYu";
|
||||
margin-right: 0.5rem;
|
||||
@ -685,9 +689,56 @@ export default {
|
||||
width: 100%;
|
||||
height: 45%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: "DouYu";
|
||||
font-size: 1rem;
|
||||
background: url("~@/assets/screen/index/right-rate.png") no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: 100% 50%;
|
||||
color: #aac6c7;
|
||||
|
||||
.right-rate-top {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
padding-left: 3rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
|
||||
span {
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
font-family: "DouYu";
|
||||
margin-right: 0.5rem;
|
||||
background: linear-gradient(to bottom, #ffffff, #9e7a06);
|
||||
/*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text;
|
||||
/*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent;
|
||||
/*给文字设置成透明*/
|
||||
}
|
||||
|
||||
.el-icon-top {
|
||||
font-size: 1.5rem;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.el-icon-bottom,.el-icon-minus {
|
||||
font-size: 1.5rem;
|
||||
color: #19eb27;
|
||||
}
|
||||
}
|
||||
|
||||
.right-rate-bottom {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
padding-left: 55%;
|
||||
|
||||
span {
|
||||
font-size: 0.7rem;
|
||||
font-family: "DouYu";
|
||||
}
|
||||
}
|
||||
|
||||
.up {
|
||||
color: #ff2e2e;
|
||||
@ -698,16 +749,6 @@ export default {
|
||||
color: #19eb27;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.el-icon-top {
|
||||
font-size: 1.5rem;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.el-icon-bottom {
|
||||
font-size: 1.5rem;
|
||||
color: #19eb27;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user