From c3aaf28f7316cce12eec007a9f85a96cbcddeec2 Mon Sep 17 00:00:00 2001 From: jiangping <jp@doumee.com> Date: 星期三, 07 五月 2025 10:34:20 +0800 Subject: [PATCH] 最新版本541200007 --- screen/src/views/FireFighting.vue | 997 ++++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 649 insertions(+), 348 deletions(-) diff --git a/screen/src/views/FireFighting.vue b/screen/src/views/FireFighting.vue index 2a5d881..96d6c56 100644 --- a/screen/src/views/FireFighting.vue +++ b/screen/src/views/FireFighting.vue @@ -1,9 +1,10 @@ <template> <v-scale-screen width="1920" height="960"> <div class="main_app"> - <img src="@/assets/images/FireFighting/bg@2x.png" class="main_bg" alt="" /> + <!-- <img src="@/assets/images/FireFighting/bg@2x.png" class="main_bg" alt="" /> --> + <img src="@/assets/images/SecurityControl/bg@2x_2.png" class="main_bg" alt="" /> <div class="main_header"> - <img src="@/assets/images/maintitle@2x.png" class="main_header_bg" alt="" /> + <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" /> <div class="title">瀹夋嘲鏅烘収鐗╂祦鍥尯-娑堥槻鎬佸娍鐩戞帶</div> <div class="time_wrap"> <span class="date">{{ date }}</span> @@ -24,24 +25,29 @@ <div class="list_wrap"> <div class="list"> <div class="header line"> - <span class="item name">璁惧绫诲瀷</span> + <span class="item name">璁惧鍚嶇О</span> <span class="item">鎬绘暟</span> <span class="item">鎶ヨ</span> <span class="item">灞忚斀</span> <span class="item">鏁呴殰</span> - <span class="item">绂荤嚎</span> + <span class="item">姝e父</span> </div> - <template v-for="i in 5"> - <div class="line"> - <span class="item name">鐏伓鎶ヨ绯荤粺</span> - <span class="item">11</span> - <span class="item">11</span> - <span class="item">11</span> - <span class="item">11</span> - <span class="item">11</span> + <div class="one-swiper list_content"> + <div class="swiper-wrapper"> + <div class="line_wrap one-swiper-slide swiper-slide" v-for="(item, i) in dataList1"> + <div class="line"> + <span class="item name">{{ item.typeName }}</span> + <span class="item">{{ item.totalDeviceNum || 0 }}</span> + <span class="item" style="color: #FEAF01;">{{ item.alarmDeviceNum || 0 }}</span> + <span class="item">{{ item.shieldDeviceNum || 0 }}</span> + <span class="item">{{ item.errDeviceNum || 0 }}</span> + <span class="item">{{ item.onlineDeviceNum || 0 }}</span> + </div> + <div class="separate"></div> + </div> </div> - <div class="separate"></div> - </template> + </div> + </div> </div> </div> @@ -54,12 +60,12 @@ <img src="@/assets/images/title@2x.png" class="bg" alt="" /> </div> <div class="police_wrap"> - <div class="item" v-for="(ind, i) in 4"> + <div class="item" v-for="(item, i) in dataList2"> <div class="head"> - <div class="name">鐪熷疄鎶ヨ鏁�</div> - <div class="name">{{ i }}娆�</div> + <div class="name">{{ item.name }}</div> + <div class="name">{{ item.num }}娆�</div> </div> - <FirePercent :color="policeColors[i]" :rate="40" /> + <FirePercent :color="policeColors[i]" :rate="item.rate" /> </div> </div> @@ -83,36 +89,36 @@ <div class="item"> <img src="@/assets/images/FireFighting/xiaofang_ic_zaixian@2x.png" alt=""> <div class="content"> - <div class="name">鍦ㄧ嚎</div> - <div class="num">1000</div> + <div class="name">鎬绘暟</div> + <div class="num">{{ dataList4.onlineDeviceNum || 0 }}</div> </div> </div> <div class="item"> <img src="@/assets/images/FireFighting/xiaofang_ic_baojing@2x.png" alt=""> <div class="content"> <div class="name">鎶ヨ</div> - <div class="num num2">12</div> - </div> - </div> - <div class="item"> - <img src="@/assets/images/FireFighting/xiaofang_ic_guzhang@2x.png" alt=""> - <div class="content"> - <div class="name">鏁呴殰</div> - <div class="num num3">12</div> - </div> - </div> - <div class="item"> - <img src="@/assets/images/FireFighting/xiaofang_ic_lixian@2x.png" alt=""> - <div class="content"> - <div class="name">绂荤嚎</div> - <div class="num num4">12</div> + <div class="num num2">{{ dataList4.alarmDeviceNum || 0}}</div> </div> </div> <div class="item"> <img src="@/assets/images/FireFighting/xiaofang_ic_pingbi@2x.png" alt=""> <div class="content"> <div class="name">灞忚斀</div> - <div class="num num5">12</div> + <div class="num num5">{{ dataList4.shieldDeviceNum || 0 }}</div> + </div> + </div> + <div class="item"> + <img src="@/assets/images/FireFighting/xiaofang_ic_guzhang@2x.png" alt=""> + <div class="content"> + <div class="name">鏁呴殰</div> + <div class="num num3">{{ dataList4.errDeviceNum || 0 }}</div> + </div> + </div> + <div class="item"> + <img src="@/assets/images/FireFighting/xiaofang_ic_zhengchang@2x.png" alt=""> + <div class="content"> + <div class="name">姝e父</div> + <div class="num num4">{{ dataList4.onlineDeviceNum || 0 }}</div> </div> </div> </div> @@ -125,29 +131,37 @@ <span>娓╁害/婀垮害浼犳劅鍣�</span> </div> <div class="right"> - <img class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png" alt=""> - <div class="num">1/5</div> - <img class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png" alt=""> + <img @click="changeData8(-1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png" + alt=""> + <div class="num">{{ dataIndex8 + 1 }}/{{ dataList8.length }}</div> + <img @click="changeData8(1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png" + alt=""> </div> </div> <div class="list_wrap"> <div class="title"> <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt=""> - <span>鍗歌揣鍖�1</span> + <span v-if="dataList8 && dataList8.length > 0">{{ dataList8[dataIndex8].humidityData.name }}</span> </div> - <div class="list"> + <div class="list" v-if="dataList8 && dataList8.length > 0"> <div class="item"> <img class="icon" src="@/assets/images/FireFighting/ic_wendu@2x.png" alt=""> <div class="content"> - <div class="num">23<span>掳C</span></div> - <div class="la">闃堝�� 0锝�100掳C</div> + <div class="num" + v-if="dataList8[dataIndex8].temperatureData && dataList8[dataIndex8].temperatureData.latestValue"> + {{ Number(dataList8[dataIndex8].temperatureData.latestValue).toFixed(1) }}<span>掳C</span></div> + <div class="la">闃堝�� {{ dataList8[dataIndex8].temperatureData?.alarmLow }}锝瀧{ + dataList8[dataIndex8].temperatureData?.alarmHigh }}掳C</div> </div> </div> <div class="item"> <img class="icon" src="@/assets/images/FireFighting/ic_shidu@2x.png" alt=""> <div class="content"> - <div class="num">23<span>%</span></div> - <div class="la">闃堝�� 0锝�100%</div> + <div class="num" + v-if="dataList8[dataIndex8].humidityData && dataList8[dataIndex8].humidityData.latestValue">{{ + Number(dataList8[dataIndex8].humidityData.latestValue).toFixed(1) }}<span>%</span></div> + <div class="la">闃堝�� {{ dataList8[dataIndex8].humidityData?.alarmLow }}锝瀧{ + dataList8[dataIndex8].humidityData?.alarmHigh }}%</div> </div> </div> </div> @@ -160,35 +174,30 @@ <span>瀹炴椂浼犳劅鍣ㄦ娴�</span> </div> <div class="right"> - <img class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png" alt=""> - <div class="num">1/5</div> - <img class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png" alt=""> + <img @click="changeData9(-1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_left@2x.png" + alt=""> + <div class="num">{{ dataIndex9 + 1 }}/{{ dataTotal9 }}</div> + <img @click="changeData9(1)" class="icon" src="@/assets/images/FireFighting/xiaofang_ar_right@2x.png" + alt=""> </div> </div> - <div class="list_wrap"> - <div class="title_wrap"> + <div class="list_wrap2"> + <div class="item" v-for="item, i in dataListTemp9"> <div class="title"> <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt=""> - <span>1璺�/姘村帇</span> + <span>{{ item.name }}</span> </div> - <div class="title"> - <img class="icon" src="@/assets/images/FireFighting/ic_location@2x.png" alt=""> - <span>2璺�/娑蹭綅</span> + <div class="watergage_wrap" v-if="item.obj.typeCode == 253958"> + <div class="watergage" :id="'watergage' + i"></div> + <div class="unit">{{ item.obj.value }}</div> + <div class="place">闃堝�� {{ item.level }}</div> </div> - </div> - <div class="list"> - <div class="watergage_wrap"> - <div class="watergage" id="watergage"></div> - <div class="unit">2.50 <span>Mpa</span></div> - <div class="place">闃堝�� 0锝�2.5Mpa</div> - </div> - <div class="item"> - <div class="liquidlevel_wrap"> - <div class="liquidlevel" id="liquidlevel"></div> - <div class="unit">3.45 <span>M</span></div> - <div class="place">闃堝�� 0锝�4.50M</div> + <div v-if="item.obj.typeCode == 254001" class="liquidlevel_wrap"> + <div class="liquidlevel" :id="'liquidlevel' + i"></div> + <div class="liquidle_te"> + <div class="unit">{{ item.obj.value }}</div> + <div class="placeT">闃堝�納{ item.level }}</div> </div> - </div> </div> </div> @@ -206,20 +215,27 @@ </div> <div class="content_wrap"> <div class="list"> - <template v-for="i in 3"> - <div class="item"> - <div>宸茬淮淇�</div> - <div class="num active">500</div> - </div> - <div v-if="i < 3" class="separate"></div> - </template> - + <div class="item"> + <div>宸茬淮淇�</div> + <div class="num active">{{ dataList5.protectNum }}</div> + </div> + <div class="separate"></div> + <div class="item"> + <div>璁″垝缁翠繚</div> + <div class="num acc">{{ dataList5.planProtectTotal }}</div> + </div> + <div class="separate"></div> + <div class="item"> + <div>缁翠繚鐜�</div> + <div v-if="dataList5.protectNum && dataList5.planProtectTotal" class="acc num">{{ + ((dataList5.protectNum / dataList5.planProtectTotal) * 100).toFixed(0) }}%</div> + </div> </div> <div class="footer"> <img src="@/assets/images/FireFighting/ic_weixiu@2x.png" class="icon" alt=""> <div class="content"> <div>鏈湀鏂板缁翠繚</div> - <div class="num">40 <span>涓�</span></div> + <div class="num">{{ dataList5.monthAddNum }} <span>涓�</span></div> </div> </div> </div> @@ -241,14 +257,14 @@ <img src="@/assets/images/FireFighting/ic_tibao@2x.png" alt=""> <div class="content"> <div class="name">鎻愭姤闅愭偅鏁�</div> - <div class="num"><span>10</span>涓�</div> + <div class="num"><span>{{ dataList4.dangerTotalNum }}</span>涓�</div> </div> </div> <div class="item"> <img src="@/assets/images/FireFighting/ic_chuli@2x.png" alt=""> <div class="content"> <div class="name">澶勭悊闅愭偅鏁�</div> - <div class="num"><span class="today">3</span>涓�</div> + <div class="num"><span class="today">{{ dataList4.dangerDealedNum }}</span>涓�</div> </div> </div> </div> @@ -256,30 +272,38 @@ <img class="icon" src="@/assets/images/FireFighting/ic_title_green@2x.png" alt=""> <div class="name">鍛婅淇℃伅</div> </div> - <div class="list"> - <div class="item" v-for="i in 5"> - <div class="icon"> - <div class="circle"></div> - <div class="line"></div> + <div class="list two-swiper"> + <div class="swiper-wrapper"> + <div class="item two-swiper-slide swiper-slide" v-for="item, i in dataList7" :key="i"> + <div class="icon"> + <div class="circle"></div> + <div class="line"></div> + </div> + <div class="content"> + <div class="header"> + <div class="time"> + <span>{{ item.alarmTime }}</span> + <span class="status" v-if="item.handleStatus == 1">宸叉牳瀹�</span> + <span class="status" v-else-if="item.handleStatus == 2">鏈牳瀹�</span> + <span class="status" v-else-if="item.handleStatus == 3">鏍稿疄涓�</span> + <span v-else class="status">鏈牳瀹�</span> + </div> + <div class="have_time">宸插彂鐢焮{ item.haveTime }}</div> + </div> + <div class="wrap"> + <div class="title"> + <img class="xf" src="@/assets/images/FireFighting/ic_gaojing_red@2x.png" alt=""> + <span>{{ item.alarmTypeName }}</span> + </div> + <div class="title"> + <img class="addr" src="@/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png" alt=""> + <span>{{ item.regionName }}</span> + </div> + </div> + </div> </div> - <div class="content"> - <div class="header"> - <div class="time"> - <span>123</span> - <span class="status">澶勭悊涓�</span> - </div> - <div class="have_time">宸茬粡鍙戠敓<span>1</span>鍒嗛挓</div> - </div> - <div class="wrap"> - <div class="title"> - <img class="xf" src="@/assets/images/FireFighting/ic_gaojing_red@2x.png" alt=""> - <span>娑堥槻璀﹀憡</span> - </div> - <div class="title"> - <img class="addr" src="@/assets/images/FireFighting/xiaofang_ic_weizhi@2x.png" alt=""> - <span>address</span> - </div> - </div> + <div v-if="dataList7.length == 0" style="margin-top: 100px;" class="empty_wrap"> + <img src="@/assets/images/default_empty.png" alt=""> </div> </div> </div> @@ -291,12 +315,26 @@ </template> <script setup> -import { ref, onMounted } from 'vue' +import { ref, onMounted, nextTick } from 'vue' import VScaleScreen from 'v-scale-screen' import FirePercent from '@/components/FirePercent.vue' import dayjs from 'dayjs' - +import duration from 'dayjs/plugin/duration' +dayjs.extend(duration) import * as echarts from 'echarts' +import 'swiper/css/swiper.min.css' +import Swiper from 'swiper' +import { + getFightingalarmData, + getFightingHandle, + getFightingcenterData, + getFightingDeAlarm, + getFightingDeviceY, + getFighalarmDataList, + getTemperatureHumidityData, + monitorDataListP +} from '@/api' + const colors = ['#FEAF01', '#01ABFE', '#51F9E4'] const weekMap = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�',] const date = ref(dayjs().format('YYYY.MM.DD')) @@ -309,169 +347,15 @@ }, 1000) -const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a'] -const initEchart2 = () => { - var myChart = echarts.init(document.querySelector('.echart2')) - // 鐢熸垚鏁版嵁鍜屾棩鏈� - function getLastSevenDays() { - const days = [] - const today = new Date() - for (let i = 10; i >= 0; i--) { - days.push(`${i + 1}鏈坄) // 鏍煎紡鍖栨棩鏈熶负 "X鏈圶鏃�" - } - return days - } - // 绀轰緥鏁版嵁 - const data1 = [13, 14, 14, 14, 14, 12, 11, 23, 12, 1] // 鍑嗘椂 - const data2 = [1, 1, 2, 1, 1, 2, 2, 3, 2, 1, 5] // 杩熷埌 - const data3 = [1, 0, 0, 0, 0, 0, 2, 2, 3, 1, 2] // 璇峰亣 - const data4 = [8, 5, 4, 7, 4, 5, 7, 4, 2, 1, 3] // 鍔犵彮 - const option = { - legend: { - x: "center", - textStyle: { - color: "#FFFFFF", // 鍥句緥鏂囧瓧璁句负鐧借壊 - fontSize: 12 - }, - icon: 'circle', - top: '6%', - itemWidth: 8, - itemHeight: 8, - itemGap: 20, - data: ['鍛婅鏁�', '杩涜涓�', '宸插鐞�', '璇姤鏁�'] // 鏇存柊鍥句緥鍚嶇О - }, - grid: { - left: '2%', - right: '0%', - top: '18%', - bottom: '10%', - containLabel: true, - }, - tooltip: { - trigger: "axis", - axisPointer: { - type: "shadow" - }, - textStyle: { - color: "rgba(255, 255, 255, 1)" - }, - backgroundColor: "rgba(0,0,0,0.8)", - borderColor: "rgba(219, 230, 255, 0.8)", - }, - xAxis: { - data: getLastSevenDays(), // 浣跨敤杩戜竷澶╂棩鏈� - axisLabel: { - color: "#FFFFFF", // X 杞存枃瀛楄涓虹櫧鑹� - fontSize: 14, - }, - axisLine: { - lineStyle: { - color: '#1E294C' - } - }, - axisTick: { - show: false - } - }, - yAxis: { - show: true, - axisLabel: { - color: "#FFFFFF", // Y 杞存枃瀛楄涓虹櫧鑹� - fontSize: 12, - }, - axisLine: { - lineStyle: { - color: '#A9AEB2' - } - }, - axisTick: { - lineStyle: { - color: '#A9AEB2' - } - }, - splitLine: { - show: true, - lineStyle: { - color: ["#0f1d27"], - width: 1 - }, - }, - }, - series: [ - { - name: "鍛婅鏁�", - type: "bar", - stack: "attendance", - data: data1, - itemStyle: { - color: '#FEAF01', - }, - label: { - show: false, - color: "#FFFFFF", - }, - emphasis: { - focus: "series", - }, - barWidth: 6, - }, - { - name: "杩涜涓�", // 杩熷埌鏁版嵁 - type: "bar", - stack: "attendance", - data: data2, - itemStyle: { - color: '#28F0C4', // 杩熷埌鐨勯鑹� - }, - label: { - show: false, - color: "#FFFFFF", - }, - emphasis: { - focus: "series", - }, - }, - { - name: "宸插鐞�", // 璇峰亣鏁版嵁 - type: "bar", - stack: "attendance", - data: data3, - itemStyle: { - color: '#0193FE', // 璇峰亣鐨勯鑹� - }, - label: { - show: false, - color: "#FFFFFF", - }, - emphasis: { - focus: "series", - }, - }, - { - name: "璇姤鏁�", // 鍗曠嫭鐨勫姞鐝煴瀛� - type: "bar", - data: data4, - barWidth: 6, - itemStyle: { - color: '#FEED01', // 楂樹寒鐨勭传鑹� - }, - emphasis: { - focus: "series", - }, - }, - ], - } - myChart.setOption(option) - window.addEventListener('resize', function () {//鎵ц - myChart.resize() - }) -} - -const policeColors = ['#01D9FE', '#FE5501', '#0193FE', '#28F0C4'] -const initWatergage = () => { - const myChart = echarts.init(document.getElementById('watergage')) - var data_value = 2 +const initWatergage = (id, item) => { + const myChart = echarts.init(document.getElementById(id)) + var data_value = item.obj.value.replaceAll('Mpa', '') + const startI = item.level.indexOf('-') + const endI = item.level.indexOf('Mpa') + let maxNum = item.level.slice(startI + 1, endI) + let minNum = item.level.slice(0, startI) + // let maxNum = const option = { barMaxWidth: 3, polar: { @@ -498,8 +382,8 @@ series: [ { type: 'gauge', - min: 0, - max: 2.50, + min: minNum, + max: maxNum, splitNumber: 5, radius: '100%', center: ['50%', '50%'], @@ -631,9 +515,17 @@ myChart.resize() }) } -const initLiquidlevel = () => { - const myChart = echarts.init(document.getElementById('liquidlevel')) - var data = 65 +const initLiquidlevel = (id, item) => { + const myChart = echarts.init(document.getElementById(id)) + const startI = item.level.indexOf('-') + const endI = item.level.indexOf('M') + let maxNum = item.level.slice(startI + 1, endI) + let minNum = item.level.slice(0, startI) + let conNum = maxNum - minNum + let acNum = item.obj.value.replaceAll('M', '') + var data = (((acNum - minNum) / conNum) * 100).toFixed(0) + console.log('data', data) + const option = { tooltip: { trigger: 'none', @@ -671,7 +563,7 @@ { name: '鏈�涓婂眰绔嬩綋鍦�', type: 'pictorialBar', - symbolSize: [260, 40], + symbolSize: [182, 40], symbolOffset: [0, -20], z: 12, itemStyle: { @@ -689,7 +581,7 @@ { name: '涓棿绔嬩綋鍦�', type: 'pictorialBar', - symbolSize: [260, 40], + symbolSize: [182, 40], symbolOffset: [0, -20], z: 12, itemStyle: { @@ -722,7 +614,7 @@ { name: '鏈�搴曢儴绔嬩綋鍦�', type: 'pictorialBar', - symbolSize: [260, 40], + symbolSize: [182, 40], symbolOffset: [0, 20], z: 12, itemStyle: { @@ -771,9 +663,9 @@ label: { distance: 15, show: true, - position: data > 58 ? 'inside' : 'top', + position: data > 52 ? 'inside' : 'top', formatter: '{c}' + '%', - fontSize: 80, + fontSize: 72, color: '#1AFCFF', textShadowColor: '#03C7F9', textShadowBlur: 30, @@ -834,10 +726,350 @@ }) } +const dataList1 = ref([]) +const policeColors = ['#01D9FE', '#FE5501', '#0193FE', '#28F0C4'] +const dataList2 = ref([]) +const getData2 = () => { + // let temp = [] + // temp.push({ name: '鐪熷疄鎶ヨ鏁�', num: 10, rate: 20 }) + // temp.push({ name: '璇姤璀︽暟', num: 30, rate: 60 }) + // temp.push({ name: '宸茶В闄�', num: 20, rate: 40 }) + // temp.push({ name: '澶勭悊涓�', num: 8, rate: 16 }) + // dataList2.value = temp + // return + getFightingalarmData().then(res => { + const result = res.data || {} + let temp = [] + temp.push({ name: '鐪熷疄鎶ヨ鏁�', num: result.realNum, rate: (result.realNum / result.totalNum) * 100 }) + temp.push({ name: '璇姤璀︽暟', num: result.errNum, rate: (result.errNum / result.totalNum) * 100 }) + temp.push({ name: '宸茶В闄�', num: result.liftNum, rate: (result.liftNum / result.totalNum) * 100 }) + temp.push({ name: '澶勭悊涓�', num: result.processingNum, rate: (result.processingNum / result.totalNum) * 100 }) + dataList2.value = temp + }) +} + +const dataList3 = ref([]) +const getData3 = () => { + getFightingHandle({ type: 0 }).then(res => { + dataList3.value = res.data || [] + initEchart2() + }) +} +const initEchart2 = () => { + var myChart = echarts.init(document.querySelector('.echart2')) + // 鐢熸垚鏁版嵁鍜屾棩鏈� + // 绀轰緥鏁版嵁 + const data1 = dataList3.value.map(i => i.realNum) + const data2 = dataList3.value.map(i => i.processingNum) + const data3 = dataList3.value.map(i => i.liftNum) + const data4 = dataList3.value.map(i => i.errNum) + const months = dataList3.value.map(i => { + return i.startDate.substring(5, 7) + '鏈�' + }) + + + const option = { + legend: { + x: "center", + textStyle: { + color: "#FFFFFF", // 鍥句緥鏂囧瓧璁句负鐧借壊 + fontSize: 12 + }, + icon: 'circle', + top: '6%', + itemWidth: 8, + itemHeight: 8, + itemGap: 20, + data: ['鍛婅鏁�', '杩涜涓�', '宸插鐞�', '璇姤鏁�'] // 鏇存柊鍥句緥鍚嶇О + }, + grid: { + left: '2%', + right: '0%', + top: '20%', + bottom: '10%', + containLabel: true, + }, + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow" + }, + textStyle: { + color: "rgba(255, 255, 255, 1)" + }, + backgroundColor: "rgba(0,0,0,0.8)", + borderColor: "rgba(219, 230, 255, 0.8)", + }, + xAxis: { + data: months, + axisLabel: { + color: "#FFFFFF", // X 杞存枃瀛楄涓虹櫧鑹� + fontSize: 13, + }, + axisLine: { + lineStyle: { + color: '#1E294C' + } + }, + axisTick: { + show: false + } + }, + yAxis: { + show: true, + axisLabel: { + color: "#FFFFFF", // Y 杞存枃瀛楄涓虹櫧鑹� + fontSize: 12, + }, + axisLine: { + lineStyle: { + color: '#A9AEB2' + } + }, + axisTick: { + lineStyle: { + color: '#A9AEB2' + } + }, + splitLine: { + show: true, + lineStyle: { + color: ["#0f1d27"], + width: 1 + }, + }, + }, + series: [ + { + name: "鍛婅鏁�", + type: "bar", + stack: "attendance", + data: data1, + itemStyle: { + color: '#FEAF01', + }, + label: { + show: false, + color: "#FFFFFF", + }, + emphasis: { + focus: "series", + }, + barWidth: 6, + }, + { + name: "杩涜涓�", // 杩熷埌鏁版嵁 + type: "bar", + stack: "attendance", + data: data2, + itemStyle: { + color: '#28F0C4', // 杩熷埌鐨勯鑹� + }, + label: { + show: false, + color: "#FFFFFF", + }, + emphasis: { + focus: "series", + }, + }, + { + name: "宸插鐞�", // 璇峰亣鏁版嵁 + type: "bar", + stack: "attendance", + data: data3, + itemStyle: { + color: '#0193FE', // 璇峰亣鐨勯鑹� + }, + label: { + show: false, + color: "#FFFFFF", + }, + emphasis: { + focus: "series", + }, + }, + { + name: "璇姤鏁�", // 鍗曠嫭鐨勫姞鐝煴瀛� + type: "bar", + data: data4, + barWidth: 6, + itemStyle: { + color: '#FEED01', // 楂樹寒鐨勭传鑹� + }, + emphasis: { + focus: "series", + }, + }, + ], + } + myChart.setOption(option) + window.addEventListener('resize', function () {//鎵ц + myChart.resize() + }) +} + +const dataList4 = ref({}) +const getData4 = () => { + getFightingcenterData().then(res => { + dataList4.value = res.data || {} + dataList1.value = res.data.deviceTypeList + }) +} +const dataList5 = ref({}) // 缁翠繚 +const getData5 = () => { + getFightingDeviceY().then(res => { + dataList5.value = res.data || {} + }) +} +const dataList6 = ref([]) +const getData6 = () => { + getFightingHandle({ type: 1 }).then(res => { + dataList6.value = res.data + }) +} +const dataList7 = ref([]) +const getData7 = () => { + getFighalarmDataList().then(res => { + dataList7.value = res.data || [] + dataList7.value = dataList7.value.map(item => { + let times = new Date().getTime() - new Date(item.alarmTime).getTime() + if (times > 86400000) { + item.haveTime = dayjs.duration(times).format('D澶〩灏忔椂m鍒嗛挓') + } else if (times > 3600000) { + item.haveTime = dayjs.duration(times).format('H灏忔椂m鍒嗛挓') + } else { + item.haveTime = dayjs.duration(times).format('m鍒嗛挓') + } + return item + }) + }) +} + +const dataList8 = ref([]) +const dataIndex8 = ref(0) + +const dataList9 = ref([]) +const dataListTemp9 = ref([]) +const dataIndex9 = ref(0) +const dataTotal9 = ref(0) + +const getData8 = () => { + getTemperatureHumidityData().then(res => { + dataList8.value = res.data || [] + }) + monitorDataListP().then(res => { + dataList9.value = res.data || [] + dataList9.value.forEach(item => { + if (item.dataList && item.dataList.length > 0) { + item.obj = item.dataList[0] + } + }) + if (dataList9.value.length > 0) { + dataTotal9.value = Math.ceil(dataList9.value.length / 2) + dataListTemp9.value = dataList9.value.slice(0, 2) + } + initEcharts9() + }) +} +const changeData8 = (num) => { + if (dataIndex8.value == dataList8.value.length - 1 && num > 0) { + dataIndex8.value = 0 + } else if (dataIndex8.value == 0 && num < 0) { + dataIndex8.value = dataList8.value.length - 1 + } else { + dataIndex8.value = dataIndex8.value + num + } +} +const changeData9 = (num) => { + // return + if (dataIndex9.value == dataTotal9.value - 1 && num > 0) { + dataIndex9.value = 0 + dataListTemp9.value = dataList9.value.slice(0, 2) + } else if (dataIndex9.value == 0 && num < 0) { + dataIndex9.value = dataTotal9.value - 1 + dataListTemp9.value = dataList9.value.slice(dataList9.value.length - 2, dataList9.value.length) + } else { + dataIndex9.value = dataIndex9.value + num + dataListTemp9.value = dataList9.value.slice(dataIndex9.value * 2, (dataIndex9.value + 1) * 2) + } + initEcharts9() +} +const initEcharts9 = () => { + dataListTemp9.value.forEach((item, i) => { + + if (item.obj && item.obj.typeCode == 253958) { + nextTick(() => { + initWatergage('watergage' + i, item) + }) + } + if (item.obj && item.obj.typeCode == 254001) { + nextTick(() => { + initLiquidlevel('liquidlevel' + i, item) + }) + } + }) +} + + +const autoplayFlag = (list = [], leng = 4, time = 2000) => { + if (list.length > leng) { + return { delay: time, disableOnInteraction: false } + } else { + return false + } +} +const loopFn1 = () => { + var newSwiper1 = new Swiper('.one-swiper', { + initialSlide: 0, + direction: 'vertical', //绔栫洿鏂瑰悜 + slidesPerView: 5, + autoplay: autoplayFlag(dataList1.value, 5, 4000), + observer: true, //淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper + }) +} +const loopFn2 = () => { + var newSwiper1 = new Swiper('.two-swiper', { + initialSlide: 0, + direction: 'vertical', //绔栫洿鏂瑰悜 + slidesPerView: 4, + autoplay: autoplayFlag(dataList7.value, 4, 4000), + observer: true, //淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper + }) +} + onMounted(() => { - initEchart2() - initWatergage() - initLiquidlevel() + // getData1() + getData2() + getData3() + getData4() + getData5() + // getData6() + getData7() + getData8() + setInterval(() => { + getData2() + getData3() + getData4() + // getData6() + getData7() + }, 60 * 1000) + setInterval(() => { + getData5() + getData8() + }, 60 * 60 * 1000) + + setInterval(() => { + changeData8(1) + changeData9(1) + }, 1000 * 5) + + setTimeout(() => { + loopFn1() + loopFn2() + }, 12000) + + }) @@ -858,12 +1090,18 @@ .left_box_one { width: 100%; margin-bottom: 20px; - border: 1px solid; .list_wrap { padding: 10px 0; - height: 227px; - overflow: auto; + + .list_content { + height: 170px; + overflow: hidden; + + .line_wrap { + height: 34px !important; + } + } .list { .line { @@ -873,17 +1111,20 @@ font-size: 14px; .item { - flex: 1; + flex: 2; display: flex; justify-content: center; + /* margin: 0 6px; */ align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + } .name { - flex: 2; + flex: 5; + justify-content: flex-start; } .warnning { @@ -922,7 +1163,6 @@ .police_wrap { padding: 15px 20px 0; height: 225px; - border: 1px solid; .item { margin-bottom: 5px; @@ -941,7 +1181,6 @@ .left_box_three { .dispose_wrap { - border: 1px solid; height: 210px; width: 100%; @@ -1004,16 +1243,16 @@ .num3 { background-image: -webkit-linear-gradient(top, - #fff 0%, - #e9bf43 50%, - #eb8131 100%); + #eb8131 0%, + #d0a72c 50%, + #e9bf43 100%); } .num4 { background-image: -webkit-linear-gradient(top, #fff 0%, - #9e9e9e 50%, - #9e9e9e 100%); + #78db91 50%, + #6de8b0 100%); } .num5 { @@ -1028,11 +1267,13 @@ } .center_box_two { - width: 100%; + width: 108%; display: flex; + margin: 0 -4%; .content_wrap { flex: 1; + flex-shrink: 0; margin-right: 20px; .title_wrap { @@ -1076,8 +1317,9 @@ } .icon { - width: 13px; - height: 16px; + width: 30px; + cursor: pointer; + /* height: 16px; */ } } } @@ -1108,6 +1350,18 @@ .item { display: flex; align-items: center; + position: relative; + + .place { + position: absolute; + top: 120px; + right: 70px; + z-index: 999; + font-size: 13px; + color: #869CC9; + width: 120px; + text-align: center; + } .icon { width: 70px; @@ -1121,7 +1375,7 @@ font-weight: 500; span { - font-style: 14px; + font-size: 14px; font-weight: 400; } } @@ -1133,76 +1387,111 @@ } } } + } - .watergage_wrap { - text-align: center; - position: relative; - left: 30px; + .list_wrap2 { + display: flex; + align-items: center; + height: 206px; + background-image: url('@/assets/images/FireFighting/bg_wendu@2x.png'); + background-size: cover; - .watergage { - width: 130px; - height: 112px; - } + .item { + width: 50%; + height: 100%; - .unit { - font-weight: 500; - font-size: 18px; - position: relative; - bottom: 16px; - left: 4px; + .title { + height: 46px; + display: flex; + align-items: center; + color: #D2E0FF; + padding-left: 20px; - span { - font-size: 12px; - font-weight: 400; + .icon { + width: 16px; + margin-right: 8px; } } - .place { + .watergage_wrap { + text-align: center; position: relative; - bottom: 16px; - left: 4px; - font-size: 13px; - color: #869CC9; - } - } + left: 30px; - .liquidlevel_wrap { - transform: scale(0.24); - color: #fff; - text-align: center; - position: relative; - left: 20px; - bottom: 10px; + .watergage { + width: 130px; + height: 112px; + } - .unit { - font-weight: 500; - font-size: 80px; - position: relative; - bottom: 24px; - left: 4px; + .unit { + font-weight: 500; + font-size: 18px; + position: relative; + bottom: 16px; + left: 4px; + width: 130px; + margin-bottom: 6px; + margin-top: 2px; - span { - font-size: 52px; - font-weight: 400; + span { + font-size: 12px; + font-weight: 400; + } + } + + .place { + position: relative; + bottom: 16px; + left: 4px; + width: 130px; + font-size: 13px; + color: #869CC9; } } - .place { + .liquidlevel_wrap { position: relative; - bottom: 10px; - left: 4px; - font-size: 44px; - color: #869CC9; - } - .liquidlevel { - width: 320px; - height: 420px; + /* border: 6px solid red; */ + .liquidle_te { + font-weight: 500; + font-size: 18px; + position: absolute; + top: 99px; + left: 0; + width: 206px; + display: flex; + flex-direction: column; + align-items: center; + .placeT { + font-size: 12px; + color: #869CC9; + margin-top: 6px; + } + } + + /* .placeT { + position: relative; + bottom: 10px; + left: 4px; + font-size: 74px; + color: #869CC9; + opacity: 0; + } */ + + .liquidlevel { + width: 220px; + height: 400px; + transform: scale(0.27); + color: #fff; + text-align: center; + position: relative; + left: -8px; + top: -143px; + } } } - - } } @@ -1232,6 +1521,17 @@ margin-top: 12px; font-weight: bold; font-size: 32px; + + } + + .acc { + background-image: -webkit-linear-gradient(top, + #ffffff 0%, + #c8ddff 66%, + #95eefc 72%, + #95eefc 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } .active { @@ -1345,8 +1645,8 @@ } .list { - height: 330px; - overflow: auto; + height: 320px; + overflow: hidden; margin-top: 15px; scrollbar-width: none; @@ -1354,6 +1654,7 @@ display: flex; font-size: 13px; color: #D2E0FF; + height: 80px !important; .icon { width: 40px; @@ -1413,7 +1714,7 @@ } .wrap { - height: 40px; + height: 34px; background: linear-gradient(270deg, rgba(254, 85, 1, 0) 0%, rgba(254, 85, 1, 0.19) 100%); border-radius: 2px 0px 0px 2px; display: flex; -- Gitblit v1.9.3