taskId:280,remark:'commit'

hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts

@@ -70,3 +70,8 @@ export enum carbonAssets {
   delete = '/carbon-smart/api/carbon/trade/details/delete',
   quotaStatistics = '/carbon-smart/api/carbon/trade/details/quotaStatistics',
 }
+// 上传图片接口
+export enum uploadPic {
+  uploadfiles = '/carbon-smart/api/common/file/uploadfiles',
+  select = '/carbon-smart/api/common/file/select',
+}

hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/carbonAssetsDetail/index.vue

@@ -55,12 +55,19 @@
             <a-button type="primary" @click="addDetail">新增</a-button>
             <a-button type="primary" style="margin-left: 6px">导入</a-button>
             <a-button type="primary" style="margin-left: 6px">导出</a-button>
-            <a-button type="primary" style="margin-left: 6px">批量删除</a-button>
+            <a-button
+              type="primary"
+              style="margin-left: 6px"
+              :disabled="selectedRowKeys.length === 0"
+              @click="deleteMore"
+              >批量删除</a-button
+            >
           </div>
         </div>
         <a-table
           :columns="columns"
           :data-source="data"
+          rowKey="id"
           @change="onChange"
           :rowSelection="{
             selectedRowKeys: selectedRowKeys,
@@ -134,18 +141,19 @@
       <a-form-item ref="name" label="交易数量" name="transactionQuantity">
         <a-input v-model:value="formState.transactionQuantity" placeholder="请输入交易数量" />
       </a-form-item>
-      <a-form-item ref="name" label="发生金额" name="amountIncurredValue">
+      <a-form-item ref="name" label="发生金额" name="amountIncurred">
-        <a-input v-model:value="formState.amountIncurredValue" placeholder="请输入发生金额" />
+        <a-input v-model:value="formState.amountIncurred" placeholder="请输入发生金额" />
       </a-form-item>
       <a-form-item ref="name" label="交易对象" name="tradingPartner">
         <a-input v-model:value="formState.tradingPartner" placeholder="请输入交易对象" />
       </a-form-item>
-      <a-form-item ref="name" label="交易凭证" name="tradingPartner">
+      <a-form-item ref="name" label="交易凭证">
         <a-upload
-          v-model:file-list="fileList"
+          :file-list="fileList"
           name="file"
-          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+          accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf"
-          :headers="headers"
+          @remove="handleFileRemove"
+          :before-upload="beforeUpload"
           @change="handleChange">
           <a-button>
             <upload-outlined></upload-outlined>
@@ -164,10 +172,16 @@
 <script lang="ts" setup>
   import { ref, defineEmits, toRaw } from 'vue';
   import { http } from '/nerv-lib/util/http';
+  import { NSAxios } from '/nerv-lib/util/http/axios';
   import { UploadOutlined } from '@ant-design/icons-vue';
-  import type { UploadChangeParam } from 'ant-design-vue';
+  import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
   import { Pagination, Modal, message } from 'ant-design-vue';
-  import { carbonAssets, carbonEmissionFactorLibrary } from '/@/api/carbonEmissionFactorLibrary';
+  import {
+    carbonAssets,
+    carbonEmissionFactorLibrary,
+    uploadPic,
+  } from '/@/api/carbonEmissionFactorLibrary';
+  import { log } from 'console';
   defineOptions({
     energyType: 'carbonAssets', // 与页面路由name一致缓存才可生效
     components: {
@@ -207,6 +221,7 @@
   const getDetailList = () => {
     fetch(carbonAssets.carbonDetailsList, queryParams.value).then((res) => {
       data.value = res.data.records;
+      total.value = res.data.total;
     });
   };
   getDetailList();
@@ -276,12 +291,20 @@
     getDictList();
     visible.value = true;
     formState.value.id = record.id;
+    fetch(uploadPic.select, { bizId: record.id, bizTpye: 1 }).then((res) => {
+      fileList.value = res.data;
+    });
+    formState.value = JSON.parse(JSON.stringify(record));
+    if (formState.value.expenditure === 0) {
+      formState.value.transactionQuantity = formState.value.income;
+    } else {
+      formState.value.transactionQuantity = formState.value.expenditure;
+    }
     setTimeout(() => {
-      let selectDevice = ref([Number(record.transactionType)]);
+      let selectDevice = ref([Number(formState.value.transactionType)]);
-      findParentIds(options.value, record.transactionType, selectDevice.value);
+      findParentIds(options.value, formState.value.transactionType, selectDevice.value);
-      record.transactionType = selectDevice;
+      formState.value.transactionType = selectDevice;
-      formState.value.transactionType = record.transactionType;
+      formState.value.transactionType = formState.value.transactionType;
-      formState.value = record;
     }, 500);
   };
   // 定义一个递归函数来查找每一级的id 设备类型回显 层级方法
@@ -297,6 +320,7 @@
     }
   }
   const delData = (record) => {
+    const id = [record.id];
     Modal.confirm({
       title: '警告',
       content: '确定要删除吗?',
@@ -304,7 +328,26 @@
       okType: 'primary',
       cancelText: '取消',
       onOk() {
-        fetch(carbonAssets.delete, { id: record.id }).then((res) => {
+        fetch(carbonAssets.delete, { ids: id }).then((res) => {
+          debugger;
+          message.success('操作成功！');
+          getDetailList();
+        });
+      },
+      onCancel() {
+        console.log('Cancel');
+      },
+    });
+  };
+  const deleteMore = () => {
+    Modal.confirm({
+      title: '警告',
+      content: '确定要删除吗?',
+      okText: '确定',
+      okType: 'primary',
+      cancelText: '取消',
+      onOk() {
+        fetch(carbonAssets.delete, { ids: selectedRowKeys.value }).then((res) => {
           message.success('操作成功！');
           getDetailList();
         });
@@ -353,6 +396,55 @@
     visible.value = true;
     getDictList();
   };
+  // 上传附件
+  const fileList = ref<UploadProps['fileList']>([]);
+  // const headers = {
+  //   authorization: 'authorization-text',
+  // };
+  // const beforeUpload = (file: File) => {
+  //   return false; // 返回 true 表示允许上传
+  // };
+  const beforeUpload: UploadProps['beforeUpload'] = (file) => {
+    // fileList.value = [...(fileList.value || []), file];
+    return false;
+  };
+  const handleChange = (info: UploadChangeParam) => {
+    fileList.value = [...info.fileList]
+    if (info.file.status !== 'uploading') {
+      console.log(info.file, info.fileList);
+    }
+    if (info.file.status === 'done') {
+      message.success(`${info.file.name} 文件上传成功`);
+    } else if (info.file.status === 'error') {
+      message.error(`${info.file.name} 文件上传失败`);
+    }
+  };
+  const handleFileRemove = (file) => {
+    const newFileList = [];
+    fileList.value.forEach((item) => {
+      if (item.uid !== file.uid) {
+        newFileList.push(item);
+      }
+    });
+    fileList.value = newFileList;
+  };
+  const uploadQuery = ref({
+    bizTpye: 1,
+  });
+  const config = {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  };
+  function createHttp() {
+    /** todo  临时去除超时时间 */
+    return new NSAxios({
+      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
+      withCredentials: true,
+    });
+  }
+  const uploadHttp = createHttp();
+  const url = '/carbon-smart/api/common/file/uploadfiles'; // 请求api
   const onSubmit = () => {
     formRef.value
       .validate()
@@ -361,10 +453,49 @@
         if (formState.value.transactionType) {
           formState.value.transactionType = formState.value.transactionType.join(',').split(',')[1];
         }
+        if (formState.value.accountType.value) {
+          formState.value.accountType = formState.value.accountType.value;
+        }
         fetch(carbonAssets.createOrUpdate, formState.value).then((res) => {
-          message.success('操作成功！');
+          if (res.data.id && fileList.value.length !== 0) {
-          visible.value = false;
+            // uploadQuery.value.bizId = res.data.id;
-          getDetailList();
+            const formData = ref(new FormData());
+            fileList.value.forEach(file => {
+              console.log(file,'xxy');
+              
+              formData.value.append('files[]', file);
+            });
+              formData.value.append('bizTpye', 1);
+              formData.value.append('bizId', res.data.id);
+            // uploadQuery.value.files = formData.value;
+            // uploadQuery.value.files = fileList.value;
+            debugger;
+            fetch(uploadPic.uploadfiles, formData.value)
+              .then((res) => {
+                message.success('操作成功！');
+                visible.value = false;
+                getDetailList();
+              })
+              .catch((error) => {
+                console.log('error', error);
+              });
+            console.log(config,'xxy555');
+            
+            // uploadHttp
+            //   .post(url, formData.value, config.headers)
+            //   .then((res) => {
+            //     console.log(res);
+                
+            //   })
+            //   .catch((res) => {
+            //     console.log(res);
+                
+            //   });
+          } else {
+            message.success('操作成功！');
+            visible.value = false;
+            getDetailList();
+          }
         });
       })
       .catch((error) => {
@@ -377,13 +508,14 @@
     transactionType: [{ required: true, message: '请选择交易类型', trigger: 'change' }],
     transactionDate: [{ required: true, message: '请选择交易日期', trigger: 'change' }],
     transactionQuantity: [{ required: true, message: '请输入交易数量', trigger: 'change' }],
-    amountIncurredValue: [{ required: true, message: '请输入发生金额', trigger: 'change' }],
+    amountIncurred: [{ required: true, message: '请输入发生金额', trigger: 'change' }],
     tradingPartner: [{ required: true, message: '请输入交易对象', trigger: 'change' }],
   };
   // 关闭新增抽屉
   const onClose = () => {
     visible.value = false;
     formState.value = {};
+    fileList.value = [];
     formRef.value.resetFields();
   };
   // 统计表格

hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/carbonAssetsDetail/index2.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="clearfix">
+    <a-upload :file-list="fileList" :before-upload="beforeUpload" @remove="handleRemove">
+      <a-button>
+        <upload-outlined></upload-outlined>
+        Select File
+      </a-button>
+    </a-upload>
+    <a-button
+      type="primary"
+      :disabled="fileList.length === 0"
+      :loading="uploading"
+      style="margin-top: 16px"
+      @click="handleUpload"
+    >
+      {{ uploading ? 'Uploading' : 'Start Upload' }}
+    </a-button>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { UploadOutlined } from '@ant-design/icons-vue';
+import { message } from 'ant-design-vue';
+import type { UploadProps } from 'ant-design-vue';
+
+const fileList = ref<UploadProps['fileList']>([]);
+const uploading = ref<boolean>(false);
+
+const handleRemove: UploadProps['onRemove'] = file => {
+  const index = fileList.value.indexOf(file);
+  const newFileList = fileList.value.slice();
+  newFileList.splice(index, 1);
+  fileList.value = newFileList;
+};
+
+const beforeUpload: UploadProps['beforeUpload'] = file => {
+  fileList.value = [...(fileList.value || []), file];
+  return false;
+};
+
+const handleUpload = () => {
+  const formData = new FormData();
+  fileList.value.forEach((file: UploadProps['fileList'][number]) => {
+    debugger
+    formData.append('files[]', file as any);
+  });
+  const fileBlob = formData.get('files');
+console.log(fileBlob); 
+  uploading.value = true;
+debugger
+};
+</script>
+

hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/index.vue

@@ -6,7 +6,9 @@
           ><img width="68px" height="68px" src="../../../../src/icon/carbonAssetsMoney-1.svg"
         /></div>
         <div class="moneyTitle">全国碳账户估值（CNY）</div>
-        <div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">{{nationwide.valuation}}</div>
+        <div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">{{
+          nationwide.valuation
+        }}</div>
         <div class="moneyDetail"
           ><img
             @click="viewDetail(1)"
@@ -21,12 +23,12 @@
       </div>
       <div class="bottom">
         <div class="calculation TLCard">
-          <div class="money">{{nationwide.opening}}</div>
+          <div class="money">{{ nationwide.opening }}</div>
           <div class="moneyType">期初余额（tCO2）</div>
         </div>
         <img width="17px" height="17px" src="../../../../src/icon/carbonAssetsAdd.svg" />
         <div class="calculation TLCard">
-          <div class="money">{{nationwide.income}}</div>
+          <div class="money">{{ nationwide.income }}</div>
           <div class="moneyType">
             <img width="20px" height="17px" src="../../../../src/icon/carbonAssetsIncrease.svg" />
             增加（tCO2）
@@ -34,7 +36,7 @@
         </div>
         <img width="17px" height="17px" src="../../../../src/icon/carbonAssetsReduce.svg" />
         <div class="calculation TLCard">
-          <div class="money">{{nationwide.expenditure}}</div>
+          <div class="money">{{ nationwide.expenditure }}</div>
           <div class="moneyType">
             <img width="20px" height="17px" src="../../../../src/icon/carbonAssetsLower.svg" />
             减少（tCO2）
@@ -42,7 +44,7 @@
         </div>
         <img width="17px" height="17px" src="../../../../src/icon/carbonAssetsEqual.svg" />
         <div class="calculation TLCard">
-          <div class="money">{{nationwide.period}}</div>
+          <div class="money">{{ nationwide.period }}</div>
           <div class="moneyType">期末余额（tCO2）</div>
         </div>
       </div>
@@ -53,7 +55,7 @@
           ><img width="68px" height="68px" src="../../../../src/icon/carbonAssetsMoney-2.svg"
         /></div>
         <div class="moneyTitle">地方碳账户估值（CNY）</div>
-        <div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">{{place.valuation}}</div>
+        <div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">{{ place.valuation }}</div>
         <div class="moneyDetail"
           ><img
             width="34px"
@@ -68,12 +70,12 @@
       </div>
       <div class="bottom">
         <div class="calculation TRCard">
-          <div class="money">{{place.opening}}</div>
+          <div class="money">{{ place.opening }}</div>
           <div class="moneyType">期初余额（tCO2）</div>
         </div>
         <img width="17px" height="17px" src="../../../../src/icon/carbonAssetsAdd.svg" />
         <div class="calculation TRCard">
-          <div class="money">{{place.income}}</div>
+          <div class="money">{{ place.income }}</div>
           <div class="moneyType">
             <img width="20px" height="17px" src="../../../../src/icon/carbonAssetsIncrease.svg" />
             增加（tCO2）
@@ -81,7 +83,7 @@
         </div>
         <img width="17px" height="17px" src="../../../../src/icon/carbonAssetsReduce.svg" />
         <div class="calculation TRCard">
-          <div class="money">{{place.expenditure}}</div>
+          <div class="money">{{ place.expenditure }}</div>
           <div class="moneyType">
             <img width="20px" height="17px" src="../../../../src/icon/carbonAssetsLower.svg" />
             减少（tCO2）
@@ -89,7 +91,7 @@
         </div>
         <img width="17px" height="17px" src="../../../../src/icon/carbonAssetsEqual.svg" />
         <div class="calculation TRCard">
-          <div class="money">{{place.period}}</div>
+          <div class="money">{{ place.period }}</div>
           <div class="moneyType">期末余额（tCO2）</div>
         </div>
       </div>
@@ -100,7 +102,7 @@
           ><img width="68px" height="68px" src="../../../../src/icon/carbonAssetsMoney-3.svg"
         /></div>
         <div class="moneyTitle">CCER资产估值（CNY）</div>
-        <div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">{{ccer.valuation}}</div>
+        <div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">{{ ccer.valuation }}</div>
         <div class="moneyDetail"
           ><img
             width="34px"
@@ -115,12 +117,12 @@
       </div>
       <div class="bottom">
         <div class="calculation BLCard">
-          <div class="money">{{ccer.opening}}</div>
+          <div class="money">{{ ccer.opening }}</div>
           <div class="moneyType">期初余额（tCO2）</div>
         </div>
         <img width="17px" height="17px" src="../../../../src/icon/carbonAssetsAdd.svg" />
         <div class="calculation BLCard">
-          <div class="money">{{ccer.income}}</div>
+          <div class="money">{{ ccer.income }}</div>
           <div class="moneyType">
             <img width="20px" height="17px" src="../../../../src/icon/carbonAssetsIncrease.svg" />
             增加（tCO2）
@@ -128,7 +130,7 @@
         </div>
         <img width="17px" height="17px" src="../../../../src/icon/carbonAssetsReduce.svg" />
         <div class="calculation BLCard">
-          <div class="money">{{ccer.expenditure}}</div>
+          <div class="money">{{ ccer.expenditure }}</div>
           <div class="moneyType">
             <img width="20px" height="17px" src="../../../../src/icon/carbonAssetsLower.svg" />
             减少（tCO2）
@@ -136,7 +138,7 @@
         </div>
         <img width="17px" height="17px" src="../../../../src/icon/carbonAssetsEqual.svg" />
         <div class="calculation BLCard">
-          <div class="money">{{ccer.period}}</div>
+          <div class="money">{{ ccer.period }}</div>
           <div class="moneyType">期末余额（tCO2）</div>
         </div>
       </div>
@@ -147,7 +149,7 @@
           ><img width="68px" height="68px" src="../../../../src/icon/carbonAssetsMoney-4.svg"
         /></div>
         <div class="moneyTitle">全国碳账户估值（CNY）</div>
-        <div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">{{whole.whole}}</div>
+        <div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">{{ whole.whole }}</div>
       </div>
       <div class="title" style="justify-content: center">
         <img
@@ -158,17 +160,17 @@
       </div>
       <div class="bottom">
         <div class="BRCard">
-          <div class="money">{{whole.nationwide}}</div>
+          <div class="money">{{ whole.nationwide }}</div>
           <div class="moneyType">全国碳账户资产估值</div>
         </div>
         <img width="17px" height="17px" src="../../../../src/icon/carbonAssetsAdd.svg" />
         <div class="BRCard">
-          <div class="money">{{whole.place}}</div>
+          <div class="money">{{ whole.place }}</div>
           <div class="moneyType">地方碳账户资产估值</div>
         </div>
         <img width="17px" height="17px" src="../../../../src/icon/carbonAssetsAdd.svg" />
         <div class="BRCard">
-          <div class="money">{{whole.ccer}}</div>
+          <div class="money">{{ whole.ccer }}</div>
           <div class="moneyType">CCER碳资产估值</div>
         </div>
       </div>
@@ -204,23 +206,24 @@
     orgId: orgId.value,
     year: new Date().getFullYear(),
   });
-  const nationwide = ref()
+  const nationwide = ref();
-  const place = ref()
+  const place = ref();
-  const ccer = ref()
+  const ccer = ref();
-  const whole = ref()
+  const whole = ref();
   const getData = () => {
     fetch(carbonAssets.carbonAssets, queryParams.value).then((res) => {
       console.log(res);
-      nationwide.value = res.data.nationwide
+      nationwide.value = res.data.nationwide;
-      place.value = res.data.place
+      place.value = res.data.place;
-      ccer.value = res.data.ccer
+      ccer.value = res.data.ccer;
-      whole.value = res.data.whole
+      whole.value = res.data.whole;
     });
   };
   getData();
   // 填报页点击返回
   const updateData = (type) => {
     homePage.value = type;
+    getData();
   };
 </script>
 

hx-ai-intelligent/src/view/carbonEmissionManage/carbonInventoryCheck/fillInPage/index.vue

@@ -283,7 +283,7 @@
         <a-row>
           <a-col :span="12">
             <a-form-item ref="name" label="因子值" name="factorId">
-              <ns-input v-model:value="editFormState.factorId" disabled />
+              <ns-input v-model:value="editFormState.factorId" />
             </a-form-item>
           </a-col>
           <a-col :span="12">

hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/categoryDeatil.vue

@@ -5,25 +5,262 @@
         <span>统计数据</span>
       </div>
       <div class="operation">
-        <a-button type="primary"  @click="changeParentData">返回</a-button>
+        <a-button type="primary" @click="changeParentData">返回</a-button>
       </div>
     </div>
     <div class="contant">
-      <div class="chartsPart">
+      <a-card class="chartsPart">
-      </div>
+        <div class="chart" ref="chartRef"></div>
-      <div class="tablePart">
+        <div class="contrast">
-      </div>
+          <div class="model">
+            <div class="quantity"><span>12,500.00</span>kwh</div>
+            <div class="quantityTitle">2023年实际用量</div>
+          </div>
+          <div class="model"></div>
+          <div class="model"></div>
+          <div class="model"></div>
+          <div class="model"></div>
+        </div>
+      </a-card>
+      <a-card class="tablePart" :bordered="false">
+        <div class="button" style="margin-bottom: 12px">
+          <a-button type="primary" :disabled="selectedRowKeys.length === 0">批量设置</a-button>
+          <a-button type="primary" style="margin-left: 6px">基准值设置</a-button>
+        </div>
+        <a-table
+          :columns="columns"
+          :data-source="data"
+          rowKey="id"
+          bordered
+          :rowSelection="{
+            selectedRowKeys: selectedRowKeys,
+            onChange: onSelectionChange,
+          }"
+          :pagination="false">
+          <template #bodyCell="{ column, text, record }">
+            <template v-if="column.key === 'action'">
+              <span>
+                <a @click="editData(record)">修改</a>
+              </span>
+            </template>
+          </template>
+        </a-table>
+      </a-card>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { defineEmits } from 'vue';
+  import { ref, defineEmits } from 'vue';
+  import * as echarts from 'echarts';
   // 点击返回
   const emit = defineEmits(['change-data']);
   const changeParentData = () => {
     emit('change-data', true);
   };
+  // 表格
+  const selectedRowKeys = ref([]);
+  const onSelectionChange = (selectedKeys, selectedRows) => {
+    selectedRowKeys.value = selectedKeys;
+  };
+  const columns = ref([
+    {
+      title: '序号',
+      customRender: (text: any) => {
+        return text.index + 1;
+      },
+    },
+    {
+      title: '日期',
+      dataIndex: 'name',
+    },
+    {
+      title: '2023年实际用量',
+      dataIndex: 'name',
+    },
+    {
+      title: '2024年实际用量',
+      dataIndex: 'name',
+    },
+    {
+      title: '基准值',
+      dataIndex: 'money',
+    },
+    {
+      title: '是否按去年折算',
+      dataIndex: 'address',
+    },
+    {
+      title: '计算方式',
+      dataIndex: 'address',
+    },
+    {
+      title: '折算率',
+      dataIndex: 'address',
+    },
+    {
+      title: '2024年预算',
+      dataIndex: 'address',
+    },
+    {
+      title: '操作',
+      key: 'action',
+    },
+  ]);
+
+  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',
+    },
+  ];
+  // echarts图
+  const chartRef = ref(null);
+  let chartInstance: echarts.ECharts | null = null;
+  const chart = () => {
+    chartInstance = echarts.init(chartRef.value);
+    const option = {
+      backgroundColor: 'transparent',
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+          label: {
+            show: true,
+          },
+        },
+      },
+      grid: {
+        left: '4%',
+        top: '18%',
+        right: '5%',
+        bottom: '10%',
+      },
+      legend: {
+        data: ['昨日总人数', '今日实时人数', '昨日使用率', '今日使用率'],
+        top: '0',
+        left: '0',
+        textStyle: {
+          color: '#666',
+          fontSize: 12,
+        },
+        itemWidth: 20, // 图例标记的宽度
+        itemHeight: 10, // 图例标记的高度
+      },
+      xAxis: {
+        data: ['2020', '2021', '2022', '2023', '2024'],
+        axisLine: {
+          show: true, //隐藏X轴轴线
+          lineStyle: {
+            color: '#d9d9d9',
+            width: 1,
+          },
+        },
+        axisTick: {
+          show: true, //隐藏X轴刻度
+          alignWithLabel: true,
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: '#d9d9d9', //X轴文字颜色
+            fontSize: 12,
+          },
+          interval: 0,
+        },
+      },
+      yAxis: [
+        {
+          type: 'value',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              width: 1,
+              color: '#d9d9d9',
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#d9d9d9',
+              fontSize: 12,
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: '昨日总人数',
+          type: 'bar',
+          barWidth: 18,
+          itemStyle: {
+            normal: {
+              color: '#6395f9',
+            },
+          },
+          data: [24, 45, 43, 35, 76],
+        },
+        {
+          name: '今日实时人数',
+          type: 'bar',
+          barWidth: 18,
+          itemStyle: {
+            normal: {
+              color: '#62daab',
+            },
+          },
+          data: [133, 23, 114, 67, 89],
+        },
+        {
+          name: '昨日使用率',
+          type: 'line',
+          smooth: true, // 开启平滑曲线
+          symbol: 'none', //标记的图形为实心圆
+          lineStyle: {
+            color: '#f4664a',
+            width: 2,
+          },
+          data: [4.2, 3.5, 2.9, 7.8, 2],
+        },
+        {
+          name: '今日使用率',
+          type: 'line',
+          smooth: true, // 开启平滑曲线
+          symbol: 'none', //标记的图形为实心圆
+          lineStyle: {
+            color: '#f4664a',
+            width: 2,
+          },
+          data: [4, 6, 9, 8, 5],
+        },
+      ],
+    };
+    chartInstance = echarts.init(chartRef.value);
+    chartInstance.setOption(option);
+  };
+  setTimeout(() => {
+    chart();
+  }, 500);
 </script>
 
 <style lang="less" scoped>
@@ -75,13 +312,56 @@
     height: calc(100% - 5vh);
     .chartsPart {
       width: 100%;
-      height: 40%;
+      height: 60%;
       display: flex;
       justify-content: space-between;
+      .chart {
+        width: 100%;
+        height: 70%;
+      }
+      .contrast {
+        width: 100%;
+        height: 30%;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+      }
+      .model {
+        width: 16%;
+        height: 90%;
+        background: #f7f9ff;
+        padding: 12px;
+        .quantity {
+          font-size: 12px;
+          font-weight: 400;
+          letter-spacing: 0px;
+          line-height: 17px;
+          color: rgba(0, 0, 0, 1);
+          > span {
+            font-size: 28px;
+            font-weight: 400;
+            letter-spacing: 0px;
+            line-height: 37px;
+            color: rgba(0, 0, 0, 1);
+          }
+        }
+        .quantityTitle {
+          font-size: 16px;
+          font-weight: 700;
+          letter-spacing: 0.96px;
+          line-height: 21px;
+          color: rgba(0, 0, 0, 1);
+        }
+      }
     }
     .tablePart {
       height: calc(60% - 20px);
       margin-top: 20px;
     }
   }
+  :deep(.ant-card-body) {
+    padding: unset;
+    height: 100%;
+    width: 100%;
+  }
 </style>

hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/index.vue

@@ -14,7 +14,7 @@
     </div>
     <div class="contant">
       <div class="chartsPart">
-        <div class="ballChart"></div>
+        <div class="ballChart" ref="ballChartRef"></div>
         <div class="pillarChart" ref="pillarChartRef"></div>
       </div>
       <div class="tablePart">
@@ -31,7 +31,7 @@
     </div>
   </div>
   <div class="totalContant" v-else>
-    <categoryDeatil @change-data="updateData"/>
+    <categoryDeatil @change-data="updateData" />
   </div>
   <!-- 新增节点 -->
   <a-drawer :visible="visible" :width="500" @close="onClose" :footer-style="{ textAlign: 'right' }">
@@ -50,6 +50,7 @@
   import type { Dayjs } from 'dayjs';
   import * as echarts from 'echarts';
   import categoryDeatil from './categoryDeatil.vue';
+  import 'echarts-liquidfill';
   defineOptions({
     energyType: 'all', // 与页面路由name一致缓存才可生效
   });
@@ -190,8 +191,25 @@
     chartInstance = echarts.init(pillarChartRef.value);
     chartInstance.setOption(option);
   };
+  const ballChartRef = ref(null);
+  let ballChartInstance: echarts.ECharts | null = null;
+  const drawSQ = () => {
+    ballChartInstance = echarts.init(ballChartRef.value);
+    const option = {
+      series: [
+        {
+          type: 'liquidFill',
+          data: [0.6, 0.5, 0.4, 0.3],
+          radius: '80%',
+        },
+      ],
+    };
+    ballChartInstance = echarts.init(ballChartRef.value);
+    ballChartInstance.setOption(option);
+  };
   setTimeout(() => {
     drawPillarChart();
+    drawSQ();
   }, 500);
   // 新增节点
   const visible = ref(false);