From 06d3d15a5a08637041cc601101c063b11b07a346 Mon Sep 17 00:00:00 2001
From: net <net@netdeMBP.lan>
Date: 星期五, 14 二月 2025 17:25:21 +0800
Subject: [PATCH] 合并理去杀杀人
---
zhitan-vue/src/views/deepanalysis/deepAnalysis.vue | 439 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 439 insertions(+), 0 deletions(-)
diff --git a/zhitan-vue/src/views/deepanalysis/deepAnalysis.vue b/zhitan-vue/src/views/deepanalysis/deepAnalysis.vue
new file mode 100644
index 0000000..c4b13c4
--- /dev/null
+++ b/zhitan-vue/src/views/deepanalysis/deepAnalysis.vue
@@ -0,0 +1,439 @@
+<template>
+ <div class="page">
+ <div class="form-card">
+ <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-select>
+ </el-form-item>
+ <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.timeType == 'YEAR'" v-model="form.dataTime" type="year" />
+ <el-date-picker
+ v-else-if="form.timeType == 'MONTH'"
+ 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-form-item>
+ <el-form-item>
+ <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button>
+ <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+ <div class="card-list">
+ <div class="card-list-item" v-for="(item, index) in periodList" :key="index">
+ <div class="item-top">
+ <div class="icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
+ <div class="name">{{ item.title }}</div>
+ </div>
+ <div class="item-bottom">
+ <div class="bottom-box text-center" :style="{ color: item.color }">
+ {{ item.data }}
+ </div>
+ </div>
+ </div>
+ </div>
+ <BaseCard title="鑳芥簮娴佸悜鍒嗘瀽">
+ <div class="chart-box">
+ <div id="Chart1" />
+ </div>
+ </BaseCard>
+ </div>
+</template>
+<script setup>
+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"
+let { proxy } = getCurrentInstance()
+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")
+ getData()
+}
+const energyTypeList = ref()
+function getEnergyTypeList() {
+ listEnergyTypeList().then((res) => {
+ energyTypeList.value = res.data
+ form.value.energyType = energyTypeList.value[0].enersno
+ handleTimeType(period.value[0].value)
+ })
+}
+
+function handleSelect(e) {
+ console.log(e, form.value.type)
+ if (form.value.type == 1) {
+ form.value.time = proxy.dayjs().format("YYYY")
+ } else if (form.value.type == 2) {
+ form.value.time = proxy.dayjs().format("YYYY-MM")
+ } else {
+ form.value.time = proxy.dayjs().format("YYYY-MM-DD")
+ }
+}
+function handleQuery() {
+ getData()
+}
+
+function resetQuery() {
+ form.value = {
+ type: 1,
+ 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"
+const periodList = ref([
+ {
+ icon: icon1,
+ color: "#3371eb",
+ title: "绱鑳借��",
+ data: "1000.1 m鲁",
+ },
+ {
+ icon: icon3,
+ color: "#ff6200",
+ title: "鍒嗚〃鑳借��",
+ data: " 0 m鲁",
+ },
+ {
+ icon: icon4,
+ color: "#ffce0c",
+ title: "鎹熷け閲�",
+ data: "1000.1 m鲁",
+ },
+ {
+ icon: icon5,
+ color: "#78e801",
+ title: "鎹熷け姣斾緥",
+ data: "100.00%",
+ },
+])
+
+const flowData = ref({})
+function getData() {
+ getFlowCharts({
+ energyType: form.value.energyType,
+ nodeId: "",
+ queryTime: form.value.dataTime,
+ 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)
+
+ const myChart1 = echarts.init(document.getElementById("Chart1"))
+ myChart1.setOption({
+ tooltip: {
+ trigger: "item",
+ triggerOn: "mousemove",
+ },
+ // 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,
+ },
+ },
+ ],
+ },
+ ],
+ })
+ window.addEventListener(
+ "resize",
+ () => {
+ myChart1.resize()
+ },
+ { passive: true }
+ )
+}
+onMounted(() => {
+ getEnergyTypeList()
+})
+</script>
+<style scoped lang="scss">
+@import "@/assets/styles/page.scss";
+
+.themeDark {
+ .card-list {
+ display: flex;
+ justify-content: space-between;
+ padding: 18px;
+
+ .card-list-item {
+ width: 24%;
+ height: 167px;
+ background: #223386;
+ border-radius: 5px 5px 5px 5px;
+ border: 1px solid #4868b7;
+ background-size: 100% 100%;
+ box-sizing: border-box;
+ padding: 20px 18px 23px 16px;
+
+ .item-top {
+ display: flex;
+ align-items: center;
+
+ .icon {
+ width: 40px;
+ height: 40px;
+ background-size: 100% 100%;
+ }
+
+ .name {
+ font-family: OPPOSans, OPPOSans;
+ font-weight: bold;
+ font-size: 20px;
+ color: #fffdfd;
+ margin-left: 7px;
+ }
+ }
+
+ .item-bottom {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 15px;
+ font-family: OPPOSans, OPPOSans;
+ font-weight: bold;
+ font-size: 16px;
+
+ .bottom-box {
+ width: 100%;
+ font-size: 25px;
+ color: rgb(51, 113, 235);
+ }
+
+ .bottom-left {
+ font-family: OPPOSans, OPPOSans;
+ font-weight: 500;
+ font-size: 14px;
+ color: rgba(255, 255, 255, 0.7);
+ }
+
+ .bottom-right {
+ font-family: OPPOSans, OPPOSans;
+ font-weight: 800;
+ font-size: 16px;
+ color: #f52528;
+ }
+ }
+ }
+ }
+}
+
+.themeLight {
+ .card-list {
+ display: flex;
+ justify-content: space-between;
+ padding: 18px;
+
+ .card-list-item {
+ width: 24%;
+ height: 167px;
+ background: #fff;
+ border-radius: 5px 5px 5px 5px;
+ border: 1px solid #e8e8e8;
+ background-size: 100% 100%;
+ box-sizing: border-box;
+ padding: 20px 18px 23px 16px;
+
+ .item-top {
+ display: flex;
+ align-items: center;
+
+ .icon {
+ width: 40px;
+ height: 40px;
+ background-size: 100% 100%;
+ }
+
+ .name {
+ font-family: OPPOSans, OPPOSans;
+ font-weight: bold;
+ font-size: 20px;
+ color: #000;
+ margin-left: 7px;
+ }
+ }
+
+ .item-bottom {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 15px;
+ font-family: OPPOSans, OPPOSans;
+ font-weight: bold;
+ font-size: 16px;
+
+ .bottom-box {
+ width: 100%;
+ font-size: 25px;
+ color: rgb(51, 113, 235);
+ }
+
+ .bottom-left {
+ font-family: OPPOSans, OPPOSans;
+ font-weight: 500;
+ font-size: 14px;
+ color: #5d5c5c;
+ }
+
+ .bottom-right {
+ font-family: OPPOSans, OPPOSans;
+ font-weight: 800;
+ font-size: 16px;
+ color: #f52528;
+ }
+ }
+ }
+ }
+}
+
+.chart-box {
+ width: 100%;
+ height: calc(100vh - 500px) !important;
+
+ div {
+ width: 100%;
+ height: 100%;
+ }
+}
+</style>
--
Gitblit v1.9.3