From 4fa44f71fbb58abf9256f8bd872b8e0890f49f9c Mon Sep 17 00:00:00 2001
From: 龚焕茏 <2842157468@qq.com>
Date: 星期三, 24 四月 2024 18:08:59 +0800
Subject: [PATCH] 合同规则分三层、合同积分新增

---
 src/views/system/result/detail/index1.vue |  389 +++++++++++++++++++++++++++++++++++++++----------------
 1 files changed, 273 insertions(+), 116 deletions(-)

diff --git a/src/views/system/result/detail/index1.vue b/src/views/system/result/detail/index1.vue
index d8b604f..6b9bd96 100644
--- a/src/views/system/result/detail/index1.vue
+++ b/src/views/system/result/detail/index1.vue
@@ -1,39 +1,23 @@
 <template>
-  <div style="padding: 15px">
-    <div style="display: flex;flex-direction: row;">
-      <div class="now-item">
-        <div class="box now">
-          <div class="title">
-            瑙嗛
+  <div style="padding: 0px 10px">
+    <div>
+      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="margin-bottom: 10px">
+        <el-menu-item index="1">鐪佸巺鑰冩牳</el-menu-item>
+        <el-menu-item index="2">鍖哄煙鑰冩牳</el-menu-item>
+      </el-menu>
+    </div>
+
+    <div class="data-chart-container">
+      <el-card class="data-card" :body-style="{ height: '100%' }">
+        <div class="card-content">
+          <div class="title-container">
+            <h1>鑰冩牳鎴愮哗</h1>
           </div>
-          <div>
-            98
+          <div class="chart-container">
+            <div id="chartContent" ref="chartContent"></div>
           </div>
         </div>
-      </div>
-      <div class="now-item">
-        <div class="box now">
-          <div class="title">
-            浜鸿劯
-          </div>
-          <div>
-            98
-          </div>
-        </div>
-      </div>
-      <div class="now-item">
-        <div class="box now">
-          <div class="title">
-            鐩戞帶
-          </div>
-          <div>
-            98
-          </div>
-        </div>
-      </div>
-      <div style="justify-content: center;align-items: center;display: flex;width: 80px">
-        <i class="el-icon-caret-left">鏈湀</i>
-      </div>
+      </el-card>
     </div>
 
     <div style="margin-top: 35px">
@@ -41,38 +25,56 @@
         :data="tableData"
         style="width: 100%">
         <el-table-column
-          label="鏈堜唤"
-          prop="month">
+          label="鑰冩牳鏃堕棿"
+          prop="createTime"
+          align="center">
         </el-table-column>
         <el-table-column
-          label="浜鸿劯"
-          prop="renlian">
-        </el-table-column>
-        <el-table-column
-          label="瑙嗛"
-          prop="shipin">
-        </el-table-column>
-        <el-table-column
-          label="杞﹁締"
-          prop="cheliang">
-        </el-table-column>
-        <el-table-column
-          align="right">
-          <template slot="header" slot-scope="scope">
-            <el-date-picker
-              size="mini"
-              style="width: 100%"
-              v-model="searchForm.time"
-              type="monthrange"
-              range-separator="~"
-              start-placeholder="寮�濮嬫湀"
-              end-placeholder="缁撴潫鏈�">
-            </el-date-picker>
-          </template>
+          label="鑰冩牳瀵硅薄"
+          prop="deptId"
+          align="center">
           <template slot-scope="scope">
+            {{ translateDeptId(scope.row.deptId) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="鏍囩"
+          prop="examineTag"
+          align="center">
+          <template slot-scope="scope">
+            {{ scope.row.examineTag == 0 ? '鐪佸巺鑰冩牳' : '甯傚眬鑰冩牳' }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="鑰冩牳绫诲瀷"
+          prop="examineCategory"
+          align="center">
+          <template slot-scope="scope">
+          <dict-tag :options="dict.type.platform_examine_category" :value="scope.row.examineCategory"/>
+          </template>
+        </el-table-column>
+
+
+        <el-table-column
+          label="鍒嗘暟"
+          prop="score"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          label="鐘舵��"
+          prop="publish"
+          align="center">
+        </el-table-column>
+        <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button size="small" type="text"  v-show="scope.row.publish != 1">纭鍙戝竷</el-button>
+            <el-button size="small" type="text"  v-show="scope.row.publish == 1">鍙栨秷鍙戝竷</el-button>
             <el-button
               size="mini"
-              @click="handleDetail(scope.$index, scope.row)">璇︽儏</el-button>
+              type="text"
+              icon="el-icon-view"
+              @click="handleDetail(scope.row,scope.index)"
+            >璇︾粏</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -86,7 +88,7 @@
         :page-sizes="[5, 10, 20]"
         :page-size="5"
         layout="total, sizes, prev, pager, next, jumper"
-        :total="5">
+        :total="4">
       </el-pagination>
     </div>
 
@@ -94,49 +96,80 @@
 </template>
 
 <script>
+import { listScore, getScore, delScore, addScore, updateScore,publishScore} from "@/api/platform/check-score";
+import { areaSelect } from '@/api/system/dept'
+import * as echarts from 'echarts';
+let lineChart = null;
+let observer = null;
 export default {
   name: 'index',
+  dicts: ['platform_examine_use','platform_examine_category'],
   data() {
     return {
-      tableData: [
+      activeIndex: '1',
+      activeIndex2: '2',
+      areaList:[],
+      dateRange: '',
+      company: '',
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        deptId: null,
+      },
+      dataList: [
         {
-          renlian: 94,
-          shipin: 89.5,
-          cheliang: 92,
-          month: "2024骞�3鏈�"
-        },
-        {
-          renlian: 94,
-          shipin: 89.5,
-          cheliang: 92,
-          month: "2024骞�2鏈�"
-        },
-        {
-          renlian: 94,
-          shipin: 89.5,
-          cheliang: 92,
-          month: "2024骞�1鏈�"
-        },
-        {
-          renlian: 94,
-          shipin: 89.5,
-          cheliang: 92,
-          month: "2023骞�12鏈�"
-        },
-        ,
-        {
-          renlian: 94,
-          shipin: 89.5,
-          cheliang: 92,
-          month: "2023骞�11鏈�"
-        },
+          name: '鍏ㄩ儴',
+          complete: { '4.5': 95.5, '4.6': 95.3, '4.7': 96.0, '4.8': 97.2, '4.9': 96.5 ,
+            '4.10': 95.5, '4.11': 95.3, '4.12': 96.0, '4.13': 97.2, '4.14': 96.5 ,
+            '4.15': 95.5, '4.16': 95.3, '4.17': 96.0, '4.18': 97.2, '4.19': 96.5 ,
+            '4.20': 95.5, '4.21': 95.3, '4.22': 96.0, '4.23': 97.2, '4.24': 96.5,
+            '4.25': 95.5, '4.26': 95.3, '4.27': 96.0, '4.28': 97.2, '4.29': 96.5
+          },
+          waiting: { '4.5': 94.8, '4.6': 91.3, '4.7': 95.3, '4.8': 92.3, '4.9': 93.3,
+            '4.10': 94.8, '4.11': 91.3, '4.12': 95.3, '4.13': 92.3, '4.14': 93.3 },
+          pending: { '4.5': 91.6, '4.6': 92.6, '4.7': 93.7, '4.8': 94.0, '4.9': 95.9
+            ,'4.10': 91.6, '4.11': 92.6, '4.12': 93.7, '4.13': 94.0, '4.14': 95.9 }
+        }
       ],
+      tableData: [],
       searchForm: {
         time: null,
       }
     }
   },
+  created() {
+    //鑰冩牳鎴愮哗璇︽儏璺宠浆鍙傛暟鎺ユ敹
+    console.log(this.$route.query.index)
+    if(this.$route.query.index){
+      this.queryParams.deptId = this.$route.query.index
+    }
+    this.getList(this.$route.query.index);
+    this.areaSelect();
+  },
   methods: {
+    // 鍖哄煙涓嬫媺鏁版嵁
+    areaSelect() {
+      areaSelect().then(res => {
+        this.areaList = res.data;
+      })
+    },
+    translateDeptId(deptId) {
+      const department = this.areaList.find(dept => dept.id == deptId);
+      return department ? department.value : '鏈煡';
+    },
+    /** 瀵艰埅鍒囨崲 */
+    handleSelect(key){
+      this.activeIndex = key; // 鏇存柊褰撳墠婵�娲荤殑鑿滃崟椤�
+      this.getList();
+    },
+    /** 鏌ヨ鑰冩牳妯℃澘鍒楄〃 */
+    getList(deptId) {
+      this.loading = true;
+      listScore(this.queryParams).then(response => {
+        this.tableData = response.data[deptId];
+        this.loading = false;
+      });
+    },
     handleSizeChange(val) {
       console.log(`姣忛〉 ${val} 鏉);
     },
@@ -149,37 +182,161 @@
     },
     handleDelete(index, row) {
       console.log(index, row);
+    },
+    initChart() {
+      const option = {
+        legend: {
+          right: 'right',
+          top: 'top',
+          icon: 'rect',
+          orient: "vertical",
+          data: [
+            {
+              name: '杞﹁締鑰冩牳',
+              itemStyle: {
+                color: 'rgba(62, 144, 247, 1)'
+              }
+            },
+            {
+              name: '浜鸿劯鑰冩牳',
+              itemStyle: {
+                color: 'rgba(85, 192, 191, 1)'
+              }
+            },
+            {
+              name: '瑙嗛鑰冩牳',
+              itemStyle: {
+                color: 'rgba(255, 165, 0, 1)'
+              }
+            },
+          ],
+        },
+        grid: {
+          left: 0,
+          right: 0,
+          bottom: 0,
+          top: '20%',
+          containLabel: true
+        },
+        tooltip: {},
+        xAxis: {
+          type: 'category',
+          data: Object.keys(this.acitveData.complete),
+        },
+        yAxis: {
+          min: 90,
+        },
+        series: [
+          {
+            name: '杞﹁締鑰冩牳',
+            data: Object.entries(this.acitveData.complete).map(([key, value]) => value),
+            type: 'line',
+            itemStyle: {
+              color: 'rgba(62, 144, 247, 1)'
+            }
+          },
+          {
+            name: '浜鸿劯鑰冩牳',
+            data: Object.entries(this.acitveData.waiting).map(([key, value]) => value),
+            type: 'line',
+            itemStyle: {
+              color: 'rgba(85, 192, 191, 1)'
+            }
+          },
+          {
+            name: '瑙嗛鑰冩牳',
+            data: Object.entries(this.acitveData.pending).map(([key, value]) => value),
+            type: 'line',
+            itemStyle: {
+              color: 'rgba(255, 165, 0, 1)'
+            }
+          }
+        ]
+      };
+      lineChart.setOption(option, true);
+    },
+
+    // 鐩戝惉鍙樺寲
+    observe() {
+      if (!observer) {
+        observer = new ResizeObserver(entries => {
+          this.handleResize();
+        })
+      }
+      observer.observe(this.$refs.chartContent);
+    },
+    // 绐楀彛鍙樻崲
+    handleResize() {
+      if (lineChart) {
+        lineChart.resize();
+      }
     }
+
+  },
+  mounted() {
+    this.acitveData = this.dataList[0];
+    this.company = this.acitveData.name;
+    lineChart = echarts.init(this.$refs.chartContent);
+    this.initChart();
+    this.observe();
+  },
+  beforeDestroy() {
+    if (lineChart) {
+      lineChart.dispose();
+      observer.unobserve(this.$refs.chartContent);
+    }
+  },
+  handleSelect(key, keyPath) {
+    console.log(key, keyPath);
   },
 }
 </script>
 
-<style scoped>
-.now-item {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.now {
-  /*background-color: #42b983;*/
-  height: 80px !important;
-}
-.box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 2px 6px hsla(0, 0%, 7%, .1);
-  border-radius: 10px;
-  width: 240px;
-  height: 50px;
-}
-.box:hover{
-  cursor: pointer;
+<style lang="scss" scoped>
+.data-chart-container {
+  height: 400px;
+  margin-bottom: 20px;
+
+  .data-card {
+    height: 100%;
+
+    .card-content {
+      width: 100%;
+      height: 100%;
+      position: relative;
+    }
+  }
 }
 
-.title {
-  font-size: larger;
+.title-container {
+  position: absolute;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 2;
+
+
+  .more-button {
+    cursor: pointer;
+    font-size: 16px;
+    padding: 0 10px;
+  }
 }
+
+.chart-container {
+
+  width: 100%;
+  height: 100%;
+
+  #chartContent {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.select-container {
+  margin: 0 20px;
+  width: 180px;
+}
+
 </style>

--
Gitblit v1.8.0