From 6fed72f0cb2e2ec499fd46b54a48fd9a71d5817b Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Wed, 03 Aug 2022 08:42:22 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/zhny-dsjdp
---
src/views/home/index.vue | 213 +++++++++++++++++++++++++++++-----------------------
1 files changed, 118 insertions(+), 95 deletions(-)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 449354c..87a6b81 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -234,37 +234,46 @@
农场
<i class="el-icon-caret-top"></i>
</div>
- <div
- v-for="(item, index) in farmNumArray"
- :key="index"
- class="box"
- :class="{ first: index == 0 }"
- @click="setCenter(item)"
- >{{ item.farmName }}</div>
+ <div class="content">
+ <div
+ v-for="(item, index) in farmNumArray"
+ :key="index"
+ class="box"
+ :class="{ first: index == 0 }"
+ @click="setCenter(item)"
+ :title="item.farmName"
+ >{{ item.farmName }}</div>
+ </div>
</div>
<div v-show="jkListShow" class="jk-list">
<div class="title" @click="jkListShow = false">
监控设备
<i class="el-icon-caret-top"></i>
</div>
- <div
- v-for="(item, index) in equipmentList.vidList"
- :key="index"
- class="box"
- :class="{ first: index == 0 }"
- >{{ item.name }}</div>
+ <div class="content">
+ <div
+ v-for="(item, index) in equipmentList.vidList"
+ :key="index"
+ class="box"
+ :class="{ first: index == 0 }"
+ :title="item.name"
+ >{{ item.name }}</div>
+ </div>
</div>
<div v-show="jcListShow" class="jc-list">
<div class="title" @click="jcListShow = false">
监测设备
<i class="el-icon-caret-top"></i>
</div>
- <div
- v-for="(item, index) in equipmentList.staList"
- :key="index"
- class="box"
- :class="{ first: index == 0 }"
- >{{ item.name }}</div>
+ <div class="content">
+ <div
+ v-for="(item, index) in equipmentList.staList"
+ :key="index"
+ class="box"
+ :class="{ first: index == 0 }"
+ :title="item.name"
+ >{{ item.name }}</div>
+ </div>
</div>
</div>
@@ -559,8 +568,8 @@
farmID: '',
// 设备
mTotalObj: {},
- //设备列表
- equipmentList: {},
+ // 设备列表
+ equipmentList: {}
}
},
created () {
@@ -725,160 +734,160 @@
const option = {
title: {
text: that.mTotalObj.mTotal,
- subtext: "设备总数",
- top: "38%",
- left: "center",
+ subtext: '设备总数',
+ top: '38%',
+ left: 'center',
textStyle: {
- color: "#69E2ED",
+ color: '#69E2ED',
fontSize: 34,
- fontWeight: "bold",
- lineHeight: 12,
+ fontWeight: 'bold',
+ lineHeight: 12
},
subtextStyle: {
- color: "#A9D1D7",
+ color: '#A9D1D7',
fontSize: 18,
- fontWeight: "bold",
- },
+ fontWeight: 'bold'
+ }
},
series: [
{
- type: "pie",
- radius: ["44%", "62%"],
- center: ["50%", "50%"],
+ type: 'pie',
+ radius: ['44%', '62%'],
+ center: ['50%', '50%'],
data: [
{
value:
that.mTotalObj.stationOffLine + that.mTotalObj.videoOffLine,
- name: "离线",
+ name: '离线',
itemStyle: {
color: new that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
- color: "#F39302",
+ color: '#F39302'
},
{
offset: 1,
- color: "#E5F302",
- },
- ]),
+ color: '#E5F302'
+ }
+ ])
},
labelLine: {
- show: false,
+ show: false
},
label: {
- show: false,
- },
+ show: false
+ }
},
{
value:
that.mTotalObj.stationOnLine + that.mTotalObj.videoOnLine,
- name: "在线",
+ name: '在线',
itemStyle: {
- color: "#00F0FF",
+ color: '#00F0FF'
},
labelLine: {
- show: false,
+ show: false
},
label: {
- show: false,
- },
- },
- ],
+ show: false
+ }
+ }
+ ]
},
{
// 指示线
// 通过value 的值 调节lableLine的位置
- type: "pie",
- radius: ["44%", "62%"],
+ type: 'pie',
+ radius: ['44%', '62%'],
data: [
{
value:
that.mTotalObj.stationOffLine + that.mTotalObj.videoOffLine,
itemStyle: {
- color: "transparent",
+ color: 'transparent'
},
labelLine: {
show: true,
length: 24,
length2: 16,
- color: "#fff",
+ color: '#fff',
lineStyle: {
- color: "#fff",
- },
+ color: '#fff'
+ }
},
label: {
- color: "#A9D1D7",
+ color: '#A9D1D7',
fontSize: 16,
- position: "outside",
+ position: 'outside',
formatter: `{a|${that.mTotalObj.stationOffLine + that.mTotalObj.videoOffLine
}}\n离线`,
rich: {
a: {
- color: "#EBC802",
+ color: '#EBC802',
fontSize: 22,
- fontWeight: "bold",
- lineHeight: 30,
- },
- },
- },
+ fontWeight: 'bold',
+ lineHeight: 30
+ }
+ }
+ }
},
{
value:
that.mTotalObj.stationOnLine + that.mTotalObj.videoOnLine,
itemStyle: {
- color: "transparent",
- },
- },
- ],
+ color: 'transparent'
+ }
+ }
+ ]
},
{
// 指示线
// 通过value 的值 调节lableLine的位置
- type: "pie",
- radius: ["44%", "62%"],
+ type: 'pie',
+ radius: ['44%', '62%'],
data: [
{
value:
that.mTotalObj.stationOffLine + that.mTotalObj.videoOffLine,
itemStyle: {
- color: "transparent",
- },
+ color: 'transparent'
+ }
},
{
value:
that.mTotalObj.stationOnLine + that.mTotalObj.videoOnLine,
itemStyle: {
- color: "transparent",
+ color: 'transparent'
},
labelLine: {
show: true,
length: 24,
length2: 16,
- color: "#fff",
+ color: '#fff',
lineStyle: {
- color: "#fff",
- },
+ color: '#fff'
+ }
},
label: {
- color: "#A9D1D7",
+ color: '#A9D1D7',
fontSize: 16,
- position: "outside",
+ position: 'outside',
formatter: `{a|${that.mTotalObj.stationOnLine + that.mTotalObj.videoOnLine
}}\n在线`,
rich: {
a: {
- color: "#38ADD7",
+ color: '#38ADD7',
fontSize: 22,
- fontWeight: "bold",
- lineHeight: 30,
- },
- },
- },
- },
- ],
- },
- ],
+ fontWeight: 'bold',
+ lineHeight: 30
+ }
+ }
+ }
+ }
+ ]
+ }
+ ]
}
option && myChart.setOption(option)
@@ -1273,22 +1282,21 @@
getStationAndVideoCount () {
var that = this
getStationAndVideoCount().then((res) => {
- if (JSON.stringify(res.data) != "{}" && res.data.data) {
+ if (JSON.stringify(res.data) != '{}' && res.data.data) {
that.mTotalObj = res.data.data
}
that.initRightPie('EquipmentEcharts')
-
})
},
// 获取监控/监测设备列表
getStationAndVideoList () {
var that = this
getStationAndVideoList().then((res) => {
- if (JSON.stringify(res.data) != "{}" && res.data.data) {
+ if (JSON.stringify(res.data) != '{}' && res.data.data) {
that.equipmentList = res.data.data
}
})
- },
+ }
}
}
</script>
@@ -1899,9 +1907,9 @@
}
}
- .nc-list,
- .jk-list,
- .jc-list {
+ & > .nc-list,
+ & > .jk-list,
+ & > .jc-list {
display: flex;
flex-direction: column;
justify-content: flex-start;
@@ -1910,8 +1918,7 @@
left: 172px;
width: 144px;
height: 224px;
- overflow-x: hidden;
- overflow-y: auto;
+
background: rgba(6, 28, 29, 0.8);
border-radius: 8px 8px 8px 8px;
border: 1px solid #69e2ed;
@@ -1926,6 +1933,13 @@
font-size: 20px;
}
+ .content {
+ width: 100%;
+ height: calc(100% - 46px);
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
+
.box {
margin-top: 16px;
padding-left: 20px;
@@ -1933,10 +1947,18 @@
// height: 24px;
line-height: 24px;
text-align: left;
+ box-sizing: border-box;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.box.first {
margin-top: 0 !important;
+ }
+
+ .box:last-child {
+ margin-bottom: 15px;
}
}
.jk-list {
@@ -1946,6 +1968,7 @@
top: 108px;
}
}
+
.city-flow {
padding: 0 12px;
display: flex;
--
Gitblit v1.9.3