zhaoqiang
/
v3tianjin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

master
zhaoqiang 2024-07-14 15:15:17 +08:00
parent f0a2c23a87
commit 9f49493d83
3 changed files with 292 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/hooks/handleFun.ts
View File

@ -1,5 +1,6 @@
// 处理一些常用的方法 // 处理一些常用的方法
// 处理单位换算 // 处理单位换算
export function handleUnit(data) { export function handleUnit(data) {
if (Number(data) > 10000) { if (Number(data) > 10000) {
@ -8,3 +9,31 @@ export function handleUnit(data) {
return data return data
} }
} }
// 处理echarts数据
export function handleEchartsData(data) {
// 间隔可以设置成动态的
let timeArray = [];
for (let hour = 0; hour < 24; hour++) {
for (let minute = 0; minute < 60; minute += 5) {
let timeString = (hour < 10 ? '0' + hour : hour) + ':' + (minute < 10 ? '0' + minute : minute);
timeArray.push(
{ datetime: timeString, measValue: '-' }
);
}
}
timeArray.forEach(item => {
data.forEach(ite => {
let iteTime = ite.datetime.split(' ')[1].split(':')[0] + ':' + ite.datetime.split(' ')[1].split(':')[1]
if (iteTime === item.datetime) {
item.measValue =ite.measValue
}
})
})
return timeArray
}

41
src/views/pages/homePage/runListenPage.vue
View File

@ -20,17 +20,17 @@
<div class="source_echart"> <div class="source_echart">
<div class="tabDate"> <div class="tabDate">
<div :class="[ <div :class="[
sourcetabDateFlag === item.id sourcetabDateFlagOne === item.id
? 'tab_active' ? 'tab_active'
: 'tab_default', : 'tab_default',
'tab', 'tab',
]" v-for="item in sourceEchart" @click="sourcehandleTabDate(item)"> ]" v-for="(item,index) in sourceEchart" @click="sourcehandleTabDate(item)" :key="index">
{{ item.name }} {{ item.name }}
</div> </div>
</div> </div>
<div class="source_echart_box"> <div class="source_echart_box">
<!--光伏曲线 --> <!--光伏曲线 -->
<source_Photovoltaic_echart v-if="sourcetabDateFlag === 1"></source_Photovoltaic_echart> <source_Photovoltaic_echart v-if="sourcetabDateFlagOne === 1"></source_Photovoltaic_echart>
<!-- 厂站曲线 --> <!-- 厂站曲线 -->
<source_factoryStation_echart v-else></source_factoryStation_echart> <source_factoryStation_echart v-else></source_factoryStation_echart>
</div> </div>
@ -164,7 +164,7 @@
<div class="key">&nbsp;线路重过载&nbsp;:&nbsp;</div> <div class="key">&nbsp;线路重过载&nbsp;:&nbsp;</div>
</div> </div>
<div class="val"> <div class="val">
<div class="ratekw">&nbsp;2</div> <div class="ratekw">&nbsp;{{networkSonData.lineData.length|| 0}}</div>
<span></span> <span></span>
</div> </div>
</div> </div>
@ -174,7 +174,7 @@
<div class="key">&nbsp;台区重过载&nbsp;:&nbsp;</div> <div class="key">&nbsp;台区重过载&nbsp;:&nbsp;</div>
</div> </div>
<div class="val"> <div class="val">
<div class="ratekw">&nbsp;3</div> <div class="ratekw">&nbsp;{{networkSonData.zoneAreaData.length|| 0}}</div>
<span></span> <span></span>
</div> </div>
</div> </div>
@ -192,9 +192,9 @@
</div> </div>
<div class="source_echart_box"> <div class="source_echart_box">
<!--光伏曲线 --> <!--光伏曲线 -->
<source_Photovoltaic_echart_Line v-if="sourcetabDateFlag === 1"></source_Photovoltaic_echart_Line> <source_Photovoltaic_echart_Line :paramsData="networkSonData.lineData" v-if="sourcetabDateFlag === 1"></source_Photovoltaic_echart_Line>
<!-- 厂站曲线 --> <!-- 厂站曲线 -->
<source_Photovoltaic_echart_Line v-else></source_Photovoltaic_echart_Line> <source_Photovoltaic_echart_Line :paramsData="networkSonData.zoneAreaData" v-else></source_Photovoltaic_echart_Line>
</div> </div>
<!-- <div class="line"> <!-- <div class="line">
<img <img
@ -355,6 +355,7 @@ import storage_echart from './oneLine.vue'
import threeEchart from './3Dechart.vue' import threeEchart from './3Dechart.vue'
import { alert_api, statInfo_api, runAlarm_api } from '@/api/homePage/SoureceApi' import { alert_api, statInfo_api, runAlarm_api } from '@/api/homePage/SoureceApi'
import { handleEchartsData } from '@/hooks/handleFun'
onMounted(() => { onMounted(() => {
getStatInfo() getStatInfo()
@ -768,7 +769,8 @@ let runNetworkFlag = ref(true)
let runStorageFlag = ref(true) let runStorageFlag = ref(true)
// 源 // 源
// 切换tabDate // 切换tabDate
let sourcetabDateFlag = ref(1) let sourcetabDateFlag = ref(0)
let sourcetabDateFlagOne = ref(1)
let sourceEchart = reactive([ let sourceEchart = reactive([
{ {
id: 1, id: 1,
@ -925,8 +927,27 @@ let networkSonData = reactive<any>({
let getRunAlarm = () => { let getRunAlarm = () => {
runAlarm_api({ runAlarm_api({
orgID: '8af8470a47aad8e20147aad92e400335' orgID: '8af8470a47aad8e20147aad92e400335'
}).then(res => { }).then((res: any) => {
console.log(res, '88888889999') // 线
res?.data?.feeder.forEach((item: any) => {
let result = handleEchartsData(item?.loadRate)
networkSonData.lineData.push({
mrid: item.mrid,
name: item.name,
data: result
})
})
// 台区
res?.data?.transformer.forEach((item: any) => {
let result = handleEchartsData(item?.loadRate)
networkSonData.zoneAreaData.push({
mrid: item.mrid,
name: item.name,
data: result
})
})
sourcetabDateFlag.value = 1
console.log(networkSonData.lineData, networkSonData.zoneAreaData)
}) })
} }
// //

205
src/views/pages/homePage/threeLine_Line.vue
View File

@ -3,164 +3,179 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { import { ref, inject, onBeforeUnmount, getCurrentInstance, onMounted, watchEffect } from 'vue'
ref, import transformFontSize from '@/hooks/transFormSize.ts'
inject, import 'echarts/lib/component/dataZoom'
onBeforeUnmount,
getCurrentInstance,
onMounted,
watchEffect,
} from "vue";
import transformFontSize from "@/hooks/transFormSize.ts";
import "echarts/lib/component/dataZoom";
onMounted(() => { onMounted(() => {
drawOneLine(); drawOneLine()
}); })
const props = defineProps<{
paramsData: any
}>()
// 获取echart挂载的DOM节点 // 获取echart挂载的DOM节点
const ThreeLine: any = ref(); const ThreeLine: any = ref()
// 获取当前组件实例 // 获取当前组件实例
const { proxy }: any = getCurrentInstance(); const { proxy }: any = getCurrentInstance()
const drawOneLine = () => { const drawOneLine = () => {
let myChart = proxy.$echarts.init(ThreeLine.value); let legendData: any = []
let xData: any = []
let yData1: any = []
let yData2: any = []
let yData3: any = []
props.paramsData &&
props.paramsData.forEach((item,index) => {
legendData.push(item.name+index)
})
console.log(props.paramsData)
myChart.clear(); props.paramsData &&
props.paramsData[0]?.data.forEach(item => {
xData.push(item.datetime)
yData1.push(item.measValue)
})
props.paramsData &&
props.paramsData[1]?.data.forEach(item => {
yData2.push(item.measValue)
})
props.paramsData &&
props.paramsData[2]?.data.forEach(item => {
yData3.push(item.measValue)
})
console.log(legendData, xData, yData1, yData2, yData3, 'props.paramsData')
let myChart = proxy.$echarts.init(ThreeLine.value)
myChart.clear()
const option = { const option = {
tooltip: { tooltip: {
trigger: "axis", trigger: 'axis',
// axisPointer: { type: 'cross' } // axisPointer: { type: 'cross' }
textStyle: { textStyle: {
color: "#FFFFFF", color: '#FFFFFF'
}, },
// padding: transformFontSize(15), // padding: transformFontSize(15),
backgroundColor: "rgba(0,163,166,.9)", //设置自定义背景 backgroundColor: 'rgba(0,163,166,.9)', //设置自定义背景
borderColor: "rgba(0,163,166,.9)", borderColor: 'rgba(0,163,166,.9)',
borderRadius: 5, borderRadius: 5,
formatter: function (param: any) { formatter: function (param: any) {
let str = ` let str = `
<div style="width:100%:height:100%"> <div style="width:100%:height:100%">
<div style="display:flex;justify-content:space-between;"> ${ <div style="display:flex;justify-content:space-between;"> ${param[0].name.split(' ')[0]}</div>
param[0].name.split(" ")[0]
}</div>
${getDom(param)} ${getDom(param)}
</div>`; </div>`
function getDom(param: any) { function getDom(param: any) {
let newStr = ""; let newStr = ''
param.forEach((item: any) => { param.forEach((item: any) => {
newStr += `<div style="display:flex;"><div>${ newStr += `<div style="display:flex;"><div>${item.seriesName}负荷：</div><div>${item.value === undefined ? '0' : item.value}kW</div></div>`
item.seriesName })
}负荷：</div><div>${ return newStr
item.value === undefined ? "0" : item.value }
}kW</div></div>`; return str
});
return newStr;
} }
return str;
},
}, },
legend: { legend: {
top: "10%", top: '10%',
right: "0%", right: '0%',
orient: "vertical", orient: 'vertical',
data: ["55607", "55608", "55604"], data: legendData,
itemWidth: transformFontSize(30), itemWidth: transformFontSize(30),
itemHeight: transformFontSize(12), itemHeight: transformFontSize(12),
itemGap: transformFontSize(8), itemGap: transformFontSize(8),
textStyle: { textStyle: {
fontSize: transformFontSize(30), fontSize: transformFontSize(30),
color: "#FFFFFF", color: '#FFFFFF'
}, }
}, },
grid: { grid: {
top: "25%", top: '25%',
left: "10%", left: '10%',
right: "8%", right: '8%',
bottom: "13%", bottom: '13%'
}, },
xAxis: { xAxis: {
type: "category", type: 'category',
axisTick: { axisTick: {
show: false, show: false,
alignWithLabel: true, alignWithLabel: true
}, },
boundaryGap: false, boundaryGap: false,
axisLabel: { axisLabel: {
color: "#fff", color: '#fff',
fontSize: transformFontSize(35), fontSize: transformFontSize(35),
padding: [0, 0, 0, 30], padding: [0, 0, 0, 30]
// formatter: function (param: any) { // formatter: function (param: any) {
// return param.split(' ')[1].split(':')[0] + ':' + param.split(' ')[1].split(':')[1] // return param.split(' ')[1].split(':')[0] + ':' + param.split(' ')[1].split(':')[1]
// }, // },
}, },
offset: transformFontSize(15), offset: transformFontSize(15),
data: ["03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "24:00"], data: xData
}, },
yAxis: { yAxis: {
splitLine: { splitLine: {
show: false, show: false
}, },
axisLine: { axisLine: {
show: true, //y轴轴线 show: true //y轴轴线
}, },
type: "value", type: 'value',
name: "%", name: '%',
min: 0, min: 0,
max: 100, max: 100,
nameTextStyle: { nameTextStyle: {
//y轴name的颜色 //y轴name的颜色
color: "#fff", color: '#fff',
fontSize: transformFontSize(35), fontSize: transformFontSize(35),
padding: [0, 40, 10, 0], padding: [0, 40, 10, 0]
}, },
position: "left", position: 'left',
offset: transformFontSize(15), offset: transformFontSize(15),
axisLabel: { axisLabel: {
//刻度标签文字的颜色大小 //刻度标签文字的颜色大小
color: "#fff", color: '#fff',
fontSize: transformFontSize(35), fontSize: transformFontSize(35),
formatter: "{value}", formatter: '{value}'
}, }
}, },
series: [ series: [
{ {
name: "55607", name: legendData[0],
type: "line", type: 'line',
barWidth: 2, // 柱子宽度核心代码 barWidth: 2, // 柱子宽度核心代码
smooth: true, smooth: true,
showSymbol: false, showSymbol: false,
itemStyle: { itemStyle: {
color: "rgba(18, 231, 227, 1)", color: 'rgba(18, 231, 227, 1)'
}, },
areaStyle: { areaStyle: {
normal: { normal: {
color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: "rgba(18, 231, 227, 0.4)", color: 'rgba(18, 231, 227, 0.4)'
}, },
{ {
offset: 1, offset: 1,
color: "rgba(18, 231, 227, 0.01)", color: 'rgba(18, 231, 227, 0.01)'
}
])
}
}, },
]), data: yData1
},
},
data: [20, 42, 41, 24, 40, 30, 10],
}, },
{ {
name: "55608", name: legendData[1],
type: "line", type: 'line',
barWidth: 2, // 柱子宽度核心代码 barWidth: 2, // 柱子宽度核心代码
smooth: true, smooth: true,
showSymbol: false, showSymbol: false,
itemStyle: { itemStyle: {
color: "rgba(251, 187, 111, 1)", color: 'rgba(251, 187, 111, 1)'
}, },
areaStyle: { areaStyle: {
normal: { normal: {
@ -168,27 +183,27 @@
{ {
offset: 0, offset: 0,
color: "rgba(251, 187, 111, 0.4)", color: 'rgba(251, 187, 111, 0.4)'
}, },
{ {
offset: 1, offset: 1,
color: "rgba(251, 187, 111, 0.01)", color: 'rgba(251, 187, 111, 0.01)'
}
])
}
}, },
]), data: yData2
},
},
data: [30, 12, 11, 24, 20, 30, 30],
}, },
{ {
name: "55604", name: legendData[2],
type: "line", type: 'line',
barWidth: 2, // 柱子宽度核心代码 barWidth: 2, // 柱子宽度核心代码
smooth: true, smooth: true,
showSymbol: false, showSymbol: false,
itemStyle: { itemStyle: {
color: "rgba(107, 255, 130, 1)", color: 'rgba(107, 255, 130, 1)'
}, },
areaStyle: { areaStyle: {
normal: { normal: {
@ -196,28 +211,28 @@
{ {
offset: 0, offset: 0,
color: "rgba(107, 255, 130, 0.4)", color: 'rgba(107, 255, 130, 0.4)'
}, },
{ {
offset: 1, offset: 1,
color: "rgba(107, 255, 130, 0.01)", color: 'rgba(107, 255, 130, 0.01)'
}
])
}
}, },
]), data: yData3
}, }
}, ]
data: [40, 18, 19, 23, 29, 33, 31], }
}, myChart.setOption(option)
],
};
myChart.setOption(option);
// 根据页面大小自动响应图表大小 // 根据页面大小自动响应图表大小
window.addEventListener("resize", function () { window.addEventListener('resize', function () {
myChart.resize(); myChart.resize()
}); })
}; }
</script> </script>
<style scoped> <style scoped>