双碳平台静态页面提交

src/views/b/aa/index.vue

@@ -1,7 +1,7 @@
 <template>
   <el-container style="height: 90vh; border: 1px solid #eee; padding: 20px;">
     <el-tabs v-model="activeTab" type="border-card" style="width:100%;">
-      <el-tab-pane label="基础配置" name="config">
+      <el-tab-pane label="基础类配置" name="config">
         <el-container>
           <el-aside style="width: 600px; margin-right: 20px;">
             <div class="config-container">
@@ -90,11 +90,11 @@
           </el-main>
         </el-container>
       </el-tab-pane>
-      <el-tab-pane label="情景依托" name="newTab">
+      <el-tab-pane label="情景依托类配置" name="newTab">
         <!-- 新标签页的内容 -->
         <NewPage />
       </el-tab-pane>
-      <el-tab-pane label="规划边界" name="newTab2">
+      <el-tab-pane label="规划边界类配置" name="newTab2">
         <!-- 新标签页的内容 -->
         <NewPage2 />
       </el-tab-pane>

src/views/b/ab/index.vue

@@ -6,7 +6,26 @@
     <el-main style="height: calc(100% - 60px);">
       <el-tabs v-model="activeTab" type="card" style="height: 100%;">
         <el-tab-pane label="碳排放趋势分析" name="trend-analysis">
-          <h1>碳排放趋势分析</h1>
+          <div style="display: flex;justify-content: space-between">
+            <h1>{{city}}碳排放趋势分析</h1>
+            <el-select v-model="city" placeholder="请选择城市" style="width: 20%;margin-top: 25px;" @change="refreshChart">
+              <el-option label="全省" value="全省">全省</el-option>
+              <el-option label="长沙" value="长沙">长沙</el-option>
+              <el-option label="株洲" value="株洲">株洲</el-option>
+              <el-option label="湘潭" value="湘潭">湘潭</el-option>
+              <el-option label="衡阳" value="衡阳">衡阳</el-option>
+              <el-option label="邵阳" value="邵阳">邵阳</el-option>
+              <el-option label="岳阳" value="岳阳">岳阳</el-option>
+              <el-option label="常德" value="常德">常德</el-option>
+              <el-option label="张家界" value="张家界">张家界</el-option>
+              <el-option label="益阳" value="益阳">益阳</el-option>
+              <el-option label="郴州" value="郴州">郴州</el-option>
+              <el-option label="永州" value="永州">永州</el-option>
+              <el-option label="怀化" value="怀化">怀化</el-option>
+              <el-option label="娄底" value="娄底">娄底</el-option>
+              <el-option label="湘西" value="湘西">湘西</el-option>
+            </el-select>
+          </div>
           <el-row :gutter="20">
             <el-col :span="12">
               <el-card style="height: 100%;">
@@ -37,8 +56,48 @@
             </el-col>
           </el-row>
         </el-tab-pane>
-        <el-tab-pane label="数据分析报告" name="report">
-          <h1>数据分析报告</h1>
+        <el-tab-pane label="结果验证与对比" name="predictions">
+          <h1>结果验证与对比</h1>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-card style="height: 100%;">
+                <h2>模型验证结果</h2>
+                <p>我们对所使用的线性回归模型进行了验证，确保其预测结果的准确性和可靠性。</p>
+                <el-divider></el-divider>
+                <h3>验证方法</h3>
+                <p>我们采用了交叉验证的方法来评估模型的性能，确保模型在不同时间段的数据上都能保持一致性和稳定性。</p>
+                <el-divider></el-divider>
+                <h3>验证结果</h3>
+                <ul>
+                  <li>模型的R²值达到了0.85，表明模型解释了85%的数据变异性。</li>
+                  <li>均方误差（MSE）为10，显示出较低的预测误差。</li>
+                  <li>平均绝对误差（MAE）为5，进一步验证了模型的预测精度。</li>
+                </ul>
+              </el-card>
+            </el-col>
+            <el-col :span="12">
+              <el-card style="height: 100%;">
+                <h2>预测结果对比</h2>
+                <p>以下是实际观测值与模型预测值的对比，以评估模型的预测性能。</p>
+                <el-divider></el-divider>
+                <h3>预测对比</h3>
+                <ul>
+                  <li>2024年：实际碳排放量为205万吨，预测碳排放量为200万吨。</li>
+                  <li>2025年：实际碳排放量为195万吨，预测碳排放量为190万吨。</li>
+                  <li>2026年：实际碳排放量为185万吨，预测碳排放量为180万吨。</li>
+                </ul>
+                <el-divider></el-divider>
+                <h3>对比分析</h3>
+                <p>通过对比分析，我们发现模型的预测结果与实际观测值非常接近，证明了模型的有效性和准确性。</p>
+              </el-card>
+            </el-col>
+          </el-row>
+        </el-tab-pane>
+        <el-tab-pane label="数据导出与展示" name="report">
+          <div style="display: flex;justify-content: space-between">
+            <h1>数据分析报告</h1>
+            <el-button type="success" @click="downloadReport" style="margin-top: 20px;">下载报告</el-button>
+          </div>
           <el-row :gutter="20">
             <el-col :span="12">
               <el-card style="height: 100%;">
@@ -73,45 +132,17 @@
                 </ul>
               </el-card>
             </el-col>
-          </el-row>
-          <el-button type="success" @click="downloadReport" style="margin-top: 20px;">下载报告</el-button>
-        </el-tab-pane>
-        <el-tab-pane label="预测与建议" name="predictions">
-          <h1>预测与建议</h1>
-          <el-row :gutter="20">
-            <el-col :span="12">
+            <el-col :span="24">
               <el-card style="height: 100%;">
-                <h2>未来碳排放预测</h2>
-                <p>根据当前数据和模型，预计未来几年的碳排放量将有所下降。</p>
-                <el-divider></el-divider>
-                <h3>预测模型</h3>
-                <p>我们使用了线性回归模型来预测未来的碳排放量。模型考虑了多种因素，包括经济发展、政策调控和技术进步。</p>
+                <h2>预测结果对比</h2>
+                <p>通过对数据的深入分析，我们预测以下几点：</p>
                 <el-divider></el-divider>
                 <h3>预测结果</h3>
                 <ul>
-                  <li>2022年：预计碳排放量为200万吨。</li>
-                  <li>2023年：预计碳排放量为190万吨。</li>
-                  <li>2024年：预计碳排放量为180万吨。</li>
-                </ul>
-              </el-card>
-            </el-col>
-            <el-col :span="12">
-              <el-card style="height: 100%;">
-                <h2>减排建议</h2>
-                <ul>
-                  <li>提高能效，减少能源消耗。</li>
-                  <li>推广可再生能源的使用。</li>
-                  <li>加强碳捕捉和存储技术的应用。</li>
-                  <li>鼓励企业采用低碳生产技术。</li>
+                  <li>2024年：预计碳排放量为200万吨。</li>
+                  <li>2025年：预计碳排放量为190万吨。</li>
+                  <li>2026年：预计碳排放量为180万吨。</li>
                 </ul>
-                <el-divider></el-divider>
-                <h3>实施步骤</h3>
-                <ol>
-                  <li>制定详细的能效提升计划，包括设备更新和技术改造。</li>
-                  <li>投资可再生能源项目，如太阳能和风能发电站。</li>
-                  <li>开展碳捕捉和存储技术研发，降低技术成本。</li>
-                  <li>出台相关政策，鼓励企业采用低碳生产技术。</li>
-                </ol>
               </el-card>
             </el-col>
           </el-row>
@@ -124,14 +155,38 @@
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from 'vue';
 import * as echarts from 'echarts';
-import { ElMessage } from 'element-plus';
+import {ElLoading, ElMessage} from 'element-plus';
 import html2pdf from 'html2pdf.js';
+import {useRoute, useRouter} from "vue-router";
 
 const activeTab = ref('trend-analysis');
 const chart = ref(null);
 const nationalPowerGenerationChart = ref(null);
 const nationalInstalledCapacityChart = ref(null);
 const chartType = ref('line');
+const city = ref('全省')
+const route = useRoute();
+const router = useRouter();
+const refreshChart = ()=>{
+  router.push({query:{city: city.value}})
+  if(city.value !== "全省"){
+    tableData.value = tableData.value.map(q=>{
+      q.emission = (q.emission / 2);
+      q.energy = (q.energy / 2);
+      return q;
+    })
+  }else {
+    tableData.value = tableData.value.map(q=>{
+      q.emission = (q.emission * 2);
+      q.energy = (q.energy * 2);
+      return q;
+    })
+  }
+  updateChart();
+  updateNationalPowerGenerationChart();
+  updateNationalInstalledCapacityChart();
+}
+city.value = route.query.city
 const tableData = ref([
   { year: '2015', emission: 120, energy: 220 },
   { year: '2016', emission: 132, energy: 182 },
@@ -539,9 +594,19 @@ const updateNationalInstalledCapacityChart = () => {
 // };
 
 const downloadReport = () => {
+  //展示全屏loading
+  ElLoading.service({
+    lock: true,
+    text: '正在生成报告，请稍等...',
+    background: 'rgba(0, 0, 0, 0.7)'
+  });
   const element = document.querySelector('.el-tab-pane[name="report"]');
   html2pdf().from(element).save('数据分析报告.pdf');
-  ElMessage.success('报告已成功下载');
+
+  setTimeout(() => {
+    ElLoading.service().close();
+    ElMessage.success('报告已成功下载');
+  }, 2000);
 };
 
 onMounted(() => {

src/views/c/ab/index.vue

@@ -23,7 +23,7 @@
           </el-table-column>
           <el-table-column prop="actionDate" label="行动日期" />
         </el-table>
-        <div ref="completenessChart" style="width: 600px; height: 400px; margin-top: 20px;" v-show="activeName === 'completeness'"></div>
+        <div ref="completenessChart" style="width: 800px; height: 400px; margin-top: 20px;" v-show="activeName === 'completeness'"></div>
       </el-tab-pane>
       <el-tab-pane label="上报及时性" name="timeliness">
         <el-button @click="exportData" style="margin-bottom: 10px;">导出数据</el-button>
@@ -42,9 +42,10 @@
               </el-tag>
             </template>
           </el-table-column>
-          <el-table-column prop="actionDate" label="行动日期" />
+          <el-table-column prop="actionDate" label="上报日期" />
+          <el-table-column prop="actionDate2" label="截止日期" />
         </el-table>
-        <div ref="timelinessChart" style="width: 600px; height: 400px; margin-top: 20px;" v-show="activeName === 'timeliness'"></div>
+        <div ref="timelinessChart" style="width: 800px; height: 400px; margin-top: 20px;" v-show="activeName === 'timeliness'"></div>
       </el-tab-pane>
       <el-tab-pane label="数据准确性" name="accuracy">
         <el-button @click="exportData" style="margin-bottom: 10px;">导出数据</el-button>
@@ -63,9 +64,21 @@
               </el-tag>
             </template>
           </el-table-column>
-          <el-table-column prop="actionDate" label="行动日期" />
+          <el-table-column prop="actionDate" label="预测数据值" />
+          <el-table-column prop="actionDate2" label="实际数据值" />
         </el-table>
-        <div ref="accuracyChart" style="width: 600px; height: 400px; margin-top: 20px;" v-show="activeName === 'accuracy'"></div>
+        <div ref="accuracyChart" style="width: 800px; height: 400px; margin-top: 20px;" v-show="activeName === 'accuracy'"></div>
+      </el-tab-pane>
+      <el-tab-pane label="质量评分体系" name="qualityScore">
+        <el-button @click="exportData" style="margin-bottom: 10px;">导出数据</el-button>
+        <el-table :data="qualityScoreData" style="width: 100%" v-show="activeName === 'qualityScore'">
+          <el-table-column prop="name" label="企业名称" />
+          <el-table-column prop="completenessScore" label="完整性得分" />
+          <el-table-column prop="timelinessScore" label="及时性得分" />
+          <el-table-column prop="accuracyScore" label="准确性得分" />
+          <el-table-column prop="overallScore" label="综合评分" />
+        </el-table>
+        <div ref="qualityScoreChart" style="width: 800px; height: 400px; margin-top: 20px;" v-show="activeName === 'qualityScore'"></div>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -88,38 +101,52 @@ const completenessData = [
   { company: '未来创新实验室', name: '绿色建筑比例', value: 92, description: '绿色建筑的比例', status: '优秀', actionDate: '2023-10-07' },
   { company: '暗物质研究室', name: '清洁能源投资', value: 89, description: '清洁能源的投资金额', status: '良好', actionDate: '2023-10-08' },
   { company: '量子计算中心', name: '碳足迹管理', value: 84, description: '碳足迹管理的情况', status: '正常', actionDate: '2023-10-09' },
-  { company: '虚拟现实工作室', name: '环境管理体系认证', value: 86, description: '环境管理体系的认证情况', status: '良好', actionDate: '2023-10-10' }
+  { company: '虚拟现实工作室', name: '环境管理体系认证', value: 86, description: '环境管理体系的认证情况', status: '良好', actionDate: '2023-10-10' },
 ]
 
 const timelinessData = [
-  { name: '能源消耗数据上报', value: 95, description: '能源消耗数据的上报情况', status: '优秀', actionDate: '2023-10-01' },
-  { name: '碳排放数据上报', value: 90, description: '碳排放数据的上报情况', status: '良好', actionDate: '2023-10-02' },
-  { name: '节能改造项目进展', value: 85, description: '节能改造项目的进展情况', status: '正常', actionDate: '2023-10-03' },
-  { name: '绿色建筑数据', value: 92, description: '绿色建筑的数据上报情况', status: '优秀', actionDate: '2023-10-04' },
-  { name: '清洁能源投资数据', value: 88, description: '清洁能源投资的数据上报情况', status: '良好', actionDate: '2023-10-05' },
-  { name: '碳足迹管理数据', value: 91, description: '碳足迹管理的数据上报情况', status: '优秀', actionDate: '2023-10-06' },
-  { name: '环境管理体系认证数据', value: 93, description: '环境管理体系认证的数据上报情况', status: '优秀', actionDate: '2023-10-07' },
-  { name: '能源审计报告', value: 89, description: '能源审计报告的上报情况', status: '良好', actionDate: '2023-10-08' },
-  { name: '碳排放核查报告', value: 90, description: '碳排放核查报告的上报情况', status: '良好', actionDate: '2023-10-09' },
-  { name: '节能减排措施实施情况', value: 87, description: '节能减排措施实施情况的上报', status: '正常', actionDate: '2023-10-10' }
+  { name: '能源消耗数据上报', value: 95, description: '能源消耗数据的上报情况', status: '优秀', actionDate: '2023-10-01',actionDate2: '2023-10-02' },
+  { name: '碳排放数据上报', value: 90, description: '碳排放数据的上报情况', status: '良好', actionDate: '2023-10-02',actionDate2: '2023-10-04' },
+  { name: '节能改造项目进展', value: 85, description: '节能改造项目的进展情况', status: '正常', actionDate: '2023-10-03',actionDate2: '2023-10-05' },
+  { name: '绿色建筑数据', value: 92, description: '绿色建筑的数据上报情况', status: '优秀', actionDate: '2023-10-04',actionDate2: '2023-10-06' },
+  { name: '清洁能源投资数据', value: 88, description: '清洁能源投资的数据上报情况', status: '良好', actionDate: '2023-10-05',actionDate2: '2023-10-07' },
+  { name: '碳足迹管理数据', value: 91, description: '碳足迹管理的数据上报情况', status: '优秀', actionDate: '2023-10-06',actionDate2: '2023-10-08' },
+  { name: '环境管理体系认证数据', value: 93, description: '环境管理体系认证的数据上报情况', status: '优秀', actionDate: '2023-10-07',actionDate2: '2023-10-09' },
+  { name: '能源审计报告', value: 89, description: '能源审计报告的上报情况', status: '良好', actionDate: '2023-10-08',actionDate2: '2023-10-10' },
+  { name: '碳排放核查报告', value: 90, description: '碳排放核查报告的上报情况', status: '良好', actionDate: '2023-10-09',actionDate2: '2023-10-11' },
+  { name: '节能减排措施实施情况', value: 87, description: '节能减排措施实施情况的上报', status: '正常', actionDate: '2023-10-10',actionDate2: '2023-10-12' }
 ]
 
 const accuracyData = [
-  { name: '能源消耗数据', value: 100, description: '能源消耗数据的准确性', status: '优秀', actionDate: '2023-10-01' },
-  { name: '碳排放数据', value: 100, description: '碳排放数据的准确性', status: '优秀', actionDate: '2023-10-02' },
-  { name: '节能改造项目数据', value: 100, description: '节能改造项目数据的准确性', status: '优秀', actionDate: '2023-10-03' },
-  { name: '绿色建筑数据', value: 100, description: '绿色建筑数据的准确性', status: '优秀', actionDate: '2023-10-04' },
-  { name: '清洁能源投资数据', value: 100, description: '清洁能源投资数据的准确性', status: '优秀', actionDate: '2023-10-05' },
-  { name: '碳足迹管理数据', value: 100, description: '碳足迹管理数据的准确性', status: '优秀', actionDate: '2023-10-06' },
-  { name: '环境管理体系认证数据', value: 100, description: '环境管理体系认证数据的准确性', status: '优秀', actionDate: '2023-10-07' },
-  { name: '能源审计报告数据', value: 100, description: '能源审计报告数据的准确性', status: '优秀', actionDate: '2023-10-08' },
-  { name: '碳排放核查报告数据', value: 100, description: '碳排放核查报告数据的准确性', status: '优秀', actionDate: '2023-10-09' },
-  { name: '节能减排措施实施数据', value: 100, description: '节能减排措施实施数据的准确性', status: '优秀', actionDate: '2023-10-10' }
+  { name: '能源消耗数据', value: 90, description: '能源消耗数据的准确性', status: '优秀', actionDate: '2213',actionDate2: '4654' },
+  { name: '碳排放数据', value: 100, description: '碳排放数据的准确性', status: '优秀', actionDate: '4311',actionDate2: '5435' },
+  { name: '节能改造项目数据', value: 98, description: '节能改造项目数据的准确性', status: '优秀', actionDate: '1233',actionDate2: '2343' },
+  { name: '绿色建筑数据', value: 97, description: '绿色建筑数据的准确性', status: '优秀', actionDate: '2313',actionDate2: '4353' },
+  { name: '清洁能源投资数据', value: 100, description: '清洁能源投资数据的准确性', status: '优秀', actionDate: '1231',actionDate2: '4531' },
+  { name: '碳足迹管理数据', value: 97, description: '碳足迹管理数据的准确性', status: '优秀', actionDate: '1521',actionDate2: '2432' },
+  { name: '环境管理体系认证数据', value: 100, description: '环境管理体系认证数据的准确性', status: '优秀', actionDate: '2412',actionDate2: '4335' },
+  { name: '能源审计报告数据', value: 100, description: '能源审计报告数据的准确性', status: '优秀', actionDate: '3212',actionDate2: '5675' },
+  { name: '碳排放核查报告数据', value: 99, description: '碳排放核查报告数据的准确性', status: '优秀', actionDate: '1231',actionDate2: '5435' },
+  { name: '节能减排措施实施数据', value: 100, description: '节能减排措施实施数据的准确性', status: '优秀', actionDate: '2312',actionDate2: '3453' },
+]
+
+const qualityScoreData = [
+  { name: '奇趣科技有限公司', completenessScore: 85, timelinessScore: 95, accuracyScore: 90, overallScore: 90,value:90 },
+  { name: '神秘生物研究所', completenessScore: 90, timelinessScore: 90, accuracyScore: 100, overallScore: 93,value:93 },
+  { name: '幽灵电子厂', completenessScore: 80, timelinessScore: 85, accuracyScore: 98, overallScore: 87,value:87 },
+  { name: '隐形材料公司', completenessScore: 88, timelinessScore: 92, accuracyScore: 97, overallScore: 92,value:92 },
+  { name: '幻影能源集团', completenessScore: 82, timelinessScore: 91, accuracyScore: 100, overallScore: 91,value:91 },
+  { name: '超时空科技', completenessScore: 87, timelinessScore: 89, accuracyScore: 97, overallScore: 91,value:91 },
+  { name: '未来创新实验室', completenessScore: 92, timelinessScore: 93, accuracyScore: 100, overallScore: 95,value:95 },
+  { name: '暗物质研究室', completenessScore: 89, timelinessScore: 89, accuracyScore: 99, overallScore: 92,value:92 },
+  { name: '量子计算中心', completenessScore: 84, timelinessScore: 90, accuracyScore: 100, overallScore: 91,value:91 },
+  { name: '虚拟现实工作室', completenessScore: 86, timelinessScore: 87, accuracyScore: 100, overallScore: 91,value:91 },
 ]
 
 const completenessChart = ref(null)
 const timelinessChart = ref(null)
 const accuracyChart = ref(null)
+const qualityScoreChart = ref(null)
 
 const getStatusType = (status) => {
   switch (status) {
@@ -140,8 +167,10 @@ const initChart = (chartRef, title, data, chartType) => {
   switch (chartType) {
     case 'bar':
       option = {
+        //让标题居中
         title: {
-          text: title
+          text: title,
+          left:'center'
         },
         tooltip: {},
         xAxis: {
@@ -162,7 +191,8 @@ const initChart = (chartRef, title, data, chartType) => {
     case 'pie':
       option = {
         title: {
-          text: title
+          text: title,
+          left:'center'
         },
         tooltip: {
           trigger: 'item'
@@ -189,7 +219,8 @@ const initChart = (chartRef, title, data, chartType) => {
     case 'line':
       option = {
         title: {
-          text: title
+          text: title,
+          left:'center'
         },
         tooltip: {
           trigger: 'axis'
@@ -242,6 +273,8 @@ watch(activeName, (newVal) => {
     initChart(timelinessChart, '上报及时性', timelinessData, 'pie')
   } else if (newVal === 'accuracy') {
     initChart(accuracyChart, '数据准确性', accuracyData, 'line')
+  } else if (newVal === 'qualityScore') {
+    initChart(qualityScoreChart, '综合评分', qualityScoreData, 'bar')
   }
 })
 </script>

src/views/d/aa/index.vue

@@ -63,20 +63,21 @@
             <p><strong>产品名称:</strong> {{ selectedProduct.name }}</p>
             <p><strong>描述:</strong> {{ selectedProduct.description }}</p>
             <p><strong>碳足迹:</strong> {{ selectedProduct.carbonFootprint }} kg CO2e</p>
+            <div ref="processChart" style="width: 100%; height: 400px;"></div>
           </el-dialog>
         </el-tab-pane>
-        <el-tab-pane label="工序积木图" name="processDiagram">
-          <h3>工序积木图</h3>
-          <el-select v-model="selectedIndustry" placeholder="请选择行业" style="margin-bottom: 20px;">
-            <el-option
-                v-for="industry in industries"
-                :key="industry.value"
-                :label="industry.label"
-                :value="industry.value"
-            />
-          </el-select>
-          <div ref="processChart" style="width: 100%; height: 400px;"></div>
-        </el-tab-pane>
+<!--        <el-tab-pane label="工序积木图" name="processDiagram">-->
+<!--          <h3>工序积木图</h3>-->
+<!--          <el-select v-model="selectedIndustry" placeholder="请选择行业" style="margin-bottom: 20px;">-->
+<!--            <el-option-->
+<!--                v-for="industry in industries"-->
+<!--                :key="industry.value"-->
+<!--                :label="industry.label"-->
+<!--                :value="industry.value"-->
+<!--            />-->
+<!--          </el-select>-->
+<!--          -->
+<!--        </el-tab-pane>-->
       </el-tabs>
     </el-main>
   </div>
@@ -209,7 +210,13 @@ const filteredProducts = computed(() => {
 
 const processChart = ref(null)
 
-const initProcessChart = () => {
+const initProcessChart = async () => {
+  await nextTick(); // 确保 DOM 已经更新
+  if (!processChart.value) {
+    console.error('processChart is not available');
+    return;
+  }
+
   const chart = echarts.init(processChart.value);
   const selectedIndustryData = industryData[selectedIndustry.value] || [];
   const treeData = {
@@ -238,7 +245,6 @@ const initProcessChart = () => {
         data: [treeData],
         top: '18%',
         bottom: '14%',
-        // 修改布局为横向
         layout: 'orthogonal',
         symbol: 'emptyCircle',
         symbolSize: 7,
@@ -248,7 +254,7 @@ const initProcessChart = () => {
           position: 'left',
           verticalAlign: 'middle',
           align: 'right',
-          fontSize: 10
+          fontSize: 16
         },
         leaves: {
           label: {
@@ -301,9 +307,10 @@ onMounted(() => {
   }
 })
 
-const showProductDetails = (row) => {
+const showProductDetails = async (row) => {
   selectedProduct.value = row
   productDialogVisible.value = true
+  await initProcessChart();
 }
 </script>