From a3bc1499023bfcca59d823aefae8c546e36e7a45 Mon Sep 17 00:00:00 2001
From: zhangchunxia <746626068@qq.com>
Date: 星期一, 06 五月 2024 10:04:00 +0800
Subject: [PATCH] 大屏改版代码提交
---
src/views/largeScreen/component/middleArea.vue | 390 ++++++++++++++++++++++++++++---------------------------
1 files changed, 198 insertions(+), 192 deletions(-)
diff --git a/src/views/largeScreen/component/middleArea.vue b/src/views/largeScreen/component/middleArea.vue
index 051fefb..ce9a353 100644
--- a/src/views/largeScreen/component/middleArea.vue
+++ b/src/views/largeScreen/component/middleArea.vue
@@ -28,72 +28,63 @@
<!-- <span class="unit-text">涓噈鲁</span> -->
</div>
</div>
- <!-- <div v-for="(item,index) in processData" :key="index">
- <div class="num-title">
- <div><span class="high-text">{{ item.firstEle }}</span>{{ item.endEle }}</div>
-
- </div>
- <div class="num-item">
- <span class="num-style color0" :class="[{ 'num-bg0': s !== '.' && index==0 },{ 'num-bg2': s !== '.' && index==1 },{'color2':index==1}]" v-for="(s, i) in item.count" :key="i">{{ s }}</span>
- <span class="unit-text">{{ item.unit }}</span>
- </div>
- </div> -->
</div>
- <div>
- <!-- <div id="echartMap" style="width: 500px; height: 500px"></div> -->
- <!--鍦板浘-->
- <div id="mapcontainer" ref="mapcontainer" style="width: 9rem; height: 80vh"></div>
- <div class="map-infos">
- <dv-border-box-13>
- <div class="map-title">鍚夋湪涔冨幙</div>
- <div class="map-item">
- <div class="item-title">瀹夎姘磋〃鏁伴噺:</div> <div class="item-num">328涓�</div>
- </div>
- <div class="map-item">
- <div class="item-title">绱鐢ㄦ按閲�:</div> <div class="item-num">2943.8 m鲁</div>
- </div>
- <div class="map-item">
- <div class="item-title">褰撳墠娆犺垂鏁伴噺:</div><div class="item-num">3 鎴�</div>
- </div>
- </dv-border-box-13>
- </div>
+ <div class="item-block height35">
+ <dv-border-box-10>
+ <div class="echart-title">姘磋〃鐘舵��</div>
+ <div id="yibiaoEchart" :chart-data="chartData" style="height:90%; width:100%"></div>
+ </dv-border-box-10>
+ </div>
+ <div class="item-block">
+ <dv-border-box-10>
+ <div class="echart-title">杩戜竴骞寸敤姘撮噺</div>
+ <left-middle-bottom style="height: 29vh"></left-middle-bottom>
+ </dv-border-box-10>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import echartsGL from 'echarts-gl'
-import datajson from './jimunai'
import { getScAmount } from '@/api/largeScreen'
// import { getLargeScreenProcessInfo } from '@/cpx_sewage/api/largeScreen/largeScreen'
+import leftMiddleBottom from './middleAreaBottom'
+
export default {
+ components: {
+ leftMiddleBottom
+ },
data() {
return {
amountTotal: [], // 浠婃棩绱澶勭悊閲�
amountCurYearTotal: [], // 鏈勾绱澶勭悊閲�
amountYesterdayTotal: [], // 鎬荤疮璁″鐞嗛噺
- myChart: null,
stationData: [],
processData: [],
- data:[
- { name: '鎵樻櫘閾佺儹鍏嬩埂', centroid: [87.047533,47.875751],value: 100 },
- { name: '鎵樻櫘閾佺儹鍏嬮晣', centroid: [85.885448,47.439013],value: 100 },
- { name: '鍚夋湪涔冮晣', centroid: [85.882013,47.44893],value: 100 },
- { name: '鍠�灏斾氦涔�', centroid: [86.410528,47.201893],value: 200 },
- { name: '涔屾媺鏂壒闀�',centroid: [85.782084,47.669236],value: 100 },
- { name: '鎵樻柉鐗逛埂', centroid: [86.13412,47.285077],value: 100},
- { name: '鎭板嫆浠�娴蜂埂', centroid: [86.153288,47.535675],value: 100 },
- { name: '鍒柉閾佺儹鍏嬩埂',centroid: [85.88913,47.309702],value: 100 },
- { name: '鍏靛洟涓�鍏叚鍥�', centroid: [85.678458,47.556221],value: 100 }
- // 鎵樻櫘閾佺儹鍏嬮晣銆佸悏鏈ㄤ箖闀囥�佸杸灏斾氦涔°�佹墭鏂壒涔°�佸叺鍥竴鍏叚鍥€�佸埆鏂搧鐑厠涔°�佹伆鍕掍粈娴蜂埂銆佹墭鏅搧鐑厠涔�
- ]
+ chart:null,
+ chartData:{
+ data: [80, 15, 5, 10],
+ nameList: ['鍦ㄧ嚎', '绂荤嚎', '寮傚父', '鏈笂鎶�'],
+ newData:[]
+ },
+ // newData: chartData.data.map((item, idx) => {
+ // return {
+ // value: item,
+ // name: '甯堣祫鍔涢噺',
+ // unit: 'm虏',
+ // }
+ // })
}
},
created() {
this.getScAmount()
- // setTimeout(this.initChart, 5000)
- // this.initChart()
- // this.totalNum = (+this.baseInfos.totalProcess / 10000).toFixed(2)
+ this.chartData.newData = this.chartData.data.map(item => {
+ return {
+ value: item,
+ // name: '姘磋〃鐘舵��',
+ unit:'%',
+ }
+ })
},
props: {
baseInfos: {
@@ -102,13 +93,9 @@
}
},
watch: {
-
-
},
mounted() {
- // this.getData()
this.$nextTick(() => {
- // this.getStationList()
this.initCharts()
})
},
@@ -128,129 +115,151 @@
}
})
},
- initCharts() {
- const charts = echarts.init(this.$refs['mapcontainer'])
+ setOptions({ newData, nameList } = {}) {
const option = {
- geo: { // 2D鍦板浘鍧愭爣绯�
- show: false, // 涓嶆樉绀哄湴鍥撅紝鐢ㄤ簬涓哄姩鏁堟暎鐐规彁渚�2D鍦板浘鍧愭爣绯�
- map: 'centerMap',
- roam: false, // 绂佺敤缂╂斁銆佹嫋鎷�
- layoutCenter: ['50%', '47%'], // 鍦板浘涓績浣嶇疆
- layoutSize: '90%', // 鎺у埗鍦板浘灏哄锛堝湴鍥剧殑瀹藉害鍜岄珮搴﹂兘浼氭敼鍙橈級
- aspectScale: 0.85, // 鎺у埗鍦板浘闀垮姣旓紙姝ゅ�艰秺灏忓湴鍥捐秺绐勶紝瓒婂ぇ鍦板浘瓒婂锛�
- zlevel: 1,
- },
- geo3D: { // 3D鍦板浘鍧愭爣绯�
- show: true, // 鏄剧ず3D鍦板浘鐗堝潡
- map: "centerMap",
- top: "-20",
- regionHeight: 16, // 鍦板浘鐗堝潡鍘氬害
- label: {
- show: true,
- borderRadius: 0,
- distanca: 0,
- textStyle: {
- fontSize: 14,
- color: "#C23531", // 鍦板浘鍒濆鍖栧尯鍩熷瓧浣撻鑹�
- borderWidth: 1,
- borderColor: '#FFFF10',
- }
- },
- itemStyle: {
- // 涓夌淮鍦扮悊鍧愭爣绯荤粍浠� 涓笁缁村浘褰㈢殑瑙嗚灞炴�э紝鍖呮嫭棰滆壊锛岄�忔槑搴︼紝鎻忚竟绛夈��
- color: "rgba(11,59,121,0.5)", // 鍦板浘鏉垮潡鐨勯鑹�
- opacity: 1, // 鍥惧舰鐨勪笉閫忔槑搴� [ default: 1 ]
- borderWidth: 2, // (鍦板浘鏉垮潡闂寸殑鍒嗛殧绾�)鍥惧舰鎻忚竟鐨勫搴︺�傚姞涓婃弿杈瑰悗鍙互鏇存竻鏅扮殑鍖哄垎姣忎釜鍖哄煙 [ default: 0 ]
- borderColor: "#2FB5FA", // 鍥惧舰鎻忚竟鐨勯鑹层�俒 default: #333 ]
- },
- emphasis: {
- label: {
- show: true,
- color: "#fff000",
- },
- itemStyle: {
- color: "#146fd7",
- opacity: 0.5,
- },
- },
- light: {
- // 鍏夌収闃村奖
- main: {
- color: "#FFFFFF", // 鍏夌収棰滆壊
- intensity: 2, // 鍏夌収寮哄害
- shadowQuality: "light", // 闃村奖浜害
- shadow: true, // 鏄惁鏄剧ず闃村奖
- alpha: 50,
- beta: 10,
- },
- },
- viewControl: {
- "projection": "perspective",
- "autoRotate": false,
- "distance": 208, // 鎺у埗鍦板浘鐗堝潡鐨勫ぇ灏�
- "alpha": 72, // 鍦板浘鐗堝潡鍨傜洿鏂瑰悜鐨勮搴�
- "beta": 2, // 鍦板浘鐗堝潡姘村钩鏂瑰悜鐨勮搴�
- rotateSensitivity: 0, // 绂佺敤鏃嬭浆
- panSensitivity: 0, // 绂佺敤骞崇Щ
- zoomSensitivity: 0, // 绂佺敤缂╂斁
- },
- zlevel: 2,
- },
- series: [
- { // 鍔ㄦ晥鏁ｇ偣鍥惧眰锛屼娇鐢�2D鍦板浘鍧愭爣绯�
- type: 'effectScatter',
- coordinateSystem: 'geo',
- zlevel: 3,
- rippleEffect: { //娑熸吉鐗规晥
- period: 4, //鍔ㄧ敾鏃堕棿锛屽�艰秺灏忛�熷害瓒婂揩
- brushType: 'stroke', //娉㈢汗缁樺埗鏂瑰紡 stroke, fill
- scale: 10 //娉㈢汗鍦嗙幆鏈�澶ч檺鍒讹紝鍊艰秺澶ф尝绾硅秺澶�
- },
- symbol: 'circle',
- symbolSize: function (val) {
- return (5 + val[2] * 5) / 150; //鍦嗙幆澶у皬
- },
- itemStyle: {
- normal: {
+ grid: {},
+ series: newData.map((item, idx) => {
+ if (idx === 0) {
+ return {
+ name: '',
+ type: 'gauge',
+ radius: '40%', // 琛ㄧ洏澶у皬
+ splitNumber: 5, // 鍒诲害鏁伴噺
+ data: [item],
+ center: [`${20 + idx * 20}%`, '40%'],
+ splitLine: {
+ show: false,
+ },
+ progress: {
show: true,
- color: '#2FB5FA'
- }
- },
- data: [],
- },
- ]
-
+ },
+ itemStyle: {
+ color: '#FF8C00',
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ width: 10,
+ color: [
+ [item.value ? item.value / 100 : 0, '#FF8C00'],
+ [1, '#01A0FE'],
+ ],
+ },
+ },
+ axisLabel: {
+ show: true,
+ distance: -45, // 鍧愭爣杞存暟瀛椾綅缃�
+ color: '#888888',
+ },
+ detail: {
+ offsetCenter: [0, '120%'],
+ fontWeight: 'bold',
+ formatter: function (value) {
+ return `{a|${value + item.unit}}\n{b|${nameList[idx]}}`;
+ },
+ rich: {
+ a: {
+ color: '#01a0fe',
+ fontSize: 12,
+ },
+ b: {
+ fontSize: 14,
+ color: '#888888',
+ },
+ },
+ },
+ title: {
+ // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ // fontWeight: 'bolder',
+ fontSize: 14,
+ color: '#1170b7',
+ padding: [0, 10, 0, 10],
+ offsetCenter: ['400%', '200%'],
+ // fontStyle: 'italic'
+ borderColor: 'red',
+ lineHeight: 30,
+ borderRadius: 16,
+ backgroundColor: 'rgba(17,112,183,0.3)',
+ },
+ };
+ }else{
+ return {
+ name: '',
+ type: 'gauge',
+ radius: '40%',
+ splitNumber: 5,
+ data: [item],
+ center: [`${20 + idx * 20}%`, '40%'],
+ splitLine: {
+ show: false,
+ },
+ progress: {
+ show: true,
+ },
+ itemStyle: {
+ color: '#FF8C00',
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ width: 10,
+ color: [
+ [item.value ? item.value / 100 : 0, '#FF8C00'],
+ [1, '#01A0FE'],
+ ],
+ },
+ },
+ axisLabel: {
+ show: true,
+ distance: -45,
+ color: '#888888',
+ },
+ detail: {
+ offsetCenter: [0, '120%'],
+ fontWeight: 'bold',
+ formatter: function (value) {
+ return `{a|${value + item.unit}}\n{b|${nameList[idx]}}`;
+ },
+ rich: {
+ a: {
+ color: '#01a0fe',
+ fontSize: 12,
+ },
+ b: {
+ fontSize: 14,
+ color: '#888888',
+ },
+ },
+ },
+ title: {
+ // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ // fontWeight: 'bolder',
+ show:false,
+ fontSize: 14,
+ color: '#1170b7',
+ padding: [0, 10, 0, 10],
+ offsetCenter: ['0', '0%'],
+ // fontStyle: 'italic'
+ borderColor: 'red',
+ lineHeight: 30,
+ borderRadius: 16,
+ backgroundColor: 'rgba(17,112,183,0.3)',
+ },
+ };
+ }
+ }),
}
- var mapFeatures = this.data
- console.log('mapFeatures',mapFeatures)
- var geoCoordMap = {};
- mapFeatures.forEach(function (v) {
- // 鍦板尯鍚嶇О
- var name = v.name;
- // 鍦板尯缁忕含搴�
- geoCoordMap[name] = v.centroid;
- });
-
- var convertData = function (data) {
- var res = [];
- for (var i = 0; i < data.length; i++) {
- var geoCoord = geoCoordMap[data[i].name];
- if (geoCoord) {
- res.push({
- name: data[i].name,
- value: geoCoord.concat(data[i].value)
- });
- }
- }
- console.log(res)
- return res;
- };
- // alert(JSON.stringify(convertData(areaMapData)));
- option.series[0].data = convertData(this.data); // 璁剧疆鍔ㄦ晥鏁ｇ偣鏁版嵁
- // 鍦板浘娉ㄥ唽锛岀涓�涓弬鏁扮殑鍚嶅瓧蹇呴』鍜宱ption.geo.map涓�鑷�
- echarts.registerMap('centerMap', datajson)
- charts.setOption(option)
-
+ this.chart.setOption(option)
+ },
+ initCharts() {
+ this.chart = echarts.init(document.getElementById('yibiaoEchart'))
+ this.setOptions(this.chartData)
}
}
}
@@ -309,35 +318,32 @@
}
}
-.map-infos {
- // border: 1px dashed #ddd;
- width: 4.0rem;
- position: absolute;
- top: 1rem;
- right: 0.5rem;
- // margin-top: 0.5rem;
- font-size: .2rem;
- color: #d0cbcb;
- }
+
.map-title {
padding: 0.15rem;
text-align: center;
}
-.map-item {
- display: flex;
- padding: 0.15rem;
- font-size: .2rem;
- align-items: center;
- .item-title {
- width: 50%;
- font-size: 0.1rem;
- letter-spacing: 2px;
+.item-block {
+ width: 90%;
+ text-align: center;
+ height: 38vh;
+ margin: 0.35rem auto 0.5rem;
+ .panel .panel-header {
+ background-image: none !important;
}
- .item-num {
- font-family: 'screen-font';
+ .echart-title {
+ color: white;
+ font-size: 0.18rem;
+ text-align: left;
+ padding: 0.1rem;
}
}
-.dv-border-box-13 {
- padding: .2rem;
+.height35 {
+ height: 31vh;
}
</style>
+<style>
+.dv-border-box-10 .dv-border-svg-container {
+ display: none
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0