From 75f043dfa6660716364e66ee0b3cf99f44255686 Mon Sep 17 00:00:00 2001
From: DYL0109 <dn18191638832@163.com>
Date: 星期三, 16 四月 2025 19:20:36 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/develop1.0' into dyl_dev
---
zhitan-vue/src/views/deepanalysis/deepAnalysis.vue | 325 ++++++++++++++++++++++++++++++++++-------------------
1 files changed, 206 insertions(+), 119 deletions(-)
diff --git a/zhitan-vue/src/views/deepanalysis/deepAnalysis.vue b/zhitan-vue/src/views/deepanalysis/deepAnalysis.vue
index 11e5ea0..24eeeae 100644
--- a/zhitan-vue/src/views/deepanalysis/deepAnalysis.vue
+++ b/zhitan-vue/src/views/deepanalysis/deepAnalysis.vue
@@ -4,20 +4,37 @@
<el-form :model="form" ref="queryRef" :inline="true" label-width="80px">
<el-form-item label="鑳芥簮绫诲瀷" prop="energyType">
<el-select v-model="form.energyType" placeholder="璇烽�夋嫨鑳芥簮绫诲瀷">
- <el-option :label="item.enername" :value="item.enersno" v-for="item in energyTypeList"
- :key="item.enersno" />
+ <el-option
+ :label="item.enername"
+ :value="item.enersno"
+ v-for="item in energyTypeList"
+ :key="item.enersno"
+ />
</el-select>
</el-form-item>
- <el-form-item label="鏈熼棿" prop="timeType" >
+ <el-form-item label="鏈熼棿" prop="timeType">
<el-select v-model="form.timeType" placeholder="鏈熼棿" clearable style="width: 120px" @change="handleTimeType">
<el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="鏃堕棿閫夋嫨" prop="dataTime">
- <el-date-picker v-if="form.type == 1" v-model="form.dataTime" type="year" />
- <el-date-picker v-else-if="form.type == 2" v-model="form.dataTime" type="month" format="YYYY-MM"
- value-format="YYYY-MM" />
- <el-date-picker v-else v-model="form.dataTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
+ <el-date-picker v-if="form.timeType == 'YEAR'" v-model="form.dataTime" type="year" :clearable="false" />
+ <el-date-picker
+ v-else-if="form.timeType == 'MONTH'"
+ v-model="form.dataTime"
+ type="month"
+ format="YYYY-MM"
+ value-format="YYYY-MM"
+ :clearable="false"
+ />
+ <el-date-picker
+ v-else
+ v-model="form.dataTime"
+ :clearable="false"
+ type="date"
+ format="YYYY-MM-DD"
+ value-format="YYYY-MM-DD"
+ />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button>
@@ -46,186 +63,255 @@
</div>
</template>
<script setup>
-import useSettingsStore from '@/store/modules/settings'
-import { listEnergyTypeList } from "@/api/modelConfiguration/energyType";
+import useSettingsStore from "@/store/modules/settings"
+import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
+import { getFlowCharts } from "@/api/energyAnalysis/energyAnalysis"
const settingsStore = useSettingsStore()
-import * as echarts from 'echarts';
+import * as echarts from "echarts"
let { proxy } = getCurrentInstance()
-import { onMounted } from 'vue';
-const { period } = proxy.useDict("period");
+import { nextTick, onMounted } from "vue"
+const { period } = proxy.useDict("period")
+console.log(period)
let form = ref({
energyType: null,
timeType: null,
dataTime: null,
})
function handleTimeType(e) {
- form.value.timeType = e;
- form.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD");
+ form.value.timeType = e
+ form.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
+ getData()
}
-const energyTypeList = ref();
+const energyTypeList = ref()
function getEnergyTypeList() {
listEnergyTypeList().then((res) => {
- energyTypeList.value = res.data;
+ energyTypeList.value = res.data
form.value.energyType = energyTypeList.value[0].enersno
- handleTimeType(period.value[0].value);
- });
+ handleTimeType(period.value[0].value)
+ })
}
-getEnergyTypeList()
function handleSelect(e) {
console.log(e, form.value.type)
if (form.value.type == 1) {
- form.value.time = proxy.dayjs().format('YYYY')
+ form.value.time = proxy.dayjs().format("YYYY")
} else if (form.value.type == 2) {
- form.value.time = proxy.dayjs().format('YYYY-MM')
+ form.value.time = proxy.dayjs().format("YYYY-MM")
} else {
- form.value.time = proxy.dayjs().format('YYYY-MM-DD')
+ form.value.time = proxy.dayjs().format("YYYY-MM-DD")
}
}
-function handleQuery() { }
+function handleQuery() {
+ getData()
+}
function resetQuery() {
form.value = {
type: 1,
- time: proxy.dayjs().format('YYYY'),
+ time: proxy.dayjs().format("YYYY"),
}
}
-import icon1 from '@/assets/images/period/icon1.png'
-import icon2 from '@/assets/images/period/icon2.png'
-import icon3 from '@/assets/images/period/icon3.png'
-import icon4 from '@/assets/images/period/icon4.png'
-import icon5 from '@/assets/images/period/icon5.png'
+import icon1 from "@/assets/images/period/icon1.png"
+import icon2 from "@/assets/images/period/icon2.png"
+import icon3 from "@/assets/images/period/icon3.png"
+import icon4 from "@/assets/images/period/icon4.png"
+import icon5 from "@/assets/images/period/icon5.png"
const periodList = ref([
{
icon: icon1,
color: "#3371eb",
title: "绱鑳借��",
- data: '1000.1 m鲁'
+ data: "1000.1 m鲁",
},
{
icon: icon3,
color: "#ff6200",
title: "鍒嗚〃鑳借��",
- data: ' 0 m鲁'
+ data: " 0 m鲁",
},
{
icon: icon4,
color: "#ffce0c",
title: "鎹熷け閲�",
- data: '1000.1 m鲁'
+ data: "1000.1 m鲁",
},
{
icon: icon5,
color: "#78e801",
title: "鎹熷け姣斾緥",
- data: '100.00%'
+ data: "100.00%",
},
])
-watch(() => settingsStore.sideTheme, (val) => {
- getChart()
-})
+const flowData = ref({})
+function getData() {
+ getFlowCharts({
+ energyType: form.value.energyType,
+ nodeId: "",
+ queryTime: proxy.dayjs(new Date(form.value.dataTime)).format("YYYY-MM-DD"),
+ dataTime: proxy.dayjs(new Date(form.value.dataTime)).format("YYYY-MM-DD"),
+ timeType: form.value.timeType,
+ modelCode: proxy.$route.query.modelCode,
+ }).then((res) => {
+ periodList.value[0].data = res.data.totalAccumulatedAmount
+ periodList.value[1].data = res.data.childNodeAccumulatedAmount
+ periodList.value[2].data = res.data.difference
+ periodList.value[3].data = res.data.energyLossRatio + "%"
+ flowData.value = res.data.itemVOList
+ nextTick(() => {
+ getChart()
+ })
+ })
+}
+
+watch(
+ () => settingsStore.sideTheme,
+ (val) => {
+ getChart()
+ }
+)
function getChart() {
+ let colors = ["#FBB4AE", "#B3CDE3", "#CCEBC5", "#DECBE4", "#5470C6"]
+ let mydata = []
+ let mylinks = []
+ if (flowData.value.length) {
+ mylinks = flowData.value || []
+ let nodes = []
+ mylinks.forEach((element) => {
+ nodes.push(element.source)
+ nodes.push(element.target)
+ })
+ mydata = Array.from(new Set(nodes)).map((item) => {
+ return {
+ name: item,
+ }
+ })
+ }
+ console.log(mydata)
+ console.log(mylinks)
-
- let colors = ['#FBB4AE', '#B3CDE3', '#CCEBC5', '#DECBE4', '#5470C6'];
- let mydata = [
- { name: 'L1', itemStyle: { color: colors[0] }, depth: 0 },
- { name: 'L1-1', itemStyle: { color: colors[0] }, depth: 0 },
- { name: 'L1-2', itemStyle: { color: colors[0] }, depth: 0 },
- { name: 'L1-3', itemStyle: { color: colors[0] }, depth: 0 },
-
-
- { name: 'L2', itemStyle: { color: colors[1] }, depth: 1 },
- { name: 'L2-1', itemStyle: { color: colors[1] }, depth: 1 },
- { name: 'L2-2', itemStyle: { color: colors[1] }, depth: 1 },
- { name: 'L2-3', itemStyle: { color: colors[1] }, depth: 1 },
-
-
- { name: 'L3', itemStyle: { color: colors[2] }, depth: 2 },
- { name: 'L3-1', itemStyle: { color: colors[2] }, depth: 2 },
- { name: 'L3-2', itemStyle: { color: colors[2] }, depth: 2 },
-
-
- { name: 'L4', itemStyle: { color: colors[3] }, depth: 3 },
-
-
-
- ];
- // mydata.reverse()
- let mylinks = [
- // L1鈫扡4 9720
- { source: 'L1', target: 'L4', value: 9720 },
- // L2鈫扡4 24396
- { source: 'L2', target: 'L4', value: 24396 },
- // L3鈫扡4 1462
- { source: 'L3', target: 'L4', value: 1462 },
-
- // L1鈫扡2鈫扡3鈫扡4 215
- { source: 'L1-1', target: 'L2-1', value: 215 },
- { source: 'L2-1', target: 'L3-1', value: 215 },
- { source: 'L3-1', target: 'L4', value: 215 },
-
- // L1鈫扡2鈫扡4 4518
- { source: 'L1-2', target: 'L2-2', value: 4518 },
- { source: 'L2-2', target: 'L4', value: 4518 },
- // L1鈫扡3鈫扡4 217
- { source: 'L1-3', target: 'L3-2', value: 217 },
- { source: 'L3-2', target: 'L4', value: 217 },
-
- // L2鈫扡3鈫扡4 893
- { source: 'L2-3', target: 'L3-3', value: 893 },
- { source: 'L3-3', target: 'L4', value: 893 },
-
- ];
-
-
- const myChart1 = echarts.init(document.getElementById("Chart1"));
+ const myChart1 = echarts.init(document.getElementById("Chart1"))
myChart1.setOption({
tooltip: {
- trigger: 'item',
- triggerOn: 'mousemove',
+ trigger: "item",
+ triggerOn: "mousemove",
},
- series: {
- type: 'sankey',
- lineStyle: {
- opacity: 0.3,
- color: 'gradient',
- curveness: 0.7,
+ // series: {
+ // type: "sankey",
+ // lineStyle: {
+ // opacity: 0.3,
+ // color: "gradient",
+ // curveness: 0.7,
+ // },
+ // // nodeAlign: 'left',
+ // nodeGap: 18,
+ // layoutIterations: 1,
+ // emphasis: {
+ // focus: "adjacency",
+ // },
+ // data: mydata,
+ // links: mylinks,
+ // },
+ series: [
+ {
+ type: "sankey",
+ left: 50.0,
+ top: 20.0,
+ right: 100.0,
+ bottom: 25.0,
+ data: mydata,
+ links: mylinks,
+ nodeGap: 18,
+ layoutIterations: 1,
+ //emphasis: {
+ // focus: 'adjacency',
+ //},
+ nodeAlign: "left",
+ lineStyle: {
+ color: "source",
+ curveness: 0.7,
+ opacity: 0.3,
+ },
+ itemStyle: {
+ color: "#333",
+ borderColor: "#1f77b4",
+ },
+ // label: {
+ // color: "rgba(0,0,0,0.7)",
+ // fontSize: 10,
+ // },
+ levels: [
+ {
+ depth: 0,
+ itemStyle: {
+ color: colors[0],
+ },
+ lineStyle: {
+ color: "source",
+ opacity: 0.3,
+ },
+ },
+ {
+ depth: 1,
+ itemStyle: {
+ color: colors[1],
+ },
+ lineStyle: {
+ color: "source",
+ opacity: 0.3,
+ },
+ },
+ {
+ depth: 2,
+ itemStyle: {
+ color: colors[2],
+ },
+ lineStyle: {
+ color: "source",
+ opacity: 0.3,
+ },
+ },
+ {
+ depth: 3,
+ itemStyle: {
+ color: colors[3],
+ },
+ lineStyle: {
+ color: "source",
+ opacity: 0.3,
+ },
+ },
+ ],
},
- // nodeAlign: 'left',
- nodeGap: 18,
- layoutIterations: 1,
- emphasis: {
- focus: 'adjacency',
- },
- data: mydata,
- links: mylinks,
- },
+ ],
})
- window.addEventListener("resize", () => {
- myChart1.resize();
- }, { passive: true });
+ window.addEventListener(
+ "resize",
+ () => {
+ myChart1.resize()
+ },
+ { passive: true }
+ )
}
onMounted(() => {
- getChart()
+ getEnergyTypeList()
})
</script>
<style scoped lang="scss">
@import "@/assets/styles/page.scss";
.themeDark {
-
.card-list {
display: flex;
justify-content: space-between;
- padding: 18px;
+ padding-top: 12px;
+ padding: 12px 14px 0;
.card-list-item {
width: 24%;
- height: 167px;
+ height: 160px;
background: #223386;
border-radius: 5px 5px 5px 5px;
border: 1px solid #4868b7;
@@ -288,14 +374,15 @@
.card-list {
display: flex;
justify-content: space-between;
- padding: 18px;
+ padding-top: 12px;
+ padding: 12px 14px 0;
.card-list-item {
width: 24%;
- height: 167px;
+ height: 160px;
background: #fff;
border-radius: 5px 5px 5px 5px;
- border: 1px solid #E8E8E8;
+ border: 1px solid #e8e8e8;
background-size: 100% 100%;
box-sizing: border-box;
padding: 20px 18px 23px 16px;
@@ -337,7 +424,7 @@
font-family: OPPOSans, OPPOSans;
font-weight: 500;
font-size: 14px;
- color: #5D5C5C;
+ color: #5d5c5c;
}
.bottom-right {
@@ -360,4 +447,4 @@
height: 100%;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3