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/leftTop.vue | 4
src/views/largeScreen/component/rightTophubiao.vue | 191 ++++++++
src/components/echarts/echarsBar.vue | 7
src/api/largeScreen.js | 8
src/views/largeScreen/indexijmunai.vue | 248 ++++++++++
src/views/largeScreen/component/leftBottom.vue | 24
src/views/largeScreen/component/middleAreaBottom.vue | 98 ++++
src/utils/request.js | 2
src/views/largeScreen/component/rightMiddle.vue | 8
src/views/largeScreen/component/middleArea.vue | 390 ++++++++--------
src/views/largeScreen/component/rightBottom.vue | 4
src/views/largeScreen/component/middleAreajimunai.vue | 343 ++++++++++++++
config.js | 1
src/views/largeScreen/component/leftMiddle.vue | 14
src/views/largeScreen/index.vue | 28
15 files changed, 1,134 insertions(+), 236 deletions(-)
diff --git a/config.js b/config.js
index b4dbc6a..5e1bd1d 100644
--- a/config.js
+++ b/config.js
@@ -10,3 +10,4 @@
baseUrl = "http://xxxxt"
}
export default baseUrl;
+
\ No newline at end of file
diff --git a/src/api/largeScreen.js b/src/api/largeScreen.js
index de55c4f..d17d0e5 100644
--- a/src/api/largeScreen.js
+++ b/src/api/largeScreen.js
@@ -18,7 +18,7 @@
}
// 鑾峰彇杩戜竴骞寸敤姘撮噺
export function getEchartData (data){
- return request({
+ return request({
url: '/waterScreen/ScYearAmount!get.action',
method: 'POST',
data
@@ -26,14 +26,14 @@
}
// 鑾峰緱绱姘撮噺锛屾湰骞寸疮璁℃按閲忥紝鏄ㄦ棩姘撮噺
export function getScAmount (data){
- return request({
+ return request({
url: '/waterScreen/ScAmount!get.action',
- method: 'POST',
+ method: 'POST',
data
})
}
// 鑾峰緱鎶ヨ淇℃伅
-export function getScAlarm (data){
+export function getScAlarm (data){
return request({
url: '/waterScreen/ScAlarm!get.action',
method: 'POST',
diff --git a/src/components/echarts/echarsBar.vue b/src/components/echarts/echarsBar.vue
index e8f3138..417197e 100644
--- a/src/components/echarts/echarsBar.vue
+++ b/src/components/echarts/echarsBar.vue
@@ -50,7 +50,7 @@
}
},
grid: {
- left: '5%',
+ left: '5%',
top: '10%',
right: '10%',
bottom: '3%',
@@ -93,8 +93,7 @@
for (let i = 1; i < this.param.seriesCount; i++) {
this.data.series[i] = {
stack: this.param.seriesStack[i],
- name: this.param.seriesName[i],
- type: this.param.seriesType[i],
+ name: this.param.seriesName[i],
data: this.param.seriesData[i],
color: this.param.seriesColorData[i],
yAxisIndex: this.param.yAxisIndexData[i]
@@ -107,7 +106,7 @@
immediate: true,
deep: true,
handler(newVal, oldVal) {
- if (this.chart) {
+ if (this.chart) {
if (newVal) {
if (newVal.chartType === 'transverse') {
this.transverse()
diff --git a/src/utils/request.js b/src/utils/request.js
index ae3d1ed..b8feea3 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -25,7 +25,7 @@
// request.headers.common['X-HTY-Token'] = token
// }
return request
-},(error) =>{
+},(error) =>{
console.error('request.js request error锛�--------------:', error)
return Promise.reject(error);
})
diff --git a/src/views/largeScreen/component/leftBottom.vue b/src/views/largeScreen/component/leftBottom.vue
index 9a740f1..5bd8497 100644
--- a/src/views/largeScreen/component/leftBottom.vue
+++ b/src/views/largeScreen/component/leftBottom.vue
@@ -1,7 +1,7 @@
<template>
<!-- 姹℃煋鐗╂秷鍑忛噺 -->
<div class="panel">
- <div class="panel-header">鍦板尯姘寸鐞嗗憳</div>
+ <div class="panel-header">杩愯鐘舵��</div>
<!-- <div>
<line-chart :chart-data="chartData" :width="'100%'" :height="'22vh'"></line-chart>
</div> -->
@@ -23,18 +23,18 @@
data() {
return {
config: {
- header: ['鍦板尯', '姘寸鍛樺鍚�', '鑱旂郴鏂瑰紡'],
+ header: ['鐢ㄦ按鎴�', '闃�闂ㄧ姸鎬�', '涓婃姤鏃堕棿'],
data: [
- ['鎭板嫆浠�娴蜂埂', '寮犱笁', '13821200000'],
- ['鎭板嫆浠�娴蜂埂', '鐜嬪ぇ娴�', '琛�2鍒�3'],
- ['鎭板嫆浠�娴蜂埂', '鏉�', '琛�3鍒�3'],
- ['鎭板嫆浠�娴蜂埂', '琛�4鍒�2', '13821200000'],
- ['鎭板嫆浠�娴蜂埂', '琛�5鍒�2', '琛�5鍒�3'],
- ['鎭板嫆浠�娴蜂埂', '琛�6鍒�2', '琛�6鍒�3'],
- ['鎭板嫆浠�娴蜂埂', '琛�7鍒�2', '13821200000'],
- ['鎭板嫆浠�娴蜂埂', '琛�8鍒�2', '琛�8鍒�3'],
- ['鎭板嫆浠�娴蜂埂', '琛�9鍒�2', '琛�9鍒�3'],
- ['鎭板嫆浠�娴蜂埂', '琛�10鍒�2', '琛�10鍒�3']
+ ['浜屽彿浜曞甫闃�', '闃�鍏�', '2024-04-29 00:08:50'],
+ ['浜屽彿浜曞甫闃�', '闃�鍏�', '2024-04-29 00:07:54'],
+ ['浜屽彿浜曞甫闃�', '闃�鍏�', '2024-04-26 00:07:23'],
+ ['浜屽彿浜曞甫闃�', '闃�鍏�', '2024-04-29 00:05:47'],
+ ['涓�鍙蜂簳甯﹂榾', '闃�鍏�', '2024-04-29 00:04:48'],
+ ['涓�鍙蜂簳甯﹂榾', '闃�鍏�', '2024-04-29 00:03:47'],
+ ['涓�鍙蜂簳甯﹂榾', '闃�鍏�', '2024-04-29 00:02:47'],
+ ['涓�鍙蜂簳甯﹂榾', '闃�鍏�', '2024-04-29 00:01:49'],
+ ['涓�鍙蜂簳甯﹂榾', '闃�鍏�', '2024-04-29 00:02:05'],
+ ['浜屽彿浜曞甫闃�', '闃�鍏�', '2024-04-29 00:00:44']
],
headerBGC: '',
oddRowBGC: '#0b283e',
diff --git a/src/views/largeScreen/component/leftMiddle.vue b/src/views/largeScreen/component/leftMiddle.vue
index 0a2eed8..ec3eb0f 100644
--- a/src/views/largeScreen/component/leftMiddle.vue
+++ b/src/views/largeScreen/component/leftMiddle.vue
@@ -1,7 +1,7 @@
<template>
<!-- 姹℃煋鐗╂秷鍑忛噺 -->
<div class="panel">
- <div class="panel-header">杩戜竴骞寸敤姘撮噺缁熻</div>
+ <div class="panel-header">杩戜竴骞村厖鍊奸噾棰�</div>
<div>
<line-chart :chart-data="chartData" :width="'100%'" :height="'22vh'"></line-chart>
</div>
@@ -13,18 +13,20 @@
export default {
components: {
// mainEcharts,
- lineChart
+ lineChart,
},
data() {
return {
datetiems: [],
chartData: {
+ chartType:'portrait',
time: [],
+ // time: ['2024-05','2024-04','2024-03','2024-02','2024-01','2023-12'],
Data: [
{
- // data: ['20','40','50','40','60','79','30','38','46','99','88','99'],
- data: [],
- type: 'line',
+ data: ['20','40','50','40','60','79','30','38','46','99','88','99'],
+ // data: [],
+ type: 'bar',
// name: 'BOD',
connectNulls: true,
smooth: true,
@@ -44,7 +46,7 @@
},
mounted() {
this.getEchartData()
- // this.chartData.time = this.getlastYearMonth().reverse()
+ this.chartData.time = this.getlastYearMonth().reverse()
},
methods: {
getEchartData() {
diff --git a/src/views/largeScreen/component/leftTop.vue b/src/views/largeScreen/component/leftTop.vue
index 1793ec3..b923df0 100644
--- a/src/views/largeScreen/component/leftTop.vue
+++ b/src/views/largeScreen/component/leftTop.vue
@@ -10,7 +10,7 @@
<div class="item-value"><span class="item-num">{{ item.count }}</span> {{ item.unit }}</div>
</div>
</div> -->
- <div class="info-items flex-item">
+ <!-- <div class="info-items flex-item">
<div>
<div class="item-label" style="white-space: nowrap">鐢ㄦ按鎴锋暟</div>
<div class="item-value bg-b"><span class="item-num">{{ infos.clientTotal }}</span></div>
@@ -27,7 +27,7 @@
<div class="item-label" style="white-space: nowrap">浠婃棩鍏呭��</div>
<div class="item-value bg-b"><span class="item-num">{{ infos.chargeTotal }}</span></div>
</div>
- </div>
+ </div> -->
<div class="info-items flex-item">
<div>
<div class="item-label" style="white-space: nowrap">鏄ㄦ棩涓婃姤</div>
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
diff --git a/src/views/largeScreen/component/middleAreaBottom.vue b/src/views/largeScreen/component/middleAreaBottom.vue
new file mode 100644
index 0000000..0e06908
--- /dev/null
+++ b/src/views/largeScreen/component/middleAreaBottom.vue
@@ -0,0 +1,98 @@
+<template>
+ <!-- 姹℃煋鐗╂秷鍑忛噺 -->
+ <div class="panel">
+ <!-- <div class="panel-header">杩戜竴骞寸敤姘撮噺缁熻</div> -->
+ <div>
+ <line-chart :chart-data="chartData" :width="'100%'" :height="'29vh'"></line-chart>
+ </div>
+ </div>
+</template>
+<script>
+import lineChart from '@/components/echarts/lineChart'
+import { getEchartData } from '@/api/largeScreen'
+export default {
+ components: {
+ // mainEcharts,
+ lineChart
+ },
+ data() {
+ return {
+ datetiems: [],
+ chartData: {
+ time: [],
+ // time: ['2024-05','2024-04','2024-03','2024-02','2024-01','2023-12'],
+ Data: [
+ {
+ data: ['20','40','50','40','60','79','30','38','46','99','88','99'],
+ // data: [],
+ type: 'line',
+ // name: 'BOD',
+ connectNulls: true,
+ smooth: true,
+ areaStyle: {}
+ }
+ ],
+ config: {
+ // name: ['BOD', 'TP', 'TN', 'NH3-N'],
+ color: ['#5470c6'],
+ textStyleColor: '#fff',
+ XlineColor: '#022C5A',
+ YlineColor: '#022C5A',
+ xRotate: 30
+ }
+ }
+ }
+ },
+ mounted() {
+ this.getEchartData()
+ this.chartData.time = this.getlastYearMonth().reverse()
+ },
+ methods: {
+ getEchartData() {
+ getEchartData({orgTag: 'dy'}).then((res) => {
+ if (res.succ == 1) {
+ res.amounts.forEach(ele=>{
+ this.chartData.time.push(ele.yyyyMm)
+ this.chartData.Data[0].data.push(ele.amount)
+ })
+ } else {
+ this.$message({
+ type: 'error',
+ message: res.message
+ })
+ }
+ })
+ },
+ getlastYearMonth() {
+ // 1銆佸皝瑁呮柟娉�
+ var result = [];
+ for (var i = 0; i < 12; i++) {
+ var d = new Date();
+ d.setDate(1);
+ d.setMonth(d.getMonth() - i-1); // 鑾峰彇涓婁釜鏈堝線鍓�12涓湀锛屾墍浠�-1
+ var m = d.getMonth() + 1;
+ m = m < 10 ? "0" + m : m; //鍦ㄨ繖閲屽彲浠ヨ嚜瀹氫箟杈撳嚭鐨勬棩鏈熸牸寮�
+ result.push(d.getFullYear() + "-" + m); //result.push(d.getFullYear() + "骞�" + m + '鏈�');
+ }
+ return result; // return 鍒涘缓濂界殑鏃ユ湡鏁扮粍
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+// 鏍囬
+.info-title {
+ height: 4.4vh;
+ background: url('../../../image/screen/bg_title.png') no-repeat;
+ display: flex;
+ align-items: center;
+ color: #fff;
+ font-family: 'screen-font';
+ margin-bottom: 2%;
+ .info-title-text {
+ padding-left: 2vw;
+ font-size: 1rem;
+ }
+}
+</style>
diff --git a/src/views/largeScreen/component/middleAreajimunai.vue b/src/views/largeScreen/component/middleAreajimunai.vue
new file mode 100644
index 0000000..051fefb
--- /dev/null
+++ b/src/views/largeScreen/component/middleAreajimunai.vue
@@ -0,0 +1,343 @@
+<template>
+ <div style="position:relative">
+ <div style="display: flex; justify-content: space-around; margin-bottom: 1vh">
+ <div>
+ <div class="num-title">
+ <div><span class="high-text">鎬�</span>绱鐢ㄦ按閲�</div>
+ </div>
+ <div class="num-item">
+ <span class="num-style color0" :class="{ 'num-bg0': s !== '.' }" v-for="(s, i) in amountTotal" :key="i">{{ s }}</span>
+ <!-- <span class="unit-text">m鲁</span> -->
+ </div>
+ </div>
+ <div>
+ <div class="num-title">
+ <div><span class="high-text">鏈�</span>骞村害绱鐢ㄦ按閲�</div>
+ </div>
+ <div class="num-item">
+ <span v-for="(s, i) in amountCurYearTotal" :key="i" class="num-style color2" :class="{ 'num-bg2': s !== '.' }">{{ s }}</span>
+ <!-- <span class="unit-text">涓噈鲁</span> -->
+ </div>
+ </div>
+ <div>
+ <div class="num-title">
+ <div><span class="high-text">鏄�</span>鏃ョ疮璁＄敤姘撮噺</div>
+ </div>
+ <div class="num-item">
+ <span v-for="(s, i) in amountYesterdayTotal" :key="i" class="num-style color2" :class="{ 'num-bg2': s !== '.' }">{{ s }}</span>
+ <!-- <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>
+ </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'
+export default {
+ 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 }
+ // 鎵樻櫘閾佺儹鍏嬮晣銆佸悏鏈ㄤ箖闀囥�佸杸灏斾氦涔°�佹墭鏂壒涔°�佸叺鍥竴鍏叚鍥€�佸埆鏂搧鐑厠涔°�佹伆鍕掍粈娴蜂埂銆佹墭鏅搧鐑厠涔�
+ ]
+ }
+ },
+ created() {
+ this.getScAmount()
+ // setTimeout(this.initChart, 5000)
+ // this.initChart()
+ // this.totalNum = (+this.baseInfos.totalProcess / 10000).toFixed(2)
+ },
+ props: {
+ baseInfos: {
+ type: Object,
+ default: () => {}
+ }
+ },
+ watch: {
+
+
+ },
+ mounted() {
+ // this.getData()
+ this.$nextTick(() => {
+ // this.getStationList()
+ this.initCharts()
+ })
+ },
+ methods: {
+ getScAmount() {
+ const param = {"orgTag":"dy"}
+ getScAmount(param).then(res=>{
+ if (res.succ == 1) {
+ this.amountTotal = res.amountTotal.toString().split("")
+ this.amountCurYearTotal = res.amountCurYearTotal.toString().split("")
+ this.amountYesterdayTotal = res.amountYesterdayTotal.toString().split("")
+ } else {
+ this.$message({
+ type: 'error',
+ message: res.message
+ })
+ }
+ })
+ },
+ initCharts() {
+ const charts = echarts.init(this.$refs['mapcontainer'])
+ 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: {
+ show: true,
+ color: '#2FB5FA'
+ }
+ },
+ data: [],
+ },
+ ]
+
+ }
+ 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)
+
+ }
+ }
+}
+</script>
+<style lang="scss" scoped>
+.num-title {
+ color: #fff;
+ font-family: 'screen-font';
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 0.14rem;
+ .high-text {
+ font-size: 0.24rem;
+ margin-right: 0.05rem;
+ }
+ .unit-text {
+ font-size: 0.12rem;
+ font-family: 'element-icons';
+ }
+}
+
+.num-item {
+ display: flex;
+ // justify-content: space-between;
+ overflow: hidden;
+ align-items: flex-end;
+ .num-style {
+ font-size: 0.36rem;
+ font-family: 'screen-font';
+ padding: 0.05rem;
+ background-size: 100% 100% !important;
+ }
+ .num-bg0 {
+ background: url('../../../image/screen/bg_num_blue.png') no-repeat;
+
+ }
+ .num-bg1 {
+ background: url('../../../image/screen/bg_num_green.png') no-repeat;
+ }
+ .num-bg2 {
+ background: url('../../../image/screen/bg_num_cyan.png') no-repeat;
+ }
+ .color0 {
+ color: #36a8ff;
+ }
+ .color1 {
+ color: #00f170;
+ }
+ .color2 {
+ color: #04ddff;
+ }
+ .unit-text {
+ color: #fff;
+ margin-left: 5px;
+ }
+
+}
+.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-num {
+ font-family: 'screen-font';
+ }
+}
+.dv-border-box-13 {
+ padding: .2rem;
+}
+</style>
diff --git a/src/views/largeScreen/component/rightBottom.vue b/src/views/largeScreen/component/rightBottom.vue
index 560d176..51daf69 100644
--- a/src/views/largeScreen/component/rightBottom.vue
+++ b/src/views/largeScreen/component/rightBottom.vue
@@ -5,8 +5,8 @@
灏忕▼搴忎俊鎭�
</div>
<div class="img-container">
- <!-- <img class="img-items" src="../../../image/screen/xiaochengxuma.jpg" alt=""> -->
- <img class="img-items" :src="wxMiniQrClientUrl" alt="">
+ <img class="img-items" src="../../../image/screen/xiaochengxuma.jpg" alt="">
+ <!-- <img class="img-items" :src="wxMiniQrClientUrl" alt=""> -->
</div>
</div>
</template>
diff --git a/src/views/largeScreen/component/rightMiddle.vue b/src/views/largeScreen/component/rightMiddle.vue
index 7586d7b..a3b3839 100644
--- a/src/views/largeScreen/component/rightMiddle.vue
+++ b/src/views/largeScreen/component/rightMiddle.vue
@@ -6,20 +6,20 @@
</div>
<!-- <line-chart :chart-data="chartData" :width="'100%'" :height="'22vh'"></line-chart> -->
<div class="flex panel-body" style="flex-wrap: wrap;">
- <div class="info-items flex-item">
+ <!-- <div class="info-items flex-item">
<div class="info-img"><img src="../../../image/screen/image_鍘曟墍.png" alt=""></div>
<div>
<div class="item-label" style="white-space: nowrap">48灏忔椂鏈敤姘�</div>
<div class="item-value"><span class="item-num">{{ alarmInfo.no48AmountTotal }}</span></div>
</div>
- </div>
- <div class="info-items flex-item">
+ </div> -->
+ <!-- <div class="info-items flex-item">
<div class="info-img"><img src="../../../image/screen/image_姘磋川.png" alt=""></div>
<div>
<div class="item-label" style="white-space: nowrap">闃�闂ㄥ叧闂姤璀�</div>
<div class="item-value"><span class="item-num">{{ alarmInfo.valveTotal }}</span></div>
</div>
- </div>
+ </div> -->
<div class="info-items flex-item">
<div class="info-img"><img src="../../../image/screen/image_宸℃.png" alt=""></div>
<div>
diff --git a/src/views/largeScreen/component/rightTophubiao.vue b/src/views/largeScreen/component/rightTophubiao.vue
new file mode 100644
index 0000000..92cb377
--- /dev/null
+++ b/src/views/largeScreen/component/rightTophubiao.vue
@@ -0,0 +1,191 @@
+<template>
+ <!-- 杩愯惀姒傚喌 -->
+ <div class="panel">
+ <div class="panel-header">杩愮淮鏁版嵁</div>
+ <div>
+ <div>
+ <div class="num-title">
+ <div><span class="high-text">鎬�</span>绱鐢ㄦ按閲�</div>
+ </div>
+ <div class="num-item">
+ <span class="num-style color0" :class="{ 'num-bg0': s !== '.' }" v-for="(s, i) in amountTotal" :key="i">{{ s }}</span>
+ <!-- <span class="unit-text">m鲁</span> -->
+ </div>
+ </div>
+ <div>
+ <div class="num-title">
+ <div><span class="high-text">鏈�</span>骞村害绱鐢ㄦ按閲�</div>
+ </div>
+ <div class="num-item">
+ <span v-for="(s, i) in amountCurYearTotal" :key="i" class="num-style color2" :class="{ 'num-bg2': s !== '.' }">{{ s }}</span>
+ <!-- <span class="unit-text">涓噈鲁</span> -->
+ </div>
+ </div>
+ <div>
+ <div class="num-title">
+ <div><span class="high-text">鏄�</span>鏃ョ疮璁＄敤姘撮噺</div>
+ </div>
+ <div class="num-item">
+ <span v-for="(s, i) in amountYesterdayTotal" :key="i" class="num-style color2" :class="{ 'num-bg2': s !== '.' }">{{ s }}</span>
+ <!-- <span class="unit-text">涓噈鲁</span> -->
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+<script>
+import { getScAmount } from '@/api/largeScreen'
+export default {
+ name: 'RightTop',
+ props: {
+ baseInfos: {
+ type: Object,
+ default: () => {}
+ }
+ },
+ data() {
+ return {
+ devopsData: []
+ }
+ },
+ watch: {
+ baseInfos: {
+ handler(newValue) {
+ this.baseInfos = newValue
+ },
+ immediate: true
+ }
+ },
+ created() {
+ this.getScAmount()
+ },
+ mounted() {
+ // this.getData()
+ },
+ methods: {
+ getScAmount() {
+ const param = {"orgTag":"dy"}
+ getScAmount(param).then(res=>{
+ if (res.succ == 1) {
+ this.amountTotal = res.amountTotal.toString().split("")
+ this.amountCurYearTotal = res.amountCurYearTotal.toString().split("")
+ this.amountYesterdayTotal = res.amountYesterdayTotal.toString().split("")
+ } else {
+ this.$message({
+ type: 'error',
+ message: res.message
+ })
+ }
+ })
+ }
+ }
+}
+</script>
+<style lang="scss" scoped>
+.num-title {
+ color: #fff;
+ font-family: 'screen-font';
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 0.14rem;
+ .high-text {
+ font-size: 0.24rem;
+ margin-right: 0.05rem;
+ }
+ .unit-text {
+ font-size: 0.12rem;
+ font-family: 'element-icons';
+ }
+}
+
+.num-item {
+ display: flex;
+ // justify-content: space-between;
+ overflow: hidden;
+ align-items: flex-end;
+ .num-style {
+ font-size: 0.36rem;
+ font-family: 'screen-font';
+ padding: 0.05rem;
+ background-size: 100% 100% !important;
+ }
+ .num-bg0 {
+ background: url('../../../image/screen/bg_num_blue.png') no-repeat;
+
+ }
+ .num-bg1 {
+ background: url('../../../image/screen/bg_num_green.png') no-repeat;
+ }
+ .num-bg2 {
+ background: url('../../../image/screen/bg_num_cyan.png') no-repeat;
+ }
+ .color0 {
+ color: #36a8ff;
+ }
+ .color1 {
+ color: #00f170;
+ }
+ .color2 {
+ color: #04ddff;
+ }
+ .unit-text {
+ color: #fff;
+ margin-left: 5px;
+ }
+
+}
+ .panel-body{
+ justify-content: space-around;
+ }
+ .info-items-top {
+ width: 3.4rem;
+ margin-bottom: .3rem;
+ font-size: .14rem;
+ text-align: center;
+ .item-text {
+ margin-top: 0.2rem;
+ color: #fff;
+ }
+ }
+
+ .info-items{
+ width: 1.36rem;
+ margin-bottom: .1rem;
+ // display: flex;
+ // justify-content: space-between;
+ // align-items: center;
+ text-align: center;
+ font-size: .14rem;
+ .item-text {
+ margin-top: 0.3rem;
+ color: #fff;
+ }
+ .info-img {
+ width: .6rem;
+ height: .6rem;
+ img{
+ width: 100%;
+ }
+ }
+ .item-label {
+ width: .64rem;
+ font-size: .14rem;
+ color: #fff;
+ }
+ .item-value {
+ font-size: .1rem;
+ color: #fff;
+ }
+ .item-num {
+ font-family: 'screen-font';
+ font-size: .20rem;
+ }
+ }
+ .dv-decoration-9 {
+ color: #fff;
+ width: 1.36rem;
+ height: 0.26rem;
+ }
+
+</style>
diff --git a/src/views/largeScreen/index.vue b/src/views/largeScreen/index.vue
index 4c23435..80247b4 100644
--- a/src/views/largeScreen/index.vue
+++ b/src/views/largeScreen/index.vue
@@ -3,7 +3,8 @@
<div class="content-head">
<div class="content-titles">
<div class="img-container">
- <img :src="titleUrl" alt="鍚夋湪涔冨幙浜洪ギ椤圭洰鐩戞祴骞冲彴">
+ <!-- <img :src="titleUrl" :alt="titleAlt"> -->
+ {{titleAlt}}
</div>
<!-- <img style="width: 100%" src="../../image/screen/image_head.png" alt="" /> -->
@@ -22,9 +23,10 @@
<div class="content-body flex" style="padding: 0 0.1rem">
<!-- 宸︿晶鍐呭 -->
<div class="flex-item" style="width: 4.8rem">
- <left-top :baseInfos="baseInfos" class="item-area" style="height: 24vh"></left-top>
+ <left-top :baseInfos="baseInfos" class="item-area" style="height: 29vh"></left-top>
<left-middle class="item-area" style="height: 29vh"></left-middle>
- <left-bottom class="item-area" style="height: 29vh"></left-bottom>
+ <!-- <left-bottom class="item-area" style="height: 29vh"></left-bottom> -->
+ <right-top :baseInfos="baseInfos" class="item-area" style="height: 24vh"></right-top>
</div>
<!-- 涓棿閮ㄥ垎 -->
<div class="flex-main" style="width: 9.2rem">
@@ -32,9 +34,11 @@
</div>
<!-- 鍙充晶鍐呭 -->
<div class="flex-item" style="width: 4.8rem">
- <right-top :baseInfos="baseInfos" class="item-area" style="height: 24vh"></right-top>
+ <!-- <right-top :baseInfos="baseInfos" class="item-area" style="height: 24vh"></right-top> -->
+ <!-- <right-tophubiao :baseInfos="baseInfos" class="item-area" style="height: 24vh"></right-tophubiao> -->
<right-middle class="item-area" style="height: 29vh"></right-middle>
- <right-bottom :wxMiniQrClientUrl="wxMiniQrClientUrl" class="item-area" style="height: 29vh"></right-bottom>
+ <left-bottom class="item-area" style="height: 29vh"></left-bottom>
+ <right-bottom :wxMiniQrClientUrl="wxMiniQrClientUrl" class="item-area" style="height: 24vh"></right-bottom>
</div>
</div>
</div>
@@ -42,11 +46,13 @@
<script>
import leftTop from './component/leftTop'
import leftMiddle from './component/leftMiddle'
-import leftBottom from './component/leftBottom'
-import middleArea from './component/middleArea'
+import leftBottom from './component/leftBottom.vue'
import rightTop from './component/rightTop'
+import middleArea from './component/middleArea'
+import rightTophubiao from './component/rightTophubiao'
import rightMiddle from './component/rightMiddle'
import rightBottom from './component/rightBottom'
+
import './index.scss'
import { getProjectInfo } from '@/api/largeScreen'
@@ -59,8 +65,9 @@
leftTop,
leftMiddle,
leftBottom,
- middleArea,
rightTop,
+ middleArea,
+ rightTophubiao,
rightMiddle,
rightBottom
},
@@ -90,6 +97,7 @@
fullScreen: false,
baseInfos: {}, // 椤圭洰鍩烘湰淇℃伅&杩愯惀姒傚喌
titleUrl: '',
+ titleAlt: '',
wxMiniQrClientUrl: '' // 灏忕▼搴忎俊鎭�
}
},
@@ -109,7 +117,6 @@
},
// 鍏ㄥ睆
toggleFullScreen() {
- console.log(document.fullscreenElement)
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen()
} else {
@@ -127,6 +134,9 @@
getProjectInfo() {
getProjectInfo({orgTag: 'dy'}).then((res) => {
if(res.succ==1){
+ console.log('........', res)
+
+ this.titleAlt = res.title
this.titleUrl = res.wxMiniQrManageUrl || ''
this.wxMiniQrClientUrl = res.wxMiniQrClientUrl || ''
}else{
diff --git a/src/views/largeScreen/indexijmunai.vue b/src/views/largeScreen/indexijmunai.vue
new file mode 100644
index 0000000..96dbcaa
--- /dev/null
+++ b/src/views/largeScreen/indexijmunai.vue
@@ -0,0 +1,248 @@
+<template>
+ <div class="container">
+ <div class="content-head">
+ <div class="content-titles">
+ <div class="img-container">
+ <!-- <img :src="titleUrl" alt="鍚夋湪涔冨幙浜洪ギ椤圭洰鐩戞祴骞冲彴"> -->
+ 鍚夋湪涔冨幙浜洪ギ椤圭洰鐩戞祴骞冲彴
+ </div>
+
+ <!-- <img style="width: 100%" src="../../image/screen/image_head.png" alt="" /> -->
+ </div>
+ <div class="time-head">
+ <div class="time-head-content">
+ <span>{{ this.time }}</span> {{ this.date }} {{ this.week }}
+ </div>
+ </div>
+ <div class="icon-items">
+ <div @click="toggleFullScreen" class="fullscreen"></div>
+ <!-- <div class="logout" @click="goBack"></div> -->
+ </div>
+ </div>
+ <!-- <div class="content-body flex" style="padding: 0 0.1rem; height: 100%"> -->
+ <div class="content-body flex" style="padding: 0 0.1rem">
+ <!-- 宸︿晶鍐呭 -->
+ <div class="flex-item" style="width: 4.8rem">
+ <left-top :baseInfos="baseInfos" class="item-area" style="height: 24vh"></left-top>
+ <left-middle class="item-area" style="height: 29vh"></left-middle>
+ <left-bottom class="item-area" style="height: 29vh"></left-bottom>
+ </div>
+ <!-- 涓棿閮ㄥ垎 -->
+ <div class="flex-main" style="width: 9.2rem">
+ <middle-area :baseInfos="baseInfos"></middle-area>
+ </div>
+ <!-- 鍙充晶鍐呭 -->
+ <div class="flex-item" style="width: 4.8rem">
+ <right-top :baseInfos="baseInfos" class="item-area" style="height: 24vh"></right-top>
+ <right-middle class="item-area" style="height: 29vh"></right-middle>
+ <right-bottom :wxMiniQrClientUrl="wxMiniQrClientUrl" class="item-area" style="height: 29vh"></right-bottom>
+ </div>
+ </div>
+ </div>
+</template>
+<script>
+import leftTop from './component/leftTop'
+import leftMiddle from './component/leftMiddle'
+import leftBottom from './component/leftBottom'
+import middleArea from './component/middleArea'
+import rightTop from './component/rightTop'
+import rightMiddle from './component/rightMiddle'
+import rightBottom from './component/rightBottom'
+import './index.scss'
+
+import { getProjectInfo } from '@/api/largeScreen'
+
+document.documentElement.style.fontSize = '20px'
+
+export default {
+ name: 'LargeScreen',
+ components: {
+ leftTop,
+ leftMiddle,
+ leftBottom,
+ middleArea,
+ rightTop,
+ rightMiddle,
+ rightBottom
+ },
+ created() {
+ document.documentElement.style.fontSize = (window.innerWidth / 1920) * 100 + 'px'
+ // 12px => 0.12rem
+ // 200px => 2rem
+ // this.dateFormat()
+ this.timer = setInterval(() => {
+ this.dateFormat()
+ }, 1000)
+ this.getProjectInfo()
+ },
+ beforeDestroy() {
+ document.documentElement.style.fontSize = this.originalFontSize
+ if (this.timer) {
+ clearInterval(this.timer) // 鍦╒ue瀹炰緥閿�姣佸墠锛屾竻闄ゆ垜浠殑瀹氭椂鍣�
+ }
+ },
+ data() {
+ return {
+ originalFontSize: document.documentElement.style.fontSize,
+ timer: null,
+ time: '',
+ date: '',
+ week: '',
+ fullScreen: false,
+ baseInfos: {}, // 椤圭洰鍩烘湰淇℃伅&杩愯惀姒傚喌
+ titleUrl: '',
+ wxMiniQrClientUrl: '' // 灏忕▼搴忎俊鎭�
+ }
+ },
+ methods: {
+ dateFormat() {
+ let date = new Date()
+ let year = date.getFullYear()
+ let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
+ let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+ let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
+ let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
+ let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
+
+ this.date = year + '-' + month + '-' + day + ' '
+ this.time = hours + ':' + minutes + ':' + seconds
+ this.week = '鏄熸湡' + '鏃ヤ竴浜屼笁鍥涗簲鍏�'.charAt(date.getDay())
+ },
+ // 鍏ㄥ睆
+ toggleFullScreen() {
+ console.log(document.fullscreenElement)
+ if (!document.fullscreenElement) {
+ document.documentElement.requestFullscreen()
+ } else {
+ if (document.exitFullscreen) {
+ document.exitFullscreen()
+ }
+ }
+ this.fullScreen = !this.fullScreen
+ },
+ // 閫�鍑�
+ goBack() {
+ this.$router.go(-1)
+ },
+ // 鑾峰彇椤圭洰淇℃伅
+ getProjectInfo() {
+ getProjectInfo({orgTag: 'dy'}).then((res) => {
+ if(res.succ==1){
+ this.titleUrl = res.wxMiniQrManageUrl || ''
+ this.wxMiniQrClientUrl = res.wxMiniQrClientUrl || ''
+ }else{
+ this.$message({
+ type: 'error',
+ message: res.message
+ })
+ }
+
+ })
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+// @import '../../font/font.css';
+.container {
+ // width: 100vw;
+ height: 100vh;
+ width: 100%;
+ // height: 100%;
+ background: url('../../image/screen/image_background.png') no-repeat fixed center;
+ background-size: 100% 100%;
+ // 鏍囬
+ .content-head {
+ height: 10vh;
+ // border-bottom: 1px dashed #707070;
+ // margin-bottom: 15px;
+ position: relative;
+ // line-height: 10vh;
+ }
+ .content-titles {
+ text-align: center;
+ font-family: 'LED-FONT';
+ font-size: .6rem;
+ color: #fff;
+ // padding-top: 10px;
+ .img-container {
+ width: 60%;
+ height: 10vh;
+ margin: 0 auto;
+ overflow: hidden;
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+ .time-head {
+ color: #fff;
+ position: absolute;
+ left: 0.2rem;
+ top: 0;
+ width: 20rem;
+ padding: 0.13rem 0;
+ font-size: 0.12rem;
+ .time-head-content {
+ width: 2.8rem;
+ height: 0.5rem;
+ background: url('../../image/screen/bg_time.png') no-repeat;
+ background-position: center center;
+ background-size: contain;
+ font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+ & span {
+ display: inline-block;
+ width: 1.2rem;
+ font-size: 20px;
+ font-family: Impact-Regular, Impact;
+ font-weight: 400;
+ letter-spacing: 0.04rem;
+ }
+ }
+ .time-item {
+ font-size: 1rem !important;
+ padding-right: 5px;
+ }
+ }
+ .icon-items {
+ position: absolute;
+ top: 13px;
+ right: 0.12rem;
+ .fullscreen {
+ float: left;
+ width: 0.4rem;
+ height: 0.4rem;
+ margin-right: 0.11rem;
+ cursor: pointer;
+ background: url('../../image/screen/bg_button@2x.png') no-repeat;
+ background-position: center center;
+ background-size: 255% 255%;
+ }
+ .fullscreen:hover {
+ background: url('../../image/screen/bg_button_hover@2x.png') no-repeat;
+ background-position: center center;
+ background-size: 255% 255%;
+ }
+ .logout {
+ float: left;
+ width: 0.4rem;
+ height: 0.4rem;
+ margin-right: 0.11rem;
+ background: url('../../image/screen/bg_button_exit@2x.png') no-repeat;
+ background-position: center center;
+ background-size: 100% 100%;
+ }
+ .logout:hover {
+ background: url('../../image/screen/bg_button_exit_hover@2x.png') no-repeat;
+ background-position: center center;
+ background-size: 100% 100%;
+ }
+ }
+ // 鍐呭
+ .item-area {
+ margin-bottom: 15px;
+ }
+}
+</style>
--
Gitblit v1.8.0