!80 同比环比集成完毕接口
Merge pull request !80 from netmouse/develop_Yao
¶Ô±ÈÐÂÎļþ |
| | |
| | | { |
| | | "name": "zhitan-ems", |
| | | "lockfileVersion": 3, |
| | | "requires": true, |
| | | "packages": {} |
| | | } |
| | |
| | | params: query, |
| | | }) |
| | | } |
| | | // 对æ¯åæåæ¯ |
| | | export function querySameCompareList(query) { |
| | | return request({ |
| | | url: "/statisticsAnalysis/querySameCompareList", |
| | | method: "get", |
| | | params: query, |
| | | }) |
| | | } |
| | | // 对æ¯åæç¯æ¯ |
| | | export function queryLoopCompareList(query) { |
| | | return request({ |
| | | url: "/statisticsAnalysis/queryLoopCompareList", |
| | | method: "get", |
| | | params: query, |
| | | }) |
| | | } |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="page"> |
| | | <div class="page-container"> |
| | | <div class="page-container-left"> |
| | | <LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" /> |
| | | </div> |
| | | <div class="page-container-right"> |
| | | <div class="form-card"> |
| | | <el-form :model="queryParams" ref="queryRef" :inline="true"> |
| | | <el-form-item label="æé´" prop="timeType"> |
| | | <el-select v-model="queryParams.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="æ¶é´"> |
| | | <el-date-picker v-model="queryParams.dataTime" :type="queryParams.timeType == 'YEAR' |
| | | ? 'year' |
| | | : queryParams.timeType == 'MONTH' |
| | | ? 'month' |
| | | : 'date' |
| | | " :format="queryParams.timeType == 'YEAR' |
| | | ? 'YYYY' |
| | | : queryParams.timeType == 'MONTH' |
| | | ? 'YYYY-MM' |
| | | : 'YYYY-MM-DD' |
| | | " value-format="YYYY-MM-DD" placeholder="æ¶é´" style="width: 100%" /> |
| | | </el-form-item> |
| | | <el-form-item label="è½æºç±»å" prop="energyType"> |
| | | <el-select v-model="queryParams.energyType" placeholder="è½æºç±»å" clearable style="width: 120px"> |
| | | <el-option :label="item.enername" :value="item.enersno" v-for="item in energyTypeList" |
| | | :key="item.enersno" @click="handleEnergyType(item)" /> |
| | | </el-select> |
| | | </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-item> |
| | | <el-button :type="queryParams.analysisType == 'YOY' ? 'primary' : ''" @click="handleAnalysisType('YOY')"> |
| | | 忝 |
| | | </el-button> |
| | | <el-button :type="queryParams.analysisType == 'MOM' ? 'primary' : ''" @click="handleAnalysisType('MOM')"> |
| | | ç¯æ¯ |
| | | </el-button> |
| | | </el-form-item> --> |
| | | <!-- <el-form-item> |
| | | <el-button type="primary" icon="Download" @click="handleExport"> |
| | | å¯¼åº |
| | | </el-button> |
| | | </el-form-item> --> |
| | | </el-form> |
| | | </div> |
| | | <div style=" |
| | | height: calc(100vh - 220px) !important; |
| | | max-height: calc(100vh - 220px) !important; |
| | | overflow-y: auto; |
| | | " v-loading="loading"> |
| | | |
| | | <BaseCard :title="queryParams.nodeName + '-è½è对æ¯åæ'"> |
| | | <div class="chart-box"> |
| | | <div id="Chart1" /> |
| | | </div> |
| | | </BaseCard> |
| | | |
| | | <BaseCard :title="queryParams.nodeName + |
| | | '-è½è对æ¯åæåæ¯åæè¡¨-' + |
| | | queryParams.enername |
| | | "> |
| | | <div class="table-box"> |
| | | <el-table :data="departmentList" show-summary> |
| | | <el-table-column label="æ¬ææ¶é´" align="center" key="currentTime" prop="currentTime" |
| | | :show-overflow-tooltip="true" /> |
| | | <el-table-column :label="'æ¬æè' + |
| | | queryParams.enername + |
| | | '(' + |
| | | queryParams.muid + |
| | | ')' |
| | | " align="center" key="currentValue" prop="currentValue" :show-overflow-tooltip="true" /> |
| | | <el-table-column label="åææ¶é´" align="center" key="compareTime" prop="compareTime" |
| | | :show-overflow-tooltip="true" /> |
| | | <el-table-column :label="'åæè' + |
| | | queryParams.enername + |
| | | '(' + |
| | | queryParams.muid + |
| | | ')' |
| | | " align="center" key="contrastValues" prop="contrastValues" :show-overflow-tooltip="true" /> |
| | | <el-table-column :label="(queryParams.analysisType == 'YOY' ? 'å' : 'ç¯') + 'æ¯(%)' |
| | | " align="center" key="ratio" prop="ratio" :show-overflow-tooltip="true" width="200" /> |
| | | </el-table> |
| | | </div> |
| | | </BaseCard> |
| | | <!-- </el-col> |
| | | </el-row> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup name="department"> |
| | | import { |
| | | listRegion, |
| | | listDepartment, |
| | | querySameCompareList, |
| | | } from "@/api/energyAnalysis/energyAnalysis"; |
| | | import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"; |
| | | import * as echarts from "echarts"; |
| | | const { proxy } = getCurrentInstance(); |
| | | const { period } = proxy.useDict("period"); |
| | | import { useRoute } from "vue-router"; |
| | | import useSettingsStore from "@/store/modules/settings"; |
| | | const settingsStore = useSettingsStore(); |
| | | watch( |
| | | () => settingsStore.sideTheme, |
| | | (val) => { |
| | | getList(); |
| | | } |
| | | ); |
| | | const energyTypeList = ref(undefined); |
| | | const departmentList = ref([]); |
| | | const loading = ref(false); |
| | | const data = reactive({ |
| | | queryParams: { |
| | | nodeId: null, |
| | | timeType: null, |
| | | dataTime: null, |
| | | timeCode: null, |
| | | analysisType: "YOY", |
| | | energyType: null, |
| | | }, |
| | | query: { |
| | | modelCode: null, |
| | | }, |
| | | }); |
| | | const { queryParams, query } = toRefs(data); |
| | | /** èç¹åå»äºä»¶ */ |
| | | function handleNodeClick(data) { |
| | | queryParams.value.nodeId = data.id; |
| | | queryParams.value.nodeName = data.label; |
| | | handleTimeType(period.value[1].value); |
| | | listEnergyTypeList().then((res) => { |
| | | energyTypeList.value = res.data; |
| | | queryParams.value.energyType = energyTypeList.value[0].enersno; |
| | | queryParams.value.enername = energyTypeList.value[0].enername; |
| | | queryParams.value.muid = energyTypeList.value[0].muid; |
| | | handleQuery(); |
| | | }); |
| | | } |
| | | function handleTimeType(e) { |
| | | queryParams.value.timeType = e; |
| | | if(e=='MONTH'){ |
| | | queryParams.value.timeCode = proxy.dayjs(new Date()).format("YYYY-MM"); |
| | | }else if(e=='YEAR'){ |
| | | queryParams.value.timeCode = proxy.dayjs(new Date()).format("YYYY"); |
| | | }else{ |
| | | queryParams.value.timeCode = proxy.dayjs(new Date()).format("YYYY-MM-DD"); |
| | | } |
| | | |
| | | } |
| | | function handleEnergyType(item) { |
| | | queryParams.value.enername = item.enername; |
| | | queryParams.value.muid = item.muid; |
| | | handleQuery(); |
| | | } |
| | | function handleAnalysisType(analysisType) { |
| | | queryParams.value.analysisType = analysisType; |
| | | getList(); |
| | | } |
| | | // è½è对æ¯åæ-å表 |
| | | function getList() { |
| | | loading.value = true; |
| | | // å¨åå§åä¹åï¼å
disposeæ§çå®ä¾ |
| | | if (echarts.getInstanceByDom(document.getElementById("Chart1"))) { |
| | | echarts.dispose(document.getElementById("Chart1")); |
| | | } |
| | | // if (echarts.getInstanceByDom(document.getElementById("Chart2"))) { |
| | | // echarts.dispose(document.getElementById("Chart2")); |
| | | // } |
| | | const myChart1 = echarts.init(document.getElementById("Chart1")); |
| | | // const myChart2 = echarts.init(document.getElementById("Chart2")); |
| | | querySameCompareList( |
| | | proxy.addDateRange({ |
| | | ...queryParams.value, |
| | | ...query.value, |
| | | }) |
| | | ).then((res) => { |
| | | if (!!res.code && res.code == 200) { |
| | | loading.value = false; |
| | | let xdata = []; |
| | | let yvalue = []; |
| | | let ycompareValue = []; |
| | | let yqoq = []; |
| | | if (!!res.data) { |
| | | res.data.map((item) => { |
| | | xdata.push( |
| | | proxy |
| | | .dayjs(item.currentTime) |
| | | .format( |
| | | queryParams.value.timeType == "YEAR"? "MMæ": queryParams.value.timeType =="MONTH"? "DDæ¥": "HHæ¶" |
| | | ) |
| | | ); |
| | | yvalue.push(!!item.currentValue ? item.currentValue : 0); |
| | | ycompareValue.push(!!item.contrastValues? item.contrastValues : 0); |
| | | yqoq.push(!!item.ratio ? item.ratio : 0); |
| | | }); |
| | | console.log(xdata) |
| | | } |
| | | setTimeout(() => { |
| | | myChart1.setOption({ |
| | | color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"], |
| | | grid: { |
| | | top: "45", |
| | | left: "7%", |
| | | right: "5%", |
| | | bottom: "10", |
| | | containLabel: true, |
| | | }, |
| | | tooltip: { |
| | | trigger: "axis", |
| | | axisPointer: { |
| | | type: "shadow", |
| | | }, |
| | | }, |
| | | legend: { |
| | | icon: "rect", |
| | | itemWidth: 14, |
| | | itemHeight: 10, |
| | | textStyle: { |
| | | color: |
| | | settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", |
| | | }, |
| | | }, |
| | | xAxis: { |
| | | type: "category", |
| | | axisPointer: { |
| | | type: "shadow", |
| | | }, |
| | | axisLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | color: |
| | | settingsStore.sideTheme == "theme-dark" |
| | | ? "#FFFFFF" |
| | | : "#222222", |
| | | }, |
| | | }, |
| | | axisTick: { |
| | | show: false, |
| | | }, |
| | | splitArea: { |
| | | show: false, |
| | | }, |
| | | splitLine: { |
| | | show: false, |
| | | }, |
| | | axisLabel: { |
| | | color: |
| | | settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", |
| | | fontSize: 14, |
| | | padding: [5, 0, 0, 0], |
| | | // formatter: '{value} ml' |
| | | }, |
| | | data: xdata, |
| | | }, |
| | | yAxis: [ |
| | | { |
| | | type: "value", |
| | | name: |
| | | "è" + |
| | | queryParams.value.enername + |
| | | "é(" + |
| | | queryParams.value.muid + |
| | | ")", |
| | | nameTextStyle: { |
| | | color: |
| | | settingsStore.sideTheme == "theme-dark" |
| | | ? "#FFFFFF" |
| | | : "#222222", |
| | | fontSize: 14, |
| | | padding: [0, 0, 5, 0], |
| | | }, |
| | | axisLine: { |
| | | show: false, |
| | | }, |
| | | splitLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | type: "dashed", |
| | | color: |
| | | settingsStore.sideTheme == "theme-dark" |
| | | ? "#FFFFFF" |
| | | : "#222222", |
| | | }, |
| | | }, |
| | | axisTick: { |
| | | show: false, |
| | | }, |
| | | splitArea: { |
| | | show: false, |
| | | }, |
| | | axisLabel: { |
| | | color: |
| | | settingsStore.sideTheme == "theme-dark" |
| | | ? "#FFFFFF" |
| | | : "#222222", |
| | | fontSize: 14, |
| | | }, |
| | | }, |
| | | { |
| | | type: "value", |
| | | name: queryParams.value.analysisType == "YOY" ? "忝(%)" : "ç¯æ¯(%)", |
| | | alignTicks: true, |
| | | nameTextStyle: { |
| | | color: |
| | | settingsStore.sideTheme == "theme-dark" |
| | | ? "#FFFFFF" |
| | | : "#222222", |
| | | fontSize: 14, |
| | | padding: [0, 0, 5, 0], |
| | | }, |
| | | axisLine: { |
| | | show: false, |
| | | }, |
| | | axisTick: { |
| | | show: false, |
| | | }, |
| | | splitLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | type: "dashed", |
| | | color: |
| | | settingsStore.sideTheme == "theme-dark" |
| | | ? "#FFFFFF" |
| | | : "#222222", |
| | | }, |
| | | }, |
| | | splitArea: { |
| | | show: false, |
| | | }, |
| | | axisLabel: { |
| | | color: |
| | | settingsStore.sideTheme == "theme-dark" |
| | | ? "#FFFFFF" |
| | | : "#222222", |
| | | fontSize: 14, |
| | | }, |
| | | }, |
| | | ], |
| | | series: [ |
| | | { |
| | | name: "æ¬æå¼", |
| | | type: "bar", |
| | | barWidth: "8", |
| | | tooltip: { |
| | | valueFormatter: function (value) { |
| | | return value + queryParams.value.muid; |
| | | }, |
| | | }, |
| | | itemStyle: { |
| | | borderRadius: [15, 15, 0, 0], |
| | | }, |
| | | data: yvalue, |
| | | markPoint: { |
| | | data: [ |
| | | { type: "max", name: "Max" }, |
| | | { type: "min", name: "Min" }, |
| | | ], |
| | | }, |
| | | }, |
| | | { |
| | | name: "åæå¼", |
| | | type: "bar", |
| | | barWidth: "8", |
| | | tooltip: { |
| | | valueFormatter: function (value) { |
| | | return value + queryParams.value.muid; |
| | | }, |
| | | }, |
| | | itemStyle: { |
| | | borderRadius: [15, 15, 0, 0], |
| | | }, |
| | | data: ycompareValue, |
| | | markPoint: { |
| | | data: [ |
| | | { type: "max", name: "Max" }, |
| | | { type: "min", name: "Min" }, |
| | | ], |
| | | }, |
| | | }, |
| | | { |
| | | name: queryParams.value.analysisType == "YOY" ? "忝" : "ç¯æ¯", |
| | | type: "line", |
| | | yAxisIndex: 1, |
| | | symbol: "none", // 设置为 'none' 廿åç¹ |
| | | tooltip: { |
| | | valueFormatter: function (value) { |
| | | return value + "%"; |
| | | }, |
| | | }, |
| | | data: yqoq, |
| | | }, |
| | | ], |
| | | }); |
| | | }, 100); |
| | | departmentList.value = !!res.data ? res.data : []; |
| | | window.addEventListener( |
| | | "resize", |
| | | () => { |
| | | myChart1.resize(); |
| | | }, |
| | | { passive: true } |
| | | ); |
| | | } |
| | | }); |
| | | // listDepartment( |
| | | // proxy.addDateRange({ |
| | | // ...queryParams.value, |
| | | // ...query.value, |
| | | // }) |
| | | // ).then((res) => { |
| | | // if (!!res.code && res.code == 200) { |
| | | // loading.value = false; |
| | | // let seriesdata = []; |
| | | // let xdata = []; |
| | | // if (!!energyTypeList.value) { |
| | | // energyTypeList.value.map((item) => { |
| | | // seriesdata.push({ |
| | | // name: item.enername, |
| | | // type: "bar", |
| | | // barWidth: "16", |
| | | // stack: "total", |
| | | // data: [], |
| | | // }); |
| | | // }); |
| | | // } |
| | | // if (!!res.data) { |
| | | // res.data.map((dataItem) => { |
| | | // xdata.push(dataItem.nodeName) |
| | | // seriesdata.forEach((seriesdataItem) => { |
| | | // if ( |
| | | // dataItem.data.find( |
| | | // (dataItemItem) => |
| | | // dataItemItem.energyTypeName == seriesdataItem.name |
| | | // ) == undefined |
| | | // ) { |
| | | // dataItem.data.push({ |
| | | // nodeId: dataItem.nodeId, |
| | | // nodeName: dataItem.nodeName, |
| | | // energyTypeNo: null, |
| | | // energyTypeName: seriesdataItem.name, |
| | | // energyConsumption: 0, |
| | | // }); |
| | | // } |
| | | // dataItem.data.map(dataItemItem => { |
| | | // if (seriesdataItem.name == dataItemItem.energyTypeName) { |
| | | // seriesdataItem.data.push(dataItemItem.energyConsumption) |
| | | // } |
| | | // }) |
| | | // }); |
| | | // }); |
| | | // } |
| | | // setTimeout(() => { |
| | | // myChart2.setOption({ |
| | | // color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"], |
| | | // grid: { |
| | | // top: "45", |
| | | // left: "17%", |
| | | // right: "5%", |
| | | // bottom: "10", |
| | | // containLabel: true, |
| | | // }, |
| | | // tooltip: { |
| | | // trigger: "axis", |
| | | // axisPointer: { |
| | | // type: "shadow", |
| | | // }, |
| | | // }, |
| | | // legend: { |
| | | // icon: "rect", |
| | | // itemWidth: 14, |
| | | // itemHeight: 10, |
| | | // right: 0, |
| | | // textStyle: { |
| | | // color: |
| | | // settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", |
| | | // }, |
| | | // }, |
| | | // xAxis: { |
| | | // nameLocation: "start", |
| | | // type: "value", |
| | | // name: "åä½tce", |
| | | // nameTextStyle: { |
| | | // color: |
| | | // settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", |
| | | // fontSize: 14, |
| | | // padding: [0, 0, 5, 0], |
| | | // }, |
| | | // axisLine: { |
| | | // show: false, |
| | | // }, |
| | | // splitLine: { |
| | | // show: true, |
| | | // lineStyle: { |
| | | // type: "dashed", |
| | | // color: |
| | | // settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", |
| | | // }, |
| | | // }, |
| | | // axisTick: { |
| | | // show: false, |
| | | // }, |
| | | // splitArea: { |
| | | // show: false, |
| | | // }, |
| | | // axisLabel: { |
| | | // color: |
| | | // settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", |
| | | // fontSize: 14, |
| | | // // formatter: '{value} ml' |
| | | // }, |
| | | // }, |
| | | // yAxis: { |
| | | // type: "category", |
| | | // axisPointer: { |
| | | // type: "shadow", |
| | | // }, |
| | | // axisLine: { |
| | | // show: true, |
| | | // lineStyle: { |
| | | // color: |
| | | // settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", |
| | | // }, |
| | | // }, |
| | | // axisTick: { |
| | | // show: false, |
| | | // }, |
| | | // splitArea: { |
| | | // show: false, |
| | | // }, |
| | | // splitLine: { |
| | | // show: false, |
| | | // }, |
| | | // axisLabel: { |
| | | // color: |
| | | // settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", |
| | | // fontSize: 14, |
| | | // padding: [5, 0, 0, 0], |
| | | // // formatter: '{value} ml' |
| | | // }, |
| | | // data: xdata.splice(0, 6), |
| | | // }, |
| | | // series: seriesdata, |
| | | // }); |
| | | // }, 100); |
| | | // window.addEventListener("resize", () => { |
| | | // myChart2.resize(); |
| | | // },{passive: true}); |
| | | // } |
| | | // }); |
| | | } |
| | | // è½è对æ¯åæ-ç§å®¤è½èåæ-æç´¢ |
| | | function handleQuery() { |
| | | getList(); |
| | | } |
| | | // è½è对æ¯åæ-éç½® |
| | | function resetQuery() { |
| | | proxy.resetForm("queryRef"); |
| | | handleTimeType(period.value[1].value); |
| | | queryParams.value.energyType = energyTypeList.value[0].enersno; |
| | | queryParams.value.enername = energyTypeList.value[0].enername; |
| | | queryParams.value.muid = energyTypeList.value[0].muid; |
| | | queryParams.value.analysisType = "YOY"; |
| | | handleQuery(); |
| | | } |
| | | // è½è对æ¯åæ-ç§å®¤è½èåæ-å¯¼åº |
| | | function handleExport() { |
| | | proxy.download( |
| | | "consumptionanalysis/energyExport", |
| | | { |
| | | ...queryParams.value, |
| | | ...query.value, |
| | | }, |
| | | `${queryParams.value.nodeName}-ååºè½èåæ_${new Date().getTime()}.xlsx` |
| | | ); |
| | | } |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | @import "@/assets/styles/page.scss"; |
| | | </style> |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="page"> |
| | | <div class="page-container"> |
| | | <div class="page-container-left"> |
| | | <LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" /> |
| | | </div> |
| | | <div class="page-container-right"> |
| | | <div class="form-card"> |
| | | <el-form :model="queryParams" ref="queryRef" :inline="true"> |
| | | <el-form-item label="æé´" prop="timeType"> |
| | | <el-select v-model="queryParams.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="æ¶é´"> |
| | | <el-date-picker v-model="queryParams.dataTime" :type="queryParams.timeType == 'YEAR' |
| | | ? 'year' |
| | | : queryParams.timeType == 'MONTH' |
| | | ? 'month' |
| | | : 'date' |
| | | " :format="queryParams.timeType == 'YEAR' |
| | | ? 'YYYY' |
| | | : queryParams.timeType == 'MONTH' |
| | | ? 'YYYY-MM' |
| | | : 'YYYY-MM-DD' |
| | | " value-format="YYYY-MM-DD" placeholder="æ¶é´" style="width: 100%" /> |
| | | </el-form-item> |
| | | <el-form-item label="è½æºç±»å" prop="energyType"> |
| | | <el-select v-model="queryParams.energyType" placeholder="è½æºç±»å" clearable style="width: 120px"> |
| | | <el-option :label="item.enername" :value="item.enersno" v-for="item in energyTypeList" |
| | | :key="item.enersno" @click="handleEnergyType(item)" /> |
| | | </el-select> |
| | | </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-item> |
| | | <el-button :type="queryParams.analysisType == 'YOY' ? 'primary' : ''" @click="handleAnalysisType('YOY')"> |
| | | 忝 |
| | | </el-button> |
| | | <el-button :type="queryParams.analysisType == 'MOM' ? 'primary' : ''" @click="handleAnalysisType('MOM')"> |
| | | ç¯æ¯ |
| | | </el-button> |
| | | </el-form-item> --> |
| | | <!-- <el-form-item> |
| | | <el-button type="primary" icon="Download" @click="handleExport"> |
| | | å¯¼åº |
| | | </el-button> |
| | | </el-form-item> --> |
| | | </el-form> |
| | | </div> |
| | | <div style=" |
| | | height: calc(100vh - 220px) !important; |
| | | max-height: calc(100vh - 220px) !important; |
| | | overflow-y: auto; |
| | | " v-loading="loading"> |
| | | |
| | | <BaseCard :title="queryParams.nodeName + '-è½è对æ¯åæ'"> |
| | | <div class="chart-box"> |
| | | <div id="Chart1" /> |
| | | </div> |
| | | </BaseCard> |
| | | |
| | | <BaseCard :title="queryParams.nodeName + |
| | | '-è½è对æ¯åæç¯æ¯åæè¡¨-' + |
| | | queryParams.enername |
| | | "> |
| | | <div class="table-box"> |
| | | <el-table :data="departmentList" show-summary> |
| | | <el-table-column label="æ¬ææ¶é´" align="center" key="currentTime" prop="currentTime" |
| | | :show-overflow-tooltip="true" /> |
| | | <el-table-column :label="'æ¬æè' + |
| | | queryParams.enername + |
| | | '(' + |
| | | queryParams.muid + |
| | | ')' |
| | | " align="center" key="currentValue" prop="currentValue" :show-overflow-tooltip="true" /> |
| | | <el-table-column label="åææ¶é´" align="center" key="compareTime" prop="compareTime" |
| | | :show-overflow-tooltip="true" /> |
| | | <el-table-column :label="'åæè' + |
| | | queryParams.enername + |
| | | '(' + |
| | | queryParams.muid + |
| | | ')' |
| | | " align="center" key="contrastValues" prop="contrastValues" :show-overflow-tooltip="true" /> |
| | | <el-table-column :label="(queryParams.analysisType == 'YOY' ? 'å' : 'ç¯') + 'æ¯(%)' |
| | | " align="center" key="ratio" prop="ratio" :show-overflow-tooltip="true" width="200" /> |
| | | </el-table> |
| | | </div> |
| | | </BaseCard> |
| | | <!-- </el-col> |
| | | </el-row> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup name="department"> |
| | | import { |
| | | listRegion, |
| | | listDepartment, |
| | | queryLoopCompareList, |
| | | } from "@/api/energyAnalysis/energyAnalysis"; |
| | | import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"; |
| | | import * as echarts from "echarts"; |
| | | const { proxy } = getCurrentInstance(); |
| | | const { period } = proxy.useDict("period"); |
| | | import { useRoute } from "vue-router"; |
| | | import useSettingsStore from "@/store/modules/settings"; |
| | | const settingsStore = useSettingsStore(); |
| | | watch( |
| | | () => settingsStore.sideTheme, |
| | | (val) => { |
| | | getList(); |
| | | } |
| | | ); |
| | | const energyTypeList = ref(undefined); |
| | | const departmentList = ref([]); |
| | | const loading = ref(false); |
| | | const data = reactive({ |
| | | queryParams: { |
| | | nodeId: null, |
| | | timeType: null, |
| | | dataTime: null, |
| | | analysisType: "MOM", |
| | | timeCode: null, |
| | | energyType: null, |
| | | }, |
| | | query: { |
| | | modelCode: null, |
| | | }, |
| | | }); |
| | | const { queryParams, query } = toRefs(data); |
| | | /** èç¹åå»äºä»¶ */ |
| | | function handleNodeClick(data) { |
| | | queryParams.value.nodeId = data.id; |
| | | queryParams.value.nodeName = data.label; |
| | | handleTimeType(period.value[1].value); |
| | | listEnergyTypeList().then((res) => { |
| | | energyTypeList.value = res.data; |
| | | queryParams.value.energyType = energyTypeList.value[0].enersno; |
| | | queryParams.value.enername = energyTypeList.value[0].enername; |
| | | queryParams.value.muid = energyTypeList.value[0].muid; |
| | | handleQuery(); |
| | | }); |
| | | } |
| | | function handleTimeType(e) { |
| | | queryParams.value.timeType = e; |
| | | if(e=='MONTH'){ |
| | | queryParams.value.timeCode = proxy.dayjs(new Date()).format("YYYY-MM"); |
| | | }else if(e=='YEAR'){ |
| | | queryParams.value.timeCode = proxy.dayjs(new Date()).format("YYYY"); |
| | | }else{ |
| | | queryParams.value.timeCode = proxy.dayjs(new Date()).format("YYYY-MM-DD"); |
| | | } |
| | | } |
| | | function handleEnergyType(item) { |
| | | queryParams.value.enername = item.enername; |
| | | queryParams.value.muid = item.muid; |
| | | handleQuery(); |
| | | } |
| | | function handleAnalysisType(analysisType) { |
| | | queryParams.value.analysisType = analysisType; |
| | | getList(); |
| | | } |
| | | // è½è对æ¯åæ-å表 |
| | | function getList() { |
| | | loading.value = true; |
| | | // å¨åå§åä¹åï¼å
disposeæ§çå®ä¾ |
| | | if (echarts.getInstanceByDom(document.getElementById("Chart1"))) { |
| | | echarts.dispose(document.getElementById("Chart1")); |
| | | } |
| | | // if (echarts.getInstanceByDom(document.getElementById("Chart2"))) { |
| | | // echarts.dispose(document.getElementById("Chart2")); |
| | | // } |
| | | const myChart1 = echarts.init(document.getElementById("Chart1")); |
| | | // const myChart2 = echarts.init(document.getElementById("Chart2")); |
| | | queryLoopCompareList( |
| | | proxy.addDateRange({ |
| | | ...queryParams.value, |
| | | ...query.value, |
| | | }) |
| | | ).then((res) => { |
| | | if (!!res.code && res.code == 200) { |
| | | loading.value = false; |
| | | let xdata = []; |
| | | let yvalue = []; |
| | | let ycompareValue = []; |
| | | let yqoq = []; |
| | | if (!!res.data) { |
| | | res.data.map((item) => { |
| | | xdata.push( |
| | | proxy |
| | | .dayjs(item.currentTime) |
| | | .format( |
| | | queryParams.value.timeType == "YEAR" |
| | | ? "MMæ" |
| | | : queryParams.value.timeType == "MONTH" |
| | | ? "DDæ¥" |
| | | : "HHæ¶" |
| | | ) |
| | | ); |
| | | yvalue.push(!!item.currentValue ? item.currentValue : 0); |
| | | ycompareValue.push(!!item.contrastValues ? item.contrastValues : 0); |
| | | yqoq.push(!!item.ratio ? item.ratio : 0); |
| | | }); |
| | | } |
| | | setTimeout(() => { |
| | | myChart1.setOption({ |
| | | color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"], |
| | | grid: { |
| | | top: "45", |
| | | left: "7%", |
| | | right: "5%", |
| | | bottom: "10", |
| | | containLabel: true, |
| | | }, |
| | | tooltip: { |
| | | trigger: "axis", |
| | | axisPointer: { |
| | | type: "shadow", |
| | | }, |
| | | }, |
| | | legend: { |
| | | icon: "rect", |
| | | itemWidth: 14, |
| | | itemHeight: 10, |
| | | textStyle: { |
| | | color: |
| | | settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", |
| | | }, |
| | | }, |
| | | xAxis: { |
| | | type: "category", |
| | | axisPointer: { |
| | | type: "shadow", |
| | | }, |
| | | axisLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | color: |
| | | settingsStore.sideTheme == "theme-dark" |
| | | ? "#FFFFFF" |
| | | : "#222222", |
| | | }, |
| | | }, |
| | | axisTick: { |
| | | show: false, |
| | | }, |
| | | splitArea: { |
| | | show: false, |
| | | }, |
| | | splitLine: { |
| | | show: false, |
| | | }, |
| | | axisLabel: { |
| | | color: |
| | | settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", |
| | | fontSize: 14, |
| | | padding: [5, 0, 0, 0], |
| | | // formatter: '{value} ml' |
| | | }, |
| | | data: xdata, |
| | | }, |
| | | yAxis: [ |
| | | { |
| | | type: "value", |
| | | name: |
| | | "è" + |
| | | queryParams.value.enername + |
| | | "é(" + |
| | | queryParams.value.muid + |
| | | ")", |
| | | nameTextStyle: { |
| | | color: |
| | | settingsStore.sideTheme == "theme-dark" |
| | | ? "#FFFFFF" |
| | | : "#222222", |
| | | fontSize: 14, |
| | | padding: [0, 0, 5, 0], |
| | | }, |
| | | axisLine: { |
| | | show: false, |
| | | }, |
| | | splitLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | type: "dashed", |
| | | color: |
| | | settingsStore.sideTheme == "theme-dark" |
| | | ? "#FFFFFF" |
| | | : "#222222", |
| | | }, |
| | | }, |
| | | axisTick: { |
| | | show: false, |
| | | }, |
| | | splitArea: { |
| | | show: false, |
| | | }, |
| | | axisLabel: { |
| | | color: |
| | | settingsStore.sideTheme == "theme-dark" |
| | | ? "#FFFFFF" |
| | | : "#222222", |
| | | fontSize: 14, |
| | | }, |
| | | }, |
| | | { |
| | | type: "value", |
| | | name: queryParams.value.analysisType == "YOY" ? "忝(%)" : "ç¯æ¯(%)", |
| | | alignTicks: true, |
| | | nameTextStyle: { |
| | | color: |
| | | settingsStore.sideTheme == "theme-dark" |
| | | ? "#FFFFFF" |
| | | : "#222222", |
| | | fontSize: 14, |
| | | padding: [0, 0, 5, 0], |
| | | }, |
| | | axisLine: { |
| | | show: false, |
| | | }, |
| | | axisTick: { |
| | | show: false, |
| | | }, |
| | | splitLine: { |
| | | show: true, |
| | | lineStyle: { |
| | | type: "dashed", |
| | | color: |
| | | settingsStore.sideTheme == "theme-dark" |
| | | ? "#FFFFFF" |
| | | : "#222222", |
| | | }, |
| | | }, |
| | | splitArea: { |
| | | show: false, |
| | | }, |
| | | axisLabel: { |
| | | color: |
| | | settingsStore.sideTheme == "theme-dark" |
| | | ? "#FFFFFF" |
| | | : "#222222", |
| | | fontSize: 14, |
| | | }, |
| | | }, |
| | | ], |
| | | series: [ |
| | | { |
| | | name: "æ¬æå¼", |
| | | type: "bar", |
| | | barWidth: "8", |
| | | tooltip: { |
| | | valueFormatter: function (value) { |
| | | return value + queryParams.value.muid; |
| | | }, |
| | | }, |
| | | itemStyle: { |
| | | borderRadius: [15, 15, 0, 0], |
| | | }, |
| | | data: yvalue, |
| | | markPoint: { |
| | | data: [ |
| | | { type: "max", name: "Max" }, |
| | | { type: "min", name: "Min" }, |
| | | ], |
| | | }, |
| | | }, |
| | | { |
| | | name: "åæå¼", |
| | | type: "bar", |
| | | barWidth: "8", |
| | | tooltip: { |
| | | valueFormatter: function (value) { |
| | | return value + queryParams.value.muid; |
| | | }, |
| | | }, |
| | | itemStyle: { |
| | | borderRadius: [15, 15, 0, 0], |
| | | }, |
| | | data: ycompareValue, |
| | | markPoint: { |
| | | data: [ |
| | | { type: "max", name: "Max" }, |
| | | { type: "min", name: "Min" }, |
| | | ], |
| | | }, |
| | | }, |
| | | { |
| | | name: queryParams.value.analysisType == "YOY" ? "忝" : "ç¯æ¯", |
| | | type: "line", |
| | | yAxisIndex: 1, |
| | | symbol: "none", // 设置为 'none' 廿åç¹ |
| | | tooltip: { |
| | | valueFormatter: function (value) { |
| | | return value + "%"; |
| | | }, |
| | | }, |
| | | data: yqoq, |
| | | }, |
| | | ], |
| | | }); |
| | | }, 100); |
| | | departmentList.value = !!res.data ? res.data : []; |
| | | window.addEventListener( |
| | | "resize", |
| | | () => { |
| | | myChart1.resize(); |
| | | }, |
| | | { passive: true } |
| | | ); |
| | | } |
| | | }); |
| | | // listDepartment( |
| | | // proxy.addDateRange({ |
| | | // ...queryParams.value, |
| | | // ...query.value, |
| | | // }) |
| | | // ).then((res) => { |
| | | // if (!!res.code && res.code == 200) { |
| | | // loading.value = false; |
| | | // let seriesdata = []; |
| | | // let xdata = []; |
| | | // if (!!energyTypeList.value) { |
| | | // energyTypeList.value.map((item) => { |
| | | // seriesdata.push({ |
| | | // name: item.enername, |
| | | // type: "bar", |
| | | // barWidth: "16", |
| | | // stack: "total", |
| | | // data: [], |
| | | // }); |
| | | // }); |
| | | // } |
| | | // if (!!res.data) { |
| | | // res.data.map((dataItem) => { |
| | | // xdata.push(dataItem.nodeName) |
| | | // seriesdata.forEach((seriesdataItem) => { |
| | | // if ( |
| | | // dataItem.data.find( |
| | | // (dataItemItem) => |
| | | // dataItemItem.energyTypeName == seriesdataItem.name |
| | | // ) == undefined |
| | | // ) { |
| | | // dataItem.data.push({ |
| | | // nodeId: dataItem.nodeId, |
| | | // nodeName: dataItem.nodeName, |
| | | // energyTypeNo: null, |
| | | // energyTypeName: seriesdataItem.name, |
| | | // energyConsumption: 0, |
| | | // }); |
| | | // } |
| | | // dataItem.data.map(dataItemItem => { |
| | | // if (seriesdataItem.name == dataItemItem.energyTypeName) { |
| | | // seriesdataItem.data.push(dataItemItem.energyConsumption) |
| | | // } |
| | | // }) |
| | | // }); |
| | | // }); |
| | | // } |
| | | // setTimeout(() => { |
| | | // myChart2.setOption({ |
| | | // color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"], |
| | | // grid: { |
| | | // top: "45", |
| | | // left: "17%", |
| | | // right: "5%", |
| | | // bottom: "10", |
| | | // containLabel: true, |
| | | // }, |
| | | // tooltip: { |
| | | // trigger: "axis", |
| | | // axisPointer: { |
| | | // type: "shadow", |
| | | // }, |
| | | // }, |
| | | // legend: { |
| | | // icon: "rect", |
| | | // itemWidth: 14, |
| | | // itemHeight: 10, |
| | | // right: 0, |
| | | // textStyle: { |
| | | // color: |
| | | // settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", |
| | | // }, |
| | | // }, |
| | | // xAxis: { |
| | | // nameLocation: "start", |
| | | // type: "value", |
| | | // name: "åä½tce", |
| | | // nameTextStyle: { |
| | | // color: |
| | | // settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", |
| | | // fontSize: 14, |
| | | // padding: [0, 0, 5, 0], |
| | | // }, |
| | | // axisLine: { |
| | | // show: false, |
| | | // }, |
| | | // splitLine: { |
| | | // show: true, |
| | | // lineStyle: { |
| | | // type: "dashed", |
| | | // color: |
| | | // settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", |
| | | // }, |
| | | // }, |
| | | // axisTick: { |
| | | // show: false, |
| | | // }, |
| | | // splitArea: { |
| | | // show: false, |
| | | // }, |
| | | // axisLabel: { |
| | | // color: |
| | | // settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", |
| | | // fontSize: 14, |
| | | // // formatter: '{value} ml' |
| | | // }, |
| | | // }, |
| | | // yAxis: { |
| | | // type: "category", |
| | | // axisPointer: { |
| | | // type: "shadow", |
| | | // }, |
| | | // axisLine: { |
| | | // show: true, |
| | | // lineStyle: { |
| | | // color: |
| | | // settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", |
| | | // }, |
| | | // }, |
| | | // axisTick: { |
| | | // show: false, |
| | | // }, |
| | | // splitArea: { |
| | | // show: false, |
| | | // }, |
| | | // splitLine: { |
| | | // show: false, |
| | | // }, |
| | | // axisLabel: { |
| | | // color: |
| | | // settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", |
| | | // fontSize: 14, |
| | | // padding: [5, 0, 0, 0], |
| | | // // formatter: '{value} ml' |
| | | // }, |
| | | // data: xdata.splice(0, 6), |
| | | // }, |
| | | // series: seriesdata, |
| | | // }); |
| | | // }, 100); |
| | | // window.addEventListener("resize", () => { |
| | | // myChart2.resize(); |
| | | // },{passive: true}); |
| | | // } |
| | | // }); |
| | | } |
| | | // è½è对æ¯åæ-æç´¢ |
| | | function handleQuery() { |
| | | getList(); |
| | | } |
| | | // è½è对æ¯åæ-éç½® |
| | | function resetQuery() { |
| | | proxy.resetForm("queryRef"); |
| | | handleTimeType(period.value[1].value); |
| | | queryParams.value.energyType = energyTypeList.value[0].enersno; |
| | | queryParams.value.enername = energyTypeList.value[0].enername; |
| | | queryParams.value.muid = energyTypeList.value[0].muid; |
| | | queryParams.value.analysisType = "MOM"; |
| | | handleQuery(); |
| | | } |
| | | // è½è对æ¯åæ-å¯¼åº |
| | | function handleExport() { |
| | | proxy.download( |
| | | "consumptionanalysis/energyExport", |
| | | { |
| | | ...queryParams.value, |
| | | ...query.value, |
| | | }, |
| | | `${queryParams.value.nodeName}-ååºè½èåæ_${new Date().getTime()}.xlsx` |
| | | ); |
| | | } |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | @import "@/assets/styles/page.scss"; |
| | | </style> |
| | |
| | | |
| | | // https://vitejs.dev/config/ |
| | | export default defineConfig(({ mode, command }) => { |
| | | mode='production' |
| | | const env = loadEnv(mode, process.cwd()) |
| | | console.log(mode,'==========env') |
| | | const { VITE_APP_ENV } = env |
| | | return { |
| | | // é¨ç½²ç产ç¯å¢åå¼åç¯å¢ä¸çURLã |