能流图

ali

2025-02-12 d978607e34b954d6828e1d10ba617a79ee1ef166

能流图

 zhitan-vue/src/api/energyAnalysis/energyAnalysis.js

@@ -1,54 +1,62 @@
import request from '@/utils/request'
import request from "@/utils/request"

// 能耗对比分析-区域能耗分析-能耗趋势/区域能耗统计分析表-列表
// 能耗对比分析-科室能耗分析-能耗趋势/能耗统计分析表-列表
// 能耗对比分析-设备能耗分析-能耗趋势/能耗统计分析表-列表
export function listRegion(query) {
  return request({
    url: '/consumptionanalysis/getByArea',
    method: 'get',
    params: query
    url: "/consumptionanalysis/getByArea",
    method: "get",
    params: query,
  })
}
// 能耗对比分析-科室能耗分析-能耗排名-列表
// 能耗对比分析-设备能耗分析-能耗排名-列表
export function listDepartment(query) {
  return request({
    url: '/consumptionanalysis/getByDepartment',
    method: 'get',
    params: query
    url: "/consumptionanalysis/getByDepartment",
    method: "get",
    params: query,
  })
}
// 能耗对比分析-能耗指标考核-能耗趋势/区域能耗统计分析表
export function listIndicatorassessment(query) {
  return request({
    url: '/consumptionanalysis/getPlanAndProdCount',
    method: 'get',
    params: query
    url: "/consumptionanalysis/getPlanAndProdCount",
    method: "get",
    params: query,
  })
}
// 能耗对比分析-综合能耗分析-综合能耗趋势/各介质能耗占比/区域能耗统计分析表-列表
export function listComprehensive(query) {
  return request({
    url: '/consumptionanalysis/getComprehensiveEnergy',
    method: 'get',
    params: query
    url: "/consumptionanalysis/getComprehensiveEnergy",
    method: "get",
    params: query,
  })
}
// 能耗对比分析-综合能耗分析-能耗同比环比-列表
export function listYoY(query) {
  return request({
    url: '/consumptionanalysis/getYOY',
    method: 'get',
    params: query
    url: "/consumptionanalysis/getYOY",
    method: "get",
    params: query,
  })
}
// 能耗对比分析-综合能耗分析-用能单元能耗排名-列表
export function listEnergyRanking(query) {
  return request({
    url: '/consumptionanalysis/getEnergyRanking',
    method: 'get',
    params: query
    url: "/consumptionanalysis/getEnergyRanking",
    method: "get",
    params: query,
  })
}

// statisticsAnalysis/getFlowCharts
export function getFlowCharts(query) {
  return request({
    url: "/statisticsAnalysis/getFlowCharts",
    method: "get",
    params: query,
  })
}

 zhitan-vue/src/views/deepanalysis/deepAnalysis.vue

@@ -4,19 +4,28 @@
      <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-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>
@@ -46,178 +55,245 @@
  </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: 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)


  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→L4     9720
    { source: 'L1', target: 'L4', value: 9720 },
    // L2→L4     24396
    { source: 'L2', target: 'L4', value: 24396 },
    // L3→L4     1462
    { source: 'L3', target: 'L4', value: 1462 },

    // L1→L2→L3→L4     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→L2→L4     4518
    { source: 'L1-2', target: 'L2-2', value: 4518 },
    { source: 'L2-2', target: 'L4', value: 4518 },
    // L1→L3→L4     217
    { source: 'L1-3', target: 'L3-2', value: 217 },
    { source: 'L3-2', target: 'L4', value: 217 },

    // L2→L3→L4     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;
@@ -295,7 +371,7 @@
      height: 167px;
      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 +413,7 @@
          font-family: OPPOSans, OPPOSans;
          font-weight: 500;
          font-size: 14px;
          color: #5D5C5C;
          color: #5d5c5c;
        }

        .bottom-right {
@@ -360,4 +436,4 @@
    height: 100%;
  }
}
</style>
</style>