|
@@ -86,42 +86,17 @@
|
|
v-model:limit="state.tableData.param.pageSize"
|
|
v-model:limit="state.tableData.param.pageSize"
|
|
@pagination="queryList"
|
|
@pagination="queryList"
|
|
/>
|
|
/>
|
|
- <!-- <div class="title mt20">能耗红榜</div>
|
|
|
|
- <div class="chart-grid">
|
|
|
|
- <div style="height: 250px" ref="redChartOneRef"></div>
|
|
|
|
- <div style="height: 250px" ref="redChartTwoRef"></div>
|
|
|
|
- <div style="height: 250px" ref="redChartThreeRef"></div>
|
|
|
|
- </div>
|
|
|
|
- <div class="title mt20">能耗黑榜</div>
|
|
|
|
- <div class="chart-grid">
|
|
|
|
- <div style="height: 250px" ref="blackChartOneRef"></div>
|
|
|
|
- <div style="height: 250px" ref="blackChartTwoRef"></div>
|
|
|
|
- <div style="height: 250px" ref="blackChartThreeRef"></div>
|
|
|
|
- </div> -->
|
|
|
|
</el-card>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
-import { reactive, onMounted, ref, watch, nextTick } from 'vue';
|
|
|
|
|
|
+import { reactive, onMounted, ref } from 'vue';
|
|
import { FormInstance } from 'element-plus';
|
|
import { FormInstance } from 'element-plus';
|
|
-import * as echarts from 'echarts';
|
|
|
|
-import { useStore } from '/@/store/index';
|
|
|
|
import energyApi from '/@/api/energyAnalysis';
|
|
import energyApi from '/@/api/energyAnalysis';
|
|
-import heatApi from '/@/api/heatStation';
|
|
|
|
import downloadFile from '/@/utils/download';
|
|
import downloadFile from '/@/utils/download';
|
|
import apiDatahub from '/@/api/datahub';
|
|
import apiDatahub from '/@/api/datahub';
|
|
|
|
|
|
-let global: any = {
|
|
|
|
- redChartOneRef: null,
|
|
|
|
- redChartTwoRef: null,
|
|
|
|
- redChartThreeRef: null,
|
|
|
|
- blackChartOneRef: null,
|
|
|
|
- blackChartTwoRef: null,
|
|
|
|
- blackChartThreeRef: null,
|
|
|
|
- dispose: [null, '', undefined],
|
|
|
|
-};
|
|
|
|
-
|
|
|
|
const unitMap = ref<any>({});
|
|
const unitMap = ref<any>({});
|
|
// 统计信息的单位的字典
|
|
// 统计信息的单位的字典
|
|
apiDatahub.template.getDictData({ DictType: 'overview_unit' }).then((res: any) => {
|
|
apiDatahub.template.getDictData({ DictType: 'overview_unit' }).then((res: any) => {
|
|
@@ -131,14 +106,6 @@ apiDatahub.template.getDictData({ DictType: 'overview_unit' }).then((res: any) =
|
|
});
|
|
});
|
|
|
|
|
|
const queryRef = ref();
|
|
const queryRef = ref();
|
|
-const redChartOneRef = ref();
|
|
|
|
-const redChartTwoRef = ref();
|
|
|
|
-const redChartThreeRef = ref();
|
|
|
|
-const blackChartOneRef = ref();
|
|
|
|
-const blackChartTwoRef = ref();
|
|
|
|
-const blackChartThreeRef = ref();
|
|
|
|
-
|
|
|
|
-const store = useStore();
|
|
|
|
const state = reactive({
|
|
const state = reactive({
|
|
myCharts: [],
|
|
myCharts: [],
|
|
charts: {
|
|
charts: {
|
|
@@ -163,18 +130,6 @@ const state = reactive({
|
|
},
|
|
},
|
|
});
|
|
});
|
|
|
|
|
|
-const queryTree = () => {
|
|
|
|
- heatApi.heatStation
|
|
|
|
- .getList({
|
|
|
|
- name: '',
|
|
|
|
- code: '',
|
|
|
|
- status: -1,
|
|
|
|
- })
|
|
|
|
- .then((res: any) => {
|
|
|
|
- state.heatList = res || [];
|
|
|
|
- });
|
|
|
|
-};
|
|
|
|
-
|
|
|
|
const exportData = () => {
|
|
const exportData = () => {
|
|
energyApi.performanceExport(state.tableData.param).then((res: any) => {
|
|
energyApi.performanceExport(state.tableData.param).then((res: any) => {
|
|
downloadFile(res, '环路绩效考核数据.xlsx');
|
|
downloadFile(res, '环路绩效考核数据.xlsx');
|
|
@@ -191,7 +146,6 @@ const queryList = () => {
|
|
};
|
|
};
|
|
// 页面加载时
|
|
// 页面加载时
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
- // queryTree()
|
|
|
|
queryList();
|
|
queryList();
|
|
});
|
|
});
|
|
/** 重置按钮操作 */
|
|
/** 重置按钮操作 */
|
|
@@ -200,103 +154,6 @@ const resetQuery = (formEl: FormInstance | undefined) => {
|
|
formEl.resetFields();
|
|
formEl.resetFields();
|
|
queryList();
|
|
queryList();
|
|
};
|
|
};
|
|
-
|
|
|
|
-let chartArr = [
|
|
|
|
- { globalKey: 'redChartOneRef', refKey: redChartOneRef },
|
|
|
|
- { globalKey: 'redChartTwoRef', refKey: redChartTwoRef },
|
|
|
|
- { globalKey: 'redChartThreeRef', refKey: redChartThreeRef },
|
|
|
|
- { globalKey: 'blackChartOneRef', refKey: blackChartOneRef },
|
|
|
|
- { globalKey: 'blackChartTwoRef', refKey: blackChartTwoRef },
|
|
|
|
- { globalKey: 'blackChartThreeRef', refKey: blackChartThreeRef },
|
|
|
|
-];
|
|
|
|
-
|
|
|
|
-const initChart = () => {
|
|
|
|
- chartArr.forEach((item) => {
|
|
|
|
- initBarChart(item.globalKey, item.refKey);
|
|
|
|
- });
|
|
|
|
-};
|
|
|
|
-
|
|
|
|
-// 初始化图表
|
|
|
|
-const initBarChart = (gk: string, refKey: any) => {
|
|
|
|
- if (!global.dispose.some((b: any) => b === global[gk])) global[gk].dispose();
|
|
|
|
- global[gk] = <any>echarts.init(refKey.value, state.charts.theme);
|
|
|
|
- const option = {
|
|
|
|
- tooltip: {
|
|
|
|
- trigger: 'axis',
|
|
|
|
- axisPointer: {
|
|
|
|
- type: 'shadow',
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- legend: {},
|
|
|
|
- grid: {
|
|
|
|
- left: '3%',
|
|
|
|
- right: '4%',
|
|
|
|
- bottom: '3%',
|
|
|
|
- containLabel: true,
|
|
|
|
- },
|
|
|
|
- xAxis: [
|
|
|
|
- {
|
|
|
|
- type: 'category',
|
|
|
|
- data: ['换热站1', '换热站2', '换热站3', '换热站4', '换热站5', '换热站6', '换热站7'],
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- yAxis: [
|
|
|
|
- {
|
|
|
|
- type: 'value',
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- series: [
|
|
|
|
- {
|
|
|
|
- name: '供水流量',
|
|
|
|
- type: 'bar',
|
|
|
|
- emphasis: {
|
|
|
|
- focus: 'series',
|
|
|
|
- },
|
|
|
|
- data: [320, 332, 301, 334, 390, 330, 320],
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- };
|
|
|
|
- (<any>global[gk]).setOption(option);
|
|
|
|
- (<any>state.myCharts).push(global[gk]);
|
|
|
|
-};
|
|
|
|
-
|
|
|
|
-// 批量设置 echarts resize
|
|
|
|
-const initEchartsResizeFun = () => {
|
|
|
|
- nextTick(() => {
|
|
|
|
- for (let i = 0; i < state.myCharts.length; i++) {
|
|
|
|
- setTimeout(() => {
|
|
|
|
- (<any>state.myCharts[i]).resize();
|
|
|
|
- }, i * 1000);
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
-};
|
|
|
|
-// 批量设置 echarts resize
|
|
|
|
-const initEchartsResize = () => {
|
|
|
|
- window.addEventListener('resize', initEchartsResizeFun);
|
|
|
|
-};
|
|
|
|
-// 页面加载时
|
|
|
|
-onMounted(() => {
|
|
|
|
- initEchartsResize();
|
|
|
|
-});
|
|
|
|
-
|
|
|
|
-// 监听 vuex 中是否开启深色主题
|
|
|
|
-watch(
|
|
|
|
- () => store.state.themeConfig.themeConfig.isIsDark,
|
|
|
|
- (isIsDark) => {
|
|
|
|
- nextTick(() => {
|
|
|
|
- state.charts.theme = isIsDark ? 'transparent' : '';
|
|
|
|
- state.charts.bgColor = isIsDark ? 'transparent' : '';
|
|
|
|
- state.charts.color = isIsDark ? '#dadada' : '#303133';
|
|
|
|
- setTimeout(() => {
|
|
|
|
- // initChart();
|
|
|
|
- }, 500);
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- deep: true,
|
|
|
|
- immediate: true,
|
|
|
|
- }
|
|
|
|
-);
|
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|