From 3bb931d4eb57fec4a857c9dd0b11f9643c3506e5 Mon Sep 17 00:00:00 2001 From: longyvfengyun <496960745@qq.com> Date: 星期五, 17 十一月 2023 15:16:38 +0800 Subject: [PATCH] 内容提交 --- src/components/dangerActBox.vue | 12 + src/assets/main.css | 1 src/views/user/drivingAnalysis.vue | 34 +++ src/views/moudle/bmsInf/bmsInf.js | 27 +++ src/components/echarts/options/tools/getMin.js | 7 src/components/echarts/options/tools/getMax.js | 8 src/views/mainLayout/index.vue | 6 src/components/echarts/options/horizontalTechnologyBar.js | 23 + src/components/echarts/options/getNormalBar.js | 112 ++++++++++++ src/components/echarts/options/normalLine.js | 11 src/components/echarts/options/radiusBar.js | 2 src/views/moudle/bmsInf/apis.js | 12 + src/components/echarts/options/tools/getBarNum.js | 28 +++ src/views/battShow.vue | 189 +++++++++++++++++--- src/views/home.vue | 26 ++ src/components/echarts/hdwChart.vue | 3 src/views/user/js/dangerActModule.js | 1 17 files changed, 440 insertions(+), 62 deletions(-) diff --git a/src/assets/main.css b/src/assets/main.css index a01790f..7eb7eb6 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -5,4 +5,5 @@ } .full-height { height: 100%; + box-sizing: border-box; } diff --git a/src/components/dangerActBox.vue b/src/components/dangerActBox.vue index 6349ded..4110591 100644 --- a/src/components/dangerActBox.vue +++ b/src/components/dangerActBox.vue @@ -17,10 +17,16 @@ default: "" } }) + +const emit = defineEmits(['click']); +const handleClick = ()=>{ + emit('click'); +} + </script> <template> - <div class="danger-act-wrapper" :class="type"> + <div class="danger-act-wrapper" :class="type" @click="handleClick"> <div class="danger-act-icon"> <i class="iconfont" :class="icon"></i> </div> @@ -37,6 +43,10 @@ .danger-act-wrapper { padding: 8px; display: flex; + cursor: pointer; + &:hover { + background-color: #fafa5c50; + } .danger-act-icon { display: flex; padding: 4px 16px; diff --git a/src/components/echarts/hdwChart.vue b/src/components/echarts/hdwChart.vue index 1b80a8f..19d3ceb 100644 --- a/src/components/echarts/hdwChart.vue +++ b/src/components/echarts/hdwChart.vue @@ -78,7 +78,8 @@ defineExpose({ setOption, - resize + resize, + getChart }); </script> diff --git a/src/components/echarts/options/getNormalBar.js b/src/components/echarts/options/getNormalBar.js index 9c1e60b..6ac10fa 100644 --- a/src/components/echarts/options/getNormalBar.js +++ b/src/components/echarts/options/getNormalBar.js @@ -1,6 +1,114 @@ -const getNormalBar = ()=>{ - return { +import getMax from "./tools/getMax"; +import getMin from "./tools/getMin"; +const getNormalBar = (data)=>{ + const defaultOption = { + minRatio: 0, + maxRatio: 1.2, + grid: { + top: '15%', + right: '3%', + left: '10%', + bottom: '12%' + }, + min: 0, + max: 0, + maxColor: "#FF0000", + minColor: "#35f10a", + normalColor: "rgb(24, 166, 253)" + }; + let option = {...defaultOption, ...data}; + return { + option, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: option.grid, + xAxis: { + type: 'category', + axisLine: { + lineStyle: { + color: 'rgba(255,255,255,0.12)' + } + }, + axisLabel: { + color: '#e2e9ff', + fontSize: 14 + }, + }, + yAxis: { + type: 'value', + min(data) { + const min =data.min; + if(isNaN(min)) { + return 0; + }else { + return min * option.minRatio; + } + }, + max(data) { + const max = data.max; + if(isNaN(max)) { + return 1; + }else { + return (max * option.maxRatio).toHold(0); + } + }, + axisLabel: { + formatter: '{value}', + color: '#e2e9ff', + }, + axisLine: { + show: true, + lineStyle: { + color: 'rgba(255,255,255,0.12)' + } + }, + splitLine: { + lineStyle: { + color: 'rgba(255,255,255,0.12)' + } + } + }, + title: { + show: true, + text: "鏈�澶у��=0;鏈�灏忓��=0;骞冲潎鍊�=0", + x: "center", + textStyle: { + color: "#FFFFFF", + fontSize: "14", + }, + }, + series: [ + { + name: "", + data: [], + type: 'bar', + showBackground: true, + backgroundStyle: { + color: 'rgba(180, 180, 180, 0.2)' + }, + itemStyle: { + color(cData) { + if(option.max === Number(cData.data[1])) { + return option.maxColor; + }else if(option.min === Number(cData.data[1])) { + return option.minColor; + }else { + return option.normalColor; + } + } + }, + label: { + show: true, + position: "top", + color: "#FFFFFF" + } + } + ], } } diff --git a/src/components/echarts/options/horizontalTechnologyBar.js b/src/components/echarts/options/horizontalTechnologyBar.js index 4b7f9e2..24929ff 100644 --- a/src/components/echarts/options/horizontalTechnologyBar.js +++ b/src/components/echarts/options/horizontalTechnologyBar.js @@ -1,27 +1,36 @@ -const getHorizontalTechnologyOption = ()=> { +const getHorizontalTechnologyOption = (list)=> { let category= [ { name: "鍛婅1", - value: 2500 + value: 0 }, { name: "鍛婅2", - value: 8000 + value: 0 }, { name: "鍛婅3", - value: 3000 + value: 0 }, { name: "鍛婅4", - value: 3000 + value: 0 }, { name: "鍛婅5", - value: 3000 + value: 0 } ]; // 绫诲埆 - let total = 10000; // 鏁版嵁鎬绘暟 + let total = 10; // 鏁版嵁鎬绘暟 + + if(list && list.length !== 0) { + category = list; + total = 0; + for(let i=0; i<list.length; i++) { + total += Number(list[i].value); + } + } + let datas = []; category.forEach(value => { datas.push(value.value); diff --git a/src/components/echarts/options/normalLine.js b/src/components/echarts/options/normalLine.js index 67cf8aa..37e93e8 100644 --- a/src/components/echarts/options/normalLine.js +++ b/src/components/echarts/options/normalLine.js @@ -1,7 +1,7 @@ const getNormalLine = (data)=>{ const defaultOption = { minRatio: 0, - maxRatio: 1.2 + maxRatio: 1.1 }; const option = {...defaultOption, ...data}; return { @@ -35,14 +35,14 @@ }, }, }, - yAxis: { + yAxis: [{ type: 'value', min(data) { const min =data.min; if(isNaN(min)) { return 0; }else { - return min * option.minRatio; + return (min * option.minRatio).toHold(0); } }, max(data) { @@ -50,11 +50,10 @@ if(isNaN(max)) { return 1; }else { - return max * option.maxRatio; + return (max * option.maxRatio).toHold(0); } }, axisLabel: { - formatter: '{value}', color: '#e2e9ff', }, axisLine: { @@ -68,7 +67,7 @@ color: 'rgba(255,255,255,0.12)' } } - }, + }], series: [] } } diff --git a/src/components/echarts/options/radiusBar.js b/src/components/echarts/options/radiusBar.js index a532195..1fc8979 100644 --- a/src/components/echarts/options/radiusBar.js +++ b/src/components/echarts/options/radiusBar.js @@ -50,7 +50,7 @@ if(isNaN(max)) { return 1; }else { - return max * option.maxRatio; + return (max * option.maxRatio).toHold(0); } }, axisLabel: { diff --git a/src/components/echarts/options/tools/getBarNum.js b/src/components/echarts/options/tools/getBarNum.js new file mode 100644 index 0000000..6c24c76 --- /dev/null +++ b/src/components/echarts/options/tools/getBarNum.js @@ -0,0 +1,28 @@ +/** + * 鑾峰彇鏌辩姸鍥剧殑閲嶈鐨勬暟鎹� + * + * @param {[type]} data 鏌辩姸鍥炬暟鎹� + * + * @return {[type]} [return description] + */ +function getBarNum(data) { + let result = {}; + let arr = []; + let sum = 0; + data.forEach(item=> { + let val = Number(item[1]); + arr.push(val); + sum += val; + }); + + // 鑾峰彇骞冲潎鍊� + let avg = data.length>0?sum/data.length:0; + return { + min: arr.length>0?Math.min.apply(null, arr):0, + max: arr.length>0?Math.max.apply(null, arr):0, + sum: sum, + avg: avg.toHold(2), + } +} + +export default getBarNum; diff --git a/src/components/echarts/options/tools/getMax.js b/src/components/echarts/options/tools/getMax.js new file mode 100644 index 0000000..ca7b9bf --- /dev/null +++ b/src/components/echarts/options/tools/getMax.js @@ -0,0 +1,8 @@ +function getMax(list) { + let arr = list.map((item) => { + return item[1]; + }); + return Math.max.apply(null, arr); +} + +export default getMax; diff --git a/src/components/echarts/options/tools/getMin.js b/src/components/echarts/options/tools/getMin.js new file mode 100644 index 0000000..9d58783 --- /dev/null +++ b/src/components/echarts/options/tools/getMin.js @@ -0,0 +1,7 @@ +function getMin(list) { + let arr = list.map((item) => { + return item[1]; + }); + return Math.min.apply(null, arr); +} +export default getMin; diff --git a/src/views/battShow.vue b/src/views/battShow.vue index 3387134..c6f44d0 100644 --- a/src/views/battShow.vue +++ b/src/views/battShow.vue @@ -3,8 +3,16 @@ import ChartBox from "@/components/chartBox.vue"; import HdwChart from "@/components/echarts/hdwChart.vue"; import getNormalLine from "@/components/echarts/options/normalLine" -import {nextTick, onMounted, ref} from "vue"; +import {onMounted, ref} from "vue"; import getRadiusBarOption from "@/components/echarts/options/radiusBar"; +import carInfoModule from "@/views/moudle/battShow/carInfo"; +import battHistoryModule from "@/views/moudle/battShow/battHistory"; +import getDataIndex from "@/util/getDataIndex"; +import getNormalBar from "@/components/echarts/options/getNormalBar"; +import getMin from "@/components/echarts/options/tools/getMin"; +import getMax from "@/components/echarts/options/tools/getMax"; +import getBarNum from "@/components/echarts/options/tools/getBarNum"; +import * as echarts from 'echarts'; const carName = ref(""); const timeRange = ref(""); @@ -21,11 +29,7 @@ totalVolLine.value.resize(); } -import carInfoModule from "@/views/moudle/battShow/carInfo"; const {carList, getCarNames} = carInfoModule(); - -import battHistoryModule from "@/views/moudle/battShow/battHistory"; -import getDataIndex from "@/util/getDataIndex"; const { getBattHistory @@ -43,7 +47,13 @@ totalData = data; slideVal.value = 100; let currentDataIndex = getDataIndex(totalData.length, slideVal.value); - console.log(totalData[currentDataIndex]); + if(currentDataIndex !== -1 && totalData.length !== 0) { + setBarData(totalData[currentDataIndex]); + }else { + setBarData(-1) + } + + setLineData(data); }catch (e) { console.log(e); } @@ -53,51 +63,165 @@ const handleSlideInput = ()=>{ let currentDataIndex = getDataIndex(totalData.length, slideVal.value); - if(currentDataIndex !== -1) { - console.log(totalData[currentDataIndex]); + if(currentDataIndex !== -1 && totalData.length !== 0) { + setBarData(totalData[currentDataIndex]); + }else { + setBarData(-1); } } const formatTooltip = (val)=>{ let currentDataIndex = getDataIndex(totalData.length, slideVal.value); let rs = val+""; - if(currentDataIndex !== -1) { + if(currentDataIndex !== -1 && totalData.length !== 0) { let data = totalData[currentDataIndex]; return new Date(data.gatherTime).format("yyyy-MM-dd hh:mm:ss"); } return rs; } -onMounted(()=>{ +const tempBarOption = getNormalBar({ + grid: { + top: '15%', + right: '3%', + left: '5%', + bottom: '6%' + } +}); +const volBarOption = getNormalBar({ + grid: { + top: '15%', + right: '3%', + left: '5%', + bottom: '6%' + } +}); +const setBarData = (data)=>{ + tempBarOption.series[0].name = "鍗曚綋娓╁害"; + volBarOption.series[0].name = "鍗曚綋鐢靛帇"; + volBarOption.series[0].label.show = false; + if(data !== -1) { + let tempData = data.monomerTemp.split(",").map((item, key) => { + return ["#" + (key + 1), item] + }); + const tempNum = getBarNum(tempData); + tempBarOption.option.min = tempNum.min; + tempBarOption.option.max = tempNum.max; + tempBarOption.title.text = "鏈�澶у��="+tempNum.max+"鈩�;鏈�灏忓��="+tempNum.min+"鈩�;骞冲潎鍊�="+tempNum.avg+"鈩�" + tempBarOption.series[0].data = tempData; + let volData = data.monomerVol.split(",").map((item, key) => { + return ["#" + (key + 1), item] + }); + const volNum = getBarNum(volData); + volBarOption.option.min = volNum.min; + volBarOption.option.max = volNum.max; + volBarOption.title.text = "鏈�澶у��="+volNum.max+"V;鏈�灏忓��="+volNum.min+"V;骞冲潎鍊�="+volNum.avg+"V" + volBarOption.series[0].data = volData; + }else { + tempBarOption.series[0].data = []; + volBarOption.series[0].data = []; + } + tempBar.value.setOption(tempBarOption); + volBar.value.setOption(volBarOption); +} + +const alarmLineOption = getNormalLine({ + minRatio: 0.9 +}); +const totalVolLineOption = getNormalLine({ + minRatio: 0.9 +}); + +let lineData = { + times: [], + vol: [], + temp: [] +}; + +const setLineData = (data)=>{ + // 鍒濆鍖杔ineData + lineData = { + times: [], + vol: [], + temp: [] + }; + + // 閬嶅巻鏁版嵁 + for(let i=0; i<data.length; i++) { + let itemData = data[i]; + lineData.times.push(new Date(itemData.gatherTime).format("yyyy-MM-dd hh:mm:ss")); + // 鍗曚綋娓╁害 + itemData.monomerTemp.split(",").map((item, key)=>{ + if(lineData.temp[key] === undefined) { + lineData.temp[key] = []; + } + lineData.temp[key].push(item); + }); + + // 鍗曚綋鐢靛帇 + itemData.monomerVol.split(",").map((item, key)=>{ + if(lineData.vol[key] === undefined) { + lineData.vol[key] = []; + } + lineData.vol[key].push(item); + }); + } + + alarmLineOption.xAxis.data = lineData.times; + alarmLineOption.series = lineData.temp.map((item, key)=>{ + return { + name: '#'+(key+1), + type: 'line', + smooth: false, + symbolSize: 0, + data: item, + } + }); + alarmLine.value.setOption(alarmLineOption); + + totalVolLineOption.xAxis.data = lineData.times; + totalVolLineOption.tooltip.formatter = (params)=>{ + let res = params[0].name + '<br/>'; + res +='<table>' + params.forEach((item,key) => { + res += "<td style='padding: 2px'>"; + res += item.marker; + res += item.seriesName; + res += ' : ' + item.data + 'V'; + res += "</td>"; + if((key+1)%5 === 0) { + res += '<tr></tr>'; + } + }); + res +='<table>' + return res; + }; + totalVolLineOption.series = lineData.vol.map((item, key)=>{ + return { + name: '#'+(key+1), + type: 'line', + smooth: false, + symbolSize: 0, + data: item, + } + }); + totalVolLine.value.setOption(totalVolLineOption); +} +onMounted(()=>{ getCarNames(); - const tempBarOption = getRadiusBarOption({ - grid: { - top: '15%', - right: '3%', - left: '5%', - bottom: '5%' - } - }); tempBar.value.setOption(tempBarOption); - - const volBarOption = getRadiusBarOption({ - grid: { - top: '15%', - right: '3%', - left: '5%', - bottom: '5%' - } - }); volBar.value.setOption(volBarOption); - const alarmLineOption = getNormalLine(); - alarmLine.value.setOption(alarmLineOption); - const totalVolLineOption = getNormalLine(); + alarmLine.value.setOption(alarmLineOption); totalVolLine.value.setOption(totalVolLineOption); + echarts.connect([ + alarmLine.value.getChart(), + totalVolLine.value.getChart() + ]); resize(); }); </script> @@ -166,7 +290,7 @@ <div class="batt-chart-item left"> <flex-box> <div class="flex-box-content"> - <chart-box title="鍛婅浜嬩欢"> + <chart-box title="鎬诲崟浣撴俯搴�"> <hdw-chart ref="alarmLine"></hdw-chart> </chart-box> </div> @@ -191,7 +315,6 @@ @input="handleSlideInput"></el-slider> </div> </div> - </div> </div> </div> @@ -242,7 +365,7 @@ } } .batt-chart-list-footer { - padding: 4px 16px; + padding: 4px 8px; } } .flex-box-content { diff --git a/src/views/home.vue b/src/views/home.vue index 85b8486..60c57a6 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -214,6 +214,28 @@ getTotalVideoNum } = totalVideoNumModule(); + +import { + bmsStaticAlarmModule +} from "@/views/moudle/bmsInf/bmsInf"; + +const { + getBmsStaticAlarm +} = bmsStaticAlarmModule(); + +let alarmBarOption = getHorizontalTechnologyOption(); +const searchBmsStaticAlarm = async ()=>{ + let res = await getBmsStaticAlarm(); + + alarmBarOption = getHorizontalTechnologyOption(res.map(item=>{ + return { + name: item.bmsAlarmName, + value: item.num + } + })); + alarmBar.value.setOption(alarmBarOption); +} + /** * 鏌ヨ杞﹁締锛岀數姹狅紝鎽勫儚澶达紝鍛婅鐨勫浘琛ㄦ暟鎹� */ @@ -226,6 +248,8 @@ searchRecentDaysBattNum(); getTotalBattNum(); + + searchBmsStaticAlarm(); } onMounted(()=>{ @@ -237,10 +261,8 @@ battGauge.value.setOption(battGaugeOption); battBar.value.setOption(battBarOption); - searchEchartsData(); - const alarmBarOption = getHorizontalTechnologyOption(); alarmBar.value.setOption(alarmBarOption); }); </script> diff --git a/src/views/mainLayout/index.vue b/src/views/mainLayout/index.vue index 706da9d..b6bea0a 100644 --- a/src/views/mainLayout/index.vue +++ b/src/views/mainLayout/index.vue @@ -90,7 +90,7 @@ </div> </div> <div class="main-layout-content"> - <div class="full-height"> + <div class="full-height" style="overflow-x: hidden"> <div class="main-layout-content-wrapper"> <div class="main-layout-content-header"> <page-header :is-collapse="isCollapse"></page-header> @@ -146,6 +146,7 @@ } .main-layout-content { flex: 1; + overflow-y: auto; } } .main-layout-content-wrapper { @@ -155,16 +156,13 @@ .main-layout-content-body { position: relative; flex: 1; - overflow-y: auto; background-color: #FFFFFF; - box-shadow: 0 0 3px 0 rgba(0,0,0,.1); .body-absolute { position: absolute; top: 0; left: 0; right: 0; bottom: 0; - overflow-x: hidden; } } } diff --git a/src/views/moudle/bmsInf/apis.js b/src/views/moudle/bmsInf/apis.js new file mode 100644 index 0000000..cdcd28a --- /dev/null +++ b/src/views/moudle/bmsInf/apis.js @@ -0,0 +1,12 @@ +import axios from "@/assets/js/axios"; + +/** + * 缁熻BMS鍛婅淇℃伅 + * @return {Promise<axios.AxiosResponse<any>> | *} + */ +export const searchBmsAlarm = ()=>{ + return axios({ + method: "GET", + url: "/monitor/bmsAlamMonitor/slectStaticBms", + }); +} diff --git a/src/views/moudle/bmsInf/bmsInf.js b/src/views/moudle/bmsInf/bmsInf.js new file mode 100644 index 0000000..46ca419 --- /dev/null +++ b/src/views/moudle/bmsInf/bmsInf.js @@ -0,0 +1,27 @@ +import { + searchBmsAlarm +} from "./apis" +export const bmsStaticAlarmModule = ()=>{ + /** + * 缁熻BMS鍛婅淇℃伅 + * @return {Promise<*[]>} + */ + const getBmsStaticAlarm = async ()=>{ + try{ + const res = await searchBmsAlarm(); + const rs = res.data; + let data = []; + if(rs.code === 1) { + data = rs.data; + } + return data; + }catch (e) { + console.log(e); + return []; + } + } + + return { + getBmsStaticAlarm + } +} diff --git a/src/views/user/drivingAnalysis.vue b/src/views/user/drivingAnalysis.vue index bfe36a4..555bfc3 100644 --- a/src/views/user/drivingAnalysis.vue +++ b/src/views/user/drivingAnalysis.vue @@ -28,6 +28,11 @@ alarmLine.value.setOption(alarmLineOption); } +const photo = ref(videoContent); +const dangerBoxClick = (data)=>{ + photo.value = data.photo; +} + onMounted(()=>{ setAlarmLine(); setLastAlarm(); @@ -47,6 +52,7 @@ <div class="danger-act-container-absolute"> <danger-act-box v-for="(item, key) in dangerList" :key="'key'+key" + @click="dangerBoxClick(item)" :name="item.name" :time="item.time" :icon="item.icon" :type="item.type"></danger-act-box> </div> @@ -59,7 +65,11 @@ <div class="content-wrapper middle"> <div class="video-wrapper"> <flex-box> - <img class="video-img" :src="videoContent" alt=""> + <div class="position-relative"> + <div class="position-absolute"> + <img class="video-img" :src="photo" alt=""> + </div> + </div> </flex-box> </div> <div class="alarm-line-wrapper"> @@ -199,10 +209,6 @@ overflow-y: auto; } } -.video-img { - width: auto; - height: 100%; -} .risk-act-wrapper { display: flex; @@ -246,4 +252,22 @@ } } } + +.position-relative { + position: relative; + height: 100%; + .position-absolute { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + .video-img { + width: 100%; + height: 100%; + } + } +} </style> diff --git a/src/views/user/js/dangerActModule.js b/src/views/user/js/dangerActModule.js index d36b2e8..1ec3ac1 100644 --- a/src/views/user/js/dangerActModule.js +++ b/src/views/user/js/dangerActModule.js @@ -42,6 +42,7 @@ const setLastAlarm = async ()=> { dangerList.value = await searchLastAlarmList(); + console.log(dangerList.value) } return { -- Gitblit v1.9.1