Skip to content

bdc / bdcsjsb-web

Go to a project
Toggle navigation
Toggle navigation pinning
76f02081 by renchao@pashanhoo.com
Options

feat:配置修改

1 parent 0348f007
Inline Side-by-side
Showing 10 changed files with 386 additions and 410 deletions
1 {
2 "TITLE": "汉中市数据上报系统",
3 "CODE": "BDCSJSB",
4 "AREARMAP": "610702",
5 "XZQ": "汉中市",
6 "SERVERAPI": "/bdcsjsb",
7 "calcHeight": 160,
8 "echartTextColor": "#4A4A4A",
9 "MANAGEMENTAPI": "http://192.168.2.38:8090/management",
10 "ip": "http://192.168.2.38:8027"
11 }
...\ No newline at end of file ...\ No newline at end of file
1 {
2 "TITLE": "玉树州数据上报系统",
3 "CODE": "BDCSJSB",
4 "AREARMAP": "632701",
5 "XZQ": "玉树州",
6 "SERVERAPI": "/bdcsjsb",
7 "calcHeight": 160,
8 "echartTextColor": "#4A4A4A",
9 "MANAGEMENTAPI": "http://192.168.2.38:8090/management",
10 "ip": "http://192.168.2.38:8027"
11 }
...\ No newline at end of file ...\ No newline at end of file
...@@ -4,8 +4,6 @@ ...@@ -4,8 +4,6 @@
4 "AREARMAP": "610702", 4 "AREARMAP": "610702",
5 "XZQ": "汉中市", 5 "XZQ": "汉中市",
6 "SERVERAPI": "/bdcsjsb", 6 "SERVERAPI": "/bdcsjsb",
7 "calcHeight": 160,
8 "echartTextColor": "#4A4A4A",
9 "MANAGEMENTAPI": "http://192.168.2.38:8090/management", 7 "MANAGEMENTAPI": "http://192.168.2.38:8090/management",
10 "ip": "http://192.168.2.38" 8 "ip": "http://192.168.2.38"
11 } 9 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -131,7 +131,7 @@ ...@@ -131,7 +131,7 @@
131 bottom: "-1%", 131 bottom: "-1%",
132 left: "center", 132 left: "center",
133 textStyle: { 133 textStyle: {
134 color: this.BASE_API.echartTextColor, 134 color: "#4A4A4A",
135 }, 135 },
136 }, 136 },
137 tooltip: { 137 tooltip: {
...@@ -232,7 +232,7 @@ ...@@ -232,7 +232,7 @@
232 top: 20, 232 top: 20,
233 textStyle: { 233 textStyle: {
234 show: true, 234 show: true,
235 color: this.BASE_API.echartTextColor, 235 color: "#4A4A4A",
236 fontSize: "16", 236 fontSize: "16",
237 }, 237 },
238 }, 238 },
...@@ -244,7 +244,7 @@ ...@@ -244,7 +244,7 @@
244 interval: 0, 244 interval: 0,
245 textStyle: { 245 textStyle: {
246 show: true, 246 show: true,
247 color: this.BASE_API.echartTextColor, 247 color: "#4A4A4A",
248 fontSize: "16", 248 fontSize: "16",
249 }, 249 },
250 }, 250 },
...@@ -261,7 +261,7 @@ ...@@ -261,7 +261,7 @@
261 axisLabel: { 261 axisLabel: {
262 textStyle: { 262 textStyle: {
263 show: true, 263 show: true,
264 color: this.BASE_API.echartTextColor, 264 color: "#4A4A4A",
265 fontSize: "16", 265 fontSize: "16",
266 }, 266 },
267 }, 267 },
......
...@@ -52,256 +52,256 @@ ...@@ -52,256 +52,256 @@
52 </template> 52 </template>
53 53
54 <script> 54 <script>
55 import { mapGetters } from "vuex"; 55 import { mapGetters } from "vuex";
56 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation"; 56 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
57 import business from "@/api/business"; 57 import business from "@/api/business";
58 export default { 58 export default {
59 name: "jktj", 59 name: "jktj",
60 data () { 60 data () {
61 return { 61 return {
62 // 开始日期限制 62 // 开始日期限制
63 pickerOptionsStart: { 63 pickerOptionsStart: {
64 disabledDate: (time) => { 64 disabledDate: (time) => {
65 if (this.form.endTime) { 65 if (this.form.endTime) {
66 return time.getTime() > new Date(this.form.endTime).getTime(); 66 return time.getTime() > new Date(this.form.endTime).getTime();
67 } 67 }
68 },
68 }, 69 },
69 }, 70 // 结束日期限制
70 // 结束日期限制 71 pickerOptionsEnd: {
71 pickerOptionsEnd: { 72 disabledDate: (time) => {
72 disabledDate: (time) => { 73 if (this.form.startTime) {
73 if (this.form.startTime) { 74 return time.getTime() < new Date(this.form.startTime).getTime();
74 return time.getTime() < new Date(this.form.startTime).getTime(); 75 }
75 } 76 },
76 }, 77 },
77 }, 78 recTypeArr: [],
78 recTypeArr: [], 79 chartData: [],
79 chartData: [], 80 // 搜索表单
80 // 搜索表单 81 form: {
81 form: { 82 startTime: getFirstDayOfSeason(),
82 startTime: getFirstDayOfSeason(), 83 endTime: timeFormat(new Date(), true),
83 endTime: timeFormat(new Date(), true), 84 qxdm: "",
84 qxdm: "", 85 },
85 }, 86 interval: 50
86 interval: 50
87 };
88 },
89 mounted () {
90 // 查询成功率
91 this.getSuucessRate();
92 },
93 computed: {
94 ...mapGetters(["dicData"]),
95 },
96 methods: {
97 endTimeChange (val) {
98 this.form.endTime = timeFormat(new Date(val), true)
99 },
100 async getSuucessRate () {
101 this.recTypeArr = [];
102 this.chartData = [];
103 let { result: res } = await business.getSuucessRate(
104 this.form.startTime,
105 this.form.endTime,
106 this.form.qxdm
107 );
108 this.chartData = res;
109
110 let maxData = Math.max.apply(Math, this.chartData.map(item => { return item.failure }))
111 this.interval = Math.ceil(maxData / 10)
112 //行政区代码过滤
113 res.length > 0 &&
114 res.forEach((item) => {
115 this.recTypeArr.push(item.recTypeName);
116 });
117 this.$nextTick(() => {
118 // 初始化图表
119 this.chartData.length && this.echartInit();
120 });
121 },
122 // 重置
123 resetForm () {
124 this.form = {
125 startTime: getFirstDayOfSeason(),
126 endTime: timeFormat(new Date(), true),
127 qxdm: "",
128 }; 87 };
88 },
89 mounted () {
90 // 查询成功率
129 this.getSuucessRate(); 91 this.getSuucessRate();
130 }, 92 },
131 echartInit () { 93 computed: {
132 let _this = this; 94 ...mapGetters(["dicData"]),
133 // 基于准备好的dom，初始化echarts实例 95 },
134 let myChart = this.$echarts.init(document.getElementById("myChart")); 96 methods: {
135 // 绘制图表 97 endTimeChange (val) {
136 myChart.setOption({ 98 this.form.endTime = timeFormat(new Date(val), true)
137 color: ["#13E5FF", "#C99E68", "#E873B2", "#ffaf48"], 99 },
138 tooltip: { 100 async getSuucessRate () {
139 trigger: "axis", 101 this.recTypeArr = [];
140 formatter: '{b}<br/>{a0}：{c0}个<br/>{a1}：{c1}个<br/>{a2}：{c2}%', 102 this.chartData = [];
141 axisPointer: { 103 let { result: res } = await business.getSuucessRate(
142 type: "cross", 104 this.form.startTime,
143 crossStyle: { 105 this.form.endTime,
144 color: this.BASE_API.echartTextColor, 106 this.form.qxdm
107 );
108 this.chartData = res;
109
110 let maxData = Math.max.apply(Math, this.chartData.map(item => { return item.failure }))
111 this.interval = Math.ceil(maxData / 10)
112 //行政区代码过滤
113 res.length > 0 &&
114 res.forEach((item) => {
115 this.recTypeArr.push(item.recTypeName);
116 });
117 this.$nextTick(() => {
118 // 初始化图表
119 this.chartData.length && this.echartInit();
120 });
121 },
122 // 重置
123 resetForm () {
124 this.form = {
125 startTime: getFirstDayOfSeason(),
126 endTime: timeFormat(new Date(), true),
127 qxdm: "",
128 };
129 this.getSuucessRate();
130 },
131 echartInit () {
132 let _this = this;
133 // 基于准备好的dom，初始化echarts实例
134 let myChart = this.$echarts.init(document.getElementById("myChart"));
135 // 绘制图表
136 myChart.setOption({
137 color: ["#13E5FF", "#C99E68", "#E873B2", "#ffaf48"],
138 tooltip: {
139 trigger: "axis",
140 formatter: '{b}<br/>{a0}：{c0}个<br/>{a1}：{c1}个<br/>{a2}：{c2}%',
141 axisPointer: {
142 type: "cross",
143 crossStyle: {
144 color: "#4A4A4A",
145 },
145 }, 146 },
146 }, 147 },
147 }, 148 legend: {
148 legend: { 149 data: ["成功", "失败", "成功率"],
149 data: ["成功", "失败", "成功率"], 150 top: '16',
150 top: '16', 151 textStyle: {
151 textStyle: { 152 show: true,
152 show: true, 153 color: "#4A4A4A",
153 color: this.BASE_API.echartTextColor, 154 fontSize: "16",
154 fontSize: "16",
155 },
156 },
157 label: {
158 color: 'inherit',
159 },
160 xAxis: [
161 {
162 type: "category",
163 data: _this.recTypeArr,
164 axisPointer: {
165 type: "shadow",
166 }, 155 },
167 axisLabel: { 156 },
168 textStyle: { 157 label: {
169 show: true, 158 color: 'inherit',
170 color: this.BASE_API.echartTextColor, 159 },
171 fontSize: "16", 160 xAxis: [
161 {
162 type: "category",
163 data: _this.recTypeArr,
164 axisPointer: {
165 type: "shadow",
172 }, 166 },
173 formatter: function (val) { 167 axisLabel: {
174 let c = document.createElement("canvas"); 168 textStyle: {
175 const ctx = c.getContext("2d"); 169 show: true,
176 const arr = val.split(""); 170 color: "#4A4A4A",
177 arr 171 fontSize: "16",
178 .map((item) => ctx.measureText(item).width) 172 },
179 .reduce((pre, next, index) => { 173 formatter: function (val) {
180 const nLen = pre + next; 174 let c = document.createElement("canvas");
181 if (nLen > 40) { 175 const ctx = c.getContext("2d");
182 arr[index - 1] += "..."; 176 const arr = val.split("");
183 return next; 177 arr
184 } else { 178 .map((item) => ctx.measureText(item).width)
185 return nLen; 179 .reduce((pre, next, index) => {
186 } 180 const nLen = pre + next;
181 if (nLen > 40) {
182 arr[index - 1] += "...";
183 return next;
184 } else {
185 return nLen;
186 }
187 });
188 c = null;
189 let ind = arr.findIndex((i) => {
190 return i.indexOf("...") > -1;
187 }); 191 });
188 c = null; 192 let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr;
189 let ind = arr.findIndex((i) => { 193 return newArr.join("");
190 return i.indexOf("...") > -1; 194 },
191 });
192 let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr;
193 return newArr.join("");
194 }, 195 },
195 }, 196 },
196 }, 197 ],
197 ], 198 yAxis: [
198 yAxis: [ 199 {
199 { 200 type: "value",
200 type: "value", 201 name: "数量/个",
201 name: "数量/个", 202 nameTextStyle: {
202 nameTextStyle: { 203 color: "#4A4A4A",
203 color: this.BASE_API.echartTextColor,
204 fontSize: "16",
205 },
206 // interval: this.interval,
207 axisLabel: {
208 formatter: "{value}",
209 textStyle: {
210 show: true,
211 color: this.BASE_API.echartTextColor,
212 fontSize: "16", 204 fontSize: "16",
213 }, 205 },
206 // interval: this.interval,
207 axisLabel: {
208 formatter: "{value}",
209 textStyle: {
210 show: true,
211 color: "#4A4A4A",
212 fontSize: "16",
213 },
214 },
214 }, 215 },
215 }, 216 {
216 { 217 type: "value",
217 type: "value", 218 name: "成功率",
218 name: "成功率", 219 nameTextStyle: {
219 nameTextStyle: { 220 color: "#4A4A4A",
220 color: this.BASE_API.echartTextColor,
221 fontSize: "16",
222 },
223 splitNumber: 2,
224 axisLabel: {
225 formatter: "{value} %",
226 textStyle: {
227 show: true,
228 color: this.BASE_API.echartTextColor,
229 fontSize: "16", 221 fontSize: "16",
230 }, 222 },
223 splitNumber: 2,
224 axisLabel: {
225 formatter: "{value} %",
226 textStyle: {
227 show: true,
228 color: "#4A4A4A",
229 fontSize: "16",
230 },
231 },
231 }, 232 },
232 }, 233 ],
233 ], 234 series: [
234 series: [ 235 {
235 { 236 name: "成功",
236 name: "成功", 237 type: "bar",
237 type: "bar", 238 //显示数值
238 //显示数值 239 itemStyle: {
239 itemStyle: { 240 normal: {
240 normal: { 241 label: {
241 label: { 242 show: true, //开启显示
242 show: true, //开启显示 243 position: "top", //在上方显示
243 position: "top", //在上方显示 244 },
244 }, 245 },
245 }, 246 },
247 barMaxWidth: '60',
248 data: this.chartData.map((item) => {
249 return item.success;
250 }),
246 }, 251 },
247 barMaxWidth: '60', 252 {
248 data: this.chartData.map((item) => { 253 name: "失败",
249 return item.success; 254 type: "bar",
250 }), 255 //显示数值
251 }, 256 itemStyle: {
252 { 257 normal: {
253 name: "失败", 258 label: {
254 type: "bar", 259 show: true, //开启显示
255 //显示数值 260 position: "top", //在上方显示
256 itemStyle: { 261 },
257 normal: {
258 label: {
259 show: true, //开启显示
260 position: "top", //在上方显示
261 }, 262 },
262 }, 263 },
264 barMaxWidth: '60',
265 data: this.chartData.map((item) => {
266 return item.failure;
267 }),
263 }, 268 },
264 barMaxWidth: '60', 269 {
265 data: this.chartData.map((item) => { 270 name: "成功率",
266 return item.failure; 271 //显示数值
267 }), 272 itemStyle: {
268 }, 273 normal: {
269 { 274 label: {
270 name: "成功率", 275 show: true, //开启显示
271 //显示数值 276 position: "top", //在上方显示
272 itemStyle: { 277 },
273 normal: {
274 label: {
275 show: true, //开启显示
276 position: "top", //在上方显示
277 }, 278 },
278 }, 279 },
280 type: "line",
281 barMaxWidth: '60',
282 yAxisIndex: 1,
283 data: this.chartData.map((item) => {
284 return item.rate;
285 }),
279 }, 286 },
280 type: "line", 287 ],
281 barMaxWidth: '60', 288 });
282 yAxisIndex: 1, 289 },
283 data: this.chartData.map((item) => {
284 return item.rate;
285 }),
286 },
287 ],
288 });
289 }, 290 },
290 }, 291 };
291 };
292 </script> 292 </script>
293 <style scoped lang="scss"> 293 <style scoped lang="scss">
294 .jktjDetail { 294 .jktjDetail {
295 flex-direction: column; 295 flex-direction: column;
296 296
297 .rows { 297 .rows {
298 margin-left: 100px; 298 margin-left: 100px;
299 } 299 }
300 300
301 .center { 301 .center {
302 line-height: 50vh; 302 line-height: 50vh;
303 text-align: center; 303 text-align: center;
304 color: #b6b5b5; 304 color: #b6b5b5;
305 }
305 } 306 }
306 }
307 </style> 307 </style>
......
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
38 </div> 38 </div>
39 <!-- 列表区域 --> 39 <!-- 列表区域 -->
40 <div class="from-clues-content complex-header"> 40 <div class="from-clues-content complex-header">
41 <lb-table ref="table" :header-cell-style="headerStyle1" :calcHeight="BASE_API.calcHeight" :pagination="false" 41 <lb-table ref="table" :header-cell-style="headerStyle1" :calcHeight="160" :pagination="false"
42 :column="tableData.columns" :data="tableData.data"> 42 :column="tableData.columns" :data="tableData.data">
43 </lb-table> 43 </lb-table>
44 44
......
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
39 </div> 39 </div>
40 <!-- 列表区域 --> 40 <!-- 列表区域 -->
41 <div class="from-clues-content complex-header"> 41 <div class="from-clues-content complex-header">
42 <lb-table ref="table" :pagination="false" :calcHeight="BASE_API.calcHeight" :column="tableData.columns" :data="tableData.data"> 42 <lb-table ref="table" :pagination="false" :calcHeight="160" :column="tableData.columns" :data="tableData.data">
43 </lb-table> 43 </lb-table>
44 <down-lb-table ref="table" v-show="false" :id="'mytable'" :downExcel="true" :pagination="false" 44 <down-lb-table ref="table" v-show="false" :id="'mytable'" :downExcel="true" :pagination="false"
45 :column="tableData.columns" :data="tableData.data" :downTitle="downTitle"> 45 :column="tableData.columns" :data="tableData.data" :downTitle="downTitle">
......
...@@ -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-05-11 10:11:15 5 * @LastEditTime: 2023-06-09 15:16:47
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 *
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
43 </div> 43 </div>
44 <!-- 列表区域 --> 44 <!-- 列表区域 -->
45 <div class="from-clues-content complex-header"> 45 <div class="from-clues-content complex-header">
46 <lb-table ref="table" :pagination="false" :border="true" :calcHeight="BASE_API.calcHeight" 46 <lb-table ref="table" :pagination="false" :border="true" :calcHeight="160"
47 :header-cell-style="headerStyle" :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"
......
...@@ -51,184 +51,184 @@ ...@@ -51,184 +51,184 @@
51 </div> 51 </div>
52 </template> 52 </template>
53 <script> 53 <script>
54 import { mapGetters } from "vuex"; 54 import { mapGetters } from "vuex";
55 import efficient from "@/api/efficient"; 55 import efficient from "@/api/efficient";
56 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation"; 56 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
57 export default { 57 export default {
58 name: "jktj", 58 name: "jktj",
59 data () { 59 data () {
60 return { 60 return {
61 // 开始日期限制 61 // 开始日期限制
62 pickerOptionsStart: { 62 pickerOptionsStart: {
63 disabledDate: (time) => { 63 disabledDate: (time) => {
64 if (this.form.endTime) { 64 if (this.form.endTime) {
65 return time.getTime() > new Date(this.form.endTime).getTime(); 65 return time.getTime() > new Date(this.form.endTime).getTime();
66 } 66 }
67 },
67 }, 68 },
68 }, 69 // 结束日期限制
69 // 结束日期限制 70 pickerOptionsEnd: {
70 pickerOptionsEnd: { 71 disabledDate: (time) => {
71 disabledDate: (time) => { 72 if (this.form.startTime) {
72 if (this.form.startTime) { 73 return time.getTime() < new Date(this.form.startTime).getTime();
73 return time.getTime() < new Date(this.form.startTime).getTime(); 74 }
74 } 75 },
75 }, 76 },
76 }, 77 // 搜索表单
77 // 搜索表单 78 valueTime: "",
78 valueTime: "", 79 // 搜索表单
79 // 搜索表单 80 form: {
80 form: { 81 startTime: getFirstDayOfSeason(),
81 startTime: getFirstDayOfSeason(), 82 endTime: timeFormat(new Date(), true),
82 endTime: timeFormat(new Date(), true), 83 qxdm: "",
83 qxdm: "", 84 },
84 }, 85 chartData: []
85 chartData: []
86 };
87 },
88 mounted () {
89 // 查询业务量
90 this.getProcessCounts();
91 },
92 computed: {
93 ...mapGetters(["dicData"]),
94 },
95 methods: {
96 endTimeChange (val) {
97 this.form.endTime = timeFormat(new Date(val), true)
98 },
99 async getProcessCounts () {
100 this.chartData = [];
101 let { result: res } = await efficient.getProcessCounts(
102 this.form.startTime,
103 this.form.endTime,
104 this.form.qxdm
105 );
106 //获取图表配置项需要的数据
107 this.chartData = res;
108 this.$nextTick(() => {
109 // 初始化图表
110 this.chartData.length && this.echartInit(this.chartData)
111 });
112
113 },
114 // 重置
115 resetForm () {
116 this.form = {
117 startTime: getFirstDayOfSeason(),
118 endTime: timeFormat(new Date(), true),
119 qxdm: ""
120 }; 86 };
87 },
88 mounted () {
89 // 查询业务量
121 this.getProcessCounts(); 90 this.getProcessCounts();
122 }, 91 },
123 //图表渲染 92 computed: {
124 echartInit (chartArr) { 93 ...mapGetters(["dicData"]),
125 // 基于准备好的dom，初始化echarts实例 94 },
126 let myChart = this.$echarts.init(document.getElementById("myChart")); 95 methods: {
127 // 绘制图表 96 endTimeChange (val) {
128 myChart.setOption({ 97 this.form.endTime = timeFormat(new Date(val), true)
129 color: ["#13E5FF"], 98 },
130 tooltip: { 99 async getProcessCounts () {
131 show: true, 100 this.chartData = [];
132 trigger: "axis", 101 let { result: res } = await efficient.getProcessCounts(
133 textStyle: { 102 this.form.startTime,
134 fontSize: 16, // 字体大小 103 this.form.endTime,
104 this.form.qxdm
105 );
106 //获取图表配置项需要的数据
107 this.chartData = res;
108 this.$nextTick(() => {
109 // 初始化图表
110 this.chartData.length && this.echartInit(this.chartData)
111 });
112
113 },
114 // 重置
115 resetForm () {
116 this.form = {
117 startTime: getFirstDayOfSeason(),
118 endTime: timeFormat(new Date(), true),
119 qxdm: ""
120 };
121 this.getProcessCounts();
122 },
123 //图表渲染
124 echartInit (chartArr) {
125 // 基于准备好的dom，初始化echarts实例
126 let myChart = this.$echarts.init(document.getElementById("myChart"));
127 // 绘制图表
128 myChart.setOption({
129 color: ["#13E5FF"],
130 tooltip: {
131 show: true,
132 trigger: "axis",
133 textStyle: {
134 fontSize: 16, // 字体大小
135 },
135 }, 136 },
136 }, 137 grid: {
137 grid: { 138 top: 120,
138 top: 120, 139 bottom: 100,
139 bottom: 100, 140 },
140 }, 141 label: {
141 label: { 142 color: 'inherit',
142 color: 'inherit', 143 },
143 }, 144 xAxis: [
144 xAxis: [ 145 {
145 { 146 type: "category",
146 type: "category", 147 data: chartArr.map(item => item.recTypeName),
147 data: chartArr.map(item => item.recTypeName), 148 axisLabel: {
148 axisLabel: { 149 interval: 0,
149 interval: 0, 150 rotate: 40,
150 rotate: 40, 151 formatter: function (val) {
151 formatter: function (val) { 152 let c = document.createElement("canvas");
152 let c = document.createElement("canvas"); 153 const ctx = c.getContext("2d");
153 const ctx = c.getContext("2d"); 154 const arr = val.split("");
154 const arr = val.split(""); 155 arr
155 arr 156 .map((item) => ctx.measureText(item).width)
156 .map((item) => ctx.measureText(item).width) 157 .reduce((pre, next, index) => {
157 .reduce((pre, next, index) => { 158 const nLen = pre + next;
158 const nLen = pre + next; 159 if (nLen > 60) {
159 if (nLen > 60) { 160 arr[index - 1] += "...";
160 arr[index - 1] += "..."; 161 return next;
161 return next; 162 } else {
162 } else { 163 return nLen;
163 return nLen; 164 }
164 } 165 });
166 c = null;
167 let ind = arr.findIndex((i) => {
168 return i.indexOf("...") > -1;
165 }); 169 });
166 c = null; 170 let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr;
167 let ind = arr.findIndex((i) => { 171 return newArr.join("");
168 return i.indexOf("...") > -1; 172 },
169 }); 173 textStyle: {
170 let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr; 174 show: true,
171 return newArr.join(""); 175 color: "#4A4A4A",
172 }, 176 fontSize: "16",
173 textStyle: { 177 },
174 show: true,
175 color: this.BASE_API.echartTextColor,
176 fontSize: "16",
177 }, 178 },
178 }, 179 },
179 }, 180 ],
180 ], 181 yAxis: [
181 yAxis: [ 182 {
182 { 183 type: "value",
183 type: "value", 184 name: "数量/个",
184 name: "数量/个", 185 nameTextStyle: {
185 nameTextStyle: { 186 color: "#4A4A4A",
186 color: this.BASE_API.echartTextColor,
187 fontSize: "16",
188 },
189 axisLabel: {
190 textStyle: {
191 show: true,
192 color: this.BASE_API.echartTextColor,
193 fontSize: "16", 187 fontSize: "16",
194 }, 188 },
189 axisLabel: {
190 textStyle: {
191 show: true,
192 color: "#4A4A4A",
193 fontSize: "16",
194 },
195 },
195 }, 196 },
196 }, 197 ],
197 ],
198 198
199 series: [ 199 series: [
200 { 200 {
201 type: "bar", 201 type: "bar",
202 //显示数值 202 //显示数值
203 itemStyle: { 203 itemStyle: {
204 normal: { 204 normal: {
205 label: { 205 label: {
206 show: true, //开启显示 206 show: true, //开启显示
207 position: "top", //在上方显示 207 position: "top", //在上方显示
208 },
208 }, 209 },
209 }, 210 },
211 barMaxWidth: '60',
212 data: chartArr.map(item => item.counts),
210 }, 213 },
211 barMaxWidth: '60', 214 ],
212 data: chartArr.map(item => item.counts), 215 });
213 }, 216 },
214 ],
215 });
216 }, 217 },
217 }, 218 };
218 };
219 </script> 219 </script>
220 <style scoped lang="scss"> 220 <style scoped lang="scss">
221 .jktjDetail { 221 .jktjDetail {
222 flex-direction: column; 222 flex-direction: column;
223 223
224 .rows { 224 .rows {
225 margin-left: 100px; 225 margin-left: 100px;
226 } 226 }
227 227
228 .center { 228 .center {
229 line-height: 50vh; 229 line-height: 50vh;
230 text-align: center; 230 text-align: center;
231 color: #b6b5b5; 231 color: #b6b5b5;
232 }
232 } 233 }
233 }
234 </style> 234 </style>
......
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
38 </el-form> 38 </el-form>
39 </div> 39 </div>
40 <div class="from-clues-content"> 40 <div class="from-clues-content">
41 <lb-table :pagination="false" @size-change="handleSizeChange" :calcHeight="BASE_API.calcHeight" 41 <lb-table :pagination="false" @size-change="handleSizeChange" :calcHeight="160"
42 @p-current-change="handleCurrentChange" :column="tableData.columns" :data="listdata" 42 @p-current-change="handleCurrentChange" :column="tableData.columns" :data="listdata"
43 row-key="dictid"> 43 row-key="dictid">
44 </lb-table> 44 </lb-table>
......