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