|
|
@@ -0,0 +1,323 @@
|
|
|
+<!--
|
|
|
+ ~ Copyright (c) 2014, 2023, Chengdu Minto Technology Co.,LTD. All rights reserved.
|
|
|
+ ~ DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
|
|
|
+ -->
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>督办事项整体情况分析</title>
|
|
|
+ <link href="../../../../../common/element-ui/theme-chalk/index.css" rel="stylesheet"
|
|
|
+ th:href="@{/common/element-ui/theme-chalk/index.css}">
|
|
|
+ <link href="../../../../../common/css/dataVi.css" rel="stylesheet" th:href="@{/common/css/dataVi.css}">
|
|
|
+ <style>
|
|
|
+ [v-cloak]{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div class="flex-column" id="app" v-cloak>
|
|
|
+ <div class="page-header flex">
|
|
|
+ <div class="page-header-title">督办事项整体情况分析</div>
|
|
|
+ <div class="flex" style="align-items: center">
|
|
|
+ <dv-decoration-3 style="width: 250px; height: 30px"></dv-decoration-3>
|
|
|
+ <el-dropdown @command="changeYear">
|
|
|
+ <el-button size="small">
|
|
|
+ {{defaultYear}}<i class="el-icon-caret-bottom el-icon--right"></i>
|
|
|
+ </el-button>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item v-for="(item,index) in yearsList" :key="index" :command="item">{{item}}</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content flex">
|
|
|
+ <div class="content-left flex-column">
|
|
|
+ <!-- 内容太多了. 用vue做了. 数据到时候想办法堆出来 -->
|
|
|
+ <div :key="index" class="container flex-column" v-for="(item,index) in leftData">
|
|
|
+ <div class="container-title">{{item.title}}</div>
|
|
|
+ <div class="container-cont">
|
|
|
+ <div class="container-cont-main cornerBox flex">
|
|
|
+ <div class="fs28 color-18">{{item.totalNumber}}</div>
|
|
|
+ <div class="fs16 color-a0">{{item.totalUnit}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="container-cont-sub flex mt10">
|
|
|
+ <div
|
|
|
+ :class="{'special ':chilIndex==2}"
|
|
|
+ :key="chilIndex"
|
|
|
+ class="pl20 cornerBox"
|
|
|
+ v-for="(chid,chilIndex) in item.list"
|
|
|
+ >
|
|
|
+ <div :class="{'color-ff ':chilIndex==2}" class="fs24 color-18">{{chid.number}}</div>
|
|
|
+ <div :class="{'color-ec ':chilIndex==2}" class="fs12 color-ae">{{chid.name}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="container-cont-step flex">
|
|
|
+ <span class="fs14 color-18">办结率</span>
|
|
|
+ <div class="step-box">
|
|
|
+ <div
|
|
|
+ :style="{color:item.colors[0], left:(item.progress-4>0 ? item.progress-4 : item.progress)+'%'}"
|
|
|
+ class="step-box-progress fs12"
|
|
|
+ v-if="item.progress"
|
|
|
+ >
|
|
|
+ {{item.progress}}%
|
|
|
+ </div>
|
|
|
+ <!-- 倒三角 -->
|
|
|
+ <div
|
|
|
+ :style="{
|
|
|
+ borderTopColor:item.colors[1],
|
|
|
+ left:(item.progress-3>0 ? item.progress-3 : item.progress)+'%'
|
|
|
+ }"
|
|
|
+ class="step-percent-triangle"
|
|
|
+ ></div>
|
|
|
+ <dv-percent-pond
|
|
|
+ :config="{
|
|
|
+ value: item.progress,
|
|
|
+ borderWidth:0.5,
|
|
|
+ borderGap:2,
|
|
|
+ borderRadius:0,
|
|
|
+ localGradient:true,
|
|
|
+ colors:item.colors
|
|
|
+ }"
|
|
|
+ class="step-box-pond"
|
|
|
+ ></dv-percent-pond>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-center flex-column">
|
|
|
+ <div class="container content-center-head flex">
|
|
|
+ <div class="center-head-left">
|
|
|
+ <div class="fs28">{{tAllCount}}</div>
|
|
|
+ <div class="fs22 title">共办理事项</div>
|
|
|
+ </div>
|
|
|
+ <div class="center-head-right flex">
|
|
|
+ <div v-for="(item, index) in mainRenderData" :key="index">
|
|
|
+ <div class="fs22 color-18">{{item.name}}</div>
|
|
|
+ <div class="fs16 color-a0">{{item.text}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <dv-border-box-8 class="container content-center-cont">
|
|
|
+ <div class="container-title">责任单位承办事项完成效率分析</div>
|
|
|
+ <dv-scroll-board :config="tableConfig" style="flex: 1"></dv-scroll-board>
|
|
|
+ </dv-border-box-8>
|
|
|
+ </div>
|
|
|
+ <div class="content-right">
|
|
|
+ <div class="container">
|
|
|
+ <div class="container-title">考核平均完成事项时长排名</div>
|
|
|
+ </div>
|
|
|
+ <div class="content-right-table">
|
|
|
+ <dv-scroll-ranking-board :config="config" style="width: 380px; height: 830px"></dv-scroll-ranking-board>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<script src="../../../../../common/jquery/jquery.min.js" th:src="@{/common/jquery/jquery.min.js}"
|
|
|
+ type="text/javascript"></script>
|
|
|
+<script src="../../../../../common/ajax.js" th:src="@{/tc_ttp/common/ajax.js}" type="text/javascript"></script>
|
|
|
+<script src="../../../../../tc_ttp/common/tc.js" th:src="@{/tc_ttp/common/tc.js}" type="text/javascript"></script>
|
|
|
+<script th:src="@{/common/vue/vue.min.js}" type="text/javascript"></script>
|
|
|
+<script src="../../../../../common/element-ui/index.js" th:src="@{/common/element-ui/index.js}"
|
|
|
+ type="text/javascript"></script>
|
|
|
+<script th:src="@{/common/js/datav.min.js}" type="text/javascript"></script>
|
|
|
+<script>
|
|
|
+ new Vue({
|
|
|
+ el: '#app',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ leftData: [],
|
|
|
+ config: {},
|
|
|
+ tableConfig: {},
|
|
|
+ tableHeader: [
|
|
|
+ {name: "责任单位", value: "targetName"},
|
|
|
+ {name: "办理事项总数", value: "count"},
|
|
|
+ {name: "推进中事项", value: "doCount"},
|
|
|
+ {name: "超期事项", value: "overdueCount"},
|
|
|
+ {name: "超期率", value: "overduePercent"},
|
|
|
+ {name: "被催办次数", value: "remindCount"},
|
|
|
+ {name: "被退回次数", value: "backCount"},
|
|
|
+ {name: "已办结事项", value: "finishCount"},
|
|
|
+ {name: "办结率", value: "finishPercent"},
|
|
|
+ ],
|
|
|
+ mainRenderData:[
|
|
|
+ {name:"仍在办理",text:"",key:"tDoCount",unit:"(项)"},
|
|
|
+ {name:"已超期",text:"",key:"tOverdueCount",unit:"(项)"},
|
|
|
+ {name:"超期率",text:"",key:"tOverduePercent",unit:"%"},
|
|
|
+ {name:"已经办结",text:"",key:"tAllFinishCount",unit:"(项)"},
|
|
|
+ ],// 主要的渲染数据
|
|
|
+ tAllCount:{},// 中间总办理事项
|
|
|
+ defaultYear: new Date().getFullYear(),// 默认年份
|
|
|
+ yearsList: [],// 年份列表
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 处理不同分辨率情况下容器缩放比例
|
|
|
+ resize() {
|
|
|
+ let container = document.querySelector('#app');
|
|
|
+ let scale = Math.min(
|
|
|
+ window.innerWidth / container.clientWidth,
|
|
|
+ window.innerHeight / container.clientHeight
|
|
|
+ );
|
|
|
+ container.style.transform = 'scale(' + scale + ')';
|
|
|
+ },
|
|
|
+ // 获取中间数据
|
|
|
+ getCenterData() {
|
|
|
+ let _that = this;
|
|
|
+ let param = {
|
|
|
+ orgName: "",
|
|
|
+ taskTypeId: "0",
|
|
|
+ year: _that.defaultYear
|
|
|
+ };
|
|
|
+ callAjaxRequest("taskAnalysisWebService", "findTaskTaskAnalysisByManager", param, function (result) {
|
|
|
+ _that.tAllCount = result.tAllCount || "";
|
|
|
+ _that.setTableConfig(result.list || []);
|
|
|
+ _that.setMainRenderData(result);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 表格数据处理
|
|
|
+ setTableConfig(data) {
|
|
|
+ let _that = this;
|
|
|
+ // 按照header的顺序便利出数据
|
|
|
+ let renderData = [];
|
|
|
+ for (let i = 0, len = data.length; i < len; i++) {
|
|
|
+ let item = data[i];
|
|
|
+ let rowData = [];
|
|
|
+ for (let j = 0; j < _that.tableHeader.length; j++) {
|
|
|
+ let headerItem = _that.tableHeader[j];
|
|
|
+ if (["overduePercent", "finishPercent"].includes(headerItem.value)) {
|
|
|
+ item[headerItem.value] = item[headerItem.value] + "%"
|
|
|
+ }
|
|
|
+ rowData.push(item[headerItem.value])
|
|
|
+ }
|
|
|
+ renderData.push(rowData)
|
|
|
+ }
|
|
|
+ this.tableConfig = {
|
|
|
+ rowNum: 15,
|
|
|
+ headerHeight: 40,
|
|
|
+ header: this.tableHeader.map(function (item) {
|
|
|
+ return item.name
|
|
|
+ }),
|
|
|
+ data: renderData,
|
|
|
+ align: 'center',
|
|
|
+ oddRowBGC: 'transparent',
|
|
|
+ evenRowBGC: 'transparent',
|
|
|
+ headerBGC: 'transparent',
|
|
|
+ columnWidth: [90, 100, 100, 90, 80, 100, 100, 100, 80],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 中间区域头部数据
|
|
|
+ setMainRenderData(data){
|
|
|
+ this.mainRenderData.map(function (item){
|
|
|
+ item.text = data[item.key]+item.unit
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取右侧数据,使用考核的接口, 固定按照平均完成时间排序
|
|
|
+ getRightData(){
|
|
|
+ let _that = this;
|
|
|
+ let param = {
|
|
|
+ year: _that.defaultYear,
|
|
|
+ taskTypeId: '0',
|
|
|
+ orgName: '',
|
|
|
+ gbTaskTypeId: '',
|
|
|
+ order: "avgTime",
|
|
|
+ asc: 1
|
|
|
+ }
|
|
|
+ callAjaxRequest("taskAnalysisWebService", "findEvaluateAnalysis", param, function (result) {
|
|
|
+ let data = result.map(function (item){
|
|
|
+ return{
|
|
|
+ name: item.pname,
|
|
|
+ value: item.avgtime
|
|
|
+ }
|
|
|
+ })
|
|
|
+ _that.config = {
|
|
|
+ rowNum: 12,
|
|
|
+ data:data,
|
|
|
+ sort:false,
|
|
|
+ valueFormatter(item){
|
|
|
+ return _that.formatTimestampToHMS(item.value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ formatTimestampToHMS (diffInMilliseconds) {
|
|
|
+ let diffInSeconds = Math.floor(diffInMilliseconds / 1000);
|
|
|
+ let days = Math.floor(diffInSeconds / (3600 * 24));
|
|
|
+ let hours = Math.floor((diffInSeconds % (3600 * 24)) / 3600);
|
|
|
+ let minutes = Math.floor((diffInSeconds % 3600) / 60);
|
|
|
+ let seconds = diffInSeconds % 60;
|
|
|
+ // 格式化输出，确保每部分都是两位数字
|
|
|
+ let formattedDays = days == 0 ? '' : ''+days+'天';
|
|
|
+ let formattedHours = ('0' + hours).slice(-2);
|
|
|
+ let formattedMinutes = ('0' + minutes).slice(-2);
|
|
|
+ let formattedSeconds = ('0' + seconds).slice(-2);
|
|
|
+ return `${formattedDays}${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
|
|
|
+ },
|
|
|
+ // 年份默认当前年份,以及前2年?
|
|
|
+ initYearsList(){
|
|
|
+ for(let i= 0; i <= 2; i++) {
|
|
|
+ this.yearsList.push(this.defaultYear - i)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 年份的变动
|
|
|
+ changeYear(e){
|
|
|
+ this.defaultYear = e;
|
|
|
+ this.getCenterData();
|
|
|
+ this.getRightData();
|
|
|
+ this.getLeftData();
|
|
|
+ },
|
|
|
+ // 获取左侧数据
|
|
|
+ getLeftData(){
|
|
|
+ let _that = this;
|
|
|
+ let param = {
|
|
|
+ orgName: "",
|
|
|
+ taskTypeId: "0",
|
|
|
+ year: _that.defaultYear
|
|
|
+ };
|
|
|
+ callAjaxRequest("taskAnalysisWebService", "findTaskTaskAnalysisByType", param, function (result) {
|
|
|
+ _that.setLeftData(result.list)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 设置左侧数据
|
|
|
+ setLeftData(list){
|
|
|
+ let colors = [
|
|
|
+ ['#FFF1BC', '#FED35D'],
|
|
|
+ ['#428FE0', '#73F7FB'],
|
|
|
+ ['#FF4A6B', 'rgba(255, 141, 182, 0.77)']
|
|
|
+ ]
|
|
|
+ let renderList = [];
|
|
|
+ // 数据永远是三条, 就算不满足也是3
|
|
|
+ for(let i = 0; i < 3; i++) {
|
|
|
+ let item = list[i];
|
|
|
+ renderList.push(
|
|
|
+ {
|
|
|
+ title: item ? item.targetName :"无类型统计",
|
|
|
+ totalNumber:item ? item.allCount :"0",
|
|
|
+ totalUnit: '办理事项总数(项)',
|
|
|
+ list: [
|
|
|
+ {name: '推进中(项)', number: item ? item.doCount : "0"},
|
|
|
+ {name: '已办结(项)', number: item ? item.finishCount :"0"},
|
|
|
+ {name: '超期事项(项)', number: item ? item.overdueCount :"0"},
|
|
|
+ ],
|
|
|
+ progress: item ? item.finishPercent : 0,
|
|
|
+ colors: colors[i],
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ this.leftData = renderList
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.resize();
|
|
|
+ window.addEventListener('resize', this.resize);
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.initYearsList();
|
|
|
+ this.changeYear(this.defaultYear)
|
|
|
+ }
|
|
|
+ });
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
