diff --git a/src/views/projectAdmin/zjsj/assets/images/command-center/icon-noise.png b/src/views/projectAdmin/zjsj/assets/images/command-center/icon-noise.png new file mode 100644 index 00000000..85eeff0e Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/images/command-center/icon-noise.png differ diff --git a/src/views/projectAdmin/zjsj/assets/images/command-center/icon-pm10.png b/src/views/projectAdmin/zjsj/assets/images/command-center/icon-pm10.png new file mode 100644 index 00000000..359e05ac Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/images/command-center/icon-pm10.png differ diff --git a/src/views/projectAdmin/zjsj/assets/images/command-center/icon-pm25.png b/src/views/projectAdmin/zjsj/assets/images/command-center/icon-pm25.png new file mode 100644 index 00000000..6daf6cb8 Binary files /dev/null and b/src/views/projectAdmin/zjsj/assets/images/command-center/icon-pm25.png differ diff --git a/src/views/projectAdmin/zjsj/command/LeftThree/Steps.vue b/src/views/projectAdmin/zjsj/command/LeftThree/Steps.vue index 44ec6760..94340f41 100644 --- a/src/views/projectAdmin/zjsj/command/LeftThree/Steps.vue +++ b/src/views/projectAdmin/zjsj/command/LeftThree/Steps.vue @@ -51,11 +51,11 @@ // 当前状态 .active { - background: #6dc6d8; + // background: #6dc6d8; } .activeText { - color: #0EAEE9; + // color: #0EAEE9; } } @@ -95,6 +95,21 @@ } } + .steps-item:last-child { + .steps-item-num { + left: 100%; + } + + .steps-item-text { + align-items: flex-end; + transform: translateX(5px); + } + + .steps-item-line { + background-color: #fff; + } + } + } diff --git a/src/views/projectAdmin/zjsj/command/center.vue b/src/views/projectAdmin/zjsj/command/center.vue index 5f069731..37313fc7 100644 --- a/src/views/projectAdmin/zjsj/command/center.vue +++ b/src/views/projectAdmin/zjsj/command/center.vue @@ -74,6 +74,7 @@ export default { width: 50px; height: 50px; + cursor: pointer; } // 信息窗体 diff --git a/src/views/projectAdmin/zjsj/command/leftFour.vue b/src/views/projectAdmin/zjsj/command/leftFour.vue index e5f66338..1a3a8ae7 100644 --- a/src/views/projectAdmin/zjsj/command/leftFour.vue +++ b/src/views/projectAdmin/zjsj/command/leftFour.vue @@ -4,18 +4,6 @@
-
-
塔吊设备数
- -
-
-
升降机设备数
- -
-
-
视频设备数
- -
@@ -31,28 +19,53 @@ export default { return {} }, mounted() { - this.initChart('firstChart') - this.initChart('secondChart') - this.initChart('thirdChart') + this.initChart('firstChart', 7, '塔吊设备数', require('../assets/images/command-center/icon-tower.png')) + this.initChart('secondChart', 4, '升降机设备数', require('../assets/images/command-center/icon-lifter.png')) + this.initChart('thirdChart', 5, '视频设备数', require('../assets/images/command-center/icon-video.png')) }, methods: { - initChart(ref) { + initChart(ref, value, title = '默认标题', image) { const myChart = echarts.init(this.$refs[ref]) - let angle = 0 //角度，用来做简单的动画效果的 - let value = 7 + let angle = 0 // 角度，用来做简单的动画效果的 + const option = { // backgroundColor: '#061740', title: { - text: value, + text: '{a|'+ value +'}\n{b|'+ title +'}', + // text: '10\n' + title, x: 'center', y: 'center', top: '35%', textStyle: { - fontSize: 20, - color: '#e5e442' + rich: { + a: { + fontSize: 20, + color: '#e5e442' + }, + b: { + fontSize: 13, + color: '#ffffff', + padding: [5, 0] + } + } } }, + graphic: { + elements: [ + { + type: 'image', + style: { + image, + width: 20, + height: 20 + }, + left: '46%', + top: '59%', + z: 100 + } + ] + }, series: [ { name: 'ring5', @@ -329,63 +342,25 @@ export default { width: 100%; height: 100%; white-space: nowrap; - transform: translateY(-20px); - + transform: translateY(-15px); .item { display: inline-block; width: calc(100% / 2); - height: 100%; + height: 110%; color: transparent; &:nth-child(1) { - transform: translateX(-22%); + transform: translate(-22%, -6%); } &:nth-child(2) { - transform: translateX(-48%); + transform: translate(-48%, -6%); } &:nth-child(3) { - transform: translateX(-75%); + transform: translate(-75%, -6%); } } - - .box { - position: absolute; - color: #fff; - text-align: center; - font-size: 12px; - - .box-title { - margin-bottom: 3px; - } - - .image { - width: 20px; - height: 20px; - } - } - - .first-box { - bottom: 30%; - left: 7%; - } - - .first-box { - bottom: 30%; - left: 6.5%; - } - - .second-box { - bottom: 30%; - left: 42.5%; - } - - .third-box { - bottom: 30%; - left: 80.5%; - } } - diff --git a/src/views/projectAdmin/zjsj/command/leftOne.vue b/src/views/projectAdmin/zjsj/command/leftOne.vue index ea6b3eb1..aa2c5e09 100644 --- a/src/views/projectAdmin/zjsj/command/leftOne.vue +++ b/src/views/projectAdmin/zjsj/command/leftOne.vue @@ -21,7 +21,7 @@ export default { { name: '用地面积', content: '112768.21㎡' }, { name: '建设单位', content: '中建四局发展(广州天河)有限公司' }, { name: '设计单位', content: '中国建筑第四工程局有限公司' }, - { name: '勘察单位', content: '贵州中间建筑科研设计院有限公司' }, + { name: '勘察单位', content: '贵州中建建筑科研设计院有限公司' }, { name: '监理单位', content: '广州宏元建设工程咨询有限公司' }, ] }) @@ -40,11 +40,11 @@ export default { height: 100%; display: flex; flex-direction: column; - justify-content: space-between; color: #fff; overflow-y: scroll; .list-item { + position: relative; display: flex; box-sizing: border-box; border-left: 4px solid #66d3d8; @@ -60,6 +60,19 @@ export default { &:hover { padding: 20px 0; + &::before { + content: ''; + position: absolute; + top: 50%; + left: 8px; + display: inline-block; + transform: translate(0, -50%); + width: 8px; + height: 14px; + background-image: url('../assets/images/command-center/triangle.png'); + background-size: 100% 100%; + transition: all .3s; + } } &:hover .value { diff --git a/src/views/projectAdmin/zjsj/command/rightFour.vue b/src/views/projectAdmin/zjsj/command/rightFour.vue index ac21e411..c6bc0800 100644 --- a/src/views/projectAdmin/zjsj/command/rightFour.vue +++ b/src/views/projectAdmin/zjsj/command/rightFour.vue @@ -34,6 +34,10 @@ export default { { name: '中国建筑第四工程局有限公司', content: '' }, { name: '中国建筑第四工程局有限公司', content: '' }, { name: '中国建筑第四工程局有限公司', content: '' }, + { name: '中国建筑第四工程局有限公司', content: '' }, + { name: '中国建筑第四工程局有限公司', content: '' }, + { name: '中国建筑第四工程局有限公司', content: '' }, + { name: '中国建筑第四工程局有限公司', content: '' }, ] } }, @@ -84,11 +88,11 @@ export default { display: flex; flex-direction: column; - justify-content: space-between; color: #fff; overflow-y: scroll; .list-item { + position: relative; display: flex; box-sizing: border-box; border-left: 4px solid #66d3d8; @@ -104,6 +108,19 @@ export default { &:hover { padding: 20px 0; + &::before { + content: ''; + position: absolute; + top: 50%; + left: 8px; + display: inline-block; + transform: translate(0, -50%); + width: 6.6px; + height: 11.6px; + background-image: url('../assets/images/command-center/triangle.png'); + background-size: 100% 100%; + transition: all .3s; + } } &:hover .value { diff --git a/src/views/projectAdmin/zjsj/command/rightOne.vue b/src/views/projectAdmin/zjsj/command/rightOne.vue index 63157f8e..95446cfb 100644 --- a/src/views/projectAdmin/zjsj/command/rightOne.vue +++ b/src/views/projectAdmin/zjsj/command/rightOne.vue @@ -4,7 +4,7 @@
- +
45 % @@ -61,6 +61,9 @@ export default { height: 100%; .left { + box-sizing: border-box; + padding: 10px 0; + display: flex; flex-direction: column; justify-content: space-around; @@ -71,24 +74,36 @@ export default { .top { display: flex; + align-items: center; justify-content: center; + + width: 100%; + height: 140px; + .image { display: grid; place-items: center; position: relative; - width: 140px; - height: 140px; + width: 100%; + height: 100%; + img { + height: 140px; + } .value { position: absolute; top: 50%; left: 50%; - transform: translate(-50%, -16%); + transform: translate(-50%, -50%); font-size: 23px; } } } .bottom { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; font-size: 13px; } diff --git a/src/views/projectAdmin/zjsj/command/rightThree.vue b/src/views/projectAdmin/zjsj/command/rightThree.vue index 0d649cab..7a8ec834 100644 --- a/src/views/projectAdmin/zjsj/command/rightThree.vue +++ b/src/views/projectAdmin/zjsj/command/rightThree.vue @@ -3,10 +3,9 @@
-
{{ item.label }}
+
+ +
{{ item.value }}
{{ item.unit }} @@ -47,9 +46,9 @@ export default { return { // 左边的列表 leftList: { - 'PM2.5': { label: 'PM2.5', value: 68, unit: 'μg/m³', labelColor: '#434337', color: '#ffc300' }, - PM10: { label: 'PM10', value: 36, unit: 'μg/m³', labelColor: '#3f353d', color: '#f46927' }, - 噪音: { label: '噪音', value: 13, unit: '%dB', labelColor: '#434c5d', color: '#c6c9ce' } + 'PM2.5': { label: 'PM2.5', value: 68, unit: 'μg/m³', image: require('../assets/images/command-center/icon-pm25.png'), }, + PM10: { label: 'PM10', value: 36, unit: 'μg/m³', image: require('../assets/images/command-center/icon-pm10.png') }, + 噪音: { label: '噪音', value: 13, unit: '%dB', image: require('../assets/images/command-center/icon-noise.png') } }, // 右边的列表 rightList: { @@ -63,8 +62,18 @@ export default { color: '#f66629', valueBackgroundImage: require('../assets/images/command-center/block3.png') }, - windDirection: { label: '风向', value: '东南', unit: '风', image: require('../assets/images/command-center/icon-windDirection.png') }, - barometricPressure: { label: '大气压', value: 101, unit: 'KPa', image: require('../assets/images/command-center/icon-barometricPressure.png') } + windDirection: { + label: '风向', + value: '东南', + unit: '风', + image: require('../assets/images/command-center/icon-windDirection.png') + }, + barometricPressure: { + label: '大气压', + value: 101, + unit: 'KPa', + image: require('../assets/images/command-center/icon-barometricPressure.png') + } } } }, @@ -99,6 +108,11 @@ export default { height: calc(100% / 3.5); + .image { + width: 18px; + margin-right: 20px; + } + .label { box-sizing: border-box; diff --git a/src/views/projectAdmin/zjsj/command/rightTwo.vue b/src/views/projectAdmin/zjsj/command/rightTwo.vue index 730b698b..1c55778f 100644 --- a/src/views/projectAdmin/zjsj/command/rightTwo.vue +++ b/src/views/projectAdmin/zjsj/command/rightTwo.vue @@ -1,7 +1,7 @@