taskid:114 remark:'commit'

2024-07-30 15:19:19 +08:00
parent 180ad4a005
commit 99e2e803ef
4 changed files with 408 additions and 66 deletions
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/all/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/all/index.vue
@@ -0,0 +1,283 @@
+<template>
+  <div class="totalContant">
+    <div class="ns-form-title">
+      <div class="title">
+        <span>查询</span>
+        <a-date-picker v-if="selectedTime" style="margin-left: 5%" :value="value5" picker="year" />
+        <a-date-picker v-else style="margin-left: 5%" :value="value5" picker="month" />
+      </div>
+      <div class="operation">
+        <div class="month" :style="monthStyles" @click="changeToMonth"><span>月</span></div>
+        <div class="year" :style="yearStyles" @click="changeToYear"><span>年</span></div>
+      </div>
+    </div>
+    <div class="contant">
+      <div class="chartsPart">
+        <div class="electricityConsumption" ref="ydlChart"></div>
+      </div>
+      <div class="tablePart">
+        <a-table :columns="columns" :data-source="data" bordered :pagination="false"> </a-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { Dayjs } from 'dayjs';
+  import * as echarts from 'echarts';
+  defineOptions({
+    energyType: 'all', // 与页面路由name一致缓存才可生效
+  });
+  const value5 = ref<Dayjs>();
+  // 年/月切换
+  const monthStyles = ref('background: #f2f2f2');
+  const yearStyles = ref('background: #2778ff');
+  const selectedTime = ref(true);
+  const changeToMonth = () => {
+    monthStyles.value = 'background: #2778ff';
+    yearStyles.value = 'background: #f2f2f2';
+    columns.value[2].title = '月份';
+    columns.value[2].dataIndex = 'month';
+    selectedTime.value = false;
+  };
+  const changeToYear = () => {
+    monthStyles.value = 'background: #f2f2f2';
+    yearStyles.value = 'background: #2778ff';
+    columns.value[2].title = '年份';
+    columns.value[2].dataIndex = 'year';
+    selectedTime.value = true;
+  };
+  // 用电量
+  const ydlChart = ref(null);
+  let chartInstance: echarts.ECharts | null = null;
+  const drawEcharts = () => {
+    chartInstance = echarts.init(ydlChart.value);
+    const handred = 100;
+    let point = 66;
+    const option = {
+      backgroundColor: 'transparent',
+      title: [
+        {
+          text: point + '%',
+          x: 'center',
+          y: '35%',
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 'normal',
+            fontStyle: 'normal',
+          },
+        },
+        {
+          text: '用电量预算达成率',
+          x: 'center',
+          y: '85%',
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 'normal',
+            fontStyle: 'normal',
+          },
+        },
+      ],
+      tooltip: {
+        formatter: function (params) {
+          return params.name + '：' + params.percent + ' %';
+        },
+      },
+      series: [
+        {
+          name: 'circle',
+          type: 'pie',
+          clockWise: true,
+          radius: ['40%', '50%'],
+          center: ['50%', '40%'],
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+              },
+            },
+          },
+          hoverAnimation: false,
+          data: [
+            {
+              value: point,
+              name: '占比',
+              itemStyle: {
+                normal: {
+                  color: '#4FADFD',
+                  label: {
+                    show: false,
+                  },
+                  labelLine: {
+                    show: false,
+                  },
+                },
+              },
+            },
+            {
+              name: '剩余',
+              value: handred - point,
+              itemStyle: {
+                normal: {
+                  color: '#E1E8EE',
+                },
+              },
+            },
+          ],
+        },
+      ],
+    };
+    chartInstance = echarts.init(ydlChart.value);
+    chartInstance.setOption(option);
+  };
+
+  setTimeout(() => {
+    drawEcharts();
+  }, 500);
+  // 表格
+  const columns = ref([
+    {
+      title: '序号',
+      customRender: (text: any) => {
+        return text.index + 1;
+      },
+    },
+    {
+      title: '名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '年份',
+      dataIndex: 'name',
+    },
+    {
+      title: '计量单位',
+      dataIndex: 'name',
+    },
+    {
+      title: '总实际用量',
+      dataIndex: 'money',
+    },
+    {
+      title: '总预算量',
+      dataIndex: 'address',
+    },
+    {
+      title: '基准值',
+      dataIndex: 'address',
+    },
+    {
+      title: '节能量',
+      dataIndex: 'address',
+    },
+    {
+      title: '预算达成率',
+      dataIndex: 'address',
+    },
+  ]);
+
+  const data = [
+    {
+      key: '1',
+      name: 'John Brown',
+      money: '￥300,000.00',
+      address: 'New York No. 1 Lake Park',
+    },
+    {
+      key: '2',
+      name: 'Jim Green',
+      money: '￥1,256,000.00',
+      address: 'London No. 1 Lake Park',
+    },
+    {
+      key: '3',
+      name: 'Joe Black',
+      money: '￥120,000.00',
+      address: 'Sidney No. 1 Lake Park',
+    },
+  ];
+</script>
+
+<style lang="less" scoped>
+  .totalContant {
+    height: 100%;
+    padding: 12px;
+  }
+  :deep(.ant-tabs-content) {
+    padding: 16px;
+  }
+  .ns-form-title {
+    font-weight: bold;
+    user-select: text;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 5vh;
+
+    .title {
+      text-align: left;
+      height: 32px;
+      line-height: 32px;
+      font-weight: bold;
+      user-select: text;
+      position: relative;
+      padding-left: 9px;
+      width: 50%;
+    }
+    .title::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 13px;
+      width: 3px;
+      border-radius: 1px;
+      background-color: #2778ff;
+    }
+    .operation {
+      display: flex;
+      margin-right: 10px;
+      font-weight: 400;
+      height: 70%;
+      cursor: pointer;
+      width: 10%;
+    }
+    .month {
+      width: 70px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // background: #f2f2f2;
+    }
+    .year {
+      width: 70px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // background: #2778ff;
+    }
+  }
+  .contant {
+    width: 100%;
+    height: calc(100% - 5vh);
+    .chartsPart {
+      width: 100%;
+      height: 35%;
+      .electricityConsumption {
+        width: 19%;
+        height: 100%;
+        background: rgba(39, 120, 255, 0.05);
+      }
+    }
+    .tablePart {
+      height: calc(65% - 20px);
+      margin-top: 20px;
+    }
+  }
+</style>