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

update

master
zhaoqiang 2024-07-14 22:35:44 +08:00
parent 43f7c19691
commit 90f745f6e0
7 changed files with 7360 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/api/carPage/index.ts
View File

@ -1,5 +1,7 @@
import request from "@/utils/http/request";
// 曲线
export function powerCurve_api(data: any) {
return request({
url: "/api/wwpm/biz/v1/pipe/power_curve",
@ -8,5 +10,24 @@ export function powerCurve_api(data: any) {
});
}
// 台区 重过载
export function transformerOverloadCount_api(data: any) {
return request({
url: "/api/wwpm/biz/v1/transformer_overload_count",
method: "POST",
data,
});
}
// 充电桩列表 运行状态
export function running_api(data: any) {
return request({
url: "/api/wwpm/biz/v1/pipe/running",
method: "POST",
data,
});
}

6054
src/assets/json/result2_copy.json Normal file
View File

File diff suppressed because it is too large Load Diff

1058
src/assets/json/线路二.js Normal file
View File

File diff suppressed because one or more lines are too long

6
src/hooks/handleFun.ts
View File

@ -14,18 +14,18 @@ export function handleUnit(data) {
// 处理echarts数据
export function handleEchartsData(data) {
export function handleEchartsData(data, value) {
// 间隔可以设置成动态的
let timeArray = [];
for (let hour = 0; hour < 24; hour++) {
for (let minute = 0; minute < 60; minute += 5) {
for (let minute = 0; minute < 60; minute += value) {
let timeString = (hour < 10 ? '0' + hour : hour) + ':' + (minute < 10 ? '0' + minute : minute);
timeArray.push(
{ datetime: timeString, measValue: '-' }
);
}
}
console.log(timeArray)
timeArray.forEach(item => {
data.forEach(ite => {
let iteTime = ite.datetime.split(' ')[1].split(':')[0] + ':' + ite.datetime.split(' ')[1].split(':')[1]

3
src/views/pages/OpticalStoragePage/index.vue
View File

@ -311,10 +311,11 @@ import svgHtml15 from '@/assets/json/svgzhan15.js'
import svgHtml26 from '@/assets/json/svgzhan26.js'
import svgHtml23 from '@/assets/json/svgye23.js'
import svgHtml311 from '@/assets/json/svgye31.js'
import testSvg from '@/assets/json/线路二.js'
// import svgJSON from "@/assets/json/result1.json";
import svgJSON2 from '@/assets/json/nw-result1.json'
import svgJSON from '@/assets/json/result2.json' //555
import svgJSON from '@/assets/json/result2_copy.json' //555
import svgJSONye23 from '@/assets/json/ye23.json' //555
import svgJSONye31 from '@/assets/json/ye31.json' //555
import svgJSONying31 from '@/assets/json/ying31.json' //555

92
src/views/pages/carPage/index.vue
View File

@ -64,7 +64,7 @@
<div class="bottom">
<span class="fs35">重过载</span>
<div class="val fs40">
<div class="blueShadow">2</div>
<div class="blueShadow">{{transformerOverloadCount}}</div>
<!-- <span class="blue">个</span> -->
</div>
</div>
@ -72,7 +72,7 @@
</div>
</div>
<div class="load_manage_echart">
<load_echart :eName="eName1"></load_echart>
<load_echart v-if="carRightData.echartsData.length>0" :paramsData="carRightData.echartsData"></load_echart>
</div>
</div>
@ -82,7 +82,7 @@
<div class="box_d">
<div class="yuand"></div>
<span>充电桩数量：</span>
<div class="number c-blue">{{ chargingList.length }}</div>
<div class="number c-blue">{{ carRightData.chargingList.length }}</div>
</div>
<div class="box_d">
<div class="yuand"></div>
@ -101,40 +101,40 @@
</div> -->
</div>
<div class="list_content">
<div class="c_info" v-for="item in chargingList">
<div class="c_info" v-for="(item,index) in carRightData.chargingList" :key="index">
<img src="@/assets/images/device/chongdainzhaung.png" alt="" />
<div class="r_info">
<div class="t_info">
<span class="c-blue">{{ item.c_name }}</span>
<span class="c-blue">{{ item.name }}</span>
<div class="tval">
<div :class="[
item.c_status === '充电中'
item.status === '1'
? 'b-green'
: item.c_status === '未使用'
: item.status === '0'
? 'b-gary'
: 'b-yellow',
'yuand',
]"></div>
<div :class="[
item.c_status === '充电中'
item.status === '1'
? 'c-green'
: item.c_status === '未使用'
: item.status === '0'
? 'c-gary'
: 'c-yellow',
]">
{{ item.c_status }}
{{ item.status === '1' ? '充电中' : '未充电'}}
</div>
</div>
</div>
<div class="b_info">
<div class="load">
负荷：
<span>{{ item.c_load }}kW</span>
<span>{{ item.rated_power }}kW</span>
</div>
<div class="total">
<!-- <div class="total">
总充电量：
<span>{{ item.c_total }}kWh</span>
</div>
</div> -->
</div>
</div>
</div>
@ -265,10 +265,16 @@ import load_c_echart from './load_c_echart.vue'
import load_info_echart from './load_info_echart.vue'
import cdz_echart from './cdz_echart.vue'
import carTree from '@/views/commonPage/carTree.vue'
import { powerCurve_api } from '@/api/carPage/index'
import { powerCurve_api, transformerOverloadCount_api, running_api } from '@/api/carPage/index'
import { handleEchartsData } from '@/hooks/handleFun'
onMounted(() => {
// 获取右侧数据
getPowerCurve_api()
// 获取台区 重过载
getTransformerOverloadCount_api()
// 获取充电桩列表
getRunning_api()
})
// 车网互动专题切换栏
@ -409,23 +415,6 @@ const handleCurrentChange = (page: number) => {
const hideLeft = ref<boolean>(true) //默认页面显示
const hideRight = ref<boolean>(true) //默认页面显示 右边
interface ChargingList {
c_name: string
c_status: string
c_load: string
c_total: string
}
// 右侧充电桩运行状态
let chargingList = reactive<ChargingList[]>([
{ c_name: '充电桩1号', c_status: '充电中', c_load: '30', c_total: '1475' },
{ c_name: '充电桩4号', c_status: '充电中', c_load: '45', c_total: '235' },
{ c_name: '充电桩2号', c_status: '充电中', c_load: '50', c_total: '675' },
{ c_name: '充电桩7号', c_status: '未充电', c_load: '32', c_total: '244' },
{ c_name: '充电桩12号', c_status: '未充电', c_load: '48', c_total: '368' },
{ c_name: '充电桩3号', c_status: '未充电', c_load: '56', c_total: '123' },
{ c_name: '充电桩3号', c_status: '未充电', c_load: '23', c_total: '566' }
])
// 组件卸载调用
onUnmounted(() => {
hideLeft.value = false
@ -453,12 +442,45 @@ const handleThree = val => {
//
//
//
interface ChargingList {
c_name: string
c_status: string
c_load: string
c_total: string
}
let carRightData = reactive({
echartsData: [],
chargingList: [] // 右侧充电桩运行状态
})
let transformerOverloadCount = ref<number>(0)
// 获取曲线
let getPowerCurve_api = () => {
powerCurve_api({
mrid: '1242690000004712'
}).then((res: any) => {
console.log(res,'resresres');
res?.data.forEach((item: any) => {
item.datetime = item.dateTime
})
let result = handleEchartsData(res.data, 60)
carRightData.echartsData = result
console.log(result, 'resresres')
})
}
// 获取台区 重过载
let getTransformerOverloadCount_api = () => {
transformerOverloadCount_api({
orgID: '8af8470a47aad8e20147aad92e400335'
}).then((res: any) => {
transformerOverloadCount.value = res.data
})
}
// 获取充电桩列表
let getRunning_api = () => {
running_api({
orgID: '8af8470a47aad8e20147aad92e400335'
}).then((res: any) => {
carRightData.chargingList = res.data
})
}
//
@ -1021,7 +1043,7 @@ const styleVar = computed(() => {
}
}
.load_runstatus_box {
height: 100%;
height: 60%;
width: 95%;
.yuand {
@ -1072,7 +1094,7 @@ const styleVar = computed(() => {
margin-top: 2%;
// height: changeHeight(370);
height: 64%;
height: 85%;
padding-left: changeHeight(44);
overflow: auto;

335
src/views/pages/carPage/load_echart.vue
View File

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