fix：地图图例，数据栏右上角切换清空选择框绑定，病害弹窗功能完善
This commit is contained in:
parent
b768ae8d4b
commit
fe0d8f9b54
BIN
src/assets/screen/index/map-legend.png
Normal file
BIN
src/assets/screen/index/map-legend.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
@ -7,13 +7,21 @@
|
||||
* @Description: 滚动条封装样式
|
||||
-->
|
||||
<template>
|
||||
<div class="scroll-box">
|
||||
<div :class="showBar ? `scroll-box` : `scroll-box-disabled`">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
export default {
|
||||
name: "FssmScroll",
|
||||
props: {
|
||||
showBar: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -36,4 +44,14 @@ export default {};
|
||||
background: rgba(220, 231, 248, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-box-disabled {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-22 15:30:25
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-23 10:38:26
|
||||
* @LastEditTime: 2024-10-29 14:34:32
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
|
||||
* @Description: 大屏查看图片弹窗
|
||||
-->
|
||||
@ -97,9 +97,10 @@
|
||||
></div>
|
||||
</div>
|
||||
<div class="image-info">
|
||||
采集时间: 2024-08-26 15:44:42<br />
|
||||
起始桩号: K0003+204 终止桩号: K0003+204<br />
|
||||
路产状态: 新增 融合状态: 未融合
|
||||
采集时间: {{ new Date(rectsItem.createdTime).toLocaleString() }}<br />
|
||||
起始桩号: {{ rectsItem.stakeStart || "暂无数据" }} 终止桩号:
|
||||
{{ rectsItem.stakeEnd || "暂无数据" }}<br />
|
||||
路产状态: {{ filterState(rectsItem.state) }} 融合状态: 未融合
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小图展示 -->
|
||||
@ -118,8 +119,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listDefect, getSegment } from "@/api/xj/disease";
|
||||
|
||||
import { listDefect, getSegment, getDefectStatus } from "@/api/xj/disease";
|
||||
export default {
|
||||
name: "ImgDialog",
|
||||
data() {
|
||||
@ -148,7 +148,12 @@ export default {
|
||||
page: 1,
|
||||
size: 10,
|
||||
},
|
||||
// 图片病害位置信息
|
||||
rects: [],
|
||||
// 图片下方数据
|
||||
rectsItem: {},
|
||||
// 病害状态下拉选项
|
||||
defectStatus: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -164,8 +169,27 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.getSegmentList();
|
||||
this.getDefectStatusList();
|
||||
},
|
||||
methods: {
|
||||
/* 查询病害状态下拉数据 */
|
||||
getDefectStatusList() {
|
||||
getDefectStatus().then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.defectStatus = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 过滤列表病害状态 */
|
||||
filterState(value) {
|
||||
let a = null;
|
||||
[a] = this.defectStatus.filter((item) => {
|
||||
return item.value === value;
|
||||
});
|
||||
if (a) {
|
||||
return a.label;
|
||||
}
|
||||
},
|
||||
/* 获取路段下拉数据 */
|
||||
getSegmentList() {
|
||||
getSegment().then(({ code, data }) => {
|
||||
@ -219,7 +243,6 @@ export default {
|
||||
}
|
||||
} else {
|
||||
this.defectData = [];
|
||||
|
||||
this.params = {
|
||||
page: 1,
|
||||
size: 10,
|
||||
@ -306,19 +329,26 @@ export default {
|
||||
},
|
||||
/* 图片位置信息获取 */
|
||||
updateRects() {
|
||||
const image = this.$refs.mainImage;
|
||||
const rects =
|
||||
this.defectData[this.currentIndex]?.media[this.selectedThumbnail]?.rect
|
||||
.split(",")
|
||||
.map(Number) || [];
|
||||
this.rects = [
|
||||
{
|
||||
left: rects[0],
|
||||
top: rects[1],
|
||||
width: rects[2],
|
||||
height: rects[3],
|
||||
},
|
||||
];
|
||||
this.rects = [];
|
||||
this.rectsItem = {};
|
||||
if (this.defectData.length > 0) {
|
||||
const image = this.$refs.mainImage;
|
||||
const rects =
|
||||
this.defectData[this.currentIndex]?.media[
|
||||
this.selectedThumbnail
|
||||
]?.rect
|
||||
?.split(",")
|
||||
.map(Number) || [];
|
||||
this.rects = [
|
||||
{
|
||||
left: rects[0],
|
||||
top: rects[1],
|
||||
width: rects[2],
|
||||
height: rects[3],
|
||||
},
|
||||
];
|
||||
this.rectsItem = this.defectData[this.currentIndex];
|
||||
}
|
||||
},
|
||||
/* 图片红框位置 */
|
||||
getRectStyle({ left, top, width, height }) {
|
||||
@ -432,7 +462,7 @@ export default {
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 100%;
|
||||
width: 12rem;
|
||||
|
||||
.el-input--small .el-input__inner {
|
||||
color: #ffffff;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:19:56
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-24 16:37:52
|
||||
* @LastEditTime: 2024-10-29 13:43:38
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-current.vue
|
||||
* @Description: 病害巡检-病害三维饼图
|
||||
-->
|
||||
@ -73,12 +73,15 @@ export default {
|
||||
],
|
||||
// echart数据
|
||||
dataList: [],
|
||||
// echart实例
|
||||
chart: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
select: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.itemSelect = "";
|
||||
this.getCurrentList();
|
||||
this.getChartList();
|
||||
}
|
||||
@ -132,8 +135,11 @@ export default {
|
||||
drawChart() {
|
||||
const data = this.dataList;
|
||||
if (this.$refs.currentChart) {
|
||||
const chart = echarts.init(this.$refs.currentChart);
|
||||
chart.setOption({
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.currentChart);
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
@ -193,7 +199,7 @@ export default {
|
||||
series: this.getPie3D(this.dataList, 0.8),
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
chart.resize();
|
||||
this.chart.resize();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-29 10:25:21
|
||||
* @LastEditTime: 2024-10-29 14:00:48
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@ -463,7 +463,11 @@ export default {
|
||||
mapPointList({ type: this.mapClick }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.centerPiont = data.map((item) => {
|
||||
return [item.geometry[0], item.geometry[1]];
|
||||
if(item.geometry){
|
||||
|
||||
return [item.geometry[0], item.geometry[1]];
|
||||
}
|
||||
return []
|
||||
});
|
||||
this.drawPoint();
|
||||
}
|
||||
@ -1089,13 +1093,15 @@ export default {
|
||||
|
||||
// 图例
|
||||
.map-legend {
|
||||
height: 9rem;
|
||||
height: 7rem;
|
||||
width: 2rem;
|
||||
position: absolute;
|
||||
top: 13%;
|
||||
left: 26%;
|
||||
background-color: #1cb6ff;
|
||||
left: 28%;
|
||||
z-index: 1;
|
||||
background-image: url("../../assets/screen/index/map-legend.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
// 打点部分
|
||||
|
||||
@ -47,12 +47,15 @@ export default {
|
||||
currentList: [],
|
||||
// echart图数据
|
||||
anomalyData: [],
|
||||
// echart实例
|
||||
chart:null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
select: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.itemSelect = "";
|
||||
this.getCurrentList();
|
||||
this.getChartData();
|
||||
}
|
||||
@ -104,6 +107,9 @@ export default {
|
||||
},
|
||||
/* 绘制echart */
|
||||
drawChart() {
|
||||
if(this.chart){
|
||||
this.chart.dispose()
|
||||
}
|
||||
const xData = this.anomalyData.map((item) => {
|
||||
return item.label;
|
||||
});
|
||||
@ -160,8 +166,8 @@ export default {
|
||||
};
|
||||
}
|
||||
});
|
||||
const chart = echarts.init(this.$refs.anomalyChart);
|
||||
chart.setOption({
|
||||
this.chart = echarts.init(this.$refs.anomalyChart);
|
||||
this.chart.setOption({
|
||||
// backgroundColor: "#041139",
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
@ -258,7 +264,7 @@ export default {
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
chart.resize();
|
||||
this.chart.resize();
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
@ -68,6 +68,7 @@ export default {
|
||||
"#4C21D5",
|
||||
"#6669DB",
|
||||
],
|
||||
// 颜色盘
|
||||
echartList: [
|
||||
{
|
||||
value: 335,
|
||||
@ -100,12 +101,15 @@ export default {
|
||||
rate: "110%",
|
||||
},
|
||||
],
|
||||
// echart实例
|
||||
echart:null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
select: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.itemSelect = "";
|
||||
this.getCurrentList();
|
||||
this.getChartData();
|
||||
}
|
||||
@ -146,8 +150,11 @@ export default {
|
||||
},
|
||||
/* 绘制echart图 */
|
||||
drawChart() {
|
||||
const echart = echarts.init(this.$refs.statisticChart);
|
||||
echart.setOption({
|
||||
if (this.echart) {
|
||||
this.echart.dispose();
|
||||
}
|
||||
this.echart = echarts.init(this.$refs.statisticChart);
|
||||
this.echart.setOption({
|
||||
color: this.colorList,
|
||||
tooltip: {
|
||||
confine: true,
|
||||
@ -221,7 +228,7 @@ export default {
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
echart.resize();
|
||||
this.echart.resize();
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 10:03:08
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-28 13:47:21
|
||||
* @LastEditTime: 2024-10-29 13:50:21
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-trend.vue
|
||||
* @Description: 交安事件大屏-交安事件趋势
|
||||
-->
|
||||
@ -47,12 +47,15 @@ export default {
|
||||
trafficList: [],
|
||||
// echart图表数据
|
||||
echartData: [],
|
||||
// echart实例
|
||||
chart: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
select: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.itemSelect = "";
|
||||
this.getCurrentList();
|
||||
this.getChartData();
|
||||
}
|
||||
@ -94,10 +97,13 @@ export default {
|
||||
},
|
||||
/* 绘制echart */
|
||||
drawChart() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
const xData = this.echartData.map((item) => {
|
||||
return item.label;
|
||||
});
|
||||
const yData = this.echartData.map((item,index) => {
|
||||
const yData = this.echartData.map((item, index) => {
|
||||
if (index % 2 == 0) {
|
||||
return {
|
||||
...item,
|
||||
@ -150,8 +156,8 @@ export default {
|
||||
};
|
||||
}
|
||||
});
|
||||
const chart = echarts.init(this.$refs.trafficChart);
|
||||
chart.setOption({
|
||||
this.chart = echarts.init(this.$refs.trafficChart);
|
||||
this.chart.setOption({
|
||||
// backgroundColor: "#041139",
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
@ -245,7 +251,7 @@ export default {
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
chart.resize();
|
||||
this.chart.resize();
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
@ -2,39 +2,110 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-08 09:26:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-28 14:33:52
|
||||
* @LastEditTime: 2024-10-29 13:07:17
|
||||
* @FilePath: \znxjxt-ui\src\views\index.vue
|
||||
* @Description: 系统首页
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div>顶栏</div>
|
||||
<div>
|
||||
<div>日常巡查</div>
|
||||
<div>病害识别</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>公路资产</div>
|
||||
<div>路况评定</div>
|
||||
</div>
|
||||
<fssm-scroll :showBar="false">
|
||||
<div class="top-content">
|
||||
<div
|
||||
class="top-div"
|
||||
:class="`top-div-${index}`"
|
||||
v-for="(item, index) in topList"
|
||||
:key="`top-div-${index}`"
|
||||
>
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="value">
|
||||
<span>{{ item.value }}</span
|
||||
>{{ item.unit }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle-content">
|
||||
<div>日常巡查</div>
|
||||
<div>病害识别</div>
|
||||
</div>
|
||||
<div class="bottom-content">
|
||||
<div>公路资产</div>
|
||||
<div>路况评定</div>
|
||||
</div>
|
||||
</fssm-scroll>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
|
||||
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
|
||||
export default {
|
||||
name: "Index",
|
||||
components: {
|
||||
FssmScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
// 顶栏循环数据
|
||||
topList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getTopData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取顶栏数据 */
|
||||
getTopData() {
|
||||
this.topList = [
|
||||
{ name: "巡查总里程", value: 54, unit: "个" },
|
||||
{ name: "现存病害总数", value: 54, unit: "个" },
|
||||
{ name: "公路资产总数", value: 54, unit: "个" },
|
||||
{ name: "交安事件总数", value: 54, unit: "个" },
|
||||
];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-container{
|
||||
padding: 0px;
|
||||
.app-container {
|
||||
padding: 1rem;
|
||||
height: calc(100vh - 5.4rem);
|
||||
}
|
||||
|
||||
.top-content {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
border: 1px salmon solid;
|
||||
|
||||
.top-div {
|
||||
width: 22%;
|
||||
height: 80%;
|
||||
padding: 1.5rem;
|
||||
background-color: aqua;
|
||||
|
||||
.name {
|
||||
font-family: "DouYu";
|
||||
}
|
||||
|
||||
.value {
|
||||
line-height: 4rem;
|
||||
|
||||
span{
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.middle-content {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.bottom-content {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user