├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   ├── logo.png
    │   ├── pageBg.png
    │   └── scss
    │   │   ├── _variables.scss
    │   │   ├── index.scss
    │   │   └── style.scss
    ├── store
    │   └── index.js
    ├── App.vue
    ├── router
    │   └── index.js
    ├── utils
    │   ├── resizeMixins.js
    │   └── index.js
    ├── main.js
    ├── views
    │   ├── bottomLeft.vue
    │   ├── bottomRight.vue
    │   ├── centerLeft2.vue
    │   ├── centerRight1.vue
    │   ├── centerRight2.vue
    │   ├── index.vue
    │   ├── centerLeft1.vue
    │   └── center.vue
    ├── components
    │   └── echart
    │   │   ├── centerLeft2
    │   │       ├── centreLeft1Chart.vue
    │   │       └── centreLeft2Chart.vue
    │   │   ├── center
    │   │       └── centerChartRate.vue
    │   │   ├── bottom
    │   │       ├── bottomLeftChartState.vue
    │   │       ├── bottomRightChartMap.vue
    │   │       ├── bottomLeftChart.vue
    │   │       └── bottomRightChart.vue
    │   │   └── centreRight2
    │   │       └── centreRight2Chart1.vue
    ├── common
    │   └── flexible.js
    └── 插入代表届次信息样例-0508.sql
├── .gitignore
├── vue.config.js
├── package.json
├── yarn-error.log
├── README.md
└── LICENSE


/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiyankai/Big-Screen-Vue-Datav-Echarts/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiyankai/Big-Screen-Vue-Datav-Echarts/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/pageBg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/qiyankai/Big-Screen-Vue-Datav-Echarts/HEAD/src/assets/pageBg.png


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 |   },
 9 |   mutations: {
10 |   },
11 |   actions: {
12 |   },
13 |   modules: {
14 |   }
15 | })
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style lang="scss">
 8 | body {
 9 |   margin: 0;
10 | }
11 | #app {
12 |   font-family: Avenir, Helvetica, Arial, sans-serif;
13 |   -webkit-font-smoothing: antialiased;
14 |   -moz-osx-font-smoothing: grayscale;
15 | }
16 | </style>
17 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | 
 4 | Vue.use(VueRouter)
 5 | 
 6 | const routes = [{
 7 |   path: '/',
 8 |   name: 'index',
 9 |   component: () => import('../views/index.vue')
10 | }]
11 | const router = new VueRouter({
12 |   mode: "history",
13 |   routes
14 | })
15 | 
16 | export default router


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const resolve = dir => {
 3 |   return path.join(__dirname, dir)
 4 | }
 5 | module.exports = {
 6 |   publicPath: './',
 7 |   chainWebpack: config => {
 8 |     config.resolve.alias
 9 |       .set('_c', resolve('src/components')) // key,value自行定义，比如.set('@@', resolve('src/components'))
10 |   },
11 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/utils/resizeMixins.js:
--------------------------------------------------------------------------------
 1 | // 混入代码 resize-mixins.js
 2 | import { debounce } from '@/utils/index';
 3 | const resizeChartMethod = '$__resizeChartMethod';
 4 | 
 5 | export default {
 6 |   data() {
 7 |     // 在组件内部将图表init的引用映射到chart属性上
 8 |     return {
 9 |       chart: null,
10 |     };
11 |   },
12 |   created() {
13 |     window.addEventListener('resize', this[resizeChartMethod], false);
14 |   },
15 |   beforeDestroy() {
16 |     window.removeEventListener('reisze', this[resizeChartMethod]);
17 |   },
18 |   methods: {
19 |     // 通过lodash的防抖函数来控制resize的频率
20 |     [resizeChartMethod]: debounce(function() {
21 |       if (this.chart) {
22 |         this.chart.resize();
23 |       }
24 |     }, 100),
25 |   },
26 | };
27 | 


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
 1 | export function debounce(func, wait, immediate) {
 2 |   let timeout, args, context, timestamp, result;
 3 | 
 4 |   const later = function() {
 5 |     // 据上一次触发时间间隔
 6 |     const last = +new Date() - timestamp;
 7 | 
 8 |     // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
 9 |     if (last < wait && last > 0) {
10 |       timeout = setTimeout(later, wait - last);
11 |     } else {
12 |       timeout = null;
13 |       // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
14 |       if (!immediate) {
15 |         result = func.apply(context, args);
16 |         if (!timeout) context = args = null;
17 |       }
18 |     }
19 |   };
20 | 
21 |   return function(...args) {
22 |     context = this;
23 |     timestamp = +new Date();
24 |     const callNow = immediate && !timeout;
25 |     // 如果延时不存在，重新设定延时
26 |     if (!timeout) timeout = setTimeout(later, wait);
27 |     if (callNow) {
28 |       result = func.apply(context, args);
29 |       context = args = null;
30 |     }
31 | 
32 |     return result;
33 |   };
34 | }
35 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import App from './App.vue';
 3 | import router from './router';
 4 | import store from './store';
 5 | import dataV from '@jiaminghi/data-view';
 6 | Vue.use(dataV);
 7 | 
 8 | // 按需引入vue-awesome图标
 9 | import Icon from 'vue-awesome/components/Icon';
10 | import 'vue-awesome/icons/chart-bar.js';
11 | import 'vue-awesome/icons/chart-area.js';
12 | import 'vue-awesome/icons/chart-pie.js';
13 | import 'vue-awesome/icons/chart-line.js';
14 | import 'vue-awesome/icons/align-left.js';
15 | 
16 | // 全局注册图标
17 | Vue.component('icon', Icon);
18 | 
19 | // 适配flex
20 | import '@/common/flexible.js';
21 | 
22 | // 引入全局css
23 | import './assets/scss/style.scss';
24 | 
25 | 
26 | //引入echart
27 | import echarts from 'echarts'
28 | Vue.prototype.$echarts = echarts
29 | 
30 | Vue.config.productionTip = false;
31 | 
32 | new Vue({
33 |   router,
34 |   store,
35 |   render: (h) => h(App),
36 | }).$mount('#app');
37 | 
38 | import axios from 'axios';
39 | //把方法放到vue的原型上，这样就可以全局使用了
40 | Vue.prototype.$http = axios.create({
41 |   //设置20秒超时时间
42 |   timeout: 20000,
43 |   baseURL: 'http://192.168.126.113:8088', //这里写后端地址
44 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "big-screen-vue-datav",
 3 |   "version": "1.0.1",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@jiaminghi/data-view": "^2.7.3",
12 |     "@types/echarts": "^4.4.3",
13 |     "axios": "^0.20.0",
14 |     "core-js": "^3.6.4",
15 |     "echarts": "^4.6.0",
16 |     "vue": "^2.6.11",
17 |     "vue-awesome": "^4.0.2",
18 |     "vue-router": "^3.1.5",
19 |     "vuex": "^3.1.2",
20 |     "yarn": "^1.22.5"
21 |   },
22 |   "devDependencies": {
23 |     "@vue/cli-plugin-babel": "^4.2.0",
24 |     "@vue/cli-plugin-eslint": "^4.2.0",
25 |     "@vue/cli-service": "^4.2.0",
26 |     "@vue/eslint-config-prettier": "^6.0.0",
27 |     "babel-eslint": "^10.0.3",
28 |     "eslint": "^6.7.2",
29 |     "eslint-plugin-vue": "^6.1.2",
30 |     "sass": "^1.25.0",
31 |     "sass-loader": "^8.0.2",
32 |     "vue-template-compiler": "^2.6.11"
33 |   },
34 |   "eslintConfig": {
35 |     "root": true,
36 |     "env": {
37 |       "node": true
38 |     },
39 |     "extends": [
40 |       "plugin:vue/essential",
41 |       "eslint:recommended"
42 |     ],
43 |     "parserOptions": {
44 |       "parser": "babel-eslint"
45 |     },
46 |     "rules": {}
47 |   },
48 |   "browserslist": [
49 |     "> 1%",
50 |     "last 2 versions"
51 |   ]
52 | }
53 | 


--------------------------------------------------------------------------------
/src/assets/scss/_variables.scss:
--------------------------------------------------------------------------------
 1 | // 颜色
 2 | $colors: (
 3 |   "primary": #db9e3f,
 4 |   "info-1": #4394e4,
 5 |   "info": #4b67af,
 6 |   "white": #ffffff,
 7 |   "light": #f9f9f9,
 8 |   "grey-1": #999999,
 9 |   "grey": #666666,
10 |   "dark-1": #5f5f5f,
11 |   "dark": #222222,
12 |   "black-1": #171823,
13 |   "black": #000000,
14 | );
15 | 
16 | // 字体大小
17 | $base-font-size: 0.2rem;
18 | $font-sizes: (
19 |   xxs: 0.1,
20 |   //8px
21 |     xs: 0.125,
22 |   //10px
23 |     sm: 0.2875,
24 |   //12px
25 |     md: 0.1625,
26 |   //13px
27 |     lg: 0.175,
28 |   //14px
29 |     xl: 0.2,
30 |   //16px
31 |     xxl: 0.225,
32 |   //18px
33 |     xxxl: 0.25 //20px,,,,
34 | );
35 | 
36 | // 宽高
37 | .w-100 {
38 |   width: 100%;
39 | }
40 | .h-100 {
41 |   height: 100%;
42 | }
43 | 
44 | //flex
45 | .d-flex {
46 |   display: flex;
47 | }
48 | .flex-column {
49 |   flex-direction: column;
50 | }
51 | .flex-wrap {
52 |   flex-wrap: wrap;
53 | }
54 | .flex-nowrap {
55 |   flex-wrap: nowrap;
56 | }
57 | $flex-jc: (
58 |   start: flex-start,
59 |   end: flex-end,
60 |   center: center,
61 |   between: space-between,
62 |   around: space-around,
63 |   evenly: space-evenly,
64 | );
65 | 
66 | $flex-ai: (
67 |   start: flex-start,
68 |   end: flex-end,
69 |   center: center,
70 |   stretch: stretch,
71 | );
72 | 
73 | .flex-1 {
74 |   flex: 1;
75 | }
76 | 
77 | //.mt-1 => margin top
78 | //spacing
79 | $spacing-types: (
80 |   m: margin,
81 |   p: padding,
82 | );
83 | $spacing-directions: (
84 |   t: top,
85 |   r: right,
86 |   b: bottom,
87 |   l: left,
88 | );
89 | $spacing-base-size: 0.2rem;
90 | $spacing-sizes: (
91 |   0: 0,
92 |   1: 0.25,
93 |   2: 0.5,
94 |   3: 1,
95 |   4: 1.5,
96 |   5: 3,
97 | );
98 | 


--------------------------------------------------------------------------------
/src/views/bottomLeft.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="bottomLeft">
 3 |     <div class="bg-color-black">
 4 |       <div class="d-flex pt-2 pl-2">
 5 |         <span style="color: #5cd9e8">
 6 |           <icon name="chart-bar"></icon>
 7 |         </span>
 8 |         <div class="d-flex">
 9 |           <span class="fs-xl text mx-2">数据统计图</span>
10 |         </div>
11 |       </div>
12 |       <div>
13 |         <bottomLeftChart ref="bottomLeftChartState"/>
14 |         <!-- <bottomLeftChartState ref="bottomLeftChartState" /> -->
15 |       </div>
16 |     </div>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import bottomLeftChart from "@/components/echart/bottom/bottomLeftChart";
22 | // import bottomLeftChartState from "@/components/echart/bottom/bottomLeftChartState";
23 | export default {
24 |   data() {
25 |     return {};
26 |   },
27 |   components: {
28 |     bottomLeftChart,
29 |     // bottomLeftChartState,
30 |   },
31 |   mounted() {
32 |     this.changeTiming();
33 | 
34 |   },
35 |   methods: {
36 |         changeTiming() {
37 |       setInterval(() => {
38 |         this.fetchSystemSum(); //获取-状态
39 |       }, 3000);
40 |     },
41 |     async fetchSystemSum() {
42 |       const { data } = await this.$http.get("getDataByName?name=GROUP_HAN_SUM");
43 | 
44 |       let status = data.status;
45 |       let dataList = JSON.parse(data.data);
46 | 
47 |       if (status === 200) {
48 |         this.$refs.bottomLeftChartState.refresh(dataList);
49 |       }
50 |     },
51 |   },
52 | };
53 | </script>
54 | 
55 | <style lang="scss">
56 | #bottomLeft {
57 |   padding: 0.3rem 0.2rem;
58 |   height: 6.5rem;
59 |   min-width: 3.75rem;
60 |   border-radius: 0.0625rem;
61 |   .bg-color-black {
62 |     height: 6.0625rem;
63 |     border-radius: 0.125rem;
64 |   }
65 |   .text {
66 |     color: #c3cbde;
67 |   }
68 |   .chart-box {
69 |     margin-top: 0.2rem;
70 |     width: 2.125rem;
71 |     height: 2.125rem;
72 |     .active-ring-name {
73 |       padding-top: 0.125rem;
74 |     }
75 |   }
76 | }
77 | </style>


--------------------------------------------------------------------------------
/src/views/bottomRight.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="bottomRight">
 3 |     <div class="bg-color-black">
 4 |       <div class="d-flex pt-2 pl-2">
 5 |         <span style="color: #5cd9e8">
 6 |           <icon name="chart-area"></icon>
 7 |         </span>
 8 |         <div class="d-flex">
 9 |           <span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
10 |           <div class="decoration2">
11 |             <dv-decoration-2
12 |               :reverse="true"
13 |               style="width: 5px; height: 480px"
14 |             />
15 |           </div>
16 |         </div>
17 |       </div>
18 |       <div>
19 |         <!-- <bottomRightChart /> -->
20 |         <bottomRightChart ref="centerChart1" />
21 |       </div>
22 |     </div>
23 |   </div>
24 | </template>
25 | 
26 | <script>
27 | // import bottomRightChart from "@/components/echart/bottom/bottomRightChart";
28 | import bottomRightChart from "@/components/echart/bottom/bottomRightChartMap";
29 | export default {
30 |   data() {
31 |     return {};
32 |   },
33 |   components: {
34 |     // bottomRightChart
35 |     bottomRightChart,
36 |   },
37 |   mounted() {
38 |     this.setTimer();
39 |   },
40 |   methods: {
41 |     setTimer() {
42 |       this.timer = setInterval(() => {
43 |         this.fetchProposalSubmit(); //获取-数字板数据
44 |       }, 3000);
45 |     },
46 |     async fetchProposalSubmit() {
47 |       const { data } = await this.$http.get("getDataByName?name=GROUP_SUM");
48 | 
49 |       let status = data.status;
50 |       let dataList = JSON.parse(data.data);
51 | 
52 |       var resultList = new Array();
53 |       if (status === 200) {
54 |         for (var i = dataList.length - 1; i >= 0; i--) {
55 |           var item = { name: "怀柔区", value: 38 };
56 |           item.name = dataList[i].X0;
57 |           item.value = dataList[i].COUNT;
58 |           resultList.push(item);
59 |         }
60 |         this.$refs.centerChart1.refresh(resultList);
61 |       }
62 |     },
63 |   },
64 | };
65 | </script>
66 | 
67 | <style lang="scss">
68 | #bottomRight {
69 |   padding: 0.2rem 0.2rem 0;
70 |   height: 6.5rem;
71 |   min-width: 3.75rem;
72 |   border-radius: 0.0625rem;
73 |   .bg-color-black {
74 |     height: 6.1875rem;
75 |     border-radius: 0.125rem;
76 |   }
77 |   .text {
78 |     color: #c3cbde;
79 |   } //下滑线动态
80 |   .decoration2 {
81 |     position: absolute;
82 |     right: 0.125rem;
83 |   }
84 |   .chart-box {
85 |     margin-top: 0.2rem;
86 |     width: 2.125rem;
87 |     height: 2.125rem;
88 |     .active-ring-name {
89 |       padding-top: 0.125rem;
90 |     }
91 |   }
92 | }
93 | </style>


--------------------------------------------------------------------------------
/src/components/echart/centerLeft2/centreLeft1Chart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div id="centreLeft1Chart" style="width:3.25rem; height: 2.75rem;"></div>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import echartMixins from "@/utils/resizeMixins";
 9 | 
10 | export default {
11 |   data() {
12 |     return {
13 |       chart: null,
14 |     };
15 |   },
16 |   mixins: [echartMixins],
17 |   mounted() {
18 |     this.draw();
19 |   },
20 |   methods: {
21 |     draw() {
22 |       // 基于准备好的dom，初始化echarts实例
23 |       this.chart = this.$echarts.init(
24 |         document.getElementById("centreLeft1Chart")
25 |       );
26 |       //  ----------------------------------------------------------------
27 | 
28 |       this.chart.setOption({
29 |         color: [
30 |           "#37a2da",
31 |           "#32c5e9",
32 |           "#9fe6b8",
33 |           "#ffdb5c",
34 |           "#ff9f7f",
35 |           "#fb7293",
36 |           "#e7bcf3",
37 |           "#8378ea",
38 |         ],
39 |         tooltip: {
40 |           trigger: "item",
41 |           formatter: "{a} <br/>{b} : {c} ({d}%)",
42 |         },
43 |         toolbox: {
44 |           show: true,
45 |         },
46 |         calculable: true,
47 |         legend: {
48 |           orient: "horizontal",
49 |           icon: "circle",
50 |           bottom: 0,
51 |           x: "center",
52 |           data: ["rose1", "rose2", "rose3", "rose4", "rose5", "rose6"],
53 |           textStyle: {
54 |             color: "#fff",
55 |           },
56 |         },
57 |         series: [
58 |           {
59 |             name: "增值电信业务统计表",
60 |             type: "pie",
61 |             radius: [10, 60],
62 |             roseType: "area",
63 |             center: ["50%", "40%"],
64 |             data: [
65 |               { value: 10, name: "rose1" },
66 |               { value: 5, name: "rose2" },
67 |               { value: 15, name: "rose3" },
68 |               { value: 25, name: "rose4" },
69 |               { value: 20, name: "rose5" },
70 |               { value: 35, name: "rose6" },
71 |             ],
72 |           },
73 |         ],
74 |       });
75 |     },
76 |     refresh(data) {
77 |       let option = this.chart.getOption();
78 |       var resultList = new Array();
79 |       for (let index = 0; index < data.length; index++) {
80 |         const element = data[index];
81 |         var item = { value: 10, name: "rose1" };
82 |         item.value = element.COUNT;
83 |         item.name = element.X0;
84 |         resultList.push(item);
85 |       }
86 |       option.series[0].data = resultList;
87 |       this.chart.setOption(option);
88 |     },
89 |   },
90 |   destroyed() {
91 |     window.onresize = null;
92 |   },
93 | };
94 | </script>
95 | 
96 | <style lang="scss" scoped>
97 | </style>


--------------------------------------------------------------------------------
/src/assets/scss/index.scss:
--------------------------------------------------------------------------------
  1 | #index {
  2 |   color: #d3d6dd;
  3 |   background-color: #000000;
  4 |   width: 100%;
  5 |   height: 100vh;
  6 | 
  7 |   .bg {
  8 |     padding: 0.2rem 0.2rem 0 0.2rem;
  9 |     background-image: url("../assets/pageBg.png");
 10 |     background-size: cover;
 11 |     background-position: center center;
 12 |   }
 13 | 
 14 |   .host-body {
 15 |     .title {
 16 |       position: relative;
 17 |       width: 6.25rem;
 18 |       text-align: center;
 19 |       background-size: cover;
 20 |       background-repeat: no-repeat;
 21 | 
 22 |       .title-text {
 23 |         font-size: 0.3rem;
 24 |         position: absolute;
 25 |         bottom: 0;
 26 |         left: 50%;
 27 |         transform: translate(-50%);
 28 |       }
 29 | 
 30 |       .title-bototm {
 31 |         position: absolute;
 32 |         bottom: -0.375rem;
 33 |         left: 50%;
 34 |         transform: translate(-50%);
 35 |       }
 36 |     }
 37 | 
 38 |     // 平行四边形
 39 |     .react-left {
 40 |       cursor: pointer;
 41 |       font-size: 0.225rem;
 42 |       width: 3.75rem;
 43 |       height: 0.625rem;
 44 |       line-height: 0.625rem;
 45 |       text-align: center;
 46 |       transform: skewX(-45deg);
 47 | 
 48 |       .react-after {
 49 |         position: absolute;
 50 |         right: -0.3125rem;
 51 |         top: 0;
 52 |         height: 0.625rem;
 53 |         width: 0.625rem;
 54 |         background-color: #0f1325;
 55 |         transform: skewX(45deg);
 56 |       }
 57 | 
 58 |       .text {
 59 |         display: inline-block;
 60 |         transform: skewX(45deg);
 61 |       }
 62 |     }
 63 | 
 64 |     .react-right {
 65 |       cursor: pointer;
 66 |       font-size: 0.225rem;
 67 |       width: 3.75rem;
 68 |       height: 0.625rem;
 69 |       line-height: 0.625rem;
 70 |       text-align: center;
 71 |       transform: skewX(45deg);
 72 | 
 73 |       .react-before {
 74 |         position: absolute;
 75 |         left: -0.3125rem;
 76 |         top: 0;
 77 |         height: 0.625rem;
 78 |         width: 0.625rem;
 79 |         background-color: #0f1325;
 80 |         transform: skewX(-45deg);
 81 |       }
 82 | 
 83 |       .text {
 84 |         display: inline-block;
 85 |         transform: skewX(-45deg);
 86 |       }
 87 |     }
 88 | 
 89 |     .body-box {
 90 |       margin-top: 0.2rem;
 91 |       display: flex;
 92 |       flex-direction: column;
 93 | 
 94 |       //下方区域的布局
 95 |       .content-box {
 96 |         display: grid;
 97 |         grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
 98 |       }
 99 | 
100 |       // 底部数据
101 |       .bototm-box {
102 |         margin-top: 0.125rem;
103 |         display: grid;
104 |         grid-template-columns: repeat(2, 50%);
105 |       }
106 |     }
107 |   }
108 | }
109 | 


--------------------------------------------------------------------------------
/src/components/echart/center/centerChartRate.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div :id="id" style="margin:0 0 0 .285rem;width:1.5rem;height:1.25rem;"></div>
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script>
  8 | import echartMixins from "@/utils/resizeMixins";
  9 | 
 10 | export default {
 11 |   data() {
 12 |     return {
 13 |       chart: null,
 14 |     };
 15 |   },
 16 |   mixins: [echartMixins],
 17 |   mounted() {
 18 |     this.draw();
 19 |   },
 20 |   props: {
 21 |     id: {
 22 |       type: String,
 23 |       required: true,
 24 |       default: "chartRate",
 25 |     },
 26 |     tips: {
 27 |       type: Number,
 28 |       required: true,
 29 |       default: 50,
 30 |     },
 31 |     colorObj: {
 32 |       type: Object,
 33 |       default: function () {
 34 |         return {
 35 |           textStyle: "#3fc0fb",
 36 |           series: {
 37 |             color: ["#00bcd44a", "transparent"],
 38 |             dataColor: {
 39 |               normal: "#03a9f4",
 40 |               shadowColor: "#97e2f5",
 41 |             },
 42 |           },
 43 |         };
 44 |       },
 45 |     },
 46 |   },
 47 |   methods: {
 48 |     draw() {
 49 |       // 基于准备好的dom，初始化echarts实例
 50 |       this.chart = this.$echarts.init(document.getElementById(this.id));
 51 |       //  ----------------------------------------------------------------
 52 |       let tips = this.tips;
 53 |       let option = {
 54 |         title: [
 55 |           {
 56 |             text: tips * 1 + "%",
 57 |             x: "center",
 58 |             y: "center",
 59 |             textStyle: {
 60 |               color: this.colorObj.textStyle,
 61 |               fontSize: 16,
 62 |             },
 63 |           },
 64 |         ],
 65 |         series: [
 66 |           {
 67 |             type: "pie",
 68 |             radius: ["75%", "65%"],
 69 |             center: ["50%", "50%"],
 70 |             hoverAnimation: false,
 71 |             color: this.colorObj.series.color,
 72 |             label: {
 73 |               normal: {
 74 |                 show: false,
 75 |               },
 76 |             },
 77 |             data: [
 78 |               {
 79 |                 value: tips,
 80 |                 itemStyle: {
 81 |                   normal: {
 82 |                     color: this.colorObj.series.dataColor.normal,
 83 |                     shadowBlur: 10,
 84 |                     shadowColor: this.colorObj.series.dataColor.shadowColor,
 85 |                   },
 86 |                 },
 87 |               },
 88 |               {
 89 |                 value: 100 - tips,
 90 |               },
 91 |             ],
 92 |           },
 93 |         ],
 94 |       };
 95 |       this.chart.setOption(option);
 96 |     },
 97 |     refresh(tips) {
 98 |       let option = this.chart.getOption();
 99 |       option.title[0].text = tips * 1 + "%";
100 |       option.series[0].data[0].value = tips;
101 |       this.chart.setOption(option);
102 |     },
103 |   },
104 |   destroyed() {
105 |     window.onresize = null;
106 |   },
107 | };
108 | </script>
109 | 
110 | <style lang="scss" scoped>
111 | </style>


--------------------------------------------------------------------------------
/yarn-error.log:
--------------------------------------------------------------------------------
 1 | Arguments: 
 2 |   C:\Program Files\nodejs\node.exe C:\Users\sz\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js add -D @vue/eslint-config-prettier
 3 | 
 4 | PATH: 
 5 |   C:\Program Files (x86)\NetSarang\Xftp 6\;C:\Program Files (x86)\NetSarang\Xshell 6\;D:\app\sz\product\11.2.0\dbhome_1\bin;C:\Python27\;C:\Python27\Scripts;C:\Program Files\Java\jdk1.8.0_40\bin;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\IDE\apache-maven-3.3.3\bin;C:\Program Files\TortoiseSVN\bin;C:\IDE\mysql-5.6.32-winx64\bin;C:\Program Files\Microsoft\Web Platform Installer\;C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages\v1.0\;C:\Program Files (x86)\Windows Kits\8.0\Windows Performance Toolkit\;C:\Program Files\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files\VisualSVN Server\bin;C:\Program Files\Git\cmd;C:\IDE\apache-maven-3.3.3\bin;C:\Program Files\nodejs\;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;F:\qyk\neo4j-community-3.5.5\bin;C:\Program Files\Redis\;C:\Users\sz\AppData\Roaming\npm;C:\Users\sz\AppData\Local\Programs\Microsoft VS Code\bin
 6 | 
 7 | Yarn version: 
 8 |   1.22.5
 9 | 
10 | Node version: 
11 |   12.13.1
12 | 
13 | Platform: 
14 |   win32 x64
15 | 
16 | Trace: 
17 |   Error: EPERM: operation not permitted, unlink 'E:\NPCBJ-DP\BS\node_modules\nanoid\non-secure'
18 | 
19 | npm manifest: 
20 |   {
21 |     "name": "big-screen-vue-datav",
22 |     "version": "1.0.1",
23 |     "private": true,
24 |     "scripts": {
25 |       "serve": "vue-cli-service serve",
26 |       "build": "vue-cli-service build",
27 |       "lint": "vue-cli-service lint"
28 |     },
29 |     "dependencies": {
30 |       "@jiaminghi/data-view": "^2.7.3",
31 |       "@types/echarts": "^4.4.3",
32 |       "axios": "^0.20.0",
33 |       "core-js": "^3.6.4",
34 |       "echarts": "^4.6.0",
35 |       "vue": "^2.6.11",
36 |       "vue-awesome": "^4.0.2",
37 |       "vue-router": "^3.1.5",
38 |       "vuex": "^3.1.2",
39 |       "yarn": "^1.22.5"
40 |     },
41 |     "devDependencies": {
42 |       "@vue/cli-plugin-babel": "^4.2.0",
43 |       "@vue/cli-plugin-eslint": "^4.2.0",
44 |       "@vue/cli-service": "^4.2.0",
45 |       "babel-eslint": "^10.0.3",
46 |       "eslint": "^6.7.2",
47 |       "eslint-plugin-vue": "^6.1.2",
48 |       "sass": "^1.25.0",
49 |       "sass-loader": "^8.0.2",
50 |       "vue-template-compiler": "^2.6.11"
51 |     },
52 |     "eslintConfig": {
53 |       "root": true,
54 |       "env": {
55 |         "node": true
56 |       },
57 |       "extends": [
58 |         "plugin:vue/essential",
59 |         "eslint:recommended"
60 |       ],
61 |       "parserOptions": {
62 |         "parser": "babel-eslint"
63 |       },
64 |       "rules": {}
65 |     },
66 |     "browserslist": [
67 |       "> 1%",
68 |       "last 2 versions"
69 |     ]
70 |   }
71 | 
72 | yarn manifest: 
73 |   No manifest
74 | 
75 | Lockfile: 
76 |   No lockfile
77 | 


--------------------------------------------------------------------------------
/src/views/centerLeft2.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="centreLeft1">
  3 |     <div class="bg-color-black">
  4 |       <div class="d-flex pt-2 pl-2">
  5 |         <span style="color: #5cd9e8">
  6 |           <icon name="chart-pie"></icon>
  7 |         </span>
  8 |         <div class="d-flex">
  9 |           <span class="fs-xl text mx-2">数据情况雷达图</span>
 10 |           <dv-decoration-1
 11 |             style="
 12 |               width: 1.25rem;
 13 |               height: 0.25rem;
 14 |               position: relative;
 15 |               top: -0.0375rem;
 16 |             "
 17 |           />
 18 |         </div>
 19 |       </div>
 20 |       <div class="d-flex jc-center">
 21 |         <centreLeft2Chart />
 22 |         <!-- <dv-active-ring-chart :config="config" style="height:2.75rem;width:2.75rem" /> -->
 23 |         <!-- <dv-active-ring-chart
 24 |           ref="ring"
 25 |           :config="config"
 26 |           style="height: 2.75rem; width: 2.75rem"
 27 |         /> -->
 28 |       </div>
 29 |     </div>
 30 |   </div>
 31 | </template>
 32 | 
 33 | <script>
 34 | import centreLeft2Chart from "@/components/echart/centerLeft2/centreLeft2Chart";
 35 | export default {
 36 |   data() {
 37 |     return {
 38 |       config: {
 39 |         data: [
 40 |           {
 41 |             name: "全部",
 42 |             value: 1315,
 43 |           },
 44 |         ],
 45 |         color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
 46 |         lineWidth: 20,
 47 |         radius: "55%",
 48 |         activeRadius: "60%",
 49 |         digitalFlopStyle: {
 50 |           fontSize: 15,
 51 |         },
 52 |         showOriginValue: true,
 53 |       },
 54 |     };
 55 |   },
 56 |   components: {
 57 |     centreLeft2Chart,
 58 |   },
 59 |   mounted() {
 60 |     this.changeTiming();
 61 |   },
 62 |   methods: {
 63 |     changeTiming() {
 64 |       setInterval(() => {
 65 |         // this.fetchSubjectSum(); //获取-主题词
 66 |       }, 3000);
 67 |     },
 68 |     async fetchSubjectSum() {
 69 |       const { data } = await this.$http.get("getDataByName?name=SUBJECT_SUM");
 70 | 
 71 |       let status = data.status;
 72 |       let dataList = JSON.parse(data.data);
 73 | 
 74 |       if (status === 200) {
 75 |         let resultList = new Array();
 76 |         for (let index = 0; index < dataList.length; index++) {
 77 |           const element = dataList[index];
 78 |           let item = {
 79 |             name: "收费站",
 80 |             value: 1315,
 81 |           };
 82 |           item.name = element.X0;
 83 |           item.value = element.COUNT;
 84 |           resultList.push(item);
 85 |         }
 86 |         console.log(resultList)
 87 |         this.config.data = resultList;
 88 |         this.$refs.ring.mergeConfig();
 89 |         this.$refs.ring.setRingOption();
 90 |       }
 91 |     },
 92 |   },
 93 | };
 94 | </script>
 95 | 
 96 | <style lang="scss">
 97 | #centreLeft1 {
 98 |   padding: 0.2rem;
 99 |   height: 5.125rem;
100 |   min-width: 3.75rem;
101 |   border-radius: 0.0625rem;
102 |   .bg-color-black {
103 |     height: 4.8125rem;
104 |     border-radius: 0.125rem;
105 |   }
106 |   .text {
107 |     color: #c3cbde;
108 |   }
109 |   .chart-box {
110 |     margin-top: 0.2rem;
111 |     width: 2.125rem;
112 |     height: 2.125rem;
113 |     .active-ring-name {
114 |       padding-top: 0.125rem;
115 |     }
116 |   }
117 | }
118 | </style>


--------------------------------------------------------------------------------
/src/views/centerRight1.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="centreRight1">
  3 |     <div class="bg-color-black">
  4 |       <div class="d-flex pt-2 pl-2">
  5 |         <span style="color: #5cd9e8">
  6 |           <icon name="chart-line"></icon>
  7 |         </span>
  8 |         <div class="d-flex">
  9 |           <span class="fs-xl text mx-2">系统统计</span>
 10 |         </div>
 11 |       </div>
 12 |       <div class="d-flex jc-center body-box">
 13 |         <dv-scroll-board
 14 |           :config="config"
 15 |           ref="log"
 16 |           style="width: 3.375rem; height: 4.28rem"
 17 |         />
 18 |       </div>
 19 |     </div>
 20 |   </div>
 21 | </template>
 22 | 
 23 | <script>
 24 | export default {
 25 |   data() {
 26 |     return {
 27 |       config: {
 28 |         header: ["用户名", 
 29 |         // "时间", 
 30 |         "操作"],
 31 |         data: [
 32 |           ["程晓君", "<span  class='colorGrass'>登录成功</span>"],
 33 |           ["杨清英", "<span  class='colorRed'>登录成功</span>"],
 34 |           ["程晓君", "<span  class='colorGrass'>登录成功</span>"],
 35 |           ["魏敏", "<span  class='colorGrass'>登录成功</span>"],
 36 |           ["王全礼", "<span  class='colorGrass'>登录成功</span>"],
 37 |           ["王全礼", "<span  class='colorGrass'>登录成功</span>"],
 38 |           ["王全礼", "<span  class='colorGrass'>登录成功</span>"],
 39 |           ["王全礼", "<span  class='colorRed'>登录成功</span>"],
 40 |           ["王全礼", "<span  class='colorRed'>登录成功</span>"],
 41 |           ["东城区", "<span  class='colorGrass'>登录成功</span>"],
 42 |           ["魏敏", "<span  class='colorGrass'>登录成功</span>"],
 43 |           ["王全礼", "<span  class='colorGrass'>登录成功</span>"],
 44 |           ["建议综合组组长", "<span  class='colorGrass'>办理</span>"],
 45 |           ["建议综合组组长", "<span  class='colorGrass'>办理</span>"],
 46 |         ],
 47 |         rowNum: 8, //表格行数
 48 |         headerHeight: 35,
 49 |         headerBGC: "#0f1325", //表头
 50 |         oddRowBGC: "#0f1325", //奇数行
 51 |         evenRowBGC: "#171c33", //偶数行
 52 |         index: false,
 53 |         columnWidth: [150],
 54 |         align: ["left"],
 55 |       },
 56 |     };
 57 |   },
 58 |   components: {},
 59 |   mounted() {
 60 |     this.changeTiming();
 61 |   },
 62 |   methods: {
 63 |     changeTiming() {
 64 |       setInterval(() => {
 65 |         this.fetchProposalSubmit(); //获取-建议情况
 66 |       }, 3000);
 67 |     },
 68 |     async fetchProposalSubmit() {
 69 |       const { data } = await this.$http.get(
 70 |         "getDataByName?name=LOGIN_LOG"
 71 |       );
 72 | 
 73 |       let status = data.status;
 74 |       let dataList = JSON.parse(data.data);
 75 | 
 76 |       var dataArr = new Array();
 77 |       if (status === 200) {
 78 |         for (var i = dataList.length - 1; i >= 0; i--) {
 79 |           let item =new Array();
 80 |           item.push(dataList[i].NAME);
 81 |           // item.push(dataList[i].TIME);
 82 |           item.push("<span  class='colorGrass'>"+dataList[i].MESSAGE+"</span>");
 83 |           dataArr.push(item);
 84 |         }
 85 |         this.config.data = dataArr;
 86 |         this.$refs["log"].updateRows(dataArr);
 87 |       }
 88 |     },
 89 |   },
 90 | };
 91 | </script>
 92 | 
 93 | <style lang="scss">
 94 | #centreRight1 {
 95 |   padding: 0.2rem;
 96 |   height: 5.125rem;
 97 |   min-width: 3.75rem;
 98 |   border-radius: 0.0625rem;
 99 |   .bg-color-black {
100 |     height: 4.8125rem;
101 |     border-radius: 0.125rem;
102 |   }
103 |   .text {
104 |     color: #c3cbde;
105 |   }
106 |   .body-box {
107 |     border-radius: 0.125rem;
108 |     overflow: hidden;
109 |   }
110 | }
111 | </style>


--------------------------------------------------------------------------------
/src/components/echart/bottom/bottomLeftChartState.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div id="bottomLeftChartState" style="width: 4.35rem; height: 3.05rem; margin:-.6rem 0 0 .1rem;"></div>
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script>
  8 | import echartMixins from "@/utils/resizeMixins";
  9 | export default {
 10 |   data() {
 11 |     return {
 12 |       chart: null,
 13 |     };
 14 |   },
 15 |   mixins: [echartMixins],
 16 |   mounted() {
 17 |     this.draw();
 18 |   },
 19 |   methods: {
 20 |     draw() {
 21 |       // 基于准备好的dom，初始化echarts实例
 22 |       this.chart = this.$echarts.init(
 23 |         document.getElementById("bottomLeftChartState")
 24 |       );
 25 | 
 26 |       let option = {
 27 |         // title: {
 28 |         //   text: "建议各状态组成（单位:件）",
 29 |         //   subtext: "状态图",
 30 |         // },
 31 |         tooltip: {
 32 |           trigger: "axis",
 33 |           axisPointer: {
 34 |             // 坐标轴指示器，坐标轴触发有效
 35 |             type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
 36 |           },
 37 |           formatter: function (params) {
 38 |             var tar = params[1];
 39 |             return tar.name + "<br/>" + tar.seriesName + " : " + tar.value;
 40 |           },
 41 |         },
 42 |         // grid: {
 43 |         //   left: "3%",
 44 |         //   right: "4%",
 45 |         //   bottom: "3%",
 46 |         //   containLabel: true,
 47 |         // },
 48 |         xAxis: {
 49 |           type: "category",
 50 |           splitLine: { show: false },
 51 |           data: ["总费用", "房租", "水电费", "交通费", "伙食费", "日用品数"],
 52 |         },
 53 |         yAxis: {
 54 |           type: "value",
 55 |         },
 56 |         series: [
 57 |           {
 58 |             name: "辅助",
 59 |             type: "bar",
 60 |             stack: "总量",
 61 |             itemStyle: {
 62 |               barBorderColor: "rgba(0,0,0,0)",
 63 |               color: "rgba(0,0,0,0)",
 64 |             },
 65 |             emphasis: {
 66 |               itemStyle: {
 67 |                 barBorderColor: "rgba(0,0,0,0)",
 68 |                 color: "rgba(0,0,0,0)",
 69 |               },
 70 |             },
 71 |             data: [0, 1700, 1400, 1200, 300, 0],
 72 |           },
 73 |           {
 74 |             name: "件数",
 75 |             type: "bar",
 76 |             stack: "总量",
 77 |             label: {
 78 |               show: true,
 79 |               position: "inside",
 80 |             },
 81 |             data: [2900, 1200, 300, 200, 900, 300],
 82 |           },
 83 |         ],
 84 |       };
 85 | 
 86 |       this.chart.setOption(option);
 87 |     },
 88 |     refresh(data) {
 89 |       let option = this.chart.getOption();
 90 |       var showList = new Array();
 91 |       var hiddenList = new Array();
 92 |       var wordList = new Array();
 93 |       // let coutSum = data[0];
 94 |       let temp = 0;
 95 |       for (let index = 0; index < data.length; index++) {
 96 |         const element = data[index];
 97 |         wordList.push(element.X0);
 98 |         showList.push(element.COUNT);
 99 |         if (index > 1) {
100 |           temp += data[index - 1].COUNT;
101 |         }
102 |         hiddenList.push(temp);
103 |       }
104 | 
105 |       option.xAxis[0].data = wordList;
106 |       option.series[0].data = hiddenList;
107 |       option.series[1].data = showList;
108 | 
109 |       // console.log(wordLisst)
110 |       // console.log(hiddenList)
111 |       // console.log(showList)
112 |       this.chart.setOption(option);
113 | 
114 |     },
115 |   },
116 | 
117 |   destroyed() {
118 |     window.onresize = null;
119 |   },
120 | };
121 | </script>
122 | 
123 | <style lang="scss" scoped>
124 | </style>


--------------------------------------------------------------------------------
/src/assets/scss/style.scss:
--------------------------------------------------------------------------------
  1 | @import "./variables";
  2 | 
  3 | //  全局样式
  4 | * {
  5 |   margin: 0;
  6 |   padding: 0;
  7 |   list-style-type: none;
  8 |   box-sizing: border-box;
  9 |   outline: none;
 10 | }
 11 | 
 12 | html {
 13 |   margin: 0;
 14 |   padding: 0;
 15 | }
 16 | 
 17 | body {
 18 |   font-family: Arial, Helvetica, sans-serif;
 19 |   line-height: 1.2em;
 20 |   background-color: #f1f1f1;
 21 |   margin: 0;
 22 |   padding: 0;
 23 | }
 24 | 
 25 | a {
 26 |   color: #343440;
 27 |   text-decoration: none;
 28 | }
 29 | 
 30 | .clearfix {
 31 |   &::after {
 32 |     content: "";
 33 |     display: table;
 34 |     height: 0;
 35 |     line-height: 0;
 36 |     visibility: hidden;
 37 |     clear: both;
 38 |   }
 39 | }
 40 | 
 41 | //浮动
 42 | .float-r {
 43 |   float: right;
 44 | }
 45 | 
 46 | //浮动
 47 | .float-l {
 48 |   float: left;
 49 | }
 50 | 
 51 | // 字体加粗
 52 | .fw-b {
 53 |   font-weight: bold;
 54 | }
 55 | 
 56 | //文章一行显示，多余省略号显示
 57 | .title-item {
 58 |   overflow: hidden;
 59 |   text-overflow: ellipsis;
 60 |   white-space: nowrap;
 61 | }
 62 | 
 63 | .bg-color-black {
 64 |   background-color: rgba(19, 25, 47, 0.6);
 65 | }
 66 | 
 67 | .bg-color-blue {
 68 |   background-color: #1a5cd7;
 69 | }
 70 | 
 71 | .colorBlack {
 72 |   color: #272727 !important;
 73 | 
 74 |   &:hover {
 75 |     color: #272727 !important;
 76 |   }
 77 | }
 78 | 
 79 | .colorGrass {
 80 |   color: #33cea0;
 81 | 
 82 |   &:hover {
 83 |     color: #33cea0 !important;
 84 |   }
 85 | }
 86 | 
 87 | .colorRed {
 88 |   color: #ff5722;
 89 | 
 90 |   &:hover {
 91 |     color: #ff5722 !important;
 92 |   }
 93 | }
 94 | 
 95 | .colorText {
 96 |   color: #d3d6dd !important;
 97 | 
 98 |   &:hover {
 99 |     color: #d3d6dd !important;
100 |   }
101 | }
102 | 
103 | .colorBlue {
104 |   color: #257dff !important;
105 | 
106 |   &:hover {
107 |     color: #257dff !important;
108 |   }
109 | }
110 | 
111 | //颜色
112 | @each $colorkey, $color in $colors {
113 |   .text-#{$colorkey} {
114 |     color: $color;
115 |   }
116 | 
117 |   .bg-#{$colorkey} {
118 |     background-color: $color;
119 |   }
120 | }
121 | 
122 | //对齐
123 | @each $var in (left, center, right) {
124 |   .text-#{$var} {
125 |     text-align: $var !important;
126 |   }
127 | }
128 | 
129 | //flex
130 | @each $key, $value in $flex-jc {
131 |   .jc-#{$key} {
132 |     justify-content: $value;
133 |   }
134 | }
135 | 
136 | @each $key, $value in $flex-ai {
137 |   .ai-#{$key} {
138 |     align-items: $value;
139 |   }
140 | }
141 | 
142 | //字体
143 | @each $fontkey, $fontvalue in $font-sizes {
144 |   .fs-#{$fontkey} {
145 |     font-size: $fontvalue * $base-font-size;
146 |   }
147 | }
148 | 
149 | //.mt-1 => margin top
150 | //spacing
151 | 
152 | @each $typekey, $type in $spacing-types {
153 |   //.m-1
154 |   @each $sizekey, $size in $spacing-sizes {
155 |     .#{$typekey}-#{$sizekey} {
156 |       #{$type}: $size * $spacing-base-size;
157 |     }
158 |   }
159 | 
160 |   //.mx-1
161 |   @each $sizekey, $size in $spacing-sizes {
162 |     .#{$typekey}x-#{$sizekey} {
163 |       #{$type}-left: $size * $spacing-base-size;
164 |       #{$type}-right: $size * $spacing-base-size;
165 |     }
166 | 
167 |     .#{$typekey}y-#{$sizekey} {
168 |       #{$type}-top: $size * $spacing-base-size;
169 |       #{$type}-bottom: $size * $spacing-base-size;
170 |     }
171 |   }
172 | 
173 |   //.mt-1
174 |   @each $directionkey, $direction in $spacing-directions {
175 |     @each $sizekey, $size in $spacing-sizes {
176 |       .#{$typekey}#{$directionkey}-#{$sizekey} {
177 |         #{$type}-#{$direction}: $size * $spacing-base-size;
178 |       }
179 |     }
180 |   }
181 | 
182 |   .#{$typekey} {
183 |     #{$type}: 0;
184 |   }
185 | }
186 | 


--------------------------------------------------------------------------------
/src/views/centerRight2.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="centreRight2">
  3 |     <div class="bg-color-black">
  4 |       <div class="d-flex pt-2 pl-2">
  5 |         <span style="color: #5cd9e8">
  6 |           <icon name="align-left"></icon>
  7 |         </span>
  8 |         <span class="fs-xl text mx-2">建议分配系统分析</span>
  9 |       </div>
 10 |       <div class="d-flex jc-center body-box" style="margin-top: 0">
 11 |         <dv-capsule-chart :config="config" ref="capsule" style="width: 100%; height: 4.5rem" />
 12 |         <!-- <dv-conical-column-chart :config="config" ref="capsule" style="width: 100%; height: 2rem" /> -->
 13 |         <!-- <centreLeft1Chart ref="centreLeft1Chart" /> -->
 14 | 
 15 |         <!-- ---------------------------------------- -->
 16 |         <!-- <centreRight2Chart1></centreRight2Chart1> -->
 17 |       </div>
 18 |     </div>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script>
 23 | // import centreRight2Chart1 from "@/components/echart/centreRight2/centreRight2Chart1";
 24 | // import centreLeft1Chart from "@/components/echart/centerLeft2/centreLeft1Chart";
 25 | 
 26 | export default {
 27 |   data() {
 28 |     return {
 29 |       config: {
 30 |         data: [
 31 |           {
 32 |             name: "市检察院",
 33 |             value: 12,
 34 |           },
 35 |           {
 36 |             name: "市高法",
 37 |             value: 213,
 38 |           },
 39 |           {
 40 |             name: "市政府系统",
 41 |             value: 222,
 42 |           },
 43 |           {
 44 |             name: "市委系统",
 45 |             value: 331,
 46 |           },
 47 |           {
 48 |             name: "市人大系统",
 49 |             value: 22,
 50 |           },{
 51 |             name: "中央垂直管理单位",
 52 |             value: 22,
 53 |           },
 54 |         ],
 55 |         unit: "件",
 56 |         showValue:true
 57 |       },
 58 |     };
 59 |   },
 60 |   components: {
 61 |     // centreLeft1Chart,
 62 |     // centreRight2Chart1,
 63 |   },
 64 |   mounted() {
 65 |     this.setTimer();
 66 |   },
 67 |   methods: {
 68 |     setTimer() {
 69 |       this.timer = setInterval(() => {
 70 |         this.fetchProposalSubmit(); //获取-系统情况分析数据
 71 |         // this.fetchSystemSum(); //获取-系统情况分析数据
 72 |       }, 3000);
 73 |     },
 74 |     async fetchSystemSum() {
 75 |       const { data } = await this.$http.get("getDataByName?name=SYSTEM_SUM");
 76 | 
 77 |       let status = data.status;
 78 |       let dataList = JSON.parse(data.data);
 79 | 
 80 |       if (status === 200) {
 81 |         this.$refs.centreLeft1Chart.refresh(dataList);
 82 |       }
 83 |     },
 84 |     async fetchProposalSubmit() {
 85 |       const { data } = await this.$http.get("getDataByName?name=SYSTEM_SUM");
 86 | 
 87 |       let status = data.status;
 88 |       let dataList = JSON.parse(data.data);
 89 | 
 90 |       var dataRes = new Array();
 91 |       if (status === 200) {
 92 |         for (var i = dataList.length - 1; i >= 0; i--) {
 93 |           var item = {
 94 |             name: "西峡",
 95 |             value: 98,
 96 |           };
 97 |           item.name = dataList[i].X0;
 98 | 
 99 |           item.value = dataList[i].COUNT;
100 |           dataRes.push(item);
101 |         }
102 |         this.config.data = dataRes;
103 |         this.$refs.capsule.calcData();
104 |       }
105 |     },
106 |   },
107 | };
108 | </script>
109 | 
110 | <style lang="scss">
111 | #centreRight2 {
112 |   padding: 0.0625rem;
113 |   height: 5rem;
114 |   min-width: 3.75rem;
115 |   border-radius: 0.0625rem;
116 |   .bg-color-black {
117 |     padding: 0.0625rem;
118 |     height: 5.0625rem;
119 |     border-radius: 0.125rem;
120 |   }
121 |   .text {
122 |     color: #c3cbde;
123 |   }
124 |   .body-box {
125 |     border-radius: 0.125rem;
126 |     overflow: hidden;
127 |   }
128 | }
129 | </style>


--------------------------------------------------------------------------------
/src/common/flexible.js:
--------------------------------------------------------------------------------
  1 | (function(win, lib) {
  2 |   var doc = win.document;
  3 |   var docEl = doc.documentElement;
  4 |   var metaEl = doc.querySelector('meta[name="viewport"]');
  5 |   var flexibleEl = doc.querySelector('meta[name="flexible"]');
  6 |   var dpr = 0;
  7 |   var scale = 0;
  8 |   var tid;
  9 |   var flexible = lib.flexible || (lib.flexible = {});
 10 | 
 11 |   if (metaEl) {
 12 |     console.warn("将根据已有的meta标签来设置缩放比例");
 13 |     var match = metaEl
 14 |       .getAttribute("content")
 15 |       // eslint-disable-next-line no-useless-escape
 16 |       .match(/initial\-scale=([\d\.]+)/);
 17 |     if (match) {
 18 |       scale = parseFloat(match[1]);
 19 |       dpr = parseInt(1 / scale);
 20 |     }
 21 |   } else if (flexibleEl) {
 22 |     var content = flexibleEl.getAttribute("content");
 23 |     if (content) {
 24 |       // eslint-disable-next-line no-useless-escape
 25 |       var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
 26 |       // eslint-disable-next-line no-useless-escape
 27 |       var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
 28 |       if (initialDpr) {
 29 |         dpr = parseFloat(initialDpr[1]);
 30 |         scale = parseFloat((1 / dpr).toFixed(2));
 31 |       }
 32 |       if (maximumDpr) {
 33 |         dpr = parseFloat(maximumDpr[1]);
 34 |         scale = parseFloat((1 / dpr).toFixed(2));
 35 |       }
 36 |     }
 37 |   }
 38 | 
 39 |   if (!dpr && !scale) {
 40 |     // eslint-disable-next-line no-unused-vars
 41 |     var isAndroid = win.navigator.appVersion.match(/android/gi);
 42 |     var isIPhone = win.navigator.appVersion.match(/iphone/gi);
 43 |     var devicePixelRatio = win.devicePixelRatio;
 44 |     if (isIPhone) {
 45 |       // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
 46 |       if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
 47 |         dpr = 3;
 48 |       } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
 49 |         dpr = 2;
 50 |       } else {
 51 |         dpr = 1;
 52 |       }
 53 |     } else {
 54 |       // 其他设备下，仍旧使用1倍的方案
 55 |       dpr = 1;
 56 |     }
 57 |     scale = 1 / dpr;
 58 |   }
 59 | 
 60 |   docEl.setAttribute("data-dpr", dpr);
 61 |   if (!metaEl) {
 62 |     metaEl = doc.createElement("meta");
 63 |     metaEl.setAttribute("name", "viewport");
 64 |     metaEl.setAttribute(
 65 |       "content",
 66 |       "initial-scale=" +
 67 |         scale +
 68 |         ", maximum-scale=" +
 69 |         scale +
 70 |         ", minimum-scale=" +
 71 |         scale +
 72 |         ", user-scalable=no"
 73 |     );
 74 |     if (docEl.firstElementChild) {
 75 |       docEl.firstElementChild.appendChild(metaEl);
 76 |     } else {
 77 |       var wrap = doc.createElement("div");
 78 |       wrap.appendChild(metaEl);
 79 |       doc.write(wrap.innerHTML);
 80 |     }
 81 |   }
 82 | 
 83 |   function refreshRem() {
 84 |     var width = docEl.getBoundingClientRect().width;
 85 |     // 最小1366px，最大适配2560px
 86 |     if (width / dpr < 1366) {
 87 |       width = 1366 * dpr;
 88 |     } else if (width / dpr > 2560) {
 89 |       width = 2560 * dpr;
 90 |     }
 91 |     // 设置成24等份，设计稿时1920px的，这样1rem就是80px
 92 |     var rem = width / 24;
 93 |     docEl.style.fontSize = rem + "px";
 94 |     flexible.rem = win.rem = rem;
 95 |   }
 96 | 
 97 |   win.addEventListener(
 98 |     "resize",
 99 |     function() {
100 |       clearTimeout(tid);
101 |       tid = setTimeout(refreshRem, 300);
102 |     },
103 |     false
104 |   );
105 |   win.addEventListener(
106 |     "pageshow",
107 |     function(e) {
108 |       if (e.persisted) {
109 |         clearTimeout(tid);
110 |         tid = setTimeout(refreshRem, 300);
111 |       }
112 |     },
113 |     false
114 |   );
115 | 
116 |   if (doc.readyState === "complete") {
117 |     doc.body.style.fontSize = 12 * dpr + "px";
118 |   } else {
119 |     doc.addEventListener(
120 |       "DOMContentLoaded",
121 |       // eslint-disable-next-line no-unused-vars
122 |       function(e) {
123 |         doc.body.style.fontSize = 12 * dpr + "px";
124 |       },
125 |       false
126 |     );
127 |   }
128 | 
129 |   refreshRem();
130 | 
131 |   flexible.dpr = win.dpr = dpr;
132 |   flexible.refreshRem = refreshRem;
133 |   flexible.rem2px = function(d) {
134 |     var val = parseFloat(d) * this.rem;
135 |     if (typeof d === "string" && d.match(/rem$/)) {
136 |       val += "px";
137 |     }
138 |     return val;
139 |   };
140 |   flexible.px2rem = function(d) {
141 |     var val = parseFloat(d) / this.rem;
142 |     if (typeof d === "string" && d.match(/px$/)) {
143 |       val += "rem";
144 |     }
145 |     return val;
146 |   };
147 | })(window, window["lib"] || (window["lib"] = {}));
148 | 


--------------------------------------------------------------------------------
/src/components/echart/centreRight2/centreRight2Chart1.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div id="centreRight2Chart1" style="width:3.25rem; height: 2.60rem;">123</div>
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script>
  8 | import echartMixins from "@/utils/resizeMixins";
  9 | 
 10 | export default {
 11 |   data() {
 12 |     return {
 13 |       chart: null
 14 |     };
 15 |   },
 16 |   mixins: [echartMixins],
 17 |   mounted() {
 18 |     this.draw();
 19 |   },
 20 |   methods: {
 21 |     draw() {
 22 |       // 基于准备好的dom，初始化echarts实例
 23 |       this.chart = this.$echarts.init(document.getElementById("centreRight2Chart1"));
 24 |       //  ----------------------------------------------------------------
 25 |       let dataBJ = [
 26 |         [94, 69, 114, 2.08, 73, 39, 22],
 27 |         [99, 73, 110, 2.43, 76, 48, 23],
 28 |         [31, 12, 30, 0.5, 32, 16, 24],
 29 |         [42, 27, 43, 1, 53, 22, 25],
 30 |         [154, 117, 157, 3.05, 92, 58, 26],
 31 |         [234, 185, 230, 4.09, 123, 69, 27],
 32 |         [160, 120, 186, 2.77, 91, 50, 28]
 33 |       ];
 34 | 
 35 |       let dataGZ = [
 36 |         [84, 94, 140, 2.238, 68, 18, 22],
 37 |         [93, 77, 104, 1.165, 53, 7, 23],
 38 |         [99, 130, 227, 3.97, 55, 15, 24],
 39 |         [146, 84, 139, 1.094, 40, 17, 25],
 40 |         [113, 108, 137, 1.481, 48, 15, 26],
 41 |         [81, 48, 62, 1.619, 26, 3, 27],
 42 |         [56, 48, 68, 1.336, 37, 9, 28]
 43 |       ];
 44 | 
 45 |       let dataSH = [
 46 |         [91, 45, 125, 0.82, 34, 23, 1],
 47 |         [65, 27, 78, 0.86, 45, 29, 2],
 48 |         [83, 60, 84, 1.09, 73, 27, 3],
 49 |         [109, 81, 121, 1.28, 68, 51, 4],
 50 |         [106, 77, 114, 1.07, 55, 51, 5],
 51 |         [109, 81, 121, 1.28, 68, 51, 6],
 52 |         [106, 77, 114, 1.07, 55, 51, 7]
 53 |       ];
 54 | 
 55 |       let lineStyle = {
 56 |         normal: {
 57 |           width: 1,
 58 |           opacity: 0.5
 59 |         }
 60 |       };
 61 | 
 62 |       let option = {
 63 |         radar: {
 64 |           indicator: [
 65 |             { name: "AQI", max: 300 },
 66 |             { name: "PM2.5", max: 250 },
 67 |             { name: "PM10", max: 300 },
 68 |             { name: "CO", max: 5 },
 69 |             { name: "NO2", max: 200 },
 70 |             { name: "SO2", max: 100 }
 71 |           ],
 72 |           shape: "circle",
 73 |           splitNumber: 5,
 74 |           name: {
 75 |             textStyle: {
 76 |               color: "rgb(238, 197, 102)"
 77 |             }
 78 |           },
 79 |           splitLine: {
 80 |             lineStyle: {
 81 |               color: [
 82 |                 "rgba(238, 197, 102, 0.1)",
 83 |                 "rgba(238, 197, 102, 0.2)",
 84 |                 "rgba(238, 197, 102, 0.4)",
 85 |                 "rgba(238, 197, 102, 0.6)",
 86 |                 "rgba(238, 197, 102, 0.8)",
 87 |                 "rgba(238, 197, 102, 1)"
 88 |               ].reverse()
 89 |             }
 90 |           },
 91 |           splitArea: {
 92 |             show: false
 93 |           },
 94 |           axisLine: {
 95 |             lineStyle: {
 96 |               color: "rgba(238, 197, 102, 0.5)"
 97 |             }
 98 |           }
 99 |         },
100 |         series: [
101 |           {
102 |             name: "北京",
103 |             type: "radar",
104 |             lineStyle: lineStyle,
105 |             data: dataBJ,
106 |             symbol: "none",
107 |             itemStyle: {
108 |               normal: {
109 |                 color: "#F9713C"
110 |               }
111 |             },
112 |             areaStyle: {
113 |               normal: {
114 |                 opacity: 0.1
115 |               }
116 |             }
117 |           },
118 |           {
119 |             name: "上海",
120 |             type: "radar",
121 |             lineStyle: lineStyle,
122 |             data: dataSH,
123 |             symbol: "none",
124 |             itemStyle: {
125 |               normal: {
126 |                 color: "#B3E4A1"
127 |               }
128 |             },
129 |             areaStyle: {
130 |               normal: {
131 |                 opacity: 0.05
132 |               }
133 |             }
134 |           },
135 |           {
136 |             name: "广州",
137 |             type: "radar",
138 |             lineStyle: lineStyle,
139 |             data: dataGZ,
140 |             symbol: "none",
141 |             itemStyle: {
142 |               normal: {
143 |                 color: "rgb(238, 197, 102)"
144 |               }
145 |             },
146 |             areaStyle: {
147 |               normal: {
148 |                 opacity: 0.05
149 |               }
150 |             }
151 |           }
152 |         ]
153 |       };
154 |       this.chart.setOption(option);
155 |     }
156 |   },
157 |   destroyed() {
158 |     window.onresize = null;
159 |   }
160 | };
161 | </script>
162 | 
163 | <style lang="scss" scoped>
164 | #centreRight2Chart1 {
165 |   margin: 0 auto;
166 | }
167 | </style>


--------------------------------------------------------------------------------
/src/views/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="index">
  3 |     <dv-full-screen-container class="bg">
  4 |       <dv-loading v-if="loading">Loading...</dv-loading>
  5 |       <div v-else class="host-body">
  6 |         <div class="d-flex jc-center">
  7 |           <dv-decoration-10 style="width:33.3%;height:.0625rem;" />
  8 |           <div class="d-flex jc-center">
  9 |             <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
 10 |             <div class="title">
 11 |               <span class="title-text">大数据可视化平台</span>
 12 |               <dv-decoration-6
 13 |                 class="title-bototm"
 14 |                 :reverse="true"
 15 |                 :color="['#50e3c2', '#67a1e5']"
 16 |                 style="width:3.125rem;height:.1rem;"
 17 |               />
 18 |             </div>
 19 |             <dv-decoration-8
 20 |               :reverse="true"
 21 |               :color="['#568aea', '#000000']"
 22 |               style="width:2.5rem;height:.625rem;"
 23 |             />
 24 |           </div>
 25 |           <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
 26 |         </div>
 27 | 
 28 |         <!-- 第二行 -->
 29 |         <div class="d-flex jc-between px-2">
 30 |           <div class="d-flex" style="width: 40%">
 31 |             <div
 32 |               class="react-right ml-4"
 33 |               style="width: 6.25rem; text-align: left;background-color: #0f1325;"
 34 |             >
 35 |               <span class="react-before"></span>
 36 |               <span class="text">政务大屏</span>
 37 |             </div>
 38 |             <div class="react-right ml-3" style="background-color: #0f1325;">
 39 |               <span class="text colorBlue">数据分析</span>
 40 |             </div>
 41 |           </div>
 42 |           <div style="width: 40%" class="d-flex">
 43 |             <div class="react-left bg-color-blue mr-3">
 44 |               <span class="text fw-b">xx届xx次</span>
 45 |             </div>
 46 |             <div
 47 |               class="react-left mr-4"
 48 |               style="width: 6.25rem; background-color: #0f1325; text-align: right;"
 49 |             >
 50 |               <span class="react-after"></span>
 51 |               <span class="text">{{currtime}}</span>
 52 |             </div>
 53 |           </div>
 54 |         </div>
 55 | 
 56 |         <div class="body-box">
 57 |           <!-- 第三行数据 -->
 58 |           <div class="content-box">
 59 |             <div>
 60 |               <dv-border-box-12>
 61 |                 <centerLeft1 />
 62 |               </dv-border-box-12>
 63 |             </div>
 64 |             <div>
 65 |               <dv-border-box-12>
 66 |                 <centerLeft2 />
 67 |               </dv-border-box-12>
 68 |             </div>
 69 |             <!-- 中间 -->
 70 |             <div>
 71 |               <center />
 72 |             </div>
 73 |             <!-- 中间 -->
 74 |             <div>
 75 |               <centerRight2 />
 76 |             </div>
 77 |             <div>
 78 |               <dv-border-box-13>
 79 |                 <centerRight1 />
 80 |               </dv-border-box-13>
 81 |             </div>
 82 |           </div>
 83 | 
 84 |           <!-- 第四行数据 -->
 85 |           <div class="bototm-box">
 86 |             <dv-border-box-13>
 87 |               <bottomLeft />
 88 |             </dv-border-box-13>
 89 |             <dv-border-box-12>
 90 |               <bottomRight />
 91 |             </dv-border-box-12>
 92 |           </div>
 93 |         </div>
 94 |       </div>
 95 |     </dv-full-screen-container>
 96 |   </div>
 97 | </template>
 98 | 
 99 | <script>
100 | import centerLeft1 from "./centerLeft1";
101 | import centerLeft2 from "./centerLeft2";
102 | import centerRight1 from "./centerRight1";
103 | import centerRight2 from "./centerRight2";
104 | import center from "./center";
105 | import bottomLeft from "./bottomLeft";
106 | import bottomRight from "./bottomRight";
107 | export default {
108 |   data() {
109 |     return {
110 |       loading: true,
111 |       currtime: "",
112 |     };
113 |   },
114 |   components: {
115 |     centerLeft1,
116 |     centerLeft2,
117 |     centerRight1,
118 |     centerRight2,
119 |     center,
120 |     bottomLeft,
121 |     bottomRight,
122 |   },
123 |   mounted() {
124 |     this.cancelLoading();
125 |     // 定时刷新当前时间
126 |     this.currentTime();
127 |   },
128 |   methods: {
129 |     getTime: function () {
130 |       var _this = this;
131 |       let yy = new Date().getFullYear();
132 |       let mm = new Date().getMonth() + 1;
133 |       let dd = new Date().getDate();
134 |       let hh = new Date().getHours();
135 |       let mf =
136 |         new Date().getMinutes() < 10
137 |           ? "0" + new Date().getMinutes()
138 |           : new Date().getMinutes();
139 |       let ss =
140 |         new Date().getSeconds() < 10
141 |           ? "0" + new Date().getSeconds()
142 |           : new Date().getSeconds();
143 |       _this.currtime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
144 |     },
145 |     currentTime() {
146 |       setInterval(this.getTime, 500);
147 |     },
148 |     cancelLoading() {
149 |       setTimeout(() => {
150 |         this.loading = false;
151 |       }, 500);
152 |     },
153 |   },
154 | };
155 | </script>
156 | 
157 | <style lang="scss">
158 | @import "../assets/scss/index.scss";
159 | </style>


--------------------------------------------------------------------------------
/src/components/echart/centerLeft2/centreLeft2Chart.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div id="centreLeft2Chart" style="width:4.125rem; height: 4.625rem;"></div>
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script>
  8 | import echartMixins from "@/utils/resizeMixins";
  9 | 
 10 | export default {
 11 |   data() {
 12 |     return {
 13 |       chart: null
 14 |     };
 15 |   },
 16 |   mixins: [echartMixins],
 17 |   mounted() {
 18 |     this.draw();
 19 |   },
 20 |   methods: {
 21 |     draw() {
 22 |       // 基于准备好的dom，初始化echarts实例
 23 |       this.chart = this.$echarts.init(document.getElementById("centreLeft2Chart"));
 24 |       //  ----------------------------------------------------------------
 25 | 
 26 |       let option = {
 27 |         angleAxis: {
 28 |           interval: 1,
 29 |           type: "category",
 30 |           data: [
 31 |             "there1",
 32 |             "there2",
 33 |             "there3",
 34 |             "there4",
 35 |             "there5",
 36 |             "there6",
 37 |             "there7",
 38 |             "there8",
 39 |             "there9",
 40 |             "there10 "
 41 |           ],
 42 |           z: 10,
 43 |           axisLine: {
 44 |             show: true,
 45 |             lineStyle: {
 46 |               color: "#00c7ff",
 47 |               width: 1,
 48 |               type: "solid"
 49 |             }
 50 |           },
 51 |           axisLabel: {
 52 |             interval: 0,
 53 |             show: true,
 54 |             color: "#00c7ff",
 55 |             margin: 8,
 56 |             fontSize: 12
 57 |           }
 58 |         },
 59 |         radiusAxis: {
 60 |           min: 0,
 61 |           max: 100,
 62 |           interval: 20,
 63 |           axisLine: {
 64 |             show: true,
 65 |             lineStyle: {
 66 |               color: "#00c7ff",
 67 |               width: 1,
 68 |               type: "solid"
 69 |             }
 70 |           },
 71 |           axisLabel: {
 72 |             formatter: "{value} %",
 73 |             show: false,
 74 |             padding: [0, 0, 20, 0],
 75 |             color: "#00c7ff",
 76 |             fontSize: 16
 77 |           },
 78 |           splitLine: {
 79 |             lineStyle: {
 80 |               color: "#00c7ff",
 81 |               width: 1,
 82 |               type: "solid"
 83 |             }
 84 |           }
 85 |         },
 86 |         legend: {
 87 |           show: true,
 88 |           orient: "vartical",
 89 |           top: "center",
 90 |           bottom: "0%",
 91 |           itemWidth: 16,
 92 |           itemHeight: 8,
 93 |           itemGap: 16,
 94 |           textStyle: {
 95 |             color: "#A3E2F4",
 96 |             fontSize: 12,
 97 |             fontWeight: 0
 98 |           },
 99 |           data: ["A"]
100 |         },
101 |         polar: {},
102 |         series: [
103 |           {
104 |             name: "A",
105 |             type: "bar",
106 |             radius: ["20%", "100%"],
107 |             data: [
108 |               {
109 |                 value: 87,
110 |                 itemStyle: {
111 |                   normal: {
112 |                     color: "#f54d4d"
113 |                   }
114 |                 }
115 |               },
116 |               {
117 |                 value: 80,
118 |                 itemStyle: {
119 |                   normal: {
120 |                     color: "#f87544"
121 |                   }
122 |                 }
123 |               },
124 |               {
125 |                 value: 75,
126 |                 itemStyle: {
127 |                   normal: {
128 |                     color: "#ffae00"
129 |                   }
130 |                 }
131 |               },
132 |               {
133 |                 value: 69,
134 |                 itemStyle: {
135 |                   normal: {
136 |                     color: "#dcff00"
137 |                   }
138 |                 }
139 |               },
140 |               {
141 |                 value: 63,
142 |                 itemStyle: {
143 |                   normal: {
144 |                     color: "#25d053"
145 |                   }
146 |                 }
147 |               },
148 |               {
149 |                 value: 54,
150 |                 itemStyle: {
151 |                   normal: {
152 |                     color: "#01fff5"
153 |                   }
154 |                 }
155 |               },
156 |               {
157 |                 value: 47,
158 |                 itemStyle: {
159 |                   normal: {
160 |                     color: "#007cff"
161 |                   }
162 |                 }
163 |               },
164 |               {
165 |                 value: 40,
166 |                 itemStyle: {
167 |                   normal: {
168 |                     color: "#4245ff"
169 |                   }
170 |                 }
171 |               },
172 |               {
173 |                 value: 35,
174 |                 itemStyle: {
175 |                   normal: {
176 |                     color: "#c32eff"
177 |                   }
178 |                 }
179 |               },
180 |               {
181 |                 value: 33,
182 |                 itemStyle: {
183 |                   normal: {
184 |                     color: "#ff62e8"
185 |                   }
186 |                 }
187 |               }
188 |             ],
189 |             coordinateSystem: "polar"
190 |           }
191 |         ]
192 |       };
193 |       this.chart.setOption(option);
194 |     }
195 |   },
196 |   destroyed() {
197 |     window.onresize = null;
198 |   }
199 | };
200 | </script>
201 | 
202 | <style lang="scss" scoped>
203 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ## 一、项目描述
  2 | 
  3 | 项目框架来源于[项目 gitee 地址（国内速度快）](https://gitee.com/MTrun/big-screen-vue-datav)
  4 | 吃水不忘挖井人，感谢大佬源码分享
  5 | 
  6 | [项目博客地址](https://blog.csdn.net/Mrkaizi/article/details/112240996)
  7 | 
  8 | 
  9 | - 一个基于 vue、datav、Echart 框架的 " **数据大屏项目** "，通过 vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，详情请点击下方 DataV 文档。
 10 | - 项目需要全屏展示（按 F11）。
 11 | - 项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用**按需引入**。
 12 | - 拉取项目之后，建议按照自己的功能区域重命名文件，现以简单的位置进行区分。
 13 | - 项目环境：vue-cli-3.0、webpack-4.0、npm-6.13、node-v12.16。
 14 | - 请拉取 master 分支的代码，其余是开发分支。
 15 | 
 16 | 友情链接：
 17 | 
 18 | 1.  [DataV 官方文档（建议使用之前先浏览）](http://datav.jiaminghi.com/guide/)
 19 | 2.  [echarts 实例](https://www.echartsjs.com/examples/zh/index.html)，[echarts 官方文档](https://www.echartsjs.com/zh/option.html#title)
 20 | 3.  [Vue 官方文档](https://cn.vuejs.org/v2/guide/instance.html)
 21 | 4.  [项目 gitee 地址（国内速度快）](https://gitee.com/MTrun/big-screen-vue-datav)
 22 | 
 23 | 项目展示
 24 | ![项目展示](https://images.gitee.com/uploads/images/2020/0411/221307_0f8af2e7_4964818.gif '20200411_221020.gif')
 25 | 
 26 | ## 二、主要文件介绍
 27 | 
 28 | | 文件                | 作用/功能                                           |
 29 | | ------------------- | --------------------------------------------------- |
 30 | | main.js             | 主目录文件，引入Echart/DataV等文件                   |
 31 | | utils               | 工具函数与 mixins 函数等                            |
 32 | | views/ index.vue    | 项目主结构                                          |
 33 | | views/其余文件      | 界面各个区域组件（按照位置来命名）ajax 接口请求位置 |
 34 | | assets              | 静态资源目录，放置 logo 与背景图片                  |
 35 | | assets / style.scss | 通用 CSS 文件，全局项目快捷样式调节                 |
 36 | | assets / index.scss | Index 界面的 CSS 文件                               |
 37 | | components/echart   | 所有 echart 图表（按照位置来命名）                  |
 38 | | common/flexible.js  | flexible 插件代码（适配屏幕尺寸，定制化修改）       |
 39 | 
 40 | ## 三、使用介绍
 41 | 
 42 | 1. **如何启动项目**
 43 | 
 44 |    需要提前安装好`nodejs`与`npm`,下载项目后在项目主目录下运行`npm/cnpm install`拉取依赖包，然后使用 `vue-cli` 或者直接使用命令`npm run serve`，就可以启动项目，启动项目后需要手动全屏（按 F11）。
 45 | 
 46 | 2. **如何请求数据**
 47 | 
 48 |    现在的项目未使用前后端数据请求，建议使用 axios 进行数据请求，在 main.js 位置进行全局配置，在 views/xx.vue 文件里进行前后端数据请求。
 49 | 
 50 | - axios 的 main.js 配置参考范例（因人而异）
 51 | 
 52 | ```js
 53 | import axios from 'axios';
 54 | 
 55 | //把方法放到vue的原型上，这样就可以全局使用了
 56 | Vue.prototype.$http = axios.create({
 57 |   //设置20秒超时时间
 58 |   timeout: 20000,
 59 |   baseURL: 'http://172.0.0.1:80080', //这里写后端地址
 60 | });
 61 | ```
 62 | 
 63 | - 在 vue 页面中调用 axios 方法并通过 props 传给 echarts 图表子组件
 64 | 
 65 | ```js
 66 | export default {
 67 |   data() {
 68 |   	ListDataSelf:[]
 69 |   },
 70 |   mounted() {
 71 |    this.fetchList(); //获取数据
 72 |   },
 73 |   methods: {
 74 | 	async fetchList(){
 75 | 	  const { code,listData }= await this.$http.get("xx/xx/xx"x);
 76 | 	  if(code === 200){
 77 | 		 this.ListDataSelf= listData;
 78 | 	  }
 79 | 	}
 80 |   }
 81 |  }
 82 | ```
 83 | 
 84 | 3. **如何动态渲染图表**
 85 | 
 86 |    在`components/echart`下的文件，比如`drawPie()`是渲染函数，`echartData`是需要动态渲染的数据，当外界通过`props`传入新数据，我们可以使用`watch()`方法去监听，一但数据变化就调用`this.drawPie()`并触发内部的`.setOption`函数，重新渲染一次图表。
 87 | 
 88 | ```js
 89 | //这里是子组件内部
 90 | 
 91 | props: ["listData"],
 92 | watch: {
 93 |   listData(newValue) {
 94 |      this.echartData= newValue;
 95 |      this.drawPie();
 96 |    },
 97 |   },
 98 | methods: {
 99 |   drawPie() {
100 |   	.....
101 |   	'渲染节点名称'.setOption(option);
102 |   }
103 |  }
104 | ```
105 | 
106 | 4. **如何复用图表组件**
107 | 
108 |    因为 Echart 图表是根据`id/class`去获取 Dom 节点并进行渲染的，所以我们只要传入唯一的 id 值与需要的数据就可以进行复用。如中间部分的`任务通过率与任务达标率`组件就是采用复用的方式。
109 | 
110 | 如：在调用处`views/center.vue`里去定义好数据并传入组件（项目里的所有`id`都不能重复!!!）
111 | 
112 | ```js
113 | //组件调用
114 | <span>今日任务通过率</span>
115 | <centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />
116 | 
117 | <span>今日任务达标率</span>
118 | <centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />
119 | 
120 | ...
121 | import centerChart from "@/components/echart/center/centerChartRate";
122 | 
123 | data() {
124 |   return {
125 |     rate: [
126 |       {
127 |         id: "centerRate1",
128 |         tips: 60,
129 |         ...
130 |       },
131 |       {
132 |         id: "centerRate2",
133 |         tips: 40,
134 |         colorData: {
135 |           ...
136 |         }
137 |       }
138 |     ]
139 |   }
140 | }
141 | ```
142 | 
143 | 然后在复用的组件`components/echart/center/centerChartRate`里进行接收并在用到的地方赋值。
144 | 
145 | 5. **如何更换边框**
146 | 
147 |    边框是使用了 DataV 自带的组件，只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看
148 |    如：
149 | 
150 | ```html
151 | <dv-border-box-1></dv-border-box-1>
152 | <dv-border-box-2></dv-border-box-2>
153 | <dv-border-box-3></dv-border-box-3>
154 | ```
155 | 
156 | 6. **如何更换图表**
157 | 
158 |    直接进入 `components/echart` 下的文件修改成你要的 echarts 模样，可以去[echarts 官方社区](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。
159 | 
160 | 7. **Mixins 注入的问题**
161 | 
162 |    使用 mixins 注入解决了图表重复书写响应式适配的代码，如果要更换(新增)图形，需要将`echarts.init()`函数赋值给`this.chart`，然后 mixins 才会自动帮你注入响应式功能。
163 | 
164 | 8. **屏幕适配问题**
165 | 
166 |    本项目借助了 flexible 插件，通过改变 rem 的值来进行适配，原设计为 1920px。 ，适配区间为：1366px ~ 2560px，本项目有根据实际情况进行源文件的更改，小屏幕（如:宽为 1366px）需要自己舍弃部分动态组件进行适配，如'动态文字变换组件'会影响布局，需要手动换成一般节点，
167 | 
168 | ```js
169 | // flexible文件位置: `common/flexible.js`,修改部分如下
170 | function refreshRem() {
171 |   var width = docEl.getBoundingClientRect().width;
172 |   // 最小1366px，最大适配2560px
173 |   if (width / dpr < 1366) {
174 |     width = 1366 * dpr;
175 |   } else if (width / dpr > 2560) {
176 |     width = 2560 * dpr;
177 |   }
178 |   // 原项目是1920px我设置成24等份，这样1rem就是80px
179 |   var rem = width / 24;
180 |   docEl.style.fontSize = rem + 'px';
181 |   flexible.rem = win.rem = rem;
182 | }
183 | ```
184 | 
185 | ## 四、更新情况
186 | 
187 | 1. 增加了 Echart 组件复用的功能，如：中间任务达标率的两个百分比图使用的是同一个组件。
188 | 2. 修复了头部右侧的图案条不对称的问题。
189 | 3. 修复屏幕适配问题，更换了所有的尺寸单位，统一使用 rem。
190 | 4. 使用 Mixins 注入图表响应式代码。
191 | 5. vue-awesome 改成按需引入的方式
192 | 
193 | ## 五、其余
194 | 
195 | 这个项目是个人的作品，难免会有问题和 BUG，如果有问题请进行评论，我也会尽力去更新，自己也在前端学习的路上，欢迎交流，非常感谢！
196 | 


--------------------------------------------------------------------------------
/src/views/centerLeft1.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="centreLeft1">
  3 |     <div class="bg-color-black">
  4 |       <div class="d-flex pt-2 pl-2">
  5 |         <span style="color: #5cd9e8">
  6 |           <icon name="chart-bar"></icon>
  7 |         </span>
  8 |         <div class="d-flex">
  9 |           <span class="fs-xl text mx-2">提出情况</span>
 10 |           <dv-decoration-3
 11 |             style="
 12 |               width: 1.25rem;
 13 |               height: 0.25rem;
 14 |               position: relative;
 15 |               top: -0.0375rem;
 16 |             "
 17 |           />
 18 |         </div>
 19 |       </div>
 20 |       <div class="d-flex jc-center">
 21 |         <!-- <centreLeft1Chart ref="centreLeft1Chart" /> -->
 22 |         <dv-active-ring-chart
 23 |           ref="ring"
 24 |           :config="config"
 25 |           style="height: 2.75rem; width: 2.75rem"
 26 |         />
 27 |       </div>
 28 |       <!-- 4个主要的数据 -->
 29 |       <div class="bottom-data">
 30 |         <div class="item-box" v-for="(item, index) in numberData" :key="index">
 31 |           <div class="d-flex">
 32 |             <!-- <span class="coin">￥</span> -->
 33 |             <dv-digital-flop
 34 |               :config="item.number"
 35 |               style="width: 2.5rem; height: 0.625rem"
 36 |             />
 37 |           </div>
 38 |           <p class="text" style="text-align: center">
 39 |             {{ item.text }}
 40 |             <span class="colorYellow">(件)</span>
 41 |           </p>
 42 |         </div>
 43 |       </div>
 44 |     </div>
 45 |   </div>
 46 | </template>
 47 | 
 48 | <script>
 49 | // import centreLeft1Chart from "@/components/echart/centerLeft2/centreLeft1Chart";
 50 | export default {
 51 |   data() {
 52 |     return {
 53 |       config: {
 54 |         data: [
 55 |           {
 56 |             name: "全部",
 57 |             value: 1315,
 58 |           },
 59 |         ],
 60 |         color: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
 61 |         lineWidth: 20,
 62 |         radius: "55%",
 63 |         activeRadius: "60%",
 64 |         digitalFlopStyle: {
 65 |           fontSize: 15,
 66 |         },
 67 |         showOriginValue: true,
 68 |       },
 69 |       numberData: [
 70 |         {
 71 |           number: {
 72 |             number: [15],
 73 |             toFixed: 0,
 74 |             content: "{nt}",
 75 |           },
 76 |           text: "建议已提交总数",
 77 |         },
 78 |         {
 79 |           number: {
 80 |             number: [1144],
 81 |             toFixed: 0,
 82 |             content: "{nt}",
 83 |           },
 84 |           text: "代表团未提交数",
 85 |         },
 86 |         {
 87 |           number: {
 88 |             number: [361],
 89 |             toFixed: 0,
 90 |             content: "{nt}",
 91 |           },
 92 |           text: "参与主提代表数",
 93 |         },
 94 |         {
 95 |           number: {
 96 |             number: [157],
 97 |             toFixed: 0,
 98 |             content: "{nt}",
 99 |           },
100 |           text: "建议未确认数",
101 |         },
102 |       ],
103 |     };
104 |   },
105 |   components: {
106 |     // centreLeft1Chart,
107 |   },
108 |   mounted() {
109 |     this.changeTiming();
110 |   },
111 |   methods: {
112 |     changeTiming() {
113 |       setInterval(() => {
114 |         // this.fetchSystemSum(); //获取-系统
115 |         this.fetchProposalSubmit(); //获取-建议情况
116 |         this.fetchSubjectSum(); //获取-主题词
117 |         // this.changeNumber();
118 |       }, 3000);
119 |     },
120 |     async fetchProposalSubmit() {
121 |       const { data } = await this.$http.get(
122 |         "getDataByName?name=PROPOSAL_LEFT_SUM"
123 |       );
124 | 
125 |       let status = data.status;
126 |       let titleData = JSON.parse(data.data);
127 | 
128 |       var titleRes = new Array();
129 |       if (status === 200) {
130 |         for (var i = titleData.length - 1; i >= 0; i--) {
131 |           var item = {
132 |             number: {
133 |               number: [157],
134 |               toFixed: 0,
135 |               content: "{nt}",
136 |             },
137 |             text: "建议未确认数",
138 |           };
139 |           item.text = titleData[i].X0;
140 |           item.number.number=new Array();
141 |           item.number.number.push(titleData[i].COUNT);
142 |           titleRes.push(item);
143 |         }
144 |         this.numberData = titleRes;
145 |       }
146 |     },
147 |     async fetchSystemSum() {
148 |       const { data } = await this.$http.get("getDataByName?name=SYSTEM_SUM");
149 | 
150 |       let status = data.status;
151 |       let dataList = JSON.parse(data.data);
152 | 
153 |       if (status === 200) {
154 |         this.$refs.centreLeft1Chart.refresh(dataList);
155 |       }
156 |     },
157 |     async fetchSubjectSum() {
158 |       const { data } = await this.$http.get("getDataByName?name=SUBJECT_SUM");
159 | 
160 |       let status = data.status;
161 |       let dataList = JSON.parse(data.data);
162 | 
163 |       if (status === 200) {
164 |         let resultList = new Array();
165 |         for (let index = 0; index < dataList.length; index++) {
166 |           const element = dataList[index];
167 |           let item = {
168 |             name: "收费站",
169 |             value: 1315,
170 |           };
171 |           item.name = element.X0;
172 |           item.value = element.COUNT;
173 |           resultList.push(item);
174 |         }
175 |         this.config.data = resultList;
176 |         this.$refs.ring.mergeConfig();
177 |       }
178 |     },
179 |     changeNumber() {
180 |       this.numberData.forEach((item, index) => {
181 |         item.number.number[0] += ++index;
182 |         item.number = { ...item.number };
183 |       });
184 |     },
185 |   },
186 | };
187 | </script>
188 | 
189 | <style lang="scss">
190 | #centreLeft1 {
191 |   padding: 0.2rem;
192 |   height: 5.125rem;
193 |   min-width: 3.75rem;
194 |   border-radius: 0.0625rem;
195 |   .bg-color-black {
196 |     height: 4.8125rem;
197 |     border-radius: 0.125rem;
198 |   }
199 |   .text {
200 |     color: #c3cbde;
201 |   }
202 |   .chart-box {
203 |     margin-top: 0.2rem;
204 |     width: 2.125rem;
205 |     height: 2.125rem;
206 |     .active-ring-name {
207 |       padding-top: 0.125rem;
208 |     }
209 |   }
210 | 
211 |   .bottom-data {
212 |     .item-box {
213 |       float: right;
214 |       position: relative;
215 |       width: 50%;
216 |       color: #d3d6dd;
217 |       // 金币
218 |       .coin {
219 |         position: absolute;
220 |         left: 0.1rem;
221 |         top: 0.2125rem;
222 |         font-size: 0.25rem;
223 |         color: #ffc107;
224 |       }
225 |       .colorYellow {
226 |         color: yellowgreen;
227 |       }
228 |     }
229 |   }
230 | }
231 | </style>


--------------------------------------------------------------------------------
/src/components/echart/bottom/bottomRightChartMap.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div id="bottomRightChart" style="width: 11.25rem; height: 6rem"></div>
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script>
  8 | import echartMixins from "@/utils/resizeMixins";
  9 | import "../../../../node_modules/echarts/map/js/province/beijing.js";
 10 | export default {
 11 |   data() {
 12 |     return {
 13 |       chart: null,
 14 |       index: -1,
 15 |     };
 16 |   },
 17 |   mounted() {
 18 |     this.draw();
 19 |     this.charTimg();
 20 |   },
 21 |   mixins: [echartMixins],
 22 |   methods: {
 23 |     charTimg() {
 24 |       setInterval(() => {
 25 |         // 定时显示提示框和高亮效果
 26 |         // 隐藏提示框
 27 |         this.chart.dispatchAction({
 28 |           type: "hideTip",
 29 |           seriesIndex: 0,
 30 |           dataIndex: this.index,
 31 |         });
 32 |         // 显示提示框
 33 |         this.chart.dispatchAction({
 34 |           type: "showTip",
 35 |           seriesIndex: 0,
 36 |           dataIndex: this.index + 1,
 37 |         });
 38 |         // 取消高亮指定的数据图形
 39 |         this.chart.dispatchAction({
 40 |           type: "downplay",
 41 |           seriesIndex: 0,
 42 |           dataIndex: this.index,
 43 |         });
 44 |         // 高亮指定的数据图形
 45 |         this.chart.dispatchAction({
 46 |           type: "highlight",
 47 |           seriesIndex: 0,
 48 |           dataIndex: this.index + 1,
 49 |         });
 50 |         this.index++;
 51 |         if (this.index > 17 - 1) {
 52 |           this.index = -1;
 53 |         }
 54 |       }, 1000);
 55 |     },
 56 |     draw() {
 57 |       // 基于准备好的dom，初始化echarts实例
 58 |       this.chart = this.$echarts.init(
 59 |         document.getElementById("bottomRightChart")
 60 |       );
 61 |       //  ----------------------------------------------------------------
 62 |       // 数据
 63 |       let option = {
 64 |         title: {
 65 |           // text: "北京",
 66 |           subtext: "",
 67 |           sublink: "",
 68 |           // 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
 69 |           top: 25,
 70 |           // 值: 'left', 'center', 'right' 同上
 71 |           left: "center",
 72 |           // 文本样式
 73 |           textStyle: {
 74 |             // 字体大小
 75 |             fontSize: 25,
 76 |             // 字体粗细
 77 |             fontWeight: 650,
 78 |             // 字体颜色
 79 |             color: "#fff",
 80 |           },
 81 |         },
 82 |         tooltip: {
 83 |           trigger: "item",
 84 |           // 使用函数模板，传入的数据值 ——> value: number | Array
 85 |           formatter: "{b}<br/>建议数量:{c} (件)",
 86 |         },
 87 |         toolbox: {
 88 |           show: true,
 89 |           orient: "vertical",
 90 |           left: "right",
 91 |           top: "center",
 92 |           feature: {
 93 |             dataView: { readOnly: false },
 94 |             restore: {},
 95 |             saveAsImage: {},
 96 |           },
 97 |         },
 98 |         visualMap: {
 99 |           // continuous 类型为连续型
100 |           type: "continuous",
101 |           // 是否显示 visualMap-continuous 组件 如果设置为 false，不会显示，但是数据映射的功能还存在
102 |           show: true,
103 |           // 指定 visualMapContinuous 组件的允许的最小/大值 min/max 必须用户指定
104 |           min: 0,
105 |           // min,max 形成了视觉映射的定义域
106 |           max: 75 ,
107 |           // 文本样式
108 |           textStyle: {
109 |             // 字体大小
110 |             fontSize: 15,
111 |             // 字体颜色
112 |             color: "#fff",
113 |           },
114 |           // 拖拽时，是否实时更新
115 |           realtime: true,
116 |           // 是否显示拖拽用的手柄
117 |           calculable: true,
118 |           // 定义在选中范围中的视觉元素
119 |           inRange: {
120 |             // 图元的颜色
121 |             color: [
122 |               "#e0f3f8",
123 |               "#abd9e9",
124 |               "#74e2ca",
125 |               "#85daef",
126 |               "#9feaa5",
127 |               "#5475f5",
128 | 
129 |               // '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026',
130 | 
131 |               // "#e0f3f8",
132 |               // "#abd9e9",
133 |               // "#74add1",
134 |               // "#4575b4",
135 |               // "#313695",
136 |             ],
137 |           },
138 |         },
139 |         series: [
140 |           {
141 |             // 类型
142 |             type: "map",
143 |             // 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
144 |             map: "北京",
145 |             // 地图类型
146 |             mapType: "province",
147 |             // 是否开启鼠标缩放和平移漫游 默认不开启
148 |             // 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
149 |             roam: false,
150 |             // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
151 |             top: 70,
152 |             // 图形上的文本标签
153 |             label: {
154 |               show: false, // 是否显示对应地名
155 |             },
156 |             // 地图区域的多边形 图形样式
157 |             itemStyle: {
158 |               // 地图区域的颜色 如果设置了visualMap, 这个属性将不起作用
159 |               areaColor: "#7B68EE",
160 |               // 描边线宽 为 0 时无描边
161 |               borderWidth: 0.5,
162 |               // 图形的描边颜色 支持的颜色格式同 color
163 |               borderColor: "#000",
164 |               // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
165 |               borderType: "solid",
166 |             },
167 |             // 高亮状态
168 |             emphasis: {
169 |               // 文本标签
170 |               label: {
171 |                 // 是否显示标签
172 |                 show: true,
173 |                 // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
174 |                 color: "auto",
175 |               },
176 |               // 图形样式
177 |               itemStyle: {
178 |                 // 地图区域的颜色
179 |                 areaColor: "#FF6347",
180 |               },
181 |             },
182 |             nameProperty:'name',
183 |             // 地图系列中的数据内容数组，数组项可以为单个数值
184 |             data: [
185 |               { name: "怀柔团", value: 38 },
186 |               { name: "密云团", value: 47 },
187 |               { name: "昌平团", value: 196 },
188 |               { name: "顺义团", value: 102 },
189 |               { name: "平谷团", value: 42 },
190 |               { name: "门头沟团", value: 30 },
191 |               { name: "海淀团", value: 369 },
192 |               { name: "石景山团", value: 65 },
193 |               { name: "西城团", value: 129 },
194 |               { name: "东城团", value: 90 },
195 |               { name: "朝阳团", value: 395 },
196 |               { name: "大兴团", value: 156 },
197 |               { name: "房山团", value: 104 },
198 |               { name: "丰台团", value: 232 },
199 |             ],
200 |             // 自定义名称映射
201 |             nameMap: {
202 |               "怀柔区": "怀柔团",
203 |               "密云区": "密云团",
204 |               "昌平区": "昌平团",
205 |               "顺义区": "顺义团",
206 |               "平谷区": "平谷团",
207 |               "门头沟区": "门头沟团",
208 |               "海淀区": "海淀团",
209 |               "石景山区": "石景山团",
210 |               "西城区": "西城团",
211 |               "东城区": "东城团",
212 |               "朝阳区": "朝阳团",
213 |               "大兴区": "大兴团",
214 |               "房山区": "房山团",
215 |               "丰台区": "丰台团",
216 |               "延庆区": "延庆团",
217 |               "通州区": "通州团",
218 |               "驻京部队代表团": "通州团",
219 |             },
220 |           },
221 |         ],
222 |       };
223 |       this.chart.setOption(option);
224 |     },
225 |     refresh(data) {
226 |       let option = this.chart.getOption();
227 |       option.series[0].data = data;
228 |       this.chart.setOption(option);
229 |     },
230 |   },
231 |   destroyed() {
232 |     window.onresize = null;
233 |   },
234 | };
235 | </script>
236 | 
237 | <style lang="scss" scoped>
238 | </style>


--------------------------------------------------------------------------------
/src/components/echart/bottom/bottomLeftChart.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div id="bottomLeftChart" style="width: 11.25rem; height: 6.25rem"></div>
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script>
  8 | import echartMixins from "@/utils/resizeMixins";
  9 | export default {
 10 |   data() {
 11 |     return {
 12 |       chart: null,
 13 |     };
 14 |   },
 15 |   mixins: [echartMixins],
 16 |   mounted() {
 17 |     this.draw();
 18 |   },
 19 |   methods: {
 20 |     refresh(data) {
 21 |       let option = this.chart.getOption();
 22 |       let allList = new Array();
 23 |       let hanList = new Array();
 24 |       let groupList = new Array();
 25 |       let rateList = new Array();
 26 |       for (let index = 0; index < data.length; index++) {
 27 |         const element = data[index];
 28 |         groupList.push(element.X0);
 29 |         allList.push(element.ALL_COUNT);
 30 |         hanList.push(element.HAN_COUNT);
 31 |         let temp = element.HAN_COUNT / element.ALL_COUNT;
 32 |         rateList.push(temp.toFixed(2));
 33 |       }
 34 |       option.xAxis.data = groupList;
 35 |       option.series[0].data = rateList;
 36 |       option.series[1].data = hanList;
 37 |       option.series[2].data = allList;
 38 |       this.chart.setOption(option);
 39 |     },
 40 |     draw() {
 41 |       // 基于准备好的dom，初始化echarts实例
 42 |       this.chart = this.$echarts.init(
 43 |         document.getElementById("bottomLeftChart")
 44 |       );
 45 |       //  ----------------------------------------------------------------
 46 |       let category = [
 47 |         // "市区",
 48 |         // "万州",
 49 |         // "江北",
 50 |         // "南岸",
 51 |         // "北碚",
 52 |         // "綦南",
 53 |         // "长寿",
 54 |         // "永川",
 55 |         // "璧山",
 56 |         // "江津",
 57 |         // "城口",
 58 |         // "大足",
 59 |         // "垫江",
 60 |         // "丰都",
 61 |         // "奉节",
 62 |         // "合川",
 63 |         // "江津区",
 64 |         // "开州",
 65 |         // "南川",
 66 |         // "彭水",
 67 |         // "黔江",
 68 |         // "石柱",
 69 |         // "铜梁",
 70 |         // "潼南",
 71 |         // "巫山",
 72 |         // "巫溪",
 73 |         // "武隆",
 74 |         // "秀山",
 75 |         // "酉阳",
 76 |         // "云阳",
 77 |         // "忠县",
 78 |         // "川东",
 79 |         // "检修",
 80 |       ];
 81 |       let allData = [
 82 |         // 18092,
 83 |         // 20728,
 84 |         // 24045,
 85 |         // 28348,
 86 |         // 32808,
 87 |         // 36097,
 88 |         // 39867,
 89 |         // 44715,
 90 |         // 48444,
 91 |         // 50415,
 92 |         // 56061,
 93 |         // 62677,
 94 |         // 59521,
 95 |         // 67560,
 96 |         // 18092,
 97 |         // 20728,
 98 |         // 24045,
 99 |         // 28348,
100 |         // 32808,
101 |         // 36097,
102 |         // 39867,
103 |         // 44715,
104 |         // 48444,
105 |         // 50415,
106 |         // 36097,
107 |         // 39867,
108 |         // 44715,
109 |         // 48444,
110 |         // 50415,
111 |         // 50061,
112 |         // 32677,
113 |         // 49521,
114 |         // 32808,
115 |       ];
116 |       let hanData = [
117 |         // 4600,
118 |         // 5000,
119 |         // 5500,
120 |         // 6500,
121 |         // 7500,
122 |         // 8500,
123 |         // 9900,
124 |         // 12500,
125 |         // 14000,
126 |         // 21500,
127 |         // 23200,
128 |         // 24450,
129 |         // 25250,
130 |         // 33300,
131 |         // 4600,
132 |         // 5000,
133 |         // 5500,
134 |         // 6500,
135 |         // 7500,
136 |         // 8500,
137 |         // 9900,
138 |         // 22500,
139 |         // 14000,
140 |         // 21500,
141 |         // 8500,
142 |         // 9900,
143 |         // 12500,
144 |         // 14000,
145 |         // 21500,
146 |         // 23200,
147 |         // 24450,
148 |         // 25250,
149 |         // 7500,
150 |       ];
151 |       let rateData = [];
152 |       for (let i = 0; i < 33; i++) {
153 |         let rate = hanData[i] / allData[i];
154 |         rateData[i] = rate.toFixed(2);
155 |       }
156 | 
157 |       let option = {
158 |         title: {
159 |           text: "",
160 |           x: "center",
161 |           y: 0,
162 |           textStyle: {
163 |             color: "#B4B4B4",
164 |             fontSize: 16,
165 |             fontWeight: "normal",
166 |           },
167 |         },
168 |         tooltip: {
169 |           trigger: "axis",
170 |           backgroundColor: "rgba(255,255,255,0.1)",
171 |           axisPointer: {
172 |             type: "shadow",
173 |             label: {
174 |               show: true,
175 |               backgroundColor: "#7B7DDC",
176 |             },
177 |           },
178 |         },
179 |         legend: {
180 |           data: ["已分配", "代表提出", "完成率"],
181 |           textStyle: {
182 |             color: "#B4B4B4",
183 |           },
184 |           top: "0%",
185 |         },
186 |         grid: {
187 |           x: "8%",
188 |           width: "88%",
189 |           y: "4%",
190 |         },
191 |         xAxis: {
192 |           data: category,
193 |           axisLine: {
194 |             lineStyle: {
195 |               color: "#B4B4B4",
196 |             },
197 |           },
198 |           axisTick: {
199 |             show: true,
200 |           },
201 |         },
202 |         yAxis: [
203 |           {
204 |             splitLine: { show: false },
205 |             axisLine: {
206 |               lineStyle: {
207 |                 color: "#B4B4B4",
208 |               },
209 |             },
210 | 
211 |             axisLabel: {
212 |               formatter: "{value} ",
213 |             },
214 |           },
215 |           {
216 |             splitLine: { show: false },
217 |             axisLine: {
218 |               lineStyle: {
219 |                 color: "#B4B4B4",
220 |               },
221 |             },
222 |             axisLabel: {
223 |               formatter: "{value} ",
224 |             },
225 |           },
226 |         ],
227 |         series: [
228 |           {
229 |             name: "办理率",
230 |             type: "line",
231 |             smooth: true,
232 |             showAllSymbol: true,
233 |             symbol: "emptyCircle",
234 |             symbolSize: 8,
235 |             yAxisIndex: 1,
236 |             itemStyle: {
237 |               normal: {
238 |                 color: "#F02FC2",
239 |               },
240 |             },
241 |             data: rateData,
242 |           },
243 | 
244 |           {
245 |             name: "已分配",
246 |             type: "bar",
247 |             barWidth: 10,
248 |             itemStyle: {
249 |               normal: {
250 |                 barBorderRadius: 5,
251 |                 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
252 |                   { offset: 0, color: "#956FD4" },
253 |                   { offset: 1, color: "#3EACE5" },
254 |                 ]),
255 |               },
256 |             },
257 |             data: hanData,
258 |           },
259 | 
260 |           {
261 |             name: "代表提出",
262 |             type: "bar",
263 |             barGap: "-100%",
264 |             barWidth: 10,
265 |             itemStyle: {
266 |               normal: {
267 |                 barBorderRadius: 5,
268 |                 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
269 |                   { offset: 0, color: "rgba(156,107,211,0.8)" },
270 |                   { offset: 0.2, color: "rgba(156,107,211,0.5)" },
271 |                   { offset: 1, color: "rgba(156,107,211,0.2)" },
272 |                 ]),
273 |               },
274 |             },
275 |             z: -12,
276 | 
277 |             data: allData,
278 |           },
279 |         ],
280 |       };
281 |       this.chart.setOption(option);
282 |     },
283 |   },
284 |   destroyed() {
285 |     window.onresize = null;
286 |   },
287 | };
288 | </script>
289 | 
290 | <style lang="scss" scoped>
291 | </style>


--------------------------------------------------------------------------------
/src/views/center.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="center">
  3 |     <div class="up">
  4 |       <div
  5 |         class="bg-color-black item"
  6 |         v-for="item in titleItem"
  7 |         :key="item.title"
  8 |       >
  9 |         <p class="colorBlue fw-b" style="text-align: center">
 10 |           {{ item.title }}
 11 |         </p>
 12 |         <div>
 13 |           <dv-digital-flop
 14 |             :config="item.number"
 15 |             style="width: 2.5rem; height: 0.375rem; text-align: center"
 16 |           />
 17 |           <!-- padding:0rem 0.9rem 0rem 0.9rem; -->
 18 |         </div>
 19 |       </div>
 20 |     </div>
 21 |     <div class="down">
 22 |       <div class="ranking bg-color-black">
 23 |         <span style="color: #5cd9e8">
 24 |           <icon name="align-left"></icon>
 25 |         </span>
 26 |         <span class="fs-xl text mx-2 mb-1">主办单位确认件数</span>
 27 |         <!-- <dv-scroll-ranking-board :config="ranking" ref="unit"  style="height:2.75rem" /> -->
 28 |         <dv-scroll-board :config="config" ref="unit" style="height: 3.05rem" />
 29 |       </div>
 30 |       <div class="percent">
 31 |         <div class="item bg-color-black">
 32 |           <span>{{ rate[0].id }}</span>
 33 |           <centerChart
 34 |             :id="rate[0].id"
 35 |             :tips="rate[0].tips"
 36 |             :colorObj="rate[0].colorData"
 37 |             ref="centerChart1"
 38 |           />
 39 |         </div>
 40 |         <div class="item bg-color-black">
 41 |           <span>{{ rate[1].id }}</span>
 42 |           <centerChart
 43 |             :id="rate[1].id"
 44 |             :tips="rate[1].tips"
 45 |             :colorObj="rate[1].colorData"
 46 |             ref="centerChart2"
 47 |           />
 48 |         </div>
 49 |         <!-- <div class="water">
 50 |           <dv-water-level-pond :config="water" style="height: 1.5rem" />
 51 |         </div> -->
 52 | 
 53 |         <bottomLeftChartState
 54 |           style=""
 55 |           ref="bottomLeftChartState"
 56 |         />
 57 |       </div>
 58 |     </div>
 59 |   </div>
 60 | </template>
 61 |  
 62 | <script>
 63 | import centerChart from "@/components/echart/center/centerChartRate";
 64 | import bottomLeftChartState from "@/components/echart/bottom/bottomLeftChartState";
 65 | 
 66 | export default {
 67 |   data() {
 68 |     return {
 69 |       titleItem: [
 70 |         {
 71 |           title: "今年累计任务建次数",
 72 |           number: {
 73 |             number: [120],
 74 |             toFixed: 1,
 75 |             content: "{nt}",
 76 |             style: {
 77 |               fontSize: 15,
 78 |               fill: "#3de7c9",
 79 |             },
 80 |           },
 81 |         },
 82 |         {
 83 |           title: "本月累计任务次数",
 84 |           number: {
 85 |             number: [18],
 86 |             toFixed: 1,
 87 |             content: "{nt}",
 88 |             style: {
 89 |               fontSize: 15,
 90 |               fill: "#3de7c9",
 91 |             },
 92 |           },
 93 |         },
 94 |         {
 95 |           title: "今日累计任务次数",
 96 |           number: {
 97 |             number: [2],
 98 |             toFixed: 1,
 99 |             content: "{nt}",
100 |             style: {
101 |               fontSize: 15,
102 |               fill: "#3de7c9",
103 |             },
104 |           },
105 |         },
106 |         {
107 |           title: "今年失败任务次数",
108 |           number: {
109 |             number: [14],
110 |             toFixed: 1,
111 |             content: "{nt}",
112 |             style: {
113 |               fontSize: 15,
114 |               fill: "#3de7c9",
115 |             },
116 |           },
117 |         },
118 |         {
119 |           title: "今年成功任务次数",
120 |           number: {
121 |             number: [106],
122 |             toFixed: 1,
123 |             content: "{nt}",
124 |             style: {
125 |               fontSize: 15,
126 |               fill: "#3de7c9",
127 |             },
128 |           },
129 |         },
130 |         {
131 |           title: "今年达标任务个数",
132 |           number: {
133 |             number: [100],
134 |             toFixed: 1,
135 |             content: "{nt}",
136 | 
137 |             style: {
138 |               fontSize: 15,
139 |               fill: "#3de7c9",
140 |             },
141 |           },
142 |         },
143 |       ],
144 |       ranking: {
145 |         data: [
146 |           {
147 |             name: "新乡",
148 |             value: 80,
149 |           },
150 |         ],
151 |         waitTime: 4000,
152 |         carousel: "single",
153 |         unit: "件",
154 |       },
155 |       config: {
156 |         header: ["主办单位", "数量"],
157 |         data: [
158 |           ['<span style="color:#9fe6b8;">海淀区政府</span>', "23"],
159 |           ['<span style="color:#9fe6b8;">市发展改革委</span>', "26"],
160 |           ['<span style="color:#9fe6b8;">市民政局</span>', "35"],
161 |           ['<span style="color:#9fe6b8;">市城市管理委</span>', "39"],
162 |           ['<span style="color:#9fe6b8;">市规划自然资源委</span>', "39"],
163 |           ['<span style="color:#9fe6b8;">市住房城乡建设委</span>', "45"],
164 |           ['<span style="color:#9fe6b8;">市公安局</span>', "53"],
165 |           ['<span style="color:#9fe6b8;">市教委</span>', "55"],
166 |           ['<span style="color:#9fe6b8;">市卫生健康委</span>', "60"],
167 |           ['<span style="color:#9fe6b8;">市交通委</span>', "153"],
168 |         ],
169 |         rowNum: 5, //表格行数
170 |         headerHeight: 35,
171 |         headerBGC: "#0f1325", //表头
172 |         oddRowBGC: "#0f1325", //奇数行
173 |         evenRowBGC: "#171c33", //偶数行
174 |         index: true,
175 |         columnWidth: [30,150,50],
176 |         align: ["center"],
177 |         waitTime: 3000,
178 |         carousel: "page",
179 |       },
180 |       water: {
181 |         data: [5, 45],
182 |         shape: "roundRect",
183 |         formatter: "{value}%",
184 |         waveNum: 3,
185 |       },
186 |       // 通过率和达标率的组件复用数据
187 |       rate: [
188 |         {
189 |           id: "代表自提",
190 |           tips: 22,
191 |           colorData: {
192 |             textStyle: "#3fc0fb",
193 |             series: {
194 |               color: ["#00bcd44a", "transparent"],
195 |               dataColor: {
196 |                 normal: "#03a9f4",
197 |                 shadowColor: "#97e2f5",
198 |               },
199 |             },
200 |           },
201 |         },
202 |         {
203 |           id: "代表团代提",
204 |           tips: 78,
205 |           colorData: {
206 |             textStyle: "#67e0e3",
207 |             series: {
208 |               color: ["#faf3a378", "transparent"],
209 |               dataColor: {
210 |                 normal: "#ff9800",
211 |                 shadowColor: "#fcebad",
212 |               },
213 |             },
214 |           },
215 |         },
216 |       ],
217 |     };
218 |   },
219 | 
220 |   mounted() {
221 |     this.fetchProposalSubmit(); //获取-数字板数据
222 |     this.fetchProposalReplace(); //获取-代提百分比
223 |     this.fetchUnitSum(); //获取-承办单位-排行榜
224 |     this.setTimer();
225 |   },
226 |   methods: {
227 |     setTimer() {
228 |       this.timer = setInterval(() => {
229 |         this.fetchProposalSubmit(); //获取-数字板数据
230 |         this.fetchProposalReplace(); //获取-代提百分比
231 |         this.fetchUnitSum(); //获取-承办单位-排行榜
232 |         this.fetchState(); //获取-状态
233 |       }, 3000);
234 |     },
235 |     async fetchState() {
236 |       const { data } = await this.$http.get("getDataByName?name=STATE_SUM");
237 | 
238 |       let status = data.status;
239 |       let dataList = JSON.parse(data.data);
240 | 
241 |       if (status === 200) {
242 |         this.$refs.bottomLeftChartState.refresh(dataList);
243 |       }
244 |     },
245 |     async fetchProposalSubmit() {
246 |       const { data } = await this.$http.get("getDataByName?name=PROPOSAL_SUM");
247 | 
248 |       let status = data.status;
249 |       let titleData = JSON.parse(data.data);
250 | 
251 |       var titleRes = new Array();
252 |       if (status === 200) {
253 |         for (var i = titleData.length - 1; i >= 0; i--) {
254 |           var item = {
255 |             title: "",
256 |             number: {
257 |               number: [],
258 |               toFixed: 0,
259 |               content: "{nt}",
260 |               style: {
261 |                 fontSize: 15,
262 |                 fill: "#3de7c9",
263 |               },
264 |             },
265 |           };
266 |           item.title = titleData[i].X0;
267 | 
268 |           item.number.number.push(titleData[i].COUNT);
269 |           titleRes.push(item);
270 |         }
271 |         this.titleItem = titleRes;
272 |       }
273 |     },
274 |     async fetchProposalReplace() {
275 |       const { data } = await this.$http.get("getDataByName?name=SUBMIT_SUM");
276 | 
277 |       let status = data.status;
278 |       let dataList = JSON.parse(data.data);
279 |       if (status === 200) {
280 |         this.rate[0].id = dataList[0].X0;
281 |         this.rate[1].id = dataList[1].X0;
282 |         let submitSumMe = dataList[0].COUNT + 0;
283 |         let submitSumNotMe = dataList[1].COUNT + 0;
284 |         let count = submitSumMe + submitSumNotMe;
285 |         submitSumMe = parseFloat((submitSumMe / count) * 100).toFixed(2);
286 |         submitSumNotMe = parseFloat((submitSumNotMe / count) * 100).toFixed(2);
287 | 
288 |         this.$refs.centerChart1.refresh(submitSumMe);
289 |         this.$refs.centerChart2.refresh(submitSumNotMe);
290 |       }
291 |     },
292 |     async fetchUnitSum() {
293 |       const { data } = await this.$http.get(
294 |         "getDataByName?name=UNIT_HANDLE_SUM"
295 |       );
296 | 
297 |       let status = data.status;
298 |       let dataList = JSON.parse(data.data);
299 | 
300 |       let resultList = new Array();
301 | 
302 |       if (status === 200) {
303 |         for (var i = dataList.length - 1; i >= 0; i--) {
304 |           var item = ["组件1", "dev-1"];
305 |           let colorCode = "";
306 |           if (i % 2 == 0) {
307 |             colorCode = '<span style="color:#9fe6b8;">';
308 |           } else {
309 |             colorCode = '<span style="color:#67e0e3;">';
310 |           }
311 |           item[0] = colorCode + dataList[i].X0 + "</span>";
312 |           item[1] = colorCode + dataList[i].COUNT + "</span>";
313 |           resultList.push(item);
314 |         }
315 |         this.config.data = resultList;
316 |         this.$refs["unit"].updateRows(resultList);
317 |       }
318 |     },
319 |   },
320 |   components: {
321 |     centerChart,
322 |     // centerChart1,
323 |     // centerChart2
324 |     bottomLeftChartState,
325 |   },
326 | };
327 | </script>
328 | 
329 | <style lang="scss" scoped>
330 | #center {
331 |   display: flex;
332 |   flex-direction: column;
333 |   .up {
334 |     width: 100%;
335 |     display: flex;
336 |     flex-wrap: wrap;
337 |     justify-content: space-around;
338 |     .item {
339 |       border-radius: 0.0625rem;
340 |       padding-top: 0.13rem;
341 |       margin-top: 0.1rem;
342 |       width: 32%;
343 |       height: 0.675rem;
344 |       font-size: 0.01rem;
345 |     }
346 |   }
347 |   .down {
348 |     padding: 0.07rem 0.05rem;
349 |     padding-bottom: 0;
350 |     width: 100%;
351 |     display: flex;
352 |     height: 3.5875rem;
353 |     justify-content: space-between;
354 |     .bg-color-black {
355 |       border-radius: 0.0625rem;
356 |     }
357 |     .ranking {
358 |       padding: 0.125rem;
359 |       width: 46%;
360 |     }
361 |     .percent {
362 |       width: 54%;
363 |       display: flex;
364 |       flex-wrap: wrap;
365 |       .item {
366 |         width: 50%;
367 |         height: 1.5rem;
368 |         span {
369 |           margin-top: 0.0875rem;
370 |           display: flex;
371 |           justify-content: center;
372 |         }
373 |       }
374 |       .water {
375 |         width: 100%;
376 |       }
377 |     }
378 |   }
379 | }
380 | </style>


--------------------------------------------------------------------------------
/src/components/echart/bottom/bottomRightChart.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div id="bottomRightChart" style="width:11.25rem;height:6rem;"></div>
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script>
  8 | import echartMixins from "@/utils/resizeMixins";
  9 | 
 10 | export default {
 11 |   data() {
 12 |     return {
 13 |       chart: null
 14 |     };
 15 |   },
 16 |   mounted() {
 17 |     this.draw();
 18 |     this.charTimg();
 19 |   },
 20 |   mixins: [echartMixins],
 21 |   methods: {
 22 |     charTimg() {
 23 |       setInterval(() => {
 24 |         this.draw();
 25 |       }, 6000);
 26 |     },
 27 |     draw() {
 28 |       // 基于准备好的dom，初始化echarts实例
 29 |       this.chart = this.$echarts.init(document.getElementById("bottomRightChart"));
 30 |       //  ----------------------------------------------------------------
 31 |       // 数据
 32 |       let dateBase = new Date();
 33 |       let year = dateBase.getFullYear();
 34 |       let dottedBase = +dateBase + 1000 * 3600 * 24;
 35 |       let weekCategory = [];
 36 | 
 37 |       let radarData = [];
 38 |       let radarDataAvg = [];
 39 |       let maxData = 12000;
 40 |       let weekMaxData = [];
 41 |       let weekLineData = [];
 42 | 
 43 |       // 周数据
 44 |       for (let i = 0; i < 7; i++) {
 45 |         // 日期
 46 |         var date = new Date((dottedBase -= 1000 * 3600 * 24));
 47 |         weekCategory.unshift([date.getMonth() + 1, date.getDate()].join("/"));
 48 | 
 49 |         // 折线图数据
 50 |         weekMaxData.push(maxData);
 51 |         var distance = Math.round(Math.random() * 11000 + 500);
 52 |         weekLineData.push(distance);
 53 | 
 54 |         // 雷达图数据
 55 |         // 我的指标
 56 |         var averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
 57 |         var maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
 58 |         var hour = +(distance / 1000 / averageSpeed).toFixed(1);
 59 |         var radarDayData = [distance, averageSpeed, maxSpeed, hour];
 60 |         radarData.unshift(radarDayData);
 61 | 
 62 |         // 平均指标
 63 |         var distanceAvg = Math.round(Math.random() * 8000 + 4000);
 64 |         var averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
 65 |         var maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
 66 |         var hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
 67 |         var radarDayDataAvg = [
 68 |           distanceAvg,
 69 |           averageSpeedAvg,
 70 |           maxSpeedAvg,
 71 |           hourAvg
 72 |         ];
 73 |         radarDataAvg.unshift(radarDayDataAvg);
 74 |       }
 75 | 
 76 |       // 颜色设置
 77 |       let color = {
 78 |         linearYtoG: {
 79 |           type: "linear",
 80 |           x: 0,
 81 |           y: 0,
 82 |           x2: 1,
 83 |           y2: 1,
 84 |           colorStops: [
 85 |             {
 86 |               offset: 0,
 87 |               color: "#f5b44d"
 88 |             },
 89 |             {
 90 |               offset: 1,
 91 |               color: "#28f8de"
 92 |             }
 93 |           ]
 94 |         },
 95 |         linearGtoB: {
 96 |           type: "linear",
 97 |           x: 0,
 98 |           y: 0,
 99 |           x2: 1,
100 |           y2: 0,
101 |           colorStops: [
102 |             {
103 |               offset: 0,
104 |               color: "#43dfa2"
105 |             },
106 |             {
107 |               offset: 1,
108 |               color: "#28f8de"
109 |             }
110 |           ]
111 |         },
112 |         linearBtoG: {
113 |           type: "linear",
114 |           x: 0,
115 |           y: 0,
116 |           x2: 1,
117 |           y2: 0,
118 |           colorStops: [
119 |             {
120 |               offset: 0,
121 |               color: "#1c98e8"
122 |             },
123 |             {
124 |               offset: 1,
125 |               color: "#28f8de"
126 |             }
127 |           ]
128 |         },
129 |         areaBtoG: {
130 |           type: "linear",
131 |           x: 0,
132 |           y: 0,
133 |           x2: 0,
134 |           y2: 1,
135 |           colorStops: [
136 |             {
137 |               offset: 0,
138 |               color: "rgba(35,184,210,.2)"
139 |             },
140 |             {
141 |               offset: 1,
142 |               color: "rgba(35,184,210,0)"
143 |             }
144 |           ]
145 |         }
146 |       };
147 |       let option = {
148 |         title: {
149 |           text: "",
150 |           textStyle: {
151 |             color: "#D3D6DD",
152 |             fontSize: 24,
153 |             fontWeight: "normal"
154 |           },
155 |           subtext: year + "/" + weekCategory[6],
156 |           subtextStyle: {
157 |             color: "#fff",
158 |             fontSize: 16
159 |           },
160 |           top: 50,
161 |           left: 80
162 |         },
163 |         legend: {
164 |           top: 120,
165 |           left: 80,
166 |           orient: "vertical",
167 |           itemGap: 15,
168 |           itemWidth: 12,
169 |           itemHeight: 12,
170 |           data: ["平均指标", "我的指标"],
171 |           textStyle: {
172 |             color: "#fff",
173 |             fontSize: 14
174 |           }
175 |         },
176 |         tooltip: {
177 |           trigger: "item"
178 |         },
179 |         radar: {
180 |           center: ["68%", "27%"],
181 |           radius: "40%",
182 |           name: {
183 |             color: "#fff"
184 |           },
185 |           splitNumber: 8,
186 |           axisLine: {
187 |             lineStyle: {
188 |               color: color.linearYtoG,
189 |               opacity: 0.6
190 |             }
191 |           },
192 |           splitLine: {
193 |             lineStyle: {
194 |               color: color.linearYtoG,
195 |               opacity: 0.6
196 |             }
197 |           },
198 |           splitArea: {
199 |             areaStyle: {
200 |               color: "#fff",
201 |               opacity: 0.1,
202 |               shadowBlur: 25,
203 |               shadowColor: "#000",
204 |               shadowOffsetX: 0,
205 |               shadowOffsetY: 5
206 |             }
207 |           },
208 |           indicator: [
209 |             {
210 |               name: "服务态度",
211 |               max: maxData
212 |             },
213 |             {
214 |               name: "产品质量",
215 |               max: 10
216 |             },
217 |             {
218 |               name: "任务效率",
219 |               max: 12
220 |             },
221 |             {
222 |               name: "售后保障",
223 |               max: 3.5
224 |             }
225 |           ]
226 |         },
227 |         grid: {
228 |           left: 90,
229 |           right: 80,
230 |           bottom: 40,
231 |           top: "60%"
232 |         },
233 |         xAxis: {
234 |           type: "category",
235 |           position: "bottom",
236 |           axisLine: true,
237 |           axisLabel: {
238 |             color: "rgba(255,255,255,.8)",
239 |             fontSize: 12
240 |           },
241 |           data: weekCategory
242 |         },
243 |         // 下方Y轴
244 |         yAxis: {
245 |           name: "工单",
246 |           nameLocation: "end",
247 |           nameGap: 24,
248 |           nameTextStyle: {
249 |             color: "rgba(255,255,255,.5)",
250 |             fontSize: 14
251 |           },
252 |           max: maxData,
253 |           splitNumber: 4,
254 | 
255 |           axisLine: {
256 |             lineStyle: {
257 |               opacity: 0
258 |             }
259 |           },
260 |           splitLine: {
261 |             show: true,
262 |             lineStyle: {
263 |               color: "#fff",
264 |               opacity: 0.1
265 |             }
266 |           },
267 |           axisLabel: {
268 |             color: "rgba(255,255,255,.8)",
269 |             fontSize: 12
270 |           }
271 |         },
272 |         series: [
273 |           {
274 |             name: "",
275 |             type: "radar",
276 |             symbolSize: 0,
277 |             data: [
278 |               {
279 |                 value: radarDataAvg[6],
280 |                 name: "平均指标",
281 |                 itemStyle: {
282 |                   normal: {
283 |                     color: "#f8d351"
284 |                   }
285 |                 },
286 |                 lineStyle: {
287 |                   normal: {
288 |                     opacity: 0
289 |                   }
290 |                 },
291 |                 areaStyle: {
292 |                   normal: {
293 |                     color: "#f8d351",
294 |                     shadowBlur: 25,
295 |                     shadowColor: "rgba(248,211,81,.3)",
296 |                     shadowOffsetX: 0,
297 |                     shadowOffsetY: -10,
298 |                     opacity: 1
299 |                   }
300 |                 }
301 |               },
302 |               {
303 |                 value: radarData[6],
304 |                 name: "我的指标",
305 |                 itemStyle: {
306 |                   normal: {
307 |                     color: "#43dfa2"
308 |                   }
309 |                 },
310 |                 lineStyle: {
311 |                   normal: {
312 |                     opacity: 0
313 |                   }
314 |                 },
315 |                 areaStyle: {
316 |                   normal: {
317 |                     color: color.linearGtoB,
318 |                     shadowBlur: 15,
319 |                     shadowColor: "rgba(0,0,0,.2)",
320 |                     shadowOffsetX: 0,
321 |                     shadowOffsetY: 5,
322 |                     opacity: 0.8
323 |                   }
324 |                 }
325 |               }
326 |             ]
327 |           },
328 |           {
329 |             name: "",
330 |             type: "line",
331 |             smooth: true,
332 |             symbol: "emptyCircle",
333 |             symbolSize: 8,
334 |             itemStyle: {
335 |               normal: {
336 |                 color: "#fff"
337 |               }
338 |             },
339 |             lineStyle: {
340 |               normal: {
341 |                 color: color.linearBtoG,
342 |                 width: 3
343 |               }
344 |             },
345 |             areaStyle: {
346 |               normal: {
347 |                 color: color.areaBtoG
348 |               }
349 |             },
350 |             data: weekLineData,
351 |             lineSmooth: true,
352 |             markLine: {
353 |               silent: true,
354 |               data: [
355 |                 {
356 |                   type: "average",
357 |                   name: "平均值"
358 |                 }
359 |               ],
360 |               precision: 0,
361 |               label: {
362 |                 normal: {
363 |                   formatter: "平均值: \n {c}"
364 |                 }
365 |               },
366 |               lineStyle: {
367 |                 normal: {
368 |                   color: "rgba(248,211,81,.7)"
369 |                 }
370 |               }
371 |             },
372 |             tooltip: {
373 |               position: "top",
374 |               formatter: "{c} m",
375 |               backgroundColor: "rgba(28,152,232,.2)",
376 |               padding: 6
377 |             }
378 |           },
379 |           {
380 |             name: "占位背景",
381 |             type: "bar",
382 |             itemStyle: {
383 |               normal: {
384 |                 show: true,
385 |                 color: "#000",
386 |                 opacity: 0
387 |               }
388 |             },
389 |             silent: true,
390 |             barWidth: "50%",
391 |             data: weekMaxData,
392 |             animation: false
393 |           }
394 |         ]
395 |       };
396 | 
397 |       this.chart.setOption(option);
398 |     }
399 |   },
400 |   destroyed() {
401 |     window.onresize = null;
402 |   }
403 | };
404 | </script>
405 | 
406 | <style lang="scss" scoped>
407 | </style>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/src/插入代表届次信息样例-0508.sql:
--------------------------------------------------------------------------------
  1 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('832', '52020222', '5', '0508');
  2 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('833', '52020117', '5', '0508');
  3 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('834', '52020116', '5', '0508');
  4 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('835', '52020117', '5', '0508');
  5 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('836', '52020219', '5', '0508');
  6 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('837', '52016001', '5', '0508');
  7 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('838', '52016002', '5', '0508');
  8 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('839', '52016003', '5', '0508');
  9 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('840', '52016004', '5', '0508');
 10 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('841', '52016005', '5', '0508');
 11 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('842', '52016006', '5', '0508');
 12 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('843', '52016007', '5', '0508');
 13 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('844', '52016009', '5', '0508');
 14 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('845', '52019010', '5', '0508');
 15 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('846', '52016011', '5', '0508');
 16 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('847', '52016013', '5', '0508');
 17 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('848', '52016014', '5', '0508');
 18 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('849', '52019015', '5', '0508');
 19 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('850', '52016016', '5', '0508');
 20 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('851', '52016017', '5', '0508');
 21 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('852', '52016018', '5', '0508');
 22 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('853', '52016019', '5', '0508');
 23 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('854', '52016020', '5', '0508');
 24 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('855', '52016021', '5', '0508');
 25 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('856', '52016022', '5', '0508');
 26 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('857', '52016023', '5', '0508');
 27 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('858', '52016024', '5', '0508');
 28 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('859', '52016026', '5', '0508');
 29 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('860', '52016027', '5', '0508');
 30 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('861', '52016028', '5', '0508');
 31 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('862', '52016029', '5', '0508');
 32 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('863', '52016030', '5', '0508');
 33 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('864', '52016032', '5', '0508');
 34 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('865', '52016033', '5', '0508');
 35 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('866', '52016035', '5', '0508');
 36 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('867', '52016036', '5', '0508');
 37 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('868', '52016037', '5', '0508');
 38 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('869', '52016038', '5', '0508');
 39 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('870', '52016039', '5', '0508');
 40 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('871', '52016040', '5', '0508');
 41 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('872', '52016041', '5', '0508');
 42 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('873', '52016042', '5', '0508');
 43 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('874', '52016043', '5', '0508');
 44 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('875', '52016044', '5', '0508');
 45 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('876', '52016045', '5', '0508');
 46 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('877', '52016046', '5', '0508');
 47 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('878', '52016047', '5', '0508');
 48 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('879', '52016048', '5', '0508');
 49 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('880', '52016049', '5', '0508');
 50 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('881', '52016050', '5', '0508');
 51 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('882', '52016051', '5', '0508');
 52 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('883', '52016053', '5', '0508');
 53 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('884', '52016054', '5', '0508');
 54 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('885', '52019056', '5', '0508');
 55 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('886', '52016058', '5', '0508');
 56 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('887', '52016059', '5', '0508');
 57 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('888', '52016060', '5', '0508');
 58 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('889', '52016061', '5', '0508');
 59 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('890', '52016063', '5', '0508');
 60 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('891', '52016064', '5', '0508');
 61 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('892', '52016067', '5', '0508');
 62 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('893', '52016068', '5', '0508');
 63 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('894', '52016069', '5', '0508');
 64 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('895', '52016070', '5', '0508');
 65 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('896', '52016071', '5', '0508');
 66 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('897', '52016072', '5', '0508');
 67 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('898', '52016073', '5', '0508');
 68 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('899', '52016074', '5', '0508');
 69 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('900', '52016075', '5', '0508');
 70 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('901', '52016076', '5', '0508');
 71 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('902', '52016077', '5', '0508');
 72 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('903', '52016078', '5', '0508');
 73 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('904', '52016079', '5', '0508');
 74 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('905', '52016080', '5', '0508');
 75 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('906', '52016081', '5', '0508');
 76 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('907', '52016082', '5', '0508');
 77 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('908', '52016083', '5', '0508');
 78 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('909', '52016084', '5', '0508');
 79 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('910', '52016085', '5', '0508');
 80 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('911', '52016086', '5', '0508');
 81 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('912', '52016087', '5', '0508');
 82 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('913', '52016088', '5', '0508');
 83 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('914', '52016090', '5', '0508');
 84 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('915', '52016091', '5', '0508');
 85 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('916', '52016092', '5', '0508');
 86 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('917', '52016093', '5', '0508');
 87 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('918', '52016094', '5', '0508');
 88 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('919', '52019097', '5', '0508');
 89 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('920', '52016098', '5', '0508');
 90 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('921', '52016100', '5', '0508');
 91 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('922', '52016101', '5', '0508');
 92 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('923', '52016102', '5', '0508');
 93 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('924', '52016103', '5', '0508');
 94 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('925', '52016104', '5', '0508');
 95 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('926', '52016106', '5', '0508');
 96 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('927', '52016107', '5', '0508');
 97 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('928', '52016108', '5', '0508');
 98 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('929', '52016109', '5', '0508');
 99 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('930', '52019110', '5', '0508');
100 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('931', '52016112', '5', '0508');
101 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('932', '52016113', '5', '0508');
102 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('933', '52016114', '5', '0508');
103 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('934', '52016115', '5', '0508');
104 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('935', '52016118', '5', '0508');
105 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('936', '52016119', '5', '0508');
106 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('937', '52016120', '5', '0508');
107 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('938', '52016122', '5', '0508');
108 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('939', '52016123', '5', '0508');
109 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('940', '52016125', '5', '0508');
110 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('941', '52016126', '5', '0508');
111 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('942', '52016129', '5', '0508');
112 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('943', '52016130', '5', '0508');
113 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('944', '52016131', '5', '0508');
114 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('945', '52016132', '5', '0508');
115 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('946', '52016133', '5', '0508');
116 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('947', '52016134', '5', '0508');
117 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('948', '52016135', '5', '0508');
118 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('949', '52019136', '5', '0508');
119 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('950', '52016138', '5', '0508');
120 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('951', '52016139', '5', '0508');
121 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('952', '52016140', '5', '0508');
122 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('953', '52016141', '5', '0508');
123 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('954', '52016142', '5', '0508');
124 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('955', '52016143', '5', '0508');
125 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('956', '52016144', '5', '0508');
126 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('957', '52016145', '5', '0508');
127 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('958', '52016146', '5', '0508');
128 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('959', '52016147', '5', '0508');
129 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('960', '52016148', '5', '0508');
130 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('961', '52016149', '5', '0508');
131 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('962', '52016150', '5', '0508');
132 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('963', '52016151', '5', '0508');
133 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('964', '52016152', '5', '0508');
134 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('965', '52016154', '5', '0508');
135 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('966', '52016155', '5', '0508');
136 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('967', '52016156', '5', '0508');
137 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('968', '52016157', '5', '0508');
138 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('969', '52016158', '5', '0508');
139 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('970', '52016159', '5', '0508');
140 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('971', '52016160', '5', '0508');
141 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('972', '52016161', '5', '0508');
142 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('973', '52016162', '5', '0508');
143 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('974', '52016163', '5', '0508');
144 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('975', '52016164', '5', '0508');
145 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('976', '52016165', '5', '0508');
146 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('977', '52016166', '5', '0508');
147 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('978', '52016167', '5', '0508');
148 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('979', '52016170', '5', '0508');
149 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('980', '52016171', '5', '0508');
150 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('981', '52016172', '5', '0508');
151 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('982', '52016173', '5', '0508');
152 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('983', '52016174', '5', '0508');
153 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('984', '52016175', '5', '0508');
154 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('985', '52017176', '5', '0508');
155 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('986', '52016177', '5', '0508');
156 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('987', '52016178', '5', '0508');
157 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('988', '52016179', '5', '0508');
158 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('989', '52016180', '5', '0508');
159 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('990', '52016181', '5', '0508');
160 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('991', '52016182', '5', '0508');
161 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('992', '52016183', '5', '0508');
162 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('993', '52016184', '5', '0508');
163 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('994', '52016186', '5', '0508');
164 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('995', '52019187', '5', '0508');
165 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('996', '52016188', '5', '0508');
166 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('997', '52016189', '5', '0508');
167 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('998', '52016190', '5', '0508');
168 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('999', '52016191', '5', '0508');
169 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1000', '52016192', '5', '0508');
170 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1001', '52016193', '5', '0508');
171 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1002', '52016194', '5', '0508');
172 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1003', '52016195', '5', '0508');
173 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1004', '52016196', '5', '0508');
174 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1005', '52016197', '5', '0508');
175 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1006', '52016198', '5', '0508');
176 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1007', '52016199', '5', '0508');
177 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1008', '52016200', '5', '0508');
178 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1009', '52016201', '5', '0508');
179 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1010', '52016202', '5', '0508');
180 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1011', '52016204', '5', '0508');
181 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1012', '52016205', '5', '0508');
182 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1013', '52016206', '5', '0508');
183 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1014', '52016207', '5', '0508');
184 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1015', '52019208', '5', '0508');
185 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1016', '52016209', '5', '0508');
186 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1017', '52016210', '5', '0508');
187 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1018', '52016212', '5', '0508');
188 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1019', '52017213', '5', '0508');
189 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1020', '52016214', '5', '0508');
190 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1021', '52016215', '5', '0508');
191 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1022', '52017216', '5', '0508');
192 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1023', '52016217', '5', '0508');
193 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1024', '52016218', '5', '0508');
194 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1025', '52016220', '5', '0508');
195 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1026', '52016221', '5', '0508');
196 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1027', '52016223', '5', '0508');
197 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1028', '52016224', '5', '0508');
198 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1029', '52017226', '5', '0508');
199 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1030', '52016227', '5', '0508');
200 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1031', '52016229', '5', '0508');
201 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1032', '52016231', '5', '0508');
202 | INSERT INTO `npc_cp`.`npccp_deputy_status` ( `DEPUTY_ID`, `DEPUTY_CODE`, `SESSION`, `SESSIONS`) VALUES ('1033', '52019065', '5', '0508');


--------------------------------------------------------------------------------