Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
22344843 by xiaomiao
Options

合并

2 parents 9642781a 03dbaf2e
Inline Side-by-side
Showing 24 changed files with 961 additions and 935 deletions
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-03-27 13:25:25 4 * @LastEditTime: 2023-03-27 15:43:24
5 --> 5 -->
6 # 安装依赖 6 # 安装依赖
7 npm install 7 npm install
...@@ -21,4 +21,16 @@ npm install --registry=https://registry.npm.taobao.org ...@@ -21,4 +21,16 @@ npm install --registry=https://registry.npm.taobao.org
21 - `wip` 开发中 21 - `wip` 开发中
22 22
23 ## 项目换肤 23 ## 项目换肤
24 给html根标签设置一个data-theme属性，然后通过js切换data-theme的属性值，Scss根据此属性来判断使用对应主题变量
...\ No newline at end of file ...\ No newline at end of file
24 给html根标签设置一个data-theme属性，然后通过js切换data-theme的属性值，Scss根据此属性来判断使用对应主题变量
25
26 ## config说明
27
28 {
29 "TITLE": "汉中市数据上报系统",
30 "THEME": "sb",
31 "CODE": "BDCJGPT", {"BDCSBPT":上报: "BDCJGPT":监管}
32 "SERVERAPI": "/bdcsjsb",
33 "calcHeight": 200, {上报:160 监管:200}
34 "echartTextColor": "#FFFFFF", {上报:"#4A4A4A" 监管:"#FFFFFF"}
35 "MANAGEMENTAPI": "http://192.168.2.38:8090/management"
36 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,5 +3,7 @@ ...@@ -3,5 +3,7 @@
3 "THEME": "sb", 3 "THEME": "sb",
4 "CODE": "BDCJGPT", 4 "CODE": "BDCJGPT",
5 "SERVERAPI": "/bdcsjsb", 5 "SERVERAPI": "/bdcsjsb",
6 "calcHeight": 160,
7 "echartTextColor": "#4A4A4A",
6 "MANAGEMENTAPI": "http://192.168.2.38:8090/management" 8 "MANAGEMENTAPI": "http://192.168.2.38:8090/management"
7 } 9 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -139,11 +139,25 @@ export default { ...@@ -139,11 +139,25 @@ export default {
139 let _this = this 139 let _this = this
140 if (this.heightNum) { 140 if (this.heightNum) {
141 _this.$nextTick(() => { 141 _this.$nextTick(() => {
142 142 if (document.querySelector(".tags-view-container")) {
143 window.addEventListener('resize', () => { 143 window.addEventListener('resize', () => {
144 if (_this.calcHeight == 230) {
145 _this.tableHeight = _this.calcHeightx(192)
146 } else {
147 _this.tableHeight = _this.calcHeightx(_this.calcHeight)
148 }
149 });
150 if (_this.calcHeight == 230) {
151 _this.tableHeight = _this.calcHeightx(192)
152 } else {
153 _this.tableHeight = _this.calcHeightx(_this.calcHeight)
154 }
155 } else {
156 window.addEventListener('resize', () => {
157 _this.tableHeight = _this.calcHeightx(_this.calcHeight)
158 });
144 _this.tableHeight = _this.calcHeightx(_this.calcHeight) 159 _this.tableHeight = _this.calcHeightx(_this.calcHeight)
145 }); 160 }
146 _this.tableHeight = _this.calcHeightx(_this.calcHeight)
147 }) 161 })
148 } else { 162 } else {
149 _this.tableHeight = window.innerHeight - _this.heightNum 163 _this.tableHeight = window.innerHeight - _this.heightNum
...@@ -158,9 +172,15 @@ export default { ...@@ -158,9 +172,15 @@ export default {
158 calcHeightx (value, wappered = true) { 172 calcHeightx (value, wappered = true) {
159 //项目自定义的公共header部分的高度，可忽略 173 //项目自定义的公共header部分的高度，可忽略
160 let header = document.querySelector(".from-clues-header").offsetHeight; 174 let header = document.querySelector(".from-clues-header").offsetHeight;
175
161 //value为动态计算table界面高度时，减去的其他空白部分，需自行在调试找到临界值，剩下的就是table表格的高度（包含header+body部分） 176 //value为动态计算table界面高度时，减去的其他空白部分，需自行在调试找到临界值，剩下的就是table表格的高度（包含header+body部分）
162 value = value == undefined ? 100 : value; 177 value = value == undefined ? 100 : value;
163 let res = window.innerHeight - parseInt(header) - value; 178 if (document.querySelector(".tags-view-container")) {
179 let tagsView = document.querySelector(".tags-view-container").offsetHeight;
180 var res = window.innerHeight - parseInt(header) - value - parseInt(tagsView);
181 } else {
182 var res = window.innerHeight - parseInt(header) - value;
183 }
164 if (wappered) { 184 if (wappered) {
165 //通过原生方法，获取dom节点的高度------获取element-ui table表格body的元素 185 //通过原生方法，获取dom节点的高度------获取element-ui table表格body的元素
166 let wapper = window.document.getElementsByClassName('el-table__body-wrapper'); 186 let wapper = window.document.getElementsByClassName('el-table__body-wrapper');
......
...@@ -15,14 +15,4 @@ export default { ...@@ -15,14 +15,4 @@ export default {
15 } 15 }
16 } 16 }
17 } 17 }
18 </script>
19 <style lang="scss" scoped>
20 .hasTagsView {
21 .app-main {
22 overflow-x: auto;
23 box-sizing: border-box;
24 background-color: #EDF1F7;
25 box-sizing: border-box;
26 }
27 }
28 </style>
...\ No newline at end of file ...\ No newline at end of file
18 </script>
...\ No newline at end of file ...\ No newline at end of file
......
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-03-22 10:23:46 4 * @LastEditTime: 2023-03-28 10:12:27
5 --> 5 -->
6 <template> 6 <template>
7 <section> 7 <transition name="fade-transform" mode="out-in">
8 <transition name="fade-transform" mode="out-in"> 8 <router-view />
9 <router-view /> 9 </transition>
10 </transition>
11 </section>
12 </template> 10 </template>
13 <script> 11 <script>
14 export default { 12 export default {
......
...@@ -6,14 +6,12 @@ ...@@ -6,14 +6,12 @@
6 <h4>不动产登记上报系统</h4> 6 <h4>不动产登记上报系统</h4>
7 </div> 7 </div>
8 <div class="right-menu"> 8 <div class="right-menu">
9 <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover"> 9 <div class="user">
10 <div class="user"> 10 {{ userName }}
11 {{ userName }} 11 <span @click="onCancel">
12 <span @click="onCancel"> 12 <i class="el-icon-switch-button"></i>
13 <i class="el-icon-switch-button"></i> 13 </span>
14 </span> 14 </div>
15 </div>
16 </el-dropdown>
17 </div> 15 </div>
18 </div> 16 </div>
19 </div> 17 </div>
......
...@@ -194,12 +194,12 @@ export default { ...@@ -194,12 +194,12 @@ export default {
194 @import "~@/styles/_handle.scss"; 194 @import "~@/styles/_handle.scss";
195 195
196 .tags-view-container { 196 .tags-view-container {
197 height: 40px; 197 height: 50px;
198 width: 100%; 198 width: 100%;
199 background: #fff; 199 background: #fff;
200 border-bottom: 1px solid #d8dce5; 200 border-bottom: 1px solid #d8dce5;
201 box-sizing: border-box; 201 box-sizing: border-box;
202 padding-top: 2px; 202 padding-top: 7px;
203 margin-bottom: 7px; 203 margin-bottom: 7px;
204 border-radius: 4px; 204 border-radius: 4px;
205 205
......
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-03-23 09:21:00 4 * @LastEditTime: 2023-03-28 10:14:20
5 --> 5 -->
6 <template> 6 <template>
7 <div class="app-wrapper"> 7 <div class="app-wrapper">
8 <navbar /> 8 <navbar />
9 <div class="main-container"> 9 <div class="main-container">
10 <sidebar class="sidebar-container" /> 10 <sidebar class="sidebar-container" />
11 <div class="app-main"> 11 <div class="app-content">
12 <tags-view v-if="needTagsView" /> 12 <tags-view v-if="needTagsView" />
13 <app-main /> 13 <app-main />
14 </div> 14 </div>
...@@ -40,17 +40,6 @@ export default { ...@@ -40,17 +40,6 @@ export default {
40 } 40 }
41 } 41 }
42 </script> 42 </script>
43 <style lang="scss" scoped>
44 .app-main {
45 height: calc(100vh - 74px);
46 overflow-x: hidden;
47 box-sizing: border-box;
48 flex: 1;
49 width: 100%;
50 background: #EAEBF0;
51 padding: 10px;
52 }
53 </style>
54 <style lang="scss"> 43 <style lang="scss">
55 @import "~@/styles/mixin.scss"; 44 @import "~@/styles/mixin.scss";
56 @import "~@/styles/sbSidebar.scss"; 45 @import "~@/styles/sbSidebar.scss";
...@@ -83,4 +72,13 @@ export default { ...@@ -83,4 +72,13 @@ export default {
83 width: 100%; 72 width: 100%;
84 transition: width 0.28s; 73 transition: width 0.28s;
85 } 74 }
75
76 .app-content {
77 overflow-x: hidden;
78 box-sizing: border-box;
79 flex: 1;
80 width: 100%;
81 background: #EAEBF0;
82 padding: 10px;
83 }
86 </style> 84 </style>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: yangwei 2 * @Author: yangwei
3 * @Date: 2023-01-16 09:10:12 3 * @Date: 2023-01-16 09:10:12
4 * @LastEditors: Please set LastEditors 4 * @LastEditors: Please set LastEditors
5 * @LastEditTime: 2023-03-23 15:15:02 5 * @LastEditTime: 2023-03-27 16:54:34
6 * @FilePath: \bdcjg-web\src\main.js 6 * @FilePath: \bdcjg-web\src\main.js
7 * @Description: 7 * @Description:
8 * 8 *
...@@ -19,7 +19,6 @@ import mixin from '@/utils/mixin/theme.js' ...@@ -19,7 +19,6 @@ import mixin from '@/utils/mixin/theme.js'
19 import axios from 'axios' 19 import axios from 'axios'
20 import dataV from '@jiaminghi/data-view'; 20 import dataV from '@jiaminghi/data-view';
21 import * as echarts from "echarts" 21 import * as echarts from "echarts"
22
23 import { startLoadingAddCount, endLoadingSubCount } from './utils/requestLoading' 22 import { startLoadingAddCount, endLoadingSubCount } from './utils/requestLoading'
24 Vue.mixin(mixin) 23 Vue.mixin(mixin)
25 import './directive/vxe-table' 24 import './directive/vxe-table'
...@@ -68,4 +67,5 @@ axios.get("./config.json") ...@@ -68,4 +67,5 @@ axios.get("./config.json")
68 store, 67 store,
69 render: h => h(App) 68 render: h => h(App)
70 }) 69 })
70 window.document.documentElement.setAttribute("data-theme", 'blue');
71 }) 71 })
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -20,7 +20,7 @@ router.beforeEach(async (to, from, next) => { ...@@ -20,7 +20,7 @@ router.beforeEach(async (to, from, next) => {
20 localStorage.removeItem("token"); 20 localStorage.removeItem("token");
21 next(); 21 next();
22 } else { 22 } else {
23 window.document.documentElement.setAttribute("data-theme", 'blue'); 23
24 let code = Vue.prototype.BASE_API.CODE 24 let code = Vue.prototype.BASE_API.CODE
25 //判断token是否存在 25 //判断token是否存在
26 const hasToken = localStorage.getItem("token"); 26 const hasToken = localStorage.getItem("token");
......
...@@ -190,6 +190,27 @@ ...@@ -190,6 +190,27 @@
190 } 190 }
191 } 191 }
192 192
193 .echarts-box {
194 display: flex;
195 justify-content: center;
196 height: calc(100vh - 260px);
197 }
198
199 .complex-header {
200 .el-table--border th.el-table__cell {
201 border-bottom: 1px solid #458ACF !important;
202 }
203
204 .el-table--border .el-table__cell {
205 border-right: 1px solid #458ACF !important;
206 }
207
208 .el-table--group,
209 .el-table--border {
210 border: 1px solid #458ACF !important;
211 }
212 }
213
193 .el-pagination.is-background .btn-prev, 214 .el-pagination.is-background .btn-prev,
194 .el-pagination.is-background .btn-next { 215 .el-pagination.is-background .btn-next {
195 @extend .bgc; 216 @extend .bgc;
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 9
10 10
11 .from-clues { 11 .from-clues {
12 height: 100%; 12 // height: 100%;
13 width: 100%; 13 width: 100%;
14 min-width: 1280px; 14 min-width: 1280px;
15 box-sizing: border-box; 15 box-sizing: border-box;
...@@ -17,9 +17,8 @@ ...@@ -17,9 +17,8 @@
17 17
18 &-header { 18 &-header {
19 width: 100%; 19 width: 100%;
20 padding: 7px 15px 10px 15px; 20 padding: 7px 15px 15px 15px;
21 box-sizing: border-box; 21 box-sizing: border-box;
22 background-size: 100% 100%;
23 background: #FFFFFF; 22 background: #FFFFFF;
24 border-radius: 4px; 23 border-radius: 4px;
25 } 24 }
...@@ -30,7 +29,6 @@ ...@@ -30,7 +29,6 @@
30 margin-top: 10px; 29 margin-top: 10px;
31 background: #FFFFFF; 30 background: #FFFFFF;
32 border-radius: 4px; 31 border-radius: 4px;
33 background-size: 100% 100%;
34 padding: 15px; 32 padding: 15px;
35 } 33 }
36 34
...@@ -57,6 +55,12 @@ ...@@ -57,6 +55,12 @@
57 } 55 }
58 } 56 }
59 57
58 .echarts-box {
59 display: flex;
60 justify-content: center;
61 height: calc(100vh - 230px);
62 }
63
60 /* --------------进度条美化---------------- */ 64 /* --------------进度条美化---------------- */
61 ::-webkit-scrollbar { 65 ::-webkit-scrollbar {
62 width: 7px; 66 width: 7px;
...@@ -169,7 +173,6 @@ ...@@ -169,7 +173,6 @@
169 width: 2px; 173 width: 2px;
170 position: relative; 174 position: relative;
171 left: 10px; 175 left: 10px;
172 color: #FFFFFF;
173 } 176 }
174 177
175 .el-breadcrumb__inner { 178 .el-breadcrumb__inner {
......
1 <template> 1 <template>
2 <!-- 监控日志 --> 2 <!-- 监控日志 -->
3 <div class="jktjDetail form-clues"> 3 <div class="jktjDetail from-clues">
4 <!-- 头部搜索 --> 4 <!-- 头部搜索 -->
5 <div class="from-clues-header"> 5 <div class="from-clues-header">
6 <el-form ref="form" :model="form" label-width="100px"> 6 <el-form ref="form" :model="form" label-width="100px">
7 <el-form-item> 7 <el-form-item v-if="BASE_API.THEME == 'jg'">
8 <Breadcrumb /> 8 <Breadcrumb />
9 </el-form-item> 9 </el-form-item>
10 <el-row> 10 <el-row class="mb-5">
11 <el-col :span="4"> 11 <el-col :span="4">
12 <el-form-item label="开始日期" prop="startTime"> 12 <el-form-item label="开始日期" prop="startTime" class="d-flex">
13 <el-date-picker type="date" :clearable="false" class="width100" placeholder="开始日期" 13 <el-date-picker type="date" :clearable="false" class="width100" placeholder="开始日期"
14 :picker-options="pickerOptionsStart" v-model="form.startTime" 14 :picker-options="pickerOptionsStart" v-model="form.startTime"
15 value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker> 15 value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
16 </el-form-item> 16 </el-form-item>
17 </el-col> 17 </el-col>
18 <el-col :span="4"> 18 <el-col :span="4">
19 <el-form-item label="结束日期" prop="endTime"> 19 <el-form-item label="结束日期" prop="endTime" class="d-flex">
20 <el-date-picker class="width100" :clearable="false" type="date" placeholder="结束日期" 20 <el-date-picker class="width100" :clearable="false" type="date" placeholder="结束日期"
21 :picker-options="pickerOptionsEnd" v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss" 21 :picker-options="pickerOptionsEnd" v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss"
22 @change="endTimeChange"></el-date-picker> 22 @change="endTimeChange"></el-date-picker>
...@@ -31,330 +31,308 @@ ...@@ -31,330 +31,308 @@
31 </el-form> 31 </el-form>
32 </div> 32 </div>
33 <!-- 表格 --> 33 <!-- 表格 -->
34 <div class="form-clues-content echarts-box" v-if="pieChartsData.length"> 34 <div class="from-clues-content echarts-box" v-if="pieChartsData.length">
35 <div id="myChart" class="chart"></div> 35 <div id="myChart" class="chart" style="height:100%;width:100%;"></div>
36 <div id="myChart-bar" class="chart-bar"></div> 36 <div id="myChart-bar" class="chart-bar" style="height:100%;width:100%;"></div>
37 </div> 37 </div>
38 <div class="form-clues-content echarts-box center" v-else>暂无数据</div> 38 <div class="from-clues-content center" v-else>暂无数据</div>
39 </div> 39 </div>
40 </template> 40 </template>
41 <script> 41 <script>
42 import { mapGetters } from "vuex"; 42 import { mapGetters } from "vuex";
43 import efficient from "@/api/efficient"; 43 import efficient from "@/api/efficient";
44 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation"; 44 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
45 export default { 45 export default {
46 name: "jktj", 46 name: "jktj",
47 data () { 47 data () {
48 return { 48 return {
49 // 开始日期限制 49 // 开始日期限制
50 pickerOptionsStart: { 50 pickerOptionsStart: {
51 disabledDate: (time) => { 51 disabledDate: (time) => {
52 if (this.form.endTime) { 52 if (this.form.endTime) {
53 return time.getTime() > new Date(this.form.endTime).getTime(); 53 return time.getTime() > new Date(this.form.endTime).getTime();
54 } 54 }
55 },
56 },
57 // 结束日期限制
58 pickerOptionsEnd: {
59 disabledDate: (time) => {
60 if (this.form.startTime) {
61 return time.getTime() < new Date(this.form.startTime).getTime();
62 }
63 },
64 }, 55 },
65 form: { 56 },
66 startTime: getFirstDayOfSeason(), 57 // 结束日期限制
67 endTime: timeFormat(new Date(), true), 58 pickerOptionsEnd: {
59 disabledDate: (time) => {
60 if (this.form.startTime) {
61 return time.getTime() < new Date(this.form.startTime).getTime();
62 }
68 }, 63 },
69 // 搜索表单 64 },
70 pieChartsData: [], 65 form: {
71 }; 66 startTime: getFirstDayOfSeason(),
67 endTime: timeFormat(new Date(), true),
68 },
69 // 搜索表单
70 pieChartsData: [],
71 };
72 },
73 created () { },
74 mounted () {
75 this.getProcessCounts();
76 },
77 computed: {
78 ...mapGetters(["dicData"]),
79 },
80 methods: {
81 endTimeChange (val) {
82 this.form.endTime = timeFormat(new Date(val), true);
72 }, 83 },
73 created () { }, 84 //查询各区县办件数量
74 mounted () { 85 async getProcessCounts () {
75 this.getProcessCounts(); 86 this.pieChartsData = [];
87 let { result: res } = await efficient.getProcessCounts(
88 this.form.startTime,
89 this.form.endTime
90 );
91 //获取图表配置项需要的数据
92 res.length > 0 &&
93 res.forEach((item) => {
94 this.pieChartsData.push({
95 //登记数量
96 value: item.counts,
97 //登记数量
98 name: item.recTypeName,
99 //登记类型代码
100 groupId: item.recType,
101 });
102 });
103 res.length &&
104 this.$nextTick(() => {
105 // 初始化图表
106 this.echartInit();
107 this.barChartInit(res[0].recType);
108 });
76 }, 109 },
77 computed: { 110 // 重置
78 ...mapGetters(["dicData"]), 111 resetForm () {
112 this.form = {
113 startTime: getFirstDayOfSeason(),
114 endTime: timeFormat(new Date(), true),
115 };
116 this.getProcessCounts();
79 }, 117 },
80 methods: { 118 //玫瑰图初始化
81 endTimeChange (val) { 119 echartInit () {
82 this.form.endTime = timeFormat(new Date(val), true); 120 let _this = this;
83 }, 121 // 基于准备好的dom，初始化echarts实例
84 //查询各区县办件数量 122 let myChart = this.$echarts.init(document.getElementById("myChart"));
85 async getProcessCounts () { 123 // 绘制图表
86 this.pieChartsData = []; 124 myChart.setOption({
87 let { result: res } = await efficient.getProcessCounts( 125 legend: {
88 this.form.startTime, 126 bottom: "-1%",
89 this.form.endTime 127 left: "center",
90 ); 128 textStyle: {
91 //获取图表配置项需要的数据 129 color: this.BASE_API.echartTextColor,
92 res.length > 0 &&
93 res.forEach((item) => {
94 this.pieChartsData.push({
95 //登记数量
96 value: item.counts,
97 //登记数量
98 name: item.recTypeName,
99 //登记类型代码
100 groupId: item.recType,
101 });
102 });
103 res.length &&
104 this.$nextTick(() => {
105 // 初始化图表
106 this.echartInit();
107 this.barChartInit(res[0].recType);
108 });
109 },
110 // 重置
111 resetForm () {
112 this.form = {
113 startTime: getFirstDayOfSeason(),
114 endTime: timeFormat(new Date(), true),
115 };
116 this.getProcessCounts();
117 },
118 //玫瑰图初始化
119 echartInit () {
120 let _this = this;
121 // 基于准备好的dom，初始化echarts实例
122 let myChart = this.$echarts.init(document.getElementById("myChart"));
123 // 绘制图表
124 myChart.setOption({
125 legend: {
126 bottom: "2%",
127 left: "center",
128 textStyle: {
129 color: "#fff",
130 },
131 },
132 tooltip: {
133 trigger: "item",
134 formatter: "{b} : {c}",
135 }, 130 },
136 label: { 131 },
137 color: 'inherit', 132 tooltip: {
138 }, 133 trigger: "item",
139 series: [ 134 formatter: "{b} : {c}",
140 { 135 },
141 name: "各业务类型办理数量", 136 label: {
142 type: "pie", 137 color: 'inherit',
143 radius: [0, 250], 138 },
144 center: ["50%", "45%"], 139 series: [
145 roseType: "area", 140 {
146 itemStyle: { 141 name: "各业务类型办理数量",
147 borderRadius: 8, 142 type: "pie",
148 }, 143 radius: [0, 250],
149 data: this.pieChartsData, 144 center: ["50%", "32%"],
145 roseType: "area",
146 itemStyle: {
147 borderRadius: 8,
150 }, 148 },
151 ], 149 data: this.pieChartsData,
152 }); 150 },
153 //添加点击事件 151 ],
154 myChart.on("click", function (param) { 152 });
155 _this.barChartInit(param.data.groupId); 153 //添加点击事件
156 }); 154 myChart.on("click", function (param) {
157 //默认选中第一个 155 _this.barChartInit(param.data.groupId);
158 let index = 1; 156 });
159 myChart.dispatchAction({ 157 //默认选中第一个
160 type: "highlight", 158 let index = 1;
161 seriesIndex: 0, 159 myChart.dispatchAction({
162 dataIndex: 0, 160 type: "highlight",
163 }); 161 seriesIndex: 0,
164 myChart.on("mouseover", function (e) { 162 dataIndex: 0,
165 if (e.dataIndex != index) { 163 });
166 myChart.dispatchAction({ 164 myChart.on("mouseover", function (e) {
167 type: "downplay", 165 if (e.dataIndex != index) {
168 seriesIndex: 0,
169 dataIndex: index,
170 });
171 }
172 });
173 myChart.on("mouseout", function (e) {
174 index = e.dataIndex;
175 myChart.dispatchAction({ 166 myChart.dispatchAction({
176 type: "highlight", 167 type: "downplay",
177 seriesIndex: 0, 168 seriesIndex: 0,
178 dataIndex: e.dataIndex, 169 dataIndex: index,
179 }); 170 });
171 }
172 });
173 myChart.on("mouseout", function (e) {
174 index = e.dataIndex;
175 myChart.dispatchAction({
176 type: "highlight",
177 seriesIndex: 0,
178 dataIndex: e.dataIndex,
180 }); 179 });
181 }, 180 });
182 //柱图初始化 181 },
183 async barChartInit (recType) { 182 //柱图初始化
184 //请求recType对应业务的各区县数据 183 async barChartInit (recType) {
185 let { result: res } = await efficient.getProcessDays( 184 //请求recType对应业务的各区县数据
186 recType, 185 let { result: res } = await efficient.getProcessDays(
187 this.form.startTime, 186 recType,
188 this.form.endTime 187 this.form.startTime,
189 ); 188 this.form.endTime
190 //行政区数组 189 );
191 let xzqArr = []; 190 //行政区数组
192 this.dicData["A20"].forEach((item) => { 191 let xzqArr = [];
193 xzqArr.push(item.DNAME); 192 this.dicData["A20"].forEach((item) => {
194 let tempArr = res.filter((i) => { 193 xzqArr.push(item.DNAME);
195 return i.qxdm == item.DCODE; 194 let tempArr = res.filter((i) => {
196 }); 195 return i.qxdm == item.DCODE;
197 if (tempArr.length) {
198 item.avgDay = tempArr[0].avgDay;
199 item.maxDay = tempArr[0].maxDay;
200 item.minDay = tempArr[0].minDay;
201 } else {
202 item.avgDay = 0;
203 item.maxDay = 0;
204 item.minDay = 0;
205 }
206 }); 196 });
207 //补全无数据行政区后的结果数组 197 if (tempArr.length) {
208 let dealArr = [...this.dicData["A20"]]; 198 item.avgDay = tempArr[0].avgDay;
209 let myChartBar = this.$echarts.init( 199 item.maxDay = tempArr[0].maxDay;
210 document.getElementById("myChart-bar") 200 item.minDay = tempArr[0].minDay;
211 ); 201 } else {
212 myChartBar.setOption({ 202 item.avgDay = 0;
213 color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"], 203 item.maxDay = 0;
214 tooltip: { 204 item.minDay = 0;
215 show: true, 205 }
216 trigger: "axis", 206 });
217 textStyle: { 207 //补全无数据行政区后的结果数组
218 fontSize: 16, // 字体大小 208 let dealArr = [...this.dicData["A20"]];
219 }, 209 let myChartBar = this.$echarts.init(
220 extraCssText: "width:220px;height:160px;", // 背景色 210 document.getElementById("myChart-bar")
211 );
212 myChartBar.setOption({
213 color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
214 tooltip: {
215 show: true,
216 trigger: "axis",
217 textStyle: {
218 fontSize: 16, // 字体大小
221 }, 219 },
222 grid: { 220 extraCssText: "width:220px;height:160px;", // 背景色
223 top: 120, 221 },
222 grid: {
223 top: 120,
224 },
225 legend: {
226 data: ["最短用时", "平均用时", "最长用时"],
227 top: 20,
228 textStyle: {
229 show: true,
230 color: this.BASE_API.echartTextColor,
231 fontSize: "16",
224 }, 232 },
225 legend: { 233 },
226 data: ["最短用时", "平均用时", "最长用时"], 234 xAxis: [
227 top: 20, 235 {
228 textStyle: { 236 type: "category",
229 show: true, 237 data: xzqArr,
230 color: "#fff", 238 axisLabel: {
231 fontSize: "16", 239 interval: 0,
240 textStyle: {
241 show: true,
242 color: this.BASE_API.echartTextColor,
243 fontSize: "16",
244 },
232 }, 245 },
233 }, 246 },
234 xAxis: [ 247 ],
235 { 248 yAxis: [
236 type: "category", 249 {
237 data: xzqArr, 250 type: "value",
238 axisLabel: { 251 name: "单位：天",
239 interval: 0, 252 nameTextStyle: {
240 textStyle: { 253 color: this.BASE_APIechartTextColor,
241 show: true, 254 fontSize: "16",
242 color: "#fff",
243 fontSize: "16",
244 },
245 },
246 }, 255 },
247 ], 256 axisLabel: {
248 yAxis: [ 257 textStyle: {
249 { 258 show: true,
250 type: "value", 259 color: this.BASE_API.echartTextColor,
251 name: "单位：天",
252 nameTextStyle: {
253 color: "#fff",
254 fontSize: "16", 260 fontSize: "16",
255 }, 261 },
256 axisLabel: {
257 textStyle: {
258 show: true,
259 color: "#fff",
260 fontSize: "16",
261 },
262 },
263 }, 262 },
264 ],
265 label: {
266 color: 'inherit',
267 }, 263 },
268 series: [ 264 ],
269 { 265 label: {
270 type: "bar", 266 color: 'inherit',
271 //显示数值 267 },
272 itemStyle: { 268 series: [
273 normal: { 269 {
274 label: { 270 type: "bar",
275 show: true, //开启显示 271 //显示数值
276 position: "top", //在上方显示 272 itemStyle: {
273 normal: {
274 label: {
275 show: true, //开启显示
276 position: "top", //在上方显示
277 277
278 },
279 }, 278 },
280 }, 279 },
281 barMaxWidth: "60",
282 name: "最短用时",
283 data: dealArr.map((item) => item.minDay),
284 }, 280 },
285 { 281 barMaxWidth: "60",
286 type: "bar", 282 name: "最短用时",
287 //显示数值 283 data: dealArr.map((item) => item.minDay),
288 itemStyle: { 284 },
289 normal: { 285 {
290 label: { 286 type: "bar",
291 show: true, //开启显示 287 //显示数值
292 position: "top", //在上方显示 288 itemStyle: {
289 normal: {
290 label: {
291 show: true, //开启显示
292 position: "top", //在上方显示
293 293
294 },
295 }, 294 },
296 }, 295 },
297 barMaxWidth: "60",
298 name: "平均用时",
299 data: dealArr.map((item) => item.avgDay),
300 }, 296 },
301 { 297 barMaxWidth: "60",
302 type: "bar", 298 name: "平均用时",
303 //显示数值 299 data: dealArr.map((item) => item.avgDay),
304 itemStyle: { 300 },
305 normal: { 301 {
306 label: { 302 type: "bar",
307 show: true, //开启显示 303 //显示数值
308 position: "top", //在上方显示 304 itemStyle: {
305 normal: {
306 label: {
307 show: true, //开启显示
308 position: "top", //在上方显示
309 309
310 },
311 }, 310 },
312 }, 311 },
313 barMaxWidth: "60",
314 name: "最长用时",
315 data: dealArr.map((item) => item.maxDay),
316 }, 312 },
317 ], 313 barMaxWidth: "60",
318 }); 314 name: "最长用时",
319 }, 315 data: dealArr.map((item) => item.maxDay),
316 },
317 ],
318 });
320 }, 319 },
321 }; 320 },
321 };
322 </script> 322 </script>
323 <style scoped lang="scss"> 323 <style scoped lang="scss">
324 .jktjDetail { 324 .jktjDetail {
325 height: 100%; 325 flex-direction: column;
326 display: flex;
327 flex-direction: column;
328
329 .rows {
330 margin-left: 100px;
331 }
332 326
333 .center { 327 .rows {
334 line-height: 50vh; 328 margin-left: 100px;
335 text-align: center; 329 }
336 }
337
338 .echarts-box {
339 display: flex;
340 justify-content: center;
341
342 .chart {
343 width: 40%;
344 height: 100%;
345 float: left;
346 }
347
348 .chart-bar {
349 width: 60%;
350 }
351 }
352 330
353 .form-clues-content { 331 .center {
354 flex: 1; 332 line-height: 50vh;
355 height: 100%; 333 text-align: center;
356 color: #b6b5b5; 334 color: #b6b5b5;
357 }
358 } 335 }
336 }
359 </style> 337 </style>
360 338
......
1 <template> 1 <template>
2 <!-- 监控日志 --> 2 <!-- 监控日志 -->
3 <div class="jktjDetail form-clues"> 3 <div class="jktjDetail from-clues">
4 <!-- 头部搜索 --> 4 <!-- 头部搜索 -->
5 <div class="from-clues-header"> 5 <div class="from-clues-header">
6 <el-form ref="form" :model="form" label-width="100px"> 6 <el-form ref="form" :model="form" label-width="80px">
7 <el-form-item> 7 <el-form-item v-if="BASE_API.THEME == 'jg'">
8 <Breadcrumb /> 8 <Breadcrumb />
9 </el-form-item> 9 </el-form-item>
10 <el-row> 10 <el-row class="mb-5">
11 <el-col :span="4"> 11 <el-col :span="4">
12 <el-form-item label="行政区"> 12 <el-form-item label="行政区" class="d-flex">
13 <el-select v-model="form.qxdm" class="width100" clearable placeholder="行政区"> 13 <el-select v-model="form.qxdm" class="width100" clearable placeholder="行政区">
14 <el-option v-for="item in dicData['A20']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE"> 14 <el-option v-for="item in dicData['A20']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
15 </el-option> 15 </el-option>
...@@ -17,14 +17,14 @@ ...@@ -17,14 +17,14 @@
17 </el-form-item> 17 </el-form-item>
18 </el-col> 18 </el-col>
19 <el-col :span="4"> 19 <el-col :span="4">
20 <el-form-item label="开始日期" prop="startTime"> 20 <el-form-item label="开始日期" prop="startTime" class="d-flex">
21 <el-date-picker type="date" :clearable="false" class="width100" placeholder="开始日期" 21 <el-date-picker type="date" :clearable="false" class="width100" placeholder="开始日期"
22 :picker-options="pickerOptionsStart" v-model="form.startTime" 22 :picker-options="pickerOptionsStart" v-model="form.startTime"
23 value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker> 23 value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
24 </el-form-item> 24 </el-form-item>
25 </el-col> 25 </el-col>
26 <el-col :span="4"> 26 <el-col :span="4">
27 <el-form-item label="结束日期" prop="endTime"> 27 <el-form-item label="结束日期" prop="endTime" class="d-flex">
28 <el-date-picker type="date" :clearable="false" class="width100" placeholder="结束日期" 28 <el-date-picker type="date" :clearable="false" class="width100" placeholder="结束日期"
29 :picker-options="pickerOptionsEnd" v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss" 29 :picker-options="pickerOptionsEnd" v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss"
30 @change="endTimeChange"></el-date-picker> 30 @change="endTimeChange"></el-date-picker>
...@@ -39,282 +39,264 @@ ...@@ -39,282 +39,264 @@
39 </el-form> 39 </el-form>
40 </div> 40 </div>
41 <!-- 图表 --> 41 <!-- 图表 -->
42 <div class="form-clues-content echarts-box" v-if="chartData.length"> 42 <div class="from-clues-content echarts-box" v-if="chartData.length">
43 <div id="myChart" class="chart"></div> 43 <div id="myChart" class="chart" style="height:100%;width:100%;"></div>
44 </div> 44 </div>
45 <div class="form-clues-content echarts-box center" v-else>暂无数据</div> 45 <div class="from-clues-content echarts-box center" v-else>暂无数据</div>
46 </div> 46 </div>
47 </template> 47 </template>
48 48
49 <script> 49 <script>
50 import { mapGetters } from "vuex"; 50 import { mapGetters } from "vuex";
51 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation"; 51 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
52 import business from "@/api/business"; 52 import business from "@/api/business";
53 export default { 53 export default {
54 name: "jktj", 54 name: "jktj",
55 data () { 55 data () {
56 return { 56 return {
57 // 开始日期限制 57 // 开始日期限制
58 pickerOptionsStart: { 58 pickerOptionsStart: {
59 disabledDate: (time) => { 59 disabledDate: (time) => {
60 if (this.form.endTime) { 60 if (this.form.endTime) {
61 return time.getTime() > new Date(this.form.endTime).getTime(); 61 return time.getTime() > new Date(this.form.endTime).getTime();
62 } 62 }
63 },
64 },
65 // 结束日期限制
66 pickerOptionsEnd: {
67 disabledDate: (time) => {
68 if (this.form.startTime) {
69 return time.getTime() < new Date(this.form.startTime).getTime();
70 }
71 },
72 }, 63 },
73 recTypeArr: [], 64 },
74 chartData: [], 65 // 结束日期限制
75 // 搜索表单 66 pickerOptionsEnd: {
76 form: { 67 disabledDate: (time) => {
77 startTime: getFirstDayOfSeason(), 68 if (this.form.startTime) {
78 endTime: timeFormat(new Date(), true), 69 return time.getTime() < new Date(this.form.startTime).getTime();
79 qxdm: "", 70 }
80 }, 71 },
81 interval: 50
82 };
83 },
84 mounted () {
85 // 查询成功率
86 this.getSuucessRate();
87 },
88 computed: {
89 ...mapGetters(["dicData"]),
90 },
91 methods: {
92 endTimeChange (val) {
93 this.form.endTime = timeFormat(new Date(val), true)
94 }, 72 },
95 async getSuucessRate () { 73 recTypeArr: [],
96 this.recTypeArr = []; 74 chartData: [],
97 this.chartData = []; 75 // 搜索表单
98 let { result: res } = await business.getSuucessRate( 76 form: {
99 this.form.startTime, 77 startTime: getFirstDayOfSeason(),
100 this.form.endTime, 78 endTime: timeFormat(new Date(), true),
101 this.form.qxdm 79 qxdm: "",
102 ); 80 },
103 this.chartData = res; 81 interval: 50
82 };
83 },
84 mounted () {
85 // 查询成功率
86 this.getSuucessRate();
87 },
88 computed: {
89 ...mapGetters(["dicData"]),
90 },
91 methods: {
92 endTimeChange (val) {
93 this.form.endTime = timeFormat(new Date(val), true)
94 },
95 async getSuucessRate () {
96 this.recTypeArr = [];
97 this.chartData = [];
98 let { result: res } = await business.getSuucessRate(
99 this.form.startTime,
100 this.form.endTime,
101 this.form.qxdm
102 );
103 this.chartData = res;
104 104
105 let maxData = Math.max.apply(Math, this.chartData.map(item => { return item.failure })) 105 let maxData = Math.max.apply(Math, this.chartData.map(item => { return item.failure }))
106 this.interval = Math.ceil(maxData / 10) 106 this.interval = Math.ceil(maxData / 10)
107 //行政区代码过滤 107 //行政区代码过滤
108 res.length > 0 && 108 res.length > 0 &&
109 res.forEach((item) => { 109 res.forEach((item) => {
110 this.recTypeArr.push(item.recTypeName); 110 this.recTypeArr.push(item.recTypeName);
111 });
112 this.$nextTick(() => {
113 // 初始化图表
114 this.chartData.length && this.echartInit();
115 }); 111 });
116 }, 112 this.$nextTick(() => {
117 // 重置 113 // 初始化图表
118 resetForm () { 114 this.chartData.length && this.echartInit();
119 this.form = { 115 });
120 startTime: getFirstDayOfSeason(), 116 },
121 endTime: timeFormat(new Date(), true), 117 // 重置
122 qxdm: "", 118 resetForm () {
123 }; 119 this.form = {
124 this.getSuucessRate(); 120 startTime: getFirstDayOfSeason(),
125 }, 121 endTime: timeFormat(new Date(), true),
126 echartInit () { 122 qxdm: "",
127 let _this = this; 123 };
128 // 基于准备好的dom，初始化echarts实例 124 this.getSuucessRate();
129 let myChart = this.$echarts.init(document.getElementById("myChart")); 125 },
130 // 绘制图表 126 echartInit () {
131 myChart.setOption({ 127 let _this = this;
132 color: ["#13E5FF", "#C99E68", "#E873B2", "#ffaf48"], 128 // 基于准备好的dom，初始化echarts实例
133 tooltip: { 129 let myChart = this.$echarts.init(document.getElementById("myChart"));
134 trigger: "axis", 130 // 绘制图表
135 formatter: '{b}<br/>{a0}：{c0}个<br/>{a1}：{c1}个<br/>{a2}：{c2}%', 131 myChart.setOption({
136 axisPointer: { 132 color: ["#13E5FF", "#C99E68", "#E873B2", "#ffaf48"],
137 type: "cross", 133 tooltip: {
138 crossStyle: { 134 trigger: "axis",
139 color: "#fff", 135 formatter: '{b}<br/>{a0}：{c0}个<br/>{a1}：{c1}个<br/>{a2}：{c2}%',
140 }, 136 axisPointer: {
141 }, 137 type: "cross",
142 }, 138 crossStyle: {
143 legend: { 139 color: this.BASE_API.echartTextColor,
144 data: ["成功", "失败", "成功率"],
145 top: '16',
146 textStyle: {
147 show: true,
148 color: "#fff",
149 fontSize: "16",
150 }, 140 },
151 }, 141 },
152 label: { 142 },
153 color: 'inherit', 143 legend: {
144 data: ["成功", "失败", "成功率"],
145 top: '16',
146 textStyle: {
147 show: true,
148 color: this.BASE_API.echartTextColor,
149 fontSize: "16",
154 }, 150 },
155 xAxis: [ 151 },
156 { 152 label: {
157 type: "category", 153 color: 'inherit',
158 data: _this.recTypeArr, 154 },
159 axisPointer: { 155 xAxis: [
160 type: "shadow", 156 {
157 type: "category",
158 data: _this.recTypeArr,
159 axisPointer: {
160 type: "shadow",
161 },
162 axisLabel: {
163 textStyle: {
164 show: true,
165 color: this.BASE_API.echartTextColor,
166 fontSize: "16",
161 }, 167 },
162 axisLabel: { 168 formatter: function (val) {
163 textStyle: { 169 let c = document.createElement("canvas");
164 show: true, 170 const ctx = c.getContext("2d");
165 color: "#fff", 171 const arr = val.split("");
166 fontSize: "16", 172 arr
167 }, 173 .map((item) => ctx.measureText(item).width)
168 formatter: function (val) { 174 .reduce((pre, next, index) => {
169 let c = document.createElement("canvas"); 175 const nLen = pre + next;
170 const ctx = c.getContext("2d"); 176 if (nLen > 40) {
171 const arr = val.split(""); 177 arr[index - 1] += "...";
172 arr 178 return next;
173 .map((item) => ctx.measureText(item).width) 179 } else {
174 .reduce((pre, next, index) => { 180 return nLen;
175 const nLen = pre + next; 181 }
176 if (nLen > 40) {
177 arr[index - 1] += "...";
178 return next;
179 } else {
180 return nLen;
181 }
182 });
183 c = null;
184 let ind = arr.findIndex((i) => {
185 return i.indexOf("...") > -1;
186 }); 182 });
187 let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr; 183 c = null;
188 return newArr.join(""); 184 let ind = arr.findIndex((i) => {
189 }, 185 return i.indexOf("...") > -1;
186 });
187 let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr;
188 return newArr.join("");
190 }, 189 },
191 }, 190 },
192 ], 191 },
193 yAxis: [ 192 ],
194 { 193 yAxis: [
195 type: "value", 194 {
196 name: "数量/个", 195 type: "value",
197 nameTextStyle: { 196 name: "数量/个",
198 color: "#fff", 197 nameTextStyle: {
198 color: this.BASE_API.echartTextColor,
199 fontSize: "16",
200 },
201 // interval: this.interval,
202 axisLabel: {
203 formatter: "{value}",
204 textStyle: {
205 show: true,
206 color: this.BASE_API.echartTextColor,
199 fontSize: "16", 207 fontSize: "16",
200 }, 208 },
201 // interval: this.interval,
202 axisLabel: {
203 formatter: "{value}",
204 textStyle: {
205 show: true,
206 color: "#fff",
207 fontSize: "16",
208 },
209 },
210 }, 209 },
211 { 210 },
212 type: "value", 211 {
213 name: "成功率", 212 type: "value",
214 nameTextStyle: { 213 name: "成功率",
215 color: "#fff", 214 nameTextStyle: {
215 color: this.BASE_API.echartTextColor,
216 fontSize: "16",
217 },
218 splitNumber: 2,
219 axisLabel: {
220 formatter: "{value} %",
221 textStyle: {
222 show: true,
223 color: this.BASE_API.echartTextColor,
216 fontSize: "16", 224 fontSize: "16",
217 }, 225 },
218 splitNumber: 2,
219 axisLabel: {
220 formatter: "{value} %",
221 textStyle: {
222 show: true,
223 color: "#fff",
224 fontSize: "16",
225 },
226 },
227 }, 226 },
228 ], 227 },
229 series: [ 228 ],
230 { 229 series: [
231 name: "成功", 230 {
232 type: "bar", 231 name: "成功",
233 //显示数值 232 type: "bar",
234 itemStyle: { 233 //显示数值
235 normal: { 234 itemStyle: {
236 label: { 235 normal: {
237 show: true, //开启显示 236 label: {
238 position: "top", //在上方显示 237 show: true, //开启显示
239 }, 238 position: "top", //在上方显示
240 }, 239 },
241 }, 240 },
242 barMaxWidth: '60',
243 data: this.chartData.map((item) => {
244 return item.success;
245 }),
246 }, 241 },
247 { 242 barMaxWidth: '60',
248 name: "失败", 243 data: this.chartData.map((item) => {
249 type: "bar", 244 return item.success;
250 //显示数值 245 }),
251 itemStyle: { 246 },
252 normal: { 247 {
253 label: { 248 name: "失败",
254 show: true, //开启显示 249 type: "bar",
255 position: "top", //在上方显示 250 //显示数值
256 }, 251 itemStyle: {
252 normal: {
253 label: {
254 show: true, //开启显示
255 position: "top", //在上方显示
257 }, 256 },
258 }, 257 },
259 barMaxWidth: '60',
260 data: this.chartData.map((item) => {
261 return item.failure;
262 }),
263 }, 258 },
264 { 259 barMaxWidth: '60',
265 name: "成功率", 260 data: this.chartData.map((item) => {
266 //显示数值 261 return item.failure;
267 itemStyle: { 262 }),
268 normal: { 263 },
269 label: { 264 {
270 show: true, //开启显示 265 name: "成功率",
271 position: "top", //在上方显示 266 //显示数值
272 }, 267 itemStyle: {
268 normal: {
269 label: {
270 show: true, //开启显示
271 position: "top", //在上方显示
273 }, 272 },
274 }, 273 },
275 type: "line",
276 barMaxWidth: '60',
277 yAxisIndex: 1,
278 data: this.chartData.map((item) => {
279 return item.rate;
280 }),
281 }, 274 },
282 ], 275 type: "line",
283 }); 276 barMaxWidth: '60',
284 }, 277 yAxisIndex: 1,
278 data: this.chartData.map((item) => {
279 return item.rate;
280 }),
281 },
282 ],
283 });
285 }, 284 },
286 }; 285 },
286 };
287 </script> 287 </script>
288 <style scoped lang="scss"> 288 <style scoped lang="scss">
289 .jktjDetail { 289 .jktjDetail {
290 height: 100%; 290 flex-direction: column;
291 display: flex;
292 flex-direction: column;
293
294 .rows {
295 margin-left: 100px;
296 }
297 291
298 .center { 292 .rows {
299 line-height: 50vh; 293 margin-left: 100px;
300 text-align: center; 294 }
301 color: #b6b5b5;
302 }
303
304 .echarts-box {
305 display: flex;
306 justify-content: center;
307 height: 500px;
308
309 .chart {
310 width: 100%;
311 height: 100%;
312 }
313 }
314 295
315 .form-clues-content { 296 .center {
316 flex: 1; 297 line-height: 50vh;
317 height: 100%; 298 text-align: center;
318 } 299 color: #b6b5b5;
319 } 300 }
301 }
320 </style> 302 </style>
......
1 <template> 1 <template>
2 <!-- 监控日志 --> 2 <!-- 监控日志 -->
3 <div class="jktjDetail form-clues"> 3 <div class="jktjDetail from-clues">
4 <!-- 头部搜索 --> 4 <!-- 头部搜索 -->
5 <div class="from-clues-header"> 5 <div class="from-clues-header">
6 <el-form ref="form" :model="form" label-width="100px"> 6 <el-form ref="form" :model="form" label-width="100px">
7 <el-form-item> 7 <el-form-item v-if="BASE_API.THEME == 'jg'">
8 <Breadcrumb /> 8 <Breadcrumb />
9 </el-form-item> 9 </el-form-item>
10 <el-row> 10 <el-row class="mb-5">
11 <el-col :span="4"> 11 <el-col :span="4">
12 <el-form-item label="行政区"> 12 <el-form-item label="行政区" class="d-flex">
13 <el-select v-model="form.qxdm" class="width100" clearable placeholder="行政区"> 13 <el-select v-model="form.qxdm" class="width100" clearable placeholder="行政区">
14 <el-option v-for="item in dicData['A20']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE"> 14 <el-option v-for="item in dicData['A20']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
15 </el-option> 15 </el-option>
...@@ -17,14 +17,14 @@ ...@@ -17,14 +17,14 @@
17 </el-form-item> 17 </el-form-item>
18 </el-col> 18 </el-col>
19 <el-col :span="4"> 19 <el-col :span="4">
20 <el-form-item label="开始日期"> 20 <el-form-item label="开始日期" class="d-flex">
21 <el-date-picker class="width100" :clearable="false" type="date" placeholder="开始日期" 21 <el-date-picker class="width100" :clearable="false" type="date" placeholder="开始日期"
22 :picker-options="pickerOptionsStart" v-model="form.startTime" 22 :picker-options="pickerOptionsStart" v-model="form.startTime"
23 value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker> 23 value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
24 </el-form-item> 24 </el-form-item>
25 </el-col> 25 </el-col>
26 <el-col :span="4"> 26 <el-col :span="4">
27 <el-form-item label="结束日期"> 27 <el-form-item label="结束日期" class="d-flex">
28 <el-date-picker class="width100" :clearable="false" type="date" placeholder="结束日期" 28 <el-date-picker class="width100" :clearable="false" type="date" placeholder="结束日期"
29 :picker-options="pickerOptionsEnd" v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss" 29 :picker-options="pickerOptionsEnd" v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss"
30 @change="endTimeChange"></el-date-picker> 30 @change="endTimeChange"></el-date-picker>
...@@ -39,210 +39,191 @@ ...@@ -39,210 +39,191 @@
39 </el-form> 39 </el-form>
40 </div> 40 </div>
41 <!-- 图表 --> 41 <!-- 图表 -->
42 <div class="form-clues-content echarts-box" v-if="chartData.length"> 42 <div class="from-clues-content echarts-box" v-if="chartData.length">
43 <div id="myChart" class="chart"></div> 43 <div id="myChart" class="chart" style="height:100%;width:100%;"></div>
44 </div> 44 </div>
45 <div class="form-clues-content echarts-box center" v-else>暂无数据</div> 45 <div class="from-clues-content echarts-box center" v-else>暂无数据</div>
46 </div> 46 </div>
47 </template> 47 </template>
48
49 <script> 48 <script>
50 import { mapGetters } from "vuex"; 49 import { mapGetters } from "vuex";
51 import efficient from "@/api/efficient"; 50 import efficient from "@/api/efficient";
52 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation"; 51 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
53 export default { 52 export default {
54 name: "jktj", 53 name: "jktj",
55 data () { 54 data () {
56 return { 55 return {
57 // 开始日期限制 56 // 开始日期限制
58 pickerOptionsStart: { 57 pickerOptionsStart: {
59 disabledDate: (time) => { 58 disabledDate: (time) => {
60 if (this.form.endTime) { 59 if (this.form.endTime) {
61 return time.getTime() > new Date(this.form.endTime).getTime(); 60 return time.getTime() > new Date(this.form.endTime).getTime();
62 } 61 }
63 },
64 }, 62 },
65 // 结束日期限制 63 },
66 pickerOptionsEnd: { 64 // 结束日期限制
67 disabledDate: (time) => { 65 pickerOptionsEnd: {
68 if (this.form.startTime) { 66 disabledDate: (time) => {
69 return time.getTime() < new Date(this.form.startTime).getTime(); 67 if (this.form.startTime) {
70 } 68 return time.getTime() < new Date(this.form.startTime).getTime();
71 }, 69 }
72 },
73 // 搜索表单
74 valueTime: "",
75 // 搜索表单
76 form: {
77 startTime: getFirstDayOfSeason(),
78 endTime: timeFormat(new Date(), true),
79 qxdm: "",
80 }, 70 },
81 chartData: [] 71 },
82 }; 72 // 搜索表单
73 valueTime: "",
74 // 搜索表单
75 form: {
76 startTime: getFirstDayOfSeason(),
77 endTime: timeFormat(new Date(), true),
78 qxdm: "",
79 },
80 chartData: []
81 };
82 },
83 mounted () {
84 // 查询业务量
85 this.getProcessCounts();
86 },
87 computed: {
88 ...mapGetters(["dicData"]),
89 },
90 methods: {
91 endTimeChange (val) {
92 this.form.endTime = timeFormat(new Date(val), true)
83 }, 93 },
84 mounted () { 94 async getProcessCounts () {
85 // 查询业务量 95 this.chartData = [];
86 this.getProcessCounts(); 96 let { result: res } = await efficient.getProcessCounts(
97 this.form.startTime,
98 this.form.endTime,
99 this.form.qxdm
100 );
101 //获取图表配置项需要的数据
102 this.chartData = res;
103 this.$nextTick(() => {
104 // 初始化图表
105 this.chartData.length && this.echartInit(this.chartData)
106 });
107
87 }, 108 },
88 computed: { 109 // 重置
89 ...mapGetters(["dicData"]), 110 resetForm () {
111 this.form = {
112 startTime: getFirstDayOfSeason(),
113 endTime: timeFormat(new Date(), true),
114 qxdm: ""
115 };
116 this.getProcessCounts();
90 }, 117 },
91 methods: { 118 //图表渲染
92 endTimeChange (val) { 119 echartInit (chartArr) {
93 this.form.endTime = timeFormat(new Date(val), true) 120 // 基于准备好的dom，初始化echarts实例
94 }, 121 let myChart = this.$echarts.init(document.getElementById("myChart"));
95 async getProcessCounts () { 122 // 绘制图表
96 this.chartData = []; 123 myChart.setOption({
97 let { result: res } = await efficient.getProcessCounts( 124 color: ["#13E5FF"],
98 this.form.startTime, 125 tooltip: {
99 this.form.endTime, 126 show: true,
100 this.form.qxdm 127 trigger: "axis",
101 ); 128 textStyle: {
102 //获取图表配置项需要的数据 129 fontSize: 16, // 字体大小
103 this.chartData = res;
104 this.$nextTick(() => {
105 // 初始化图表
106 this.chartData.length && this.echartInit(this.chartData)
107 });
108
109 },
110 // 重置
111 resetForm () {
112 this.form = {
113 startTime: getFirstDayOfSeason(),
114 endTime: timeFormat(new Date(), true),
115 qxdm: ""
116 };
117 this.getProcessCounts();
118 },
119 //图表渲染
120 echartInit (chartArr) {
121 // 基于准备好的dom，初始化echarts实例
122 let myChart = this.$echarts.init(document.getElementById("myChart"));
123 // 绘制图表
124 myChart.setOption({
125 color: ["#13E5FF"],
126 tooltip: {
127 show: true,
128 trigger: "axis",
129 textStyle: {
130 fontSize: 16, // 字体大小
131 },
132 },
133 grid: {
134 top: 120,
135 bottom: 100,
136 },
137 label: {
138 color: 'inherit',
139 }, 130 },
140 xAxis: [ 131 },
141 { 132 grid: {
142 type: "category", 133 top: 120,
143 data: chartArr.map(item => item.recTypeName), 134 bottom: 100,
144 axisLabel: { 135 },
145 interval: 0, 136 label: {
146 rotate: 40, 137 color: 'inherit',
147 formatter: function (val) { 138 },
148 let c = document.createElement("canvas"); 139 xAxis: [
149 const ctx = c.getContext("2d"); 140 {
150 const arr = val.split(""); 141 type: "category",
151 arr 142 data: chartArr.map(item => item.recTypeName),
152 .map((item) => ctx.measureText(item).width) 143 axisLabel: {
153 .reduce((pre, next, index) => { 144 interval: 0,
154 const nLen = pre + next; 145 rotate: 40,
155 if (nLen > 60) { 146 formatter: function (val) {
156 arr[index - 1] += "..."; 147 let c = document.createElement("canvas");
157 return next; 148 const ctx = c.getContext("2d");
158 } else { 149 const arr = val.split("");
159 return nLen; 150 arr
160 } 151 .map((item) => ctx.measureText(item).width)
161 }); 152 .reduce((pre, next, index) => {
162 c = null; 153 const nLen = pre + next;
163 let ind = arr.findIndex((i) => { 154 if (nLen > 60) {
164 return i.indexOf("...") > -1; 155 arr[index - 1] += "...";
156 return next;
157 } else {
158 return nLen;
159 }
165 }); 160 });
166 let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr; 161 c = null;
167 return newArr.join(""); 162 let ind = arr.findIndex((i) => {
168 }, 163 return i.indexOf("...") > -1;
169 textStyle: { 164 });
170 show: true, 165 let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr;
171 color: "#fff", 166 return newArr.join("");
172 fontSize: "16",
173 },
174 }, 167 },
175 }, 168 textStyle: {
176 ], 169 show: true,
177 yAxis: [ 170 color: this.BASE_API.echartTextColor,
178 {
179 type: "value",
180 name: "数量/个",
181 nameTextStyle: {
182 color: "#fff",
183 fontSize: "16", 171 fontSize: "16",
184 }, 172 },
185 axisLabel: { 173 },
186 textStyle: { 174 },
187 show: true, 175 ],
188 color: "#fff", 176 yAxis: [
189 fontSize: "16", 177 {
190 }, 178 type: "value",
179 name: "数量/个",
180 nameTextStyle: {
181 color: this.BASE_API.echartTextColor,
182 fontSize: "16",
183 },
184 axisLabel: {
185 textStyle: {
186 show: true,
187 color: this.BASE_API.echartTextColor,
188 fontSize: "16",
191 }, 189 },
192 }, 190 },
193 ], 191 },
192 ],
194 193
195 series: [ 194 series: [
196 { 195 {
197 type: "bar", 196 type: "bar",
198 //显示数值 197 //显示数值
199 itemStyle: { 198 itemStyle: {
200 normal: { 199 normal: {
201 label: { 200 label: {
202 show: true, //开启显示 201 show: true, //开启显示
203 position: "top", //在上方显示 202 position: "top", //在上方显示
204 },
205 }, 203 },
206 }, 204 },
207 barMaxWidth: '60',
208 data: chartArr.map(item => item.counts),
209 }, 205 },
210 ], 206 barMaxWidth: '60',
211 }); 207 data: chartArr.map(item => item.counts),
212 }, 208 },
209 ],
210 });
213 }, 211 },
214 }; 212 },
213 };
215 </script> 214 </script>
216 <style scoped lang="scss"> 215 <style scoped lang="scss">
217 .jktjDetail { 216 .jktjDetail {
218 height: 100%; 217 flex-direction: column;
219 display: flex;
220 flex-direction: column;
221 218
222 .rows { 219 .rows {
223 margin-left: 100px; 220 margin-left: 100px;
224 } 221 }
225
226 .center {
227 line-height: 50vh;
228 text-align: center;
229 color: #b6b5b5;
230 }
231
232 .echarts-box {
233 display: flex;
234 justify-content: center;
235 height: 500px;
236
237 .chart {
238 width: 100%;
239 height: 100%;
240 }
241 }
242 222
243 .form-clues-content { 223 .center {
244 flex: 1; 224 line-height: 50vh;
245 height: 100%; 225 text-align: center;
246 } 226 color: #b6b5b5;
247 } 227 }
228 }
248 </style> 229 </style>
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 <!-- 头部搜索 --> 4 <!-- 头部搜索 -->
5 <div class="from-clues-header"> 5 <div class="from-clues-header">
6 <el-form ref="ruleForm" :model="form" label-width="100px"> 6 <el-form ref="ruleForm" :model="form" label-width="100px">
7 <el-form-item v-if="BASE_API.THEME=='jg'"> 7 <el-form-item v-if="BASE_API.THEME == 'jg'">
8 <Breadcrumb /> 8 <Breadcrumb />
9 </el-form-item> 9 </el-form-item>
10 <el-row class="mb-5"> 10 <el-row class="mb-5">
......
1 /deep/.el-table--border th.el-table__cell {
2 border-bottom: 1px solid #458ACF !important;
3 }
4
5 /deep/.el-table--border .el-table__cell {
6 border-right: 1px solid #458ACF !important;
7 }
8
9 /deep/.el-table thead.is-group th.el-table__cell { 1 /deep/.el-table thead.is-group th.el-table__cell {
10 background-color: transparent !important; 2 background-color: transparent !important;
11 } 3 }
...@@ -17,9 +9,4 @@ ...@@ -17,9 +9,4 @@
17 9
18 .export-excel-wrapper { 10 .export-excel-wrapper {
19 display: inline-block; 11 display: inline-block;
20 }
21
22 /deep/.el-table--group,
23 .el-table--border {
24 border: 1px solid #458ACF !important;
25 } 12 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 <!-- 头部搜索 --> 4 <!-- 头部搜索 -->
5 <div class="from-clues-header"> 5 <div class="from-clues-header">
6 <el-form ref="ruleForm" :model="form" label-width="100px"> 6 <el-form ref="ruleForm" :model="form" label-width="100px">
7 <el-form-item> 7 <el-form-item v-if="BASE_API.THEME == 'jg'">
8 <Breadcrumb /> 8 <Breadcrumb />
9 </el-form-item> 9 </el-form-item>
10 <el-row class="mb-5"> 10 <el-row class="mb-5">
...@@ -32,8 +32,8 @@ ...@@ -32,8 +32,8 @@
32 </el-form> 32 </el-form>
33 </div> 33 </div>
34 <!-- 列表区域 --> 34 <!-- 列表区域 -->
35 <div class="from-clues-content"> 35 <div class="from-clues-content complex-header">
36 <lb-table ref="table" :header-cell-style="headerStyle1" :calcHeight="200" :pagination="false" 36 <lb-table ref="table" :header-cell-style="headerStyle1" :calcHeight="BASE_API.calcHeight" :pagination="false"
37 :column="tableData.columns" :data="tableData.data"> 37 :column="tableData.columns" :data="tableData.data">
38 </lb-table> 38 </lb-table>
39 39
...@@ -171,6 +171,7 @@ export default { ...@@ -171,6 +171,7 @@ export default {
171 </script> 171 </script>
172 <style scoped lang="scss"> 172 <style scoped lang="scss">
173 @import "../css/index.scss"; 173 @import "../css/index.scss";
174
174 /deep/th.el-table__cell { 175 /deep/th.el-table__cell {
175 height: 0 !important; 176 height: 0 !important;
176 } 177 }
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 <!-- 头部搜索 --> 4 <!-- 头部搜索 -->
5 <div class="from-clues-header"> 5 <div class="from-clues-header">
6 <el-form ref="ruleForm" :model="form" label-width="100px"> 6 <el-form ref="ruleForm" :model="form" label-width="100px">
7 <el-form-item> 7 <el-form-item v-if="BASE_API.THEME == 'jg'">
8 <Breadcrumb /> 8 <Breadcrumb />
9 </el-form-item> 9 </el-form-item>
10 <el-row class="mb-5"> 10 <el-row class="mb-5">
...@@ -33,10 +33,9 @@ ...@@ -33,10 +33,9 @@
33 </el-form> 33 </el-form>
34 </div> 34 </div>
35 <!-- 列表区域 --> 35 <!-- 列表区域 -->
36 <div class="from-clues-content"> 36 <div class="from-clues-content complex-header">
37 <lb-table ref="table" :pagination="false" :calcHeight="200" :column="tableData.columns" :data="tableData.data"> 37 <lb-table ref="table" :pagination="false" :calcHeight="BASE_API.calcHeight" :column="tableData.columns" :data="tableData.data">
38 </lb-table> 38 </lb-table>
39
40 <down-lb-table ref="table" v-show="false" :id="'mytable'" :downExcel="true" :pagination="false" 39 <down-lb-table ref="table" v-show="false" :id="'mytable'" :downExcel="true" :pagination="false"
41 :column="tableData.columns" :data="tableData.data" :downTitle="downTitle"> 40 :column="tableData.columns" :data="tableData.data" :downTitle="downTitle">
42 </down-lb-table> 41 </down-lb-table>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: yangwei 2 * @Author: yangwei
3 * @Date: 2023-02-17 16:32:50 3 * @Date: 2023-02-17 16:32:50
4 * @LastEditors: Please set LastEditors 4 * @LastEditors: Please set LastEditors
5 * @LastEditTime: 2023-03-15 10:42:21 5 * @LastEditTime: 2023-03-28 10:24:52
6 * @FilePath: \bdcjg-web\src\views\statistics\registerBookQuality\index.vue 6 * @FilePath: \bdcjg-web\src\views\statistics\registerBookQuality\index.vue
7 * @Description: 7 * @Description:
8 * 8 *
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
14 <!-- 头部搜索 --> 14 <!-- 头部搜索 -->
15 <div class="from-clues-header"> 15 <div class="from-clues-header">
16 <el-form ref="ruleForm" :model="form" label-width="100px"> 16 <el-form ref="ruleForm" :model="form" label-width="100px">
17 <el-form-item> 17 <el-form-item v-if="BASE_API.THEME == 'jg'">
18 <Breadcrumb /> 18 <Breadcrumb />
19 </el-form-item> 19 </el-form-item>
20 <el-row class="mb-5"> 20 <el-row class="mb-5">
...@@ -42,9 +42,9 @@ ...@@ -42,9 +42,9 @@
42 </el-form> 42 </el-form>
43 </div> 43 </div>
44 <!-- 列表区域 --> 44 <!-- 列表区域 -->
45 <div class="from-clues-content"> 45 <div class="from-clues-content complex-header">
46 <lb-table ref="table" :pagination="false" :border="true" :calcHeight="200" :header-cell-style="headerStyle" 46 <lb-table ref="table" :pagination="false" :border="true" :calcHeight="BASE_API.calcHeight"
47 :column="tableData.columns" :data="tableData.data"> 47 :header-cell-style="headerStyle" :column="tableData.columns" :data="tableData.data">
48 </lb-table> 48 </lb-table>
49 <down-lb-table ref="table" v-show="false" :id="'mytable'" :header-cell-style="headerStyle1" :downExcel="true" 49 <down-lb-table ref="table" v-show="false" :id="'mytable'" :header-cell-style="headerStyle1" :downExcel="true"
50 :pagination="false" :column="tableData.columns" :data="tableData.data" :downTitle="downTitle"> 50 :pagination="false" :column="tableData.columns" :data="tableData.data" :downTitle="downTitle">
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
11 <el-input v-model.trim="form.menuName" class="width100" clearable placeholder="菜单名称"></el-input> 11 <el-input v-model.trim="form.menuName" class="width100" clearable placeholder="菜单名称"></el-input>
12 </el-form-item> 12 </el-form-item>
13 </el-col> 13 </el-col>
14 <el-col :span="3" class="btnColRight"> 14 <el-col :span="20" class="btnColRight">
15 <btn nativeType="cx" @click="searchQuery">查询</btn> 15 <btn nativeType="cx" @click="searchQuery">查询</btn>
16 <btn nativeType="cx" @click="handleAdd()">新增菜单</btn> 16 <btn nativeType="cx" @click="handleAdd()">新增菜单</btn>
17 </el-col> 17 </el-col>
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
19 </el-form> 19 </el-form>
20 </div> 20 </div>
21 <div class="from-clues-content"> 21 <div class="from-clues-content">
22 <lb-table :pagination="false" :column="tableData.columns" :calcHeight="200" :data="tablelistData" row-key="id" 22 <lb-table :pagination="false" :column="tableData.columns" :calcHeight="BASE_API.calcHeight" :data="tablelistData" row-key="id"
23 default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"> 23 default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
24 24
25 </lb-table> 25 </lb-table>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <div class="timedTask from-clues"> 2 <div class="timedTask from-clues">
3 <div class="from-clues-header"> 3 <div class="from-clues-header">
4 <el-form ref="ruleForm" :model="form" label-width="100px"> 4 <el-form ref="ruleForm" :model="form" label-width="100px">
5 <el-form-item v-if="BASE_API.THEME=='jg'"> 5 <el-form-item v-if="BASE_API.THEME == 'jg'">
6 <Breadcrumb /> 6 <Breadcrumb />
7 </el-form-item> 7 </el-form-item>
8 <el-row class="mb-5"> 8 <el-row class="mb-5">
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
11 <el-input v-model.trim="form.rolesName" class="width100" clearable placeholder="角色名称"></el-input> 11 <el-input v-model.trim="form.rolesName" class="width100" clearable placeholder="角色名称"></el-input>
12 </el-form-item> 12 </el-form-item>
13 </el-col> 13 </el-col>
14 <el-col :span="3" class="btnColRight"> 14 <el-col :span="20" class="btnColRight">
15 <btn nativeType="cx" @click="searchQuery">查询</btn> 15 <btn nativeType="cx" @click="searchQuery">查询</btn>
16 <btn nativeType="cx" @click="handleAddEdit">增加角色</btn> 16 <btn nativeType="cx" @click="handleAddEdit">增加角色</btn>
17 </el-col> 17 </el-col>
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
19 </el-form> 19 </el-form>
20 </div> 20 </div>
21 <div class="from-clues-content"> 21 <div class="from-clues-content">
22 <lb-table :pagination="false" @size-change="handleSizeChange" :calcHeight="200" 22 <lb-table :pagination="false" @size-change="handleSizeChange" :calcHeight="BASE_API.calcHeight"
23 @p-current-change="handleCurrentChange" :column="tableData.columns" :data="listdata" :expand-row-keys="keyList" 23 @p-current-change="handleCurrentChange" :column="tableData.columns" :data="listdata" :expand-row-keys="keyList"
24 row-key="dictid"> 24 row-key="dictid">
25 </lb-table> 25 </lb-table>
......
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
2 <div class="timedTask from-clues"> 2 <div class="timedTask from-clues">
3 <div class="from-clues-header"> 3 <div class="from-clues-header">
4 <el-form ref="form" :model="form" label-width="80px"> 4 <el-form ref="form" :model="form" label-width="80px">
5 <el-form-item v-if="BASE_API.THEME=='jg'"> 5 <el-form-item v-if="BASE_API.THEME == 'jg'">
6 <Breadcrumb /> 6 <Breadcrumb />
7 </el-form-item> 7 </el-form-item>
8 <el-row> 8 <el-row class="mb-5">
9 <el-col :span="6"> 9 <el-col :span="6">
10 <el-form-item label="搜索标题"> 10 <el-form-item label="搜索标题">
11 <el-input v-model="form.jobName" placeholder="标题"></el-input> 11 <el-input v-model="form.jobName" placeholder="标题"></el-input>
...@@ -104,152 +104,207 @@ ...@@ -104,152 +104,207 @@
104 this.taskData = null 104 this.taskData = null
105 this.isDialog = true 105 this.isDialog = true
106 }, 106 },
107 resetSe () { 107 selectionList: [],
108 this.form.jobName = '' 108 tableData: {
109 this.featchData() 109 columns: [{
110 label: '序号',
111 type: 'index',
112 width: '50',
113 index: this.indexMethod,
114 }].concat(data.columns()).concat([
115 {
116 label: "操作",
117 width: 380,
118 render: (h, scope) => {
119 return (
120 <div>
121 <el-button type="text"
122 v-show={scope.row.jobStatus === 0}
123 class='btnColor'
124 icon="el-icon-video-pause"
125 onClick={() => { this.handleActive(scope.row) }}>激活
126 </el-button>
127 <el-button type="text"
128 v-show={scope.row.jobStatus === -1}
129 class='btnColor'
130 icon="el-icon-video-pause"
131 onClick={() => { this.recover(scope.row) }}>恢复
132 </el-button>
133 <el-button type="text"
134 icon="el-icon-edit"
135 class='btnColor'
136 onClick={() => { this.handleEdit(scope.row) }}>编辑
137 </el-button>
138 <el-button type="text"
139 icon="el-icon-delete"
140 class='successColor'
141 v-show={scope.row.jobStatus !== -1}
142 onClick={() => { this.handleDel(scope.row) }}>删除
143 </el-button>
144 </div>
145 );
146 },
147 },
148 ]),
149 data: []
110 }, 150 },
111 async featchData () { 151 pageData: {
112 try { 152 total: 0,
113 this.form = Object.assign(this.form, this.formData) 153 pageSize: 15,
114 let { result } = await sjsbTask.getTaskListByName(this.form) 154 current: 1,
115 this.tableData.data = result.list
116 } catch (error) {
117 this.message = error
118 }
119 }, 155 },
120 recover (row) { 156 },
121 this.$confirm('此操将进行恢复操作, 是否继续?', '提示', { 157 methods: {
122 confirmButtonText: '确定', 158 handleAdd () {
123 cancelButtonText: '取消', 159 this.taskData = null
124 type: 'warning', 160 this.isDialog = true
125 }) 161 },
126 .then(() => { 162 resetSe () {
127 sjsbTask.recover(row.jobId) 163 this.form.jobName = ''
128 .then((res) => { 164 this.featchData()
129 if ((res.code = 200)) { 165 },
130 this.$message({ 166 async featchData () {
131 type: 'success', 167 try {
132 message: res.message, 168 this.form = Object.assign(this.form, this.formData)
133 }) 169 let { result } = await sjsbTask.getTaskListByName(this.form)
134 this.featchData() 170 this.tableData.data = result.list
135 } 171 } catch (error) {
136 }) 172 this.message = error
137 .catch((error) => { 173 }
138 this.$alert(error, '提示', { 174 },
139 confirmButtonText: '确定', 175 recover (row) {
140 type: 'error' 176 this.$confirm('此操将进行恢复操作, 是否继续?', '提示', {
177 confirmButtonText: '确定',
178 cancelButtonText: '取消',
179 type: 'warning',
180 })
181 .then(() => {
182 sjsbTask.recover(row.jobId)
183 .then((res) => {
184 if ((res.code = 200)) {
185 this.$message({
186 type: 'success',
187 message: res.message,
141 }) 188 })
189 this.featchData()
190 }
191 })
192 .catch((error) => {
193 this.$alert(error, '提示', {
194 confirmButtonText: '确定',
195 type: 'error'
142 }) 196 })
143 })
144 .catch(() => {
145 this.$message({
146 type: 'info',
147 message: '已取消',
148 }) 197 })
198 })
199 .catch(() => {
200 this.$message({
201 type: 'info',
202 message: '已取消',
149 }) 203 })
150 },
151
152 handleActive (row) {
153 this.$confirm('此操将进行激活操作, 是否继续?', '提示', {
154 confirmButtonText: '确定',
155 cancelButtonText: '取消',
156 type: 'warning',
157 }) 204 })
158 .then(() => { 205 },
159 sjsbTask.active(row.jobId) 206
160 .then((res) => { 207 handleActive (row) {
161 if ((res.code = 200)) { 208 this.$confirm('此操将进行激活操作, 是否继续?', '提示', {
162 this.$message({ 209 confirmButtonText: '确定',
163 type: 'success', 210 cancelButtonText: '取消',
164 message: res.message, 211 type: 'warning',
165 }) 212 })
166 this.featchData() 213 .then(() => {
167 } 214 sjsbTask.active(row.jobId)
168 }) 215 .then((res) => {
169 .catch((error) => { 216 if ((res.code = 200)) {
170 this.$alert(error, '提示', { 217 this.$message({
171 confirmButtonText: '确定', 218 type: 'success',
172 type: 'error' 219 message: res.message,
173 }) 220 })
221 this.featchData()
222 }
223 })
224 .catch((error) => {
225 this.$alert(error, '提示', {
226 confirmButtonText: '确定',
227 type: 'error'
174 }) 228 })
175 })
176 .catch(() => {
177 this.$message({
178 type: 'info',
179 message: '已取消',
180 }) 229 })
230 })
231 .catch(() => {
232 this.$message({
233 type: 'info',
234 message: '已取消',
181 }) 235 })
182 },
183 // 暂停
184 handleSuspend (row) {
185 this.$confirm('此操将进行暂停操作, 是否继续?', '提示', {
186 confirmButtonText: '确定',
187 cancelButtonText: '取消',
188 type: 'warning',
189 }) 236 })
190 .then(() => { 237 },
191 sjsbTask.pauseJob(row.id) 238 // 暂停
192 .then((res) => { 239 handleSuspend (row) {
193 if ((res.code = 200)) { 240 this.$confirm('此操将进行暂停操作, 是否继续?', '提示', {
194 this.$message({ 241 confirmButtonText: '确定',
195 type: 'success', 242 cancelButtonText: '取消',
196 message: res.message, 243 type: 'warning',
197 }) 244 })
198 this.featchData() 245 .then(() => {
199 } 246 sjsbTask.pauseJob(row.id)
200 }) 247 .then((res) => {
201 .catch((error) => { 248 if ((res.code = 200)) {
202 this.$alert(error, '提示', { 249 this.$message({
203 confirmButtonText: '确定', 250 type: 'success',
204 type: 'error' 251 message: res.message,
205 }) 252 })
253 this.featchData()
254 }
255 })
256 .catch((error) => {
257 this.$alert(error, '提示', {
258 confirmButtonText: '确定',
259 type: 'error'
206 }) 260 })
207 })
208 .catch(() => {
209 this.$message({
210 type: 'info',
211 message: '已取消',
212 }) 261 })
262 })
263 .catch(() => {
264 this.$message({
265 type: 'info',
266 message: '已取消',
213 }) 267 })
214 },
215 handleEdit (row) {
216 this.taskData = row
217 this.isDialog = true
218 },
219 handleDel (row) {
220 this.$confirm('此操将进行删除操作, 是否继续?', '提示', {
221 confirmButtonText: '确定',
222 cancelButtonText: '取消',
223 type: 'warning',
224 }) 268 })
225 .then(() => { 269 },
226 sjsbTask.sjsbTaskRemove(row.jobId) 270 handleEdit (row) {
227 .then((res) => { 271 this.taskData = row
228 if ((res.code = 200)) { 272 this.isDialog = true
229 this.$message({ 273 },
230 type: 'success', 274 handleDel (row) {
231 message: res.message, 275 this.$confirm('此操将进行删除操作, 是否继续?', '提示', {
232 }) 276 confirmButtonText: '确定',
233 this.featchData() 277 cancelButtonText: '取消',
234 } 278 type: 'warning',
235 }) 279 })
236 .catch((error) => { 280 .then(() => {
237 this.$alert(error, '提示', { 281 sjsbTask.sjsbTaskRemove(row.jobId)
238 confirmButtonText: '确定', 282 .then((res) => {
239 type: 'error' 283 if ((res.code = 200)) {
284 this.$message({
285 type: 'success',
286 message: res.message,
240 }) 287 })
288 this.featchData()
289 }
290 })
291 .catch((error) => {
292 this.$alert(error, '提示', {
293 confirmButtonText: '确定',
294 type: 'error'
241 }) 295 })
242 })
243 .catch(() => {
244 this.$message({
245 type: 'info',
246 message: '已取消',
247 }) 296 })
297 })
298 .catch(() => {
299 this.$message({
300 type: 'info',
301 message: '已取消',
248 }) 302 })
249 } 303 })
250 } 304 }
251 } 305 }
306 }
252 </script> 307 </script>
253 <style scoped lang="scss"> 308 <style scoped lang="scss">
254 @import "~@/styles/mixin.scss"; 309 // @import "~@/styles/mixin.scss";
255 </style> 310 </style>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <div class="timedTask from-clues"> 2 <div class="timedTask from-clues">
3 <div class="from-clues-header"> 3 <div class="from-clues-header">
4 <el-form ref="ruleForm" :model="form" label-width="100px"> 4 <el-form ref="ruleForm" :model="form" label-width="100px">
5 <el-form-item v-if="BASE_API.THEME=='jg'"> 5 <el-form-item v-if="BASE_API.THEME == 'jg'">
6 <Breadcrumb /> 6 <Breadcrumb />
7 </el-form-item> 7 </el-form-item>
8 <el-row class="mb-5"> 8 <el-row class="mb-5">
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 </el-form-item> 22 </el-form-item>
23 </el-col> 23 </el-col>
24 <!-- 操作按钮 --> 24 <!-- 操作按钮 -->
25 <el-col :span="3" class="btnColRight"> 25 <el-col :span="12" class="btnColRight">
26 <btn nativeType="cx" @click="getTableList">查询</btn> 26 <btn nativeType="cx" @click="getTableList">查询</btn>
27 <btn nativeType="cx" @click="handleAdd">添加人员</btn> 27 <btn nativeType="cx" @click="handleAdd">添加人员</btn>
28 </el-col> 28 </el-col>
...@@ -31,7 +31,8 @@ ...@@ -31,7 +31,8 @@
31 </div> 31 </div>
32 <div class="from-clues-content"> 32 <div class="from-clues-content">
33 <lb-table :pagination="false" @size-change="handleSizeChange" @p-current-change="handleCurrentChange" 33 <lb-table :pagination="false" @size-change="handleSizeChange" @p-current-change="handleCurrentChange"
34 :column="tableData.columns" :calcHeight="200" :data="tableData.data" :expand-row-keys="keyList" row-key="dictid"> 34 :column="tableData.columns" :calcHeight="BASE_API.calcHeight" :data="tableData.data" :expand-row-keys="keyList"
35 row-key="dictid">
35 </lb-table> 36 </lb-table>
36 </div> 37 </div>
37 <EditDialog ref="dialogForm" v-model="isDialog" @ok="reloadTableData" /> 38 <EditDialog ref="dialogForm" v-model="isDialog" @ok="reloadTableData" />
...@@ -408,5 +409,5 @@ export default { ...@@ -408,5 +409,5 @@ export default {
408 }; 409 };
409 </script> 410 </script>
410 <style scoped lang="scss"> 411 <style scoped lang="scss">
411 @import "~@/styles/mixin.scss"; 412 @import "~@/styles/mixin.scss";
412 </style> 413 </style>
......