Merge branch 'master' into dev
Showing
58 changed files
with
1474 additions
and
1380 deletions
| ... | @@ -12,7 +12,7 @@ | ... | @@ -12,7 +12,7 @@ |
| 12 | "axios": "^0.21.1", | 12 | "axios": "^0.21.1", |
| 13 | "clipboard": "^2.0.11", | 13 | "clipboard": "^2.0.11", |
| 14 | "core-js": "^3.6.5", | 14 | "core-js": "^3.6.5", |
| 15 | "echarts": "^4.6.0", | 15 | "echarts": "^5.3.3", |
| 16 | "file-saver": "^2.0.5", | 16 | "file-saver": "^2.0.5", |
| 17 | "js-cookie": "2.2.0", | 17 | "js-cookie": "2.2.0", |
| 18 | "jsoneditor": "^9.9.2", | 18 | "jsoneditor": "^9.9.2", | ... | ... |
public/config.js
deleted
100644 → 0
public/config.json
0 → 100644
| 1 | /* | 1 | /* |
| 2 | * @Description: 这个是所有api的前缀配置文件 | 2 | * @Description: 这个是所有api的前缀配置文件 |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-03-01 15:35:44 | 4 | * @LastEditTime: 2023-03-16 13:37:11 |
| 5 | */ | 5 | */ |
| 6 | export default { | 6 | export default { |
| 7 | TITLE: '汉中市数据上报系统', | ||
| 8 | SERVERAPI: '/bdcsjsb', //赵千 | 7 | SERVERAPI: '/bdcsjsb', //赵千 |
| 9 | MANAGEMENTAPI: 'http://192.168.2.236/management' | 8 | MANAGEMENTAPI: 'http://192.168.2.236/management' |
| 10 | } | 9 | } | ... | ... |
| 1 | import Vue from 'vue' | ||
| 1 | import request from '@/utils/request' | 2 | import request from '@/utils/request' |
| 3 | console.log(Vue.prototype, Vue.prototype.$BASE_API); | ||
| 2 | import SERVER from './config' | 4 | import SERVER from './config' |
| 3 | // 获取用户信息 | 5 | // 获取用户信息 |
| 4 | export function getUserInfo () { | 6 | export function getUserInfo () { | ... | ... |
| ... | @@ -4,203 +4,194 @@ | ... | @@ -4,203 +4,194 @@ |
| 4 | </template> | 4 | </template> |
| 5 | 5 | ||
| 6 | <script> | 6 | <script> |
| 7 | import Echart from "@/common/echart"; | 7 | import Echart from "@/common/echart"; |
| 8 | export default { | 8 | export default { |
| 9 | data () { | 9 | data () { |
| 10 | return { | 10 | return { |
| 11 | xAxisData: {}, | 11 | xAxisData: {}, |
| 12 | yAxisData1: {}, | 12 | yAxisData1: {}, |
| 13 | yAxisData2: {}, | 13 | yAxisData2: {}, |
| 14 | yAxisData3: {}, | 14 | yAxisData3: {}, |
| 15 | options: {}, | 15 | options: {}, |
| 16 | }; | 16 | }; |
| 17 | }, | ||
| 18 | components: { | ||
| 19 | Echart, | ||
| 20 | }, | ||
| 21 | props: { | ||
| 22 | cdata: { | ||
| 23 | type: Object, | ||
| 24 | default: () => ({}), | ||
| 25 | }, | 17 | }, |
| 26 | }, | 18 | components: { |
| 27 | methods: { | 19 | Echart, |
| 28 | hexToRgba (hex, opacity) { | 20 | }, |
| 29 | let rgbaColor = ""; | 21 | props: { |
| 30 | let reg = /^#[\da-f]{6}$/i; | 22 | cdata: { |
| 31 | if (reg.test(hex)) { | 23 | type: Object, |
| 32 | rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt( | 24 | default: () => ({}), |
| 33 | "0x" + hex.slice(3, 5) | 25 | }, |
| 34 | )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`; | 26 | }, |
| 27 | methods: { | ||
| 28 | hexToRgba (hex, opacity) { | ||
| 29 | let rgbaColor = ""; | ||
| 30 | let reg = /^#[\da-f]{6}$/i; | ||
| 31 | if (reg.test(hex)) { | ||
| 32 | rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt( | ||
| 33 | "0x" + hex.slice(3, 5) | ||
| 34 | )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`; | ||
| 35 | } | ||
| 36 | return rgbaColor; | ||
| 37 | }, | ||
| 38 | fontSize (res) { | ||
| 39 | let docEl = document.documentElement, | ||
| 40 | clientWidth = | ||
| 41 | window.innerWidth || | ||
| 42 | document.documentElement.clientWidth || | ||
| 43 | document.body.clientWidth; | ||
| 44 | if (!clientWidth) return; | ||
| 45 | let fontSize = clientWidth / 1920; | ||
| 46 | return res * fontSize; | ||
| 35 | } | 47 | } |
| 36 | return rgbaColor; | ||
| 37 | }, | 48 | }, |
| 38 | fontSize(res) { | 49 | watch: { |
| 39 | let docEl = document.documentElement, | 50 | cdata: { |
| 40 | clientWidth = | 51 | handler (newData) { |
| 41 | window.innerWidth || | 52 | this.xAxisData = newData.echartData.map((v) => v.yearMonth); |
| 42 | document.documentElement.clientWidth || | 53 | this.yAxisData1 = newData.echartData.map((v) => v.receive); |
| 43 | document.body.clientWidth; | 54 | this.yAxisData2 = newData.echartData.map((v) => v.record); |
| 44 | if (!clientWidth) return; | 55 | this.yAxisData3 = newData.echartData.map((v) => v.report); |
| 45 | let fontSize = clientWidth / 1920; | 56 | this.options = { |
| 46 | return res * fontSize; | 57 | color: newData.color, |
| 47 | } | 58 | legend: { |
| 48 | }, | 59 | center: true, |
| 49 | watch: { | 60 | top: "20%", |
| 50 | cdata: { | 61 | data: newData.legendItem, |
| 51 | handler (newData) { | 62 | textStyle: { |
| 52 | this.xAxisData = newData.echartData.map((v) => v.yearMonth); | 63 | color: "#00DEFF", |
| 53 | this.yAxisData1 = newData.echartData.map((v) => v.receive); | 64 | fontSize: this.fontSize(12), |
| 54 | this.yAxisData2 = newData.echartData.map((v) => v.record); | 65 | }, |
| 55 | this.yAxisData3 = newData.echartData.map((v) => v.report); | ||
| 56 | this.options = { | ||
| 57 | color: newData.color, | ||
| 58 | legend: { | ||
| 59 | center: true, | ||
| 60 | top: "20%", | ||
| 61 | data: newData.legendItem, | ||
| 62 | textStyle: { | ||
| 63 | color: "#00DEFF", | ||
| 64 | fontSize:this.fontSize(12), | ||
| 65 | }, | 66 | }, |
| 66 | }, | 67 | // calculable: true, |
| 67 | // calculable: true, | 68 | tooltip: { |
| 68 | tooltip: { | 69 | trigger: "axis", |
| 69 | trigger: "axis", | 70 | formatter: function (params) { |
| 70 | formatter: function (params) { | 71 | let html = ""; |
| 71 | let html = ""; | 72 | params.forEach((v) => { |
| 72 | params.forEach((v) => { | 73 | html += `<div style="color: #000;font-size: 14px;line-height: 24px background-color: #000000"> |
| 73 | html += `<div style="color: #000;font-size: 14px;line-height: 24px background-color: #000000"> | ||
| 74 | <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${newData.color[v.componentIndex] | 74 | <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${newData.color[v.componentIndex] |
| 75 | };"></span> | 75 | };"></span> |
| 76 | ${v.seriesName}.${v.name} | 76 | ${v.seriesName}.${v.name} |
| 77 | <span style="color:${newData.color[v.componentIndex] | 77 | <span style="color:${newData.color[v.componentIndex] |
| 78 | };font-weight:700;font-size: 18px">${v.value}</span> | 78 | };font-weight:700;font-size: 18px">${v.value}</span> |
| 79 | 个`; | 79 | 个`; |
| 80 | }); | 80 | }); |
| 81 | return html; | 81 | return html; |
| 82 | }, | ||
| 83 | extraCssText: | ||
| 84 | "background: #85a2eb; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;", | ||
| 82 | }, | 85 | }, |
| 83 | extraCssText: | 86 | // grid: { |
| 84 | "background: #85a2eb; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;", | 87 | // top: 70, |
| 85 | }, | 88 | // containLabel: true |
| 86 | // grid: { | 89 | // }, |
| 87 | // top: 70, | 90 | grid: { |
| 88 | // containLabel: true | 91 | top: "30%", |
| 89 | // }, | 92 | left: "3%", |
| 90 | grid: { | 93 | right: "6%", |
| 91 | top: "30%", | 94 | bottom: "8%", |
| 92 | left: "3%", | 95 | containLabel: true, |
| 93 | right: "6%", | 96 | }, |
| 94 | bottom: "8%", | 97 | xAxis: [ |
| 95 | containLabel: true, | 98 | { |
| 96 | }, | 99 | type: "category", |
| 97 | xAxis: [ | 100 | axisLine: { |
| 98 | { | 101 | show: true, |
| 99 | type: "category", | 102 | lineStyle: { |
| 100 | axisLine: { | 103 | color: "#458ACF", |
| 101 | show: true, | 104 | }, |
| 102 | lineStyle: { | ||
| 103 | color: "#458ACF", | ||
| 104 | }, | 105 | }, |
| 105 | }, | 106 | axisLabel: { |
| 106 | axisLabel: { | 107 | inside: false, |
| 107 | inside: false, | 108 | textStyle: { |
| 108 | textStyle: { | 109 | color: "rgba(255, 255, 255,0.7)", // x轴颜色 |
| 109 | color: "rgba(255, 255, 255,0.7)", // x轴颜色 | 110 | fontWeight: "normal", |
| 110 | fontWeight: "normal", | 111 | fontSize: this.fontSize(12), |
| 111 | fontSize: this.fontSize(12), | 112 | lineHeight: this.fontSize(22), |
| 112 | lineHeight: this.fontSize(22), | 113 | }, |
| 113 | }, | 114 | }, |
| 115 | data: this.xAxisData, | ||
| 114 | }, | 116 | }, |
| 115 | data: this.xAxisData, | 117 | ], |
| 116 | }, | 118 | yAxis: [ |
| 117 | ], | 119 | { |
| 118 | yAxis: [ | 120 | type: "value", |
| 119 | { | 121 | axisLabel: { |
| 120 | type: "value", | 122 | textStyle: { |
| 121 | axisLabel: { | 123 | color: "rgba(255, 255, 255,0.7)", |
| 122 | textStyle: { | 124 | }, |
| 123 | color: "rgba(255, 255, 255,0.7)", | ||
| 124 | }, | 125 | }, |
| 125 | }, | 126 | splitLine: { |
| 126 | splitLine: { | 127 | show: true, |
| 127 | show: true, | 128 | lineStyle: { |
| 128 | lineStyle: { | 129 | color: "#458ACF", |
| 129 | color: "#458ACF", | 130 | }, |
| 130 | }, | 131 | }, |
| 131 | }, | 132 | axisLine: { |
| 132 | axisLine: { | 133 | show: true, |
| 133 | show: true, | 134 | lineStyle: { |
| 134 | lineStyle: { | 135 | color: "#458ACF", |
| 135 | color: "#458ACF", | 136 | }, |
| 137 | }, | ||
| 138 | axisTick: { | ||
| 139 | show: false, | ||
| 136 | }, | 140 | }, |
| 137 | }, | 141 | }, |
| 138 | axisTick: { | 142 | ], |
| 139 | show: false, | 143 | series: [ |
| 140 | }, | 144 | { |
| 141 | }, | 145 | name: newData.legendItem[0], |
| 142 | ], | 146 | type: "line", |
| 143 | series: [ | 147 | smooth: false, //是否平滑 |
| 144 | { | 148 | showSymbol: true, |
| 145 | name: newData.legendItem[0], | 149 | symbol: "circle", |
| 146 | type: "line", | 150 | symbolSize: this.fontSize(6), |
| 147 | smooth: false, //是否平滑 | 151 | zlevel: 3, |
| 148 | showSymbol: true, | 152 | lineStyle: { |
| 149 | symbol: "circle", | 153 | normal: { |
| 150 | symbolSize: this.fontSize(6), | 154 | color: newData.color[0] |
| 151 | zlevel: 3, | 155 | }, |
| 152 | lineStyle: { | ||
| 153 | normal: { | ||
| 154 | color: newData.color[0], | ||
| 155 | shadowBlur: 3, | ||
| 156 | shadowColor: this.hexToRgba(newData.color[0], 0.5), | ||
| 157 | shadowOffsetY: 0, | ||
| 158 | }, | 156 | }, |
| 157 | data: this.yAxisData1, | ||
| 159 | }, | 158 | }, |
| 160 | data: this.yAxisData1, | 159 | { |
| 161 | }, | 160 | name: newData.legendItem[1], |
| 162 | { | 161 | type: "line", |
| 163 | name: newData.legendItem[1], | 162 | smooth: false, |
| 164 | type: "line", | 163 | showSymbol: true, |
| 165 | smooth: false, | 164 | symbol: "circle", |
| 166 | showSymbol: true, | 165 | symbolSize: this.fontSize(8), |
| 167 | symbol: "circle", | 166 | zlevel: 3, |
| 168 | symbolSize: this.fontSize(8), | 167 | lineStyle: { |
| 169 | zlevel: 3, | 168 | normal: { |
| 170 | lineStyle: { | 169 | color: newData.color[1], |
| 171 | normal: { | 170 | }, |
| 172 | color: newData.color[1], | ||
| 173 | shadowBlur: 0, | ||
| 174 | shadowColor: this.hexToRgba(newData.color[1], 0.5), | ||
| 175 | shadowOffsetY: 0, | ||
| 176 | }, | 171 | }, |
| 172 | data: this.yAxisData2, | ||
| 177 | }, | 173 | }, |
| 178 | data: this.yAxisData2, | 174 | { |
| 179 | }, | 175 | name: newData.legendItem[2], |
| 180 | { | 176 | type: "line", |
| 181 | name: newData.legendItem[2], | 177 | smooth: false, |
| 182 | type: "line", | 178 | showSymbol: true, |
| 183 | smooth: false, | 179 | symbol: "circle", |
| 184 | showSymbol: true, | 180 | symbolSize: this.fontSize(8), |
| 185 | symbol: "circle", | 181 | zlevel: 3, |
| 186 | symbolSize: this.fontSize(8), | 182 | lineStyle: { |
| 187 | zlevel: 3, | 183 | normal: { |
| 188 | lineStyle: { | 184 | color: newData.color[2], |
| 189 | normal: { | 185 | }, |
| 190 | color: newData.color[2], | ||
| 191 | shadowBlur: 3, | ||
| 192 | shadowColor: this.hexToRgba(newData.color[2], 0.5), | ||
| 193 | shadowOffsetY: 0, | ||
| 194 | }, | 186 | }, |
| 187 | data: this.yAxisData3, | ||
| 195 | }, | 188 | }, |
| 196 | data: this.yAxisData3, | 189 | ], |
| 197 | }, | 190 | }; |
| 198 | ], | 191 | }, |
| 199 | }; | 192 | immediate: true, |
| 193 | deep: true, | ||
| 200 | }, | 194 | }, |
| 201 | immediate: true, | ||
| 202 | deep: true, | ||
| 203 | }, | 195 | }, |
| 204 | }, | 196 | }; |
| 205 | }; | ||
| 206 | </script> | 197 | </script> | ... | ... |
| ... | @@ -33,6 +33,20 @@ | ... | @@ -33,6 +33,20 @@ |
| 33 | axisPointer: { | 33 | axisPointer: { |
| 34 | type: "shadow", | 34 | type: "shadow", |
| 35 | }, | 35 | }, |
| 36 | formatter: function (params) { | ||
| 37 | let html = ""; | ||
| 38 | params.forEach((v) => { | ||
| 39 | html += `<div style="color: #000;font-size: 14px;line-height: 24px background-color: #000000"> | ||
| 40 | <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params[v.componentIndex].color | ||
| 41 | };"></span> | ||
| 42 | ${v.seriesName}.${v.name} | ||
| 43 | <span style="color:blue;font-weight:700;font-size: 18px">${v.value}</span> | ||
| 44 | 个`; | ||
| 45 | }); | ||
| 46 | return html; | ||
| 47 | }, | ||
| 48 | extraCssText: | ||
| 49 | "background: #85a2eb; border-radius: 2;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;", | ||
| 36 | }, | 50 | }, |
| 37 | grid: { | 51 | grid: { |
| 38 | left: "5%", | 52 | left: "5%", |
| ... | @@ -86,7 +100,7 @@ | ... | @@ -86,7 +100,7 @@ |
| 86 | }, | 100 | }, |
| 87 | itemStyle: { | 101 | itemStyle: { |
| 88 | normal: { | 102 | normal: { |
| 89 | color: "#5fba7d", | 103 | color: "#12ba7d", |
| 90 | }, | 104 | }, |
| 91 | }, | 105 | }, |
| 92 | data: newData.barData, | 106 | data: newData.barData, | ... | ... |
| ... | @@ -38,21 +38,8 @@ export default { | ... | @@ -38,21 +38,8 @@ export default { |
| 38 | handler (newData) { | 38 | handler (newData) { |
| 39 | let _this = this; | 39 | let _this = this; |
| 40 | // 设置点的位置(经纬度) | 40 | // 设置点的位置(经纬度) |
| 41 | const geoCoordMap = { | ||
| 42 | 汉台区: [107.03187, 33.06774, 20], | ||
| 43 | 南郑区: [106.94024, 33.00299, 20], | ||
| 44 | 城固县: [107.33367, 33.15661, 20], | ||
| 45 | 洋县: [107.545837, 33.222739, 20], | ||
| 46 | 西乡县: [107.76867, 32.98411, 20], | ||
| 47 | 镇巴县: [107.89648, 32.53487, 20], | ||
| 48 | 勉县: [106.673221, 33.153553, 20], | ||
| 49 | 留坝县: [106.92233, 33.61606, 20], | ||
| 50 | 佛坪县: [107.98974, 33.52496, 20], | ||
| 51 | 宁强县: [106.25958, 32.82881, 20], | ||
| 52 | 略阳县: [106.15399, 33.33009, 20], | ||
| 53 | }; | ||
| 54 | this.options = { | 41 | this.options = { |
| 55 | showLegendSymbol: true, | 42 | showLegendSymbol: false, |
| 56 | tooltip: { | 43 | tooltip: { |
| 57 | trigger: "item", | 44 | trigger: "item", |
| 58 | textStyle: { | 45 | textStyle: { |
| ... | @@ -72,24 +59,25 @@ export default { | ... | @@ -72,24 +59,25 @@ export default { |
| 72 | visualMap: { | 59 | visualMap: { |
| 73 | min: 0, | 60 | min: 0, |
| 74 | max: _this.max, | 61 | max: _this.max, |
| 75 | bottom: "12%", | 62 | bottom: "6%", |
| 76 | left: 50, | 63 | left: 50, |
| 77 | splitNumber: 6, | 64 | splitNumber: 6, |
| 78 | seriesIndex: [0], | 65 | seriesIndex: [0], |
| 79 | itemWidth: 20, // 每个图元的宽度 | 66 | itemWidth: 20, // 每个图元的宽度 |
| 80 | itemGap: 2, // 每两个图元之间的间隔距离，单位为px | 67 | itemGap: 4, // 每两个图元之间的间隔距离，单位为px |
| 68 | selectedMode: false, // 是否允许点击 | ||
| 81 | pieces: [ | 69 | pieces: [ |
| 82 | // 自定义每一段的范围，以及每一段的文字 | 70 | // 自定义每一段的范围，以及每一段的文字 |
| 83 | { gte: 100, label: "5000以上", color: "#035cf5" }, // 不指定 max，表示 max 为无限大（Infinity）。 | 71 | { gte: 5000, label: "≥5000", color: "#056BEC" }, // 不指定 max，表示 max 为无限大（Infinity）。 |
| 84 | { gte: 50, lte: 6000, label: "1000-5000", color: "#3375e4" }, | 72 | { gte: 1000, lte: 5000, label: "1000-5000", color: "#48BDE3" }, |
| 85 | { gte: 20, lte: 2000, label: "500-1000", color: "#6797ef" }, | 73 | { gte: 500, lte: 1000, label: "500-1000", color: "#0494F3" }, |
| 86 | { gte: 1, lte: 1000, label: "0-500", color: "#96b5ef" }, | 74 | { gte: 0, lte: 500, label: "≤500", color: "#1872CC" }, |
| 87 | ], | 75 | ], |
| 88 | textStyle: { | 76 | textStyle: { |
| 89 | color: "#737373", | 77 | color: "#CEF8FF", |
| 90 | }, | 78 | } |
| 91 | }, | 79 | }, |
| 92 | geo: { | 80 | geo: [{ |
| 93 | aspectScale: 1, //长宽比 | 81 | aspectScale: 1, //长宽比 |
| 94 | zoom: 1.1, | 82 | zoom: 1.1, |
| 95 | mapType: "", // 自定义扩展图表类型 | 83 | mapType: "", // 自定义扩展图表类型 |
| ... | @@ -99,14 +87,39 @@ export default { | ... | @@ -99,14 +87,39 @@ export default { |
| 99 | itemStyle: { | 87 | itemStyle: { |
| 100 | normal: { | 88 | normal: { |
| 101 | //阴影 | 89 | //阴影 |
| 102 | areaColor: "#5689FD ", | 90 | areaColor: "#5689FD", |
| 103 | shadowColor: "#21371d", | 91 | // shadowColor: "#21371d", |
| 104 | borderWidth: 0, | 92 | borderWidth: 1, |
| 105 | shadowOffsetX: 2, | 93 | // shadowOffsetX: 2, |
| 106 | shadowOffsetY: 25, | 94 | // shadowOffsetY: 20, |
| 107 | }, | 95 | }, |
| 108 | }, | 96 | }, |
| 109 | }, | 97 | },{ |
| 98 | aspectScale: 1, //长宽比 | ||
| 99 | zoom: 1.1, | ||
| 100 | mapType: "", // 自定义扩展图表类型 | ||
| 101 | top: "18%", | ||
| 102 | left: "10%", | ||
| 103 | map: "汉中市", | ||
| 104 | itemStyle: { | ||
| 105 | color:'#21371d', | ||
| 106 | areaColor: "#21371d", | ||
| 107 | borderWidth: 1, | ||
| 108 | borderColor:"#00A3CB", | ||
| 109 | shadowColor: "#01C5E9", | ||
| 110 | shadowBlur:10, | ||
| 111 | shadowOffsetX: 0, | ||
| 112 | shadowOffsetY: -12, | ||
| 113 | // normal: { | ||
| 114 | // //阴影 | ||
| 115 | // color:'#21371d', | ||
| 116 | // areaColor: "#21371d", | ||
| 117 | // }, | ||
| 118 | }, | ||
| 119 | emphasis: { | ||
| 120 | disabled:true | ||
| 121 | } | ||
| 122 | }], | ||
| 110 | series: [ | 123 | series: [ |
| 111 | { | 124 | { |
| 112 | type: "map", | 125 | type: "map", |
| ... | @@ -117,13 +130,37 @@ export default { | ... | @@ -117,13 +130,37 @@ export default { |
| 117 | left: "10%", | 130 | left: "10%", |
| 118 | itemStyle: { | 131 | itemStyle: { |
| 119 | normal: { | 132 | normal: { |
| 120 | areaColor: "rgba(19,54,162,.5)", | 133 | // areaColor: "rgba(19,54,162,.1)", |
| 121 | borderColor: "rgba(0,242,252,.5)", | 134 | borderWidth: 1.6, |
| 122 | borderWidth: 2, | 135 | // shadowBlur: 2, |
| 123 | shadowBlur: 1, | 136 | borderColor: "#9DFFFC", |
| 124 | borderColor: "rgb(155, 200, 200)", | 137 | // shadowColor: "#44f2fc", |
| 125 | shadowColor: "#44f2fc", | ||
| 126 | }, | 138 | }, |
| 139 | emphasis: { | ||
| 140 | // itemStyle:{ | ||
| 141 | // 地图区域的高亮颜色 | ||
| 142 | areaColor: { | ||
| 143 | type: 'linear', | ||
| 144 | x: 0, | ||
| 145 | y: 0, | ||
| 146 | x2: 0, | ||
| 147 | y2: 1, | ||
| 148 | colorStops: [{ | ||
| 149 | offset: 0, color: '#4DD1B4' // 0% 处的颜色 | ||
| 150 | }, { | ||
| 151 | offset: 1, color: '#15BFCE' // 100% 处的颜色 | ||
| 152 | }], | ||
| 153 | global: false // 缺省为 false | ||
| 154 | }, | ||
| 155 | borderType: 'dottod', | ||
| 156 | borderWidth: 0, | ||
| 157 | borderColor:'#F8F071', | ||
| 158 | shadowColor: '#000', | ||
| 159 | shadowBlur: 10, | ||
| 160 | shadowOffsetY:4 | ||
| 161 | // } | ||
| 162 | |||
| 163 | } | ||
| 127 | }, | 164 | }, |
| 128 | label: { | 165 | label: { |
| 129 | formatter: (params) => { | 166 | formatter: (params) => { |
| ... | @@ -141,12 +178,18 @@ export default { | ... | @@ -141,12 +178,18 @@ export default { |
| 141 | }, | 178 | }, |
| 142 | }, | 179 | }, |
| 143 | }, | 180 | }, |
| 181 | // 选中区域颜色 | ||
| 182 | // select:{ | ||
| 183 | // itemStyle:{ | ||
| 184 | // areaColor:'red' | ||
| 185 | // } | ||
| 186 | // }, | ||
| 144 | data: newData, | 187 | data: newData, |
| 145 | }, | 188 | }, |
| 146 | ], | 189 | ], |
| 147 | }; | 190 | }; |
| 148 | // 重新选择区域 | 191 | // 重新选择区域 |
| 149 | this.handleMapRandomSelect(); | 192 | // this.handleMapRandomSelect(); |
| 150 | }, | 193 | }, |
| 151 | 194 | ||
| 152 | immediate: true, | 195 | immediate: true, | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <Echart | 2 | <Echart :options="options" id="centreLeft1Chart" :key="key" height="1.0417rem" width="80%"></Echart> |
| 3 | :options="options" | ||
| 4 | id="centreLeft1Chart" | ||
| 5 | :key="key" | ||
| 6 | height="1.0417rem" | ||
| 7 | width="80%"></Echart> | ||
| 8 | </template> | 3 | </template> |
| 9 | <script> | 4 | <script> |
| 10 | import Echart from "@/common/echart"; | 5 | import Echart from "@/common/echart"; |
| ... | @@ -26,7 +21,7 @@ | ... | @@ -26,7 +21,7 @@ |
| 26 | watch: { | 21 | watch: { |
| 27 | cdata: { | 22 | cdata: { |
| 28 | handler (newData) { | 23 | handler (newData) { |
| 29 | console.log("newData", newData); | 24 | |
| 30 | this.options = { | 25 | this.options = { |
| 31 | color: [ | 26 | color: [ |
| 32 | "#37a2da", | 27 | "#37a2da", |
| ... | @@ -41,7 +36,20 @@ | ... | @@ -41,7 +36,20 @@ |
| 41 | ], | 36 | ], |
| 42 | tooltip: { | 37 | tooltip: { |
| 43 | trigger: "item", | 38 | trigger: "item", |
| 44 | formatter: "<br/>{b} : {c} ({d}%)", | 39 | formatter: function (params) { |
| 40 | let html = ""; | ||
| 41 | html += `<div style="font-size: 14px;line-height: 24px > | ||
| 42 | <span style="display:inline-block;"></span> | ||
| 43 | ${params.name} | ||
| 44 | <span style="color:blue;font-weight:700;font-size: 18px">${params.value}</span> | ||
| 45 | 个`; | ||
| 46 | return html; | ||
| 47 | }, | ||
| 48 | extraCssText: | ||
| 49 | "background: #85a2eb; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;", | ||
| 50 | }, | ||
| 51 | label: { | ||
| 52 | color: 'inherit', | ||
| 45 | }, | 53 | }, |
| 46 | series: [ | 54 | series: [ |
| 47 | { | 55 | { |
| ... | @@ -50,16 +58,18 @@ | ... | @@ -50,16 +58,18 @@ |
| 50 | radius: '60%', | 58 | radius: '60%', |
| 51 | avoidLabelOverlap: true, | 59 | avoidLabelOverlap: true, |
| 52 | label: { | 60 | label: { |
| 61 | color: 'inherit', | ||
| 53 | formatter: (params) => { | 62 | formatter: (params) => { |
| 54 | return `${params.name}`; | 63 | return `${params.name}`; |
| 55 | }, | 64 | }, |
| 56 | position: "outer", | 65 | position: "outer", |
| 57 | alignTo: "edge", | 66 | alignTo: "edge", |
| 58 | margin: 10, | 67 | margin: 10, |
| 68 | |||
| 59 | normal: { | 69 | normal: { |
| 60 | show: true, | 70 | show: true, |
| 61 | textStyle: { | 71 | textStyle: { |
| 62 | fontSize: 12 | 72 | fontSize: 12, |
| 63 | } | 73 | } |
| 64 | }, | 74 | }, |
| 65 | }, | 75 | }, | ... | ... |
| 1 | <!-- | ||
| 2 | * @Author: xiaomiao 1158771342@qq.com | ||
| 3 | * @Date: 2023-03-09 15:24:53 | ||
| 4 | * @LastEditors: xiaomiao 1158771342@qq.com | ||
| 5 | * @LastEditTime: 2023-03-16 15:58:03 | ||
| 6 | * @FilePath: \上报\bdcjg-web\src\components\Echart\Rose\index.vue | ||
| 7 | * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE | ||
| 8 | --> | ||
| 1 | <template> | 9 | <template> |
| 2 | <div> | 10 | <div> |
| 3 | <Chart :cdata="cdata" /> | 11 | <Chart :cdata="cdata" /> |
| ... | @@ -28,7 +36,7 @@ | ... | @@ -28,7 +36,7 @@ |
| 28 | methods: { | 36 | methods: { |
| 29 | async addhousetotal () { | 37 | async addhousetotal () { |
| 30 | if (this.cdata == 0) { | 38 | if (this.cdata == 0) { |
| 31 | this.getdata = []; | 39 | this.cdata = []; |
| 32 | try { | 40 | try { |
| 33 | let { result: res } = await work.addhousetotal(); | 41 | let { result: res } = await work.addhousetotal(); |
| 34 | res.map((item) => { | 42 | res.map((item) => { | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: | 2 | * @Description: |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-03-13 11:09:01 | 4 | * @LastEditTime: 2023-03-17 10:25:19 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <div class='result'> | 7 | <div class='result'> |
| ... | @@ -51,7 +51,7 @@ export default { | ... | @@ -51,7 +51,7 @@ export default { |
| 51 | height: 100%; | 51 | height: 100%; |
| 52 | 52 | ||
| 53 | /deep/.el-textarea__inner { | 53 | /deep/.el-textarea__inner { |
| 54 | height: 30vh !important; | 54 | height: 50%; |
| 55 | color: #ffffff; | 55 | color: #ffffff; |
| 56 | border: none !important; | 56 | border: none !important; |
| 57 | color: #ffffff; | 57 | color: #ffffff; |
| ... | @@ -62,6 +62,7 @@ export default { | ... | @@ -62,6 +62,7 @@ export default { |
| 62 | border-radius: 2px; | 62 | border-radius: 2px; |
| 63 | padding: 10px; | 63 | padding: 10px; |
| 64 | box-sizing: border-box; | 64 | box-sizing: border-box; |
| 65 | height: 49%; | ||
| 65 | 66 | ||
| 66 | p { | 67 | p { |
| 67 | color: #2997E8; | 68 | color: #2997E8; | ... | ... |
| ... | @@ -116,13 +116,13 @@ | ... | @@ -116,13 +116,13 @@ |
| 116 | <div class="editDialogBox-box JsonEditor" v-if="titleName == 'xyjg'"> | 116 | <div class="editDialogBox-box JsonEditor" v-if="titleName == 'xyjg'"> |
| 117 | <Xyjg :form-data='dataReport'></Xyjg> | 117 | <Xyjg :form-data='dataReport'></Xyjg> |
| 118 | </div> | 118 | </div> |
| 119 | </div> | 119 | <div class="d-center" v-if="!$store.state.business.Edit && titleName == 'sjmx'"> |
| 120 | <div class="d-center" v-if="!$store.state.business.Edit && titleName == 'sjmx'"> | 120 | <btn nativeType="cz" @click="dialogVisible = false">取 消</btn> |
| 121 | <btn nativeType="cz" @click="dialogVisible = false">取 消</btn> | 121 | <btn nativeType="cx" @click="submitForm">保 存</btn> |
| 122 | <btn nativeType="cx" @click="submitForm">保 存</btn> | 122 | </div> |
| 123 | </div> | 123 | <div class="d-center" v-if="!$store.state.business.Edit && titleName == 'xml'"> |
| 124 | <div class="d-center" v-if="!$store.state.business.Edit && titleName == 'xml'"> | 124 | <btn nativeType="cx" @click="handleResubmit">重新上报</btn> |
| 125 | <btn nativeType="cx" @click="handleResubmit">重新上报</btn> | 125 | </div> |
| 126 | </div> | 126 | </div> |
| 127 | </el-dialog> | 127 | </el-dialog> |
| 128 | </template> | 128 | </template> | ... | ... |
| ... | @@ -94,7 +94,6 @@ | ... | @@ -94,7 +94,6 @@ |
| 94 | }, | 94 | }, |
| 95 | onJsonSave () { | 95 | onJsonSave () { |
| 96 | const value = this.resultInfo | 96 | const value = this.resultInfo |
| 97 | console.log(this.resultInfo, 'resultInfo') | ||
| 98 | if (this.hasJsonFlag === false) { | 97 | if (this.hasJsonFlag === false) { |
| 99 | this.$message.error({ message: 'json格式验证失败', showClose: true }) | 98 | this.$message.error({ message: 'json格式验证失败', showClose: true }) |
| 100 | // alert("json验证失败") | 99 | // alert("json验证失败") |
| ... | @@ -112,7 +111,6 @@ | ... | @@ -112,7 +111,6 @@ |
| 112 | this.dialogVisible = true | 111 | this.dialogVisible = true |
| 113 | }, | 112 | }, |
| 114 | cancel () { | 113 | cancel () { |
| 115 | console.log(this.tmpResultInfo, 'tmpResultInfo') | ||
| 116 | this.resultInfo = this.tmpResultInfo | 114 | this.resultInfo = this.tmpResultInfo |
| 117 | this.dialogVisible = false | 115 | this.dialogVisible = false |
| 118 | }, | 116 | }, | ... | ... |
| ... | @@ -134,9 +134,8 @@ export default { | ... | @@ -134,9 +134,8 @@ export default { |
| 134 | @extend .xuanzhong; | 134 | @extend .xuanzhong; |
| 135 | } | 135 | } |
| 136 | 136 | ||
| 137 | /deep/.el-menu-item.is-active { | 137 | /deep/.is-active { |
| 138 | @extend .xuanzhong; | 138 | @extend .xuanzhong; |
| 139 | |||
| 140 | } | 139 | } |
| 141 | 140 | ||
| 142 | .navbar { | 141 | .navbar { | ... | ... |
| ... | @@ -9,40 +9,37 @@ | ... | @@ -9,40 +9,37 @@ |
| 9 | </template> | 9 | </template> |
| 10 | 10 | ||
| 11 | <script> | 11 | <script> |
| 12 | import { mapGetters } from 'vuex' | 12 | import { mapGetters } from 'vuex' |
| 13 | import Logo from './Logo' | 13 | import Logo from './Logo' |
| 14 | import SidebarItem from './SidebarItem' | 14 | import SidebarItem from './SidebarItem' |
| 15 | import variables from '@/styles/variables.scss' | 15 | import variables from '@/styles/variables.scss' |
| 16 | import { asyncRoutes } from '@/router' | 16 | import { asyncRoutes } from '@/router' |
| 17 | export default { | 17 | export default { |
| 18 | components: { SidebarItem, Logo }, | 18 | components: { SidebarItem, Logo }, |
| 19 | computed: { | 19 | computed: { |
| 20 | ...mapGetters(['permission_routes', 'sidebar']), | 20 | ...mapGetters(['permission_routes', 'sidebar']), |
| 21 | 21 | ||
| 22 | activeMenu () { | 22 | activeMenu () { |
| 23 | 23 | ||
| 24 | const route = this.$route | 24 | const route = this.$route |
| 25 | const { meta, path } = route | 25 | const { meta, path } = route |
| 26 | if (meta.activeMenu) { | 26 | if (meta.activeMenu) { |
| 27 | return meta.activeMenu | 27 | return meta.activeMenu |
| 28 | } | ||
| 29 | return path | ||
| 30 | }, | ||
| 31 | variables () { | ||
| 32 | return variables | ||
| 33 | }, | ||
| 34 | asyncRoutes () { | ||
| 35 | return asyncRoutes.slice(0, 3) | ||
| 36 | } | 28 | } |
| 29 | return path | ||
| 37 | }, | 30 | }, |
| 38 | mounted () { | 31 | variables () { |
| 39 | console.log("permission_routes", this.permission_routes); | 32 | return variables |
| 33 | }, | ||
| 34 | asyncRoutes () { | ||
| 35 | return asyncRoutes.slice(0, 3) | ||
| 40 | } | 36 | } |
| 41 | } | 37 | } |
| 38 | } | ||
| 42 | </script> | 39 | </script> |
| 43 | <style scoped lang="scss"> | 40 | <style scoped lang="scss"> |
| 44 | .el-menu--horizontal { | 41 | .el-menu--horizontal { |
| 45 | display: flex; | 42 | display: flex; |
| 46 | background: none !important; | 43 | background: none !important; |
| 47 | } | 44 | } |
| 48 | </style> | 45 | </style> | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: | 2 | * @Description: |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-03-10 14:59:43 | 4 | * @LastEditTime: 2023-03-16 11:15:48 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <div class="app-wrapper jgWrapper"> | 7 | <div class="app-wrapper jgWrapper"> |
| ... | @@ -12,61 +12,60 @@ | ... | @@ -12,61 +12,60 @@ |
| 12 | </div> | 12 | </div> |
| 13 | </template> | 13 | </template> |
| 14 | <script> | 14 | <script> |
| 15 | import { AppMain, Navbar, Sidebar, TagsView } from './components' | 15 | import { AppMain, Navbar, Sidebar, TagsView } from './components' |
| 16 | import ResizeMixin from './mixin/ResizeHandler' | 16 | import ResizeMixin from './mixin/ResizeHandler' |
| 17 | import { mapState } from 'vuex' | 17 | import { mapState } from 'vuex' |
| 18 | export default { | 18 | export default { |
| 19 | name: 'Layout', | 19 | name: 'Layout', |
| 20 | components: { | 20 | components: { |
| 21 | AppMain, | 21 | AppMain, |
| 22 | Navbar, | 22 | Navbar, |
| 23 | Sidebar, | 23 | Sidebar, |
| 24 | TagsView | 24 | TagsView |
| 25 | }, | 25 | }, |
| 26 | created () { | 26 | created () { |
| 27 | this.$store.dispatch("products/setData", "BDCJGPT"); | 27 | this.$store.dispatch("products/setData", "BDCJGPT"); |
| 28 | console.log("ZOULEJG"); | 28 | }, |
| 29 | }, | 29 | mixins: [ResizeMixin], |
| 30 | mixins: [ResizeMixin], | 30 | computed: { |
| 31 | computed: { | 31 | ...mapState({ |
| 32 | ...mapState({ | 32 | sidebar: state => state.app.sidebar, |
| 33 | sidebar: state => state.app.sidebar, | 33 | needTagsView: state => state.settings.tagsView, |
| 34 | needTagsView: state => state.settings.tagsView, | 34 | fixedHeader: state => state.settings.fixedHeader |
| 35 | fixedHeader: state => state.settings.fixedHeader | 35 | }) |
| 36 | }) | ||
| 37 | } | ||
| 38 | } | 36 | } |
| 37 | } | ||
| 39 | </script> | 38 | </script> |
| 40 | <style lang="scss"> | 39 | <style lang="scss"> |
| 41 | @import "~@/styles/jgSidebar.scss"; | 40 | @import "~@/styles/jgSidebar.scss"; |
| 42 | </style> | 41 | </style> |
| 43 | <style lang="scss" scoped> | 42 | <style lang="scss" scoped> |
| 44 | @import "~@/styles/mixin.scss"; | 43 | @import "~@/styles/mixin.scss"; |
| 45 | 44 | ||
| 46 | .app-wrapper { | 45 | .app-wrapper { |
| 47 | @include clearfix; | 46 | @include clearfix; |
| 48 | position: relative; | 47 | position: relative; |
| 49 | height: 100%; | 48 | height: 100%; |
| 50 | width: 100%; | 49 | width: 100%; |
| 51 | min-width: 1280px; | 50 | min-width: 1280px; |
| 52 | background: url("~@/image/bg.png") no-repeat; | 51 | background: url("~@/image/bg.png") no-repeat; |
| 53 | background-size: 100% 100%; | 52 | background-size: 100% 100%; |
| 54 | padding: 12px; | 53 | padding: 12px; |
| 55 | box-sizing: border-box; | 54 | box-sizing: border-box; |
| 56 | 55 | ||
| 57 | &.mobile.openSidebar { | 56 | &.mobile.openSidebar { |
| 58 | position: fixed; | 57 | position: fixed; |
| 59 | top: 0; | 58 | top: 0; |
| 60 | } | ||
| 61 | } | 59 | } |
| 60 | } | ||
| 62 | 61 | ||
| 63 | .appMain { | 62 | .appMain { |
| 64 | // min-width: 1280px; | 63 | // min-width: 1280px; |
| 65 | height: calc(100vh - 101px) !important; | 64 | height: calc(100vh - 101px) !important; |
| 66 | box-sizing: border-box; | 65 | box-sizing: border-box; |
| 67 | 66 | ||
| 68 | .app-main { | 67 | .app-main { |
| 69 | height: 100%; | 68 | height: 100%; |
| 70 | } | ||
| 71 | } | 69 | } |
| 70 | } | ||
| 72 | </style> | 71 | </style> | ... | ... |
| ... | @@ -13,66 +13,65 @@ | ... | @@ -13,66 +13,65 @@ |
| 13 | </div> | 13 | </div> |
| 14 | </template> | 14 | </template> |
| 15 | <script> | 15 | <script> |
| 16 | import { AppMain, Navbar, Sidebar, TagsView } from './components' | 16 | import { AppMain, Navbar, Sidebar, TagsView } from './components' |
| 17 | import ResizeMixin from './mixin/ResizeHandler' | 17 | import ResizeMixin from './mixin/ResizeHandler' |
| 18 | import { mapState } from 'vuex' | 18 | import { mapState } from 'vuex' |
| 19 | export default { | 19 | export default { |
| 20 | name: 'Layout', | 20 | name: 'Layout', |
| 21 | components: { | 21 | components: { |
| 22 | AppMain, | 22 | AppMain, |
| 23 | Navbar, | 23 | Navbar, |
| 24 | Sidebar, | 24 | Sidebar, |
| 25 | TagsView | 25 | TagsView |
| 26 | }, | 26 | }, |
| 27 | mixins: [ResizeMixin], | 27 | mixins: [ResizeMixin], |
| 28 | created () { | 28 | created () { |
| 29 | this.$store.dispatch("products/setData", "BDCSBPT"); | 29 | this.$store.dispatch("products/setData", "BDCSBPT"); |
| 30 | console.log("ZOULEJG"); | 30 | }, |
| 31 | }, | 31 | computed: { |
| 32 | computed: { | 32 | ...mapState({ |
| 33 | ...mapState({ | 33 | sidebar: state => state.app.sidebar, |
| 34 | sidebar: state => state.app.sidebar, | 34 | needTagsView: state => state.settings.tagsView, |
| 35 | needTagsView: state => state.settings.tagsView, | 35 | fixedHeader: state => state.settings.fixedHeader |
| 36 | fixedHeader: state => state.settings.fixedHeader | 36 | }) |
| 37 | }) | ||
| 38 | } | ||
| 39 | } | 37 | } |
| 38 | } | ||
| 40 | </script> | 39 | </script> |
| 41 | <style lang="scss"> | 40 | <style lang="scss"> |
| 42 | @import "~@/styles/mixin.scss"; | 41 | @import "~@/styles/mixin.scss"; |
| 43 | @import "~@/styles/sbSidebar.scss"; | 42 | @import "~@/styles/sbSidebar.scss"; |
| 44 | 43 | ||
| 45 | .app-wrapper { | 44 | .app-wrapper { |
| 46 | @include clearfix; | 45 | @include clearfix; |
| 47 | position: relative; | 46 | position: relative; |
| 48 | height: 100%; | 47 | height: 100%; |
| 49 | width: 100%; | 48 | width: 100%; |
| 50 | // background-color: $containerbg; | 49 | // background-color: $containerbg; |
| 51 | padding: 0; | 50 | padding: 0; |
| 52 | 51 | ||
| 53 | &.mobile.openSidebar { | 52 | &.mobile.openSidebar { |
| 54 | position: fixed; | 53 | position: fixed; |
| 55 | top: 0; | ||
| 56 | } | ||
| 57 | } | ||
| 58 | |||
| 59 | .drawer-bg { | ||
| 60 | background: #000; | ||
| 61 | opacity: 0.3; | ||
| 62 | width: 100%; | ||
| 63 | top: 0; | 54 | top: 0; |
| 64 | height: 100%; | ||
| 65 | position: absolute; | ||
| 66 | z-index: 999; | ||
| 67 | } | 55 | } |
| 56 | } | ||
| 68 | 57 | ||
| 69 | .fixed-header { | 58 | .drawer-bg { |
| 70 | width: 100%; | 59 | background: #000; |
| 71 | transition: width 0.28s; | 60 | opacity: 0.3; |
| 72 | } | 61 | width: 100%; |
| 62 | top: 0; | ||
| 63 | height: 100%; | ||
| 64 | position: absolute; | ||
| 65 | z-index: 999; | ||
| 66 | } | ||
| 73 | 67 | ||
| 74 | .el-dropdown-menu--small { | 68 | .fixed-header { |
| 75 | padding: 0; | 69 | width: 100%; |
| 76 | width: 5px; | 70 | transition: width 0.28s; |
| 77 | } | 71 | } |
| 72 | |||
| 73 | .el-dropdown-menu--small { | ||
| 74 | padding: 0; | ||
| 75 | width: 5px; | ||
| 76 | } | ||
| 78 | </style> | 77 | </style> | ... | ... |
| 1 | /* | ||
| 2 | * @Author: yangwei | ||
| 3 | * @Date: 2023-01-16 09:10:12 | ||
| 4 | * @LastEditors: yangwei | ||
| 5 | * @LastEditTime: 2023-03-16 09:33:27 | ||
| 6 | * @FilePath: \bdcjg-web\src\main.js | ||
| 7 | * @Description: | ||
| 8 | * | ||
| 9 | * Copyright (c) 2023 by ${yangwei}, All Rights Reserved. | ||
| 10 | */ | ||
| 1 | import Vue from 'vue' | 11 | import Vue from 'vue' |
| 2 | import App from './App' | 12 | import App from './App' |
| 3 | import 'normalize.css/normalize.css' // a modern alternative to CSS resets | 13 | import 'normalize.css/normalize.css' // a modern alternative to CSS resets |
| ... | @@ -6,9 +16,10 @@ import '@/styles/element-variables.scss' | ... | @@ -6,9 +16,10 @@ import '@/styles/element-variables.scss' |
| 6 | import '@/styles/index.scss' | 16 | import '@/styles/index.scss' |
| 7 | import Base from './base' // 全局组件引入 | 17 | import Base from './base' // 全局组件引入 |
| 8 | import mixin from '@/utils/mixin/theme.js' | 18 | import mixin from '@/utils/mixin/theme.js' |
| 9 | 19 | import axios from 'axios' | |
| 10 | import dataV from '@jiaminghi/data-view'; | 20 | import dataV from '@jiaminghi/data-view'; |
| 11 | import echarts from "echarts" | 21 | import * as echarts from "echarts" |
| 22 | |||
| 12 | import { startLoadingAddCount, endLoadingSubCount } from './utils/requestLoading' | 23 | import { startLoadingAddCount, endLoadingSubCount } from './utils/requestLoading' |
| 13 | Vue.mixin(mixin) | 24 | Vue.mixin(mixin) |
| 14 | import './directive/vxe-table' | 25 | import './directive/vxe-table' |
| ... | @@ -41,15 +52,21 @@ import './image/icons' // icon | ... | @@ -41,15 +52,21 @@ import './image/icons' // icon |
| 41 | import store from './store' | 52 | import store from './store' |
| 42 | import router from './router' | 53 | import router from './router' |
| 43 | import _ from 'lodash' | 54 | import _ from 'lodash' |
| 44 | import './permission' // permission control | ||
| 45 | Vue.use(Element, { size: 'small', zIndex: 1000 }) | 55 | Vue.use(Element, { size: 'small', zIndex: 1000 }) |
| 46 | Vue.use(Base) | 56 | Vue.use(Base) |
| 47 | Vue.component('icon', Icon); | 57 | Vue.component('icon', Icon); |
| 48 | Vue.prototype.$echarts = echarts | 58 | Vue.prototype.$echarts = echarts |
| 49 | Vue.use(dataV) | 59 | Vue.use(dataV) |
| 50 | new Vue({ | 60 | axios.get("./config.json") |
| 51 | el: '#app', | 61 | .then((res) => { |
| 52 | router, | 62 | Vue.prototype.BASE_API = res.data |
| 53 | store, | 63 | require('./permission') |
| 54 | render: h => h(App) | 64 | new Vue({ |
| 55 | }) | 65 | el: '#app', |
| 66 | router, | ||
| 67 | store, | ||
| 68 | render: h => h(App) | ||
| 69 | }) | ||
| 70 | |||
| 71 | }) | ||
| 72 | ... | ... |
| ... | @@ -58,7 +58,7 @@ export const TableListMixin = { | ... | @@ -58,7 +58,7 @@ export const TableListMixin = { |
| 58 | } | 58 | } |
| 59 | }) | 59 | }) |
| 60 | .catch(error => { | 60 | .catch(error => { |
| 61 | console.log('errrrrrorrrrr', error) | 61 | console.log('error', error) |
| 62 | this.loading = false | 62 | this.loading = false |
| 63 | }) | 63 | }) |
| 64 | }, | 64 | }, |
| ... | @@ -83,7 +83,6 @@ export const TableListMixin = { | ... | @@ -83,7 +83,6 @@ export const TableListMixin = { |
| 83 | if (this.queryOptions !== '') { | 83 | if (this.queryOptions !== '') { |
| 84 | this.queryParam.queryOptions = JSON.stringify(this.queryOptions) | 84 | this.queryParam.queryOptions = JSON.stringify(this.queryOptions) |
| 85 | } | 85 | } |
| 86 | // console.log(this.$filterNullObj(this.queryParam), '查询条件') | ||
| 87 | return this.$filterNullObj(this.queryParam) | 86 | return this.$filterNullObj(this.queryParam) |
| 88 | }, | 87 | }, |
| 89 | // 新增 | 88 | // 新增 | ... | ... |
| ... | @@ -69,9 +69,8 @@ | ... | @@ -69,9 +69,8 @@ |
| 69 | 69 | ||
| 70 | .regularHeight { | 70 | .regularHeight { |
| 71 | display: flex; | 71 | display: flex; |
| 72 | flex: 1; | ||
| 73 | height: 100%; | ||
| 74 | flex-direction: column; | 72 | flex-direction: column; |
| 73 | height: 87vh; | ||
| 75 | 74 | ||
| 76 | .editDialogBox-con, | 75 | .editDialogBox-con, |
| 77 | .JsonEditor { | 76 | .JsonEditor { | ... | ... |
| ... | @@ -139,7 +139,7 @@ input[type="number"] { | ... | @@ -139,7 +139,7 @@ input[type="number"] { |
| 139 | } | 139 | } |
| 140 | 140 | ||
| 141 | ::-webkit-scrollbar-thumb { | 141 | ::-webkit-scrollbar-thumb { |
| 142 | background: #458ACF; | 142 | background: rgba(69, 138, 207,.3); |
| 143 | background-clip: padding-box; | 143 | background-clip: padding-box; |
| 144 | min-height: 28px; | 144 | min-height: 28px; |
| 145 | -webkit-border-radius: 6px; | 145 | -webkit-border-radius: 6px; |
| ... | @@ -148,7 +148,12 @@ input[type="number"] { | ... | @@ -148,7 +148,12 @@ input[type="number"] { |
| 148 | } | 148 | } |
| 149 | 149 | ||
| 150 | ::-webkit-scrollbar-thumb:hover { | 150 | ::-webkit-scrollbar-thumb:hover { |
| 151 | background: #458ACF; | 151 | background: rgba(69, 138, 207,.3); |
| 152 | } | ||
| 153 | // 滚动条位置 | ||
| 154 | .el-scrollbar__wrap{ | ||
| 155 | // margin-bottom: 0px!important; | ||
| 156 | margin-right: 0px!important; | ||
| 152 | } | 157 | } |
| 153 | 158 | ||
| 154 | // element 样式补丁 | 159 | // element 样式补丁 |
| ... | @@ -329,6 +334,7 @@ table td { | ... | @@ -329,6 +334,7 @@ table td { |
| 329 | padding-top: 13px; | 334 | padding-top: 13px; |
| 330 | padding-bottom: 13px; | 335 | padding-bottom: 13px; |
| 331 | border: none; | 336 | border: none; |
| 337 | |||
| 332 | margin-top: 5px !important; | 338 | margin-top: 5px !important; |
| 333 | 339 | ||
| 334 | table { | 340 | table { |
| ... | @@ -396,11 +402,18 @@ table td { | ... | @@ -396,11 +402,18 @@ table td { |
| 396 | color: #DBFAFF | 402 | color: #DBFAFF |
| 397 | } | 403 | } |
| 398 | 404 | ||
| 405 | .el-date-table td span:hover { | ||
| 406 | background-color: #074487; | ||
| 407 | border: 1px solid #02D9FD; | ||
| 408 | color: #02D9FD | ||
| 409 | } | ||
| 410 | |||
| 399 | .el-date-table td.current:not(.disabled) span { | 411 | .el-date-table td.current:not(.disabled) span { |
| 400 | background-color: #074487; | 412 | background-color: #074487; |
| 401 | // border:1px solid saddlebrown; | 413 | // border:1px solid saddlebrown; |
| 402 | box-shadow: inset 0 0 7px #02D9FD; | 414 | box-shadow: inset 0 0 7px #02D9FD; |
| 403 | border: 1px solid #02D9FD; | 415 | border: 1px solid #02D9FD; |
| 416 | color: #02D9FD | ||
| 404 | } | 417 | } |
| 405 | 418 | ||
| 406 | } | 419 | } |
| ... | @@ -479,6 +492,12 @@ table td { | ... | @@ -479,6 +492,12 @@ table td { |
| 479 | } | 492 | } |
| 480 | } | 493 | } |
| 481 | 494 | ||
| 495 | .el-button--text { | ||
| 496 | display: flex; | ||
| 497 | align-items: center; | ||
| 498 | justify-content: center; | ||
| 499 | } | ||
| 500 | |||
| 482 | // 时间组件input框部分 | 501 | // 时间组件input框部分 |
| 483 | .el-date-editor { | 502 | .el-date-editor { |
| 484 | 503 | ||
| ... | @@ -504,7 +523,7 @@ table td { | ... | @@ -504,7 +523,7 @@ table td { |
| 504 | height: 26px; | 523 | height: 26px; |
| 505 | line-height: 26px; | 524 | line-height: 26px; |
| 506 | background-size: 100% 100%; | 525 | background-size: 100% 100%; |
| 507 | margin-bottom: 7px; | 526 | margin-bottom: 12px; |
| 508 | color: #02D9FD !important; | 527 | color: #02D9FD !important; |
| 509 | } | 528 | } |
| 510 | 529 | ||
| ... | @@ -515,6 +534,7 @@ table td { | ... | @@ -515,6 +534,7 @@ table td { |
| 515 | .el-menu--horizontal .el-menu--popup .el-menu-item:not(.is-disabled):hover, | 534 | .el-menu--horizontal .el-menu--popup .el-menu-item:not(.is-disabled):hover, |
| 516 | .el-select-dropdown__item:hover, | 535 | .el-select-dropdown__item:hover, |
| 517 | .el-select-dropdown__item.selected, | 536 | .el-select-dropdown__item.selected, |
| 537 | .el-menu--horizontal .el-menu .el-menu-item.is-active, | ||
| 518 | .el-menu--horizontal .el-menu--popup .el-menu-item:not(.is-disabled):focus { | 538 | .el-menu--horizontal .el-menu--popup .el-menu-item:not(.is-disabled):focus { |
| 519 | background: url("~@/image/xzslitembg.png") no-repeat; | 539 | background: url("~@/image/xzslitembg.png") no-repeat; |
| 520 | background-size: 100% 100%; | 540 | background-size: 100% 100%; |
| ... | @@ -571,4 +591,9 @@ table td { | ... | @@ -571,4 +591,9 @@ table td { |
| 571 | background-origin: initial; | 591 | background-origin: initial; |
| 572 | background-clip: initial; | 592 | background-clip: initial; |
| 573 | background-color: rgb(80, 142, 235); | 593 | background-color: rgb(80, 142, 235); |
| 574 | } | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 594 | } | ||
| 595 | |||
| 596 | // 下拉框 | ||
| 597 | .el-menu--popup { | ||
| 598 | padding-top: 20px; | ||
| 599 | } | ... | ... |
| ... | @@ -137,7 +137,8 @@ ul li { | ... | @@ -137,7 +137,8 @@ ul li { |
| 137 | } | 137 | } |
| 138 | 138 | ||
| 139 | .mb-5 { | 139 | .mb-5 { |
| 140 | margin-bottom: 5px; | 140 | margin-bottom: 10px!important; |
| 141 | margin-top: 10px!important; | ||
| 141 | } | 142 | } |
| 142 | 143 | ||
| 143 | .pr-5 { | 144 | .pr-5 { |
| ... | @@ -149,7 +150,8 @@ ul li { | ... | @@ -149,7 +150,8 @@ ul li { |
| 149 | } | 150 | } |
| 150 | 151 | ||
| 151 | .mt-10 { | 152 | .mt-10 { |
| 152 | margin-top: 10px; | 153 | margin-top: 20px!important; |
| 154 | margin-bottom: 5px!important; | ||
| 153 | } | 155 | } |
| 154 | 156 | ||
| 155 | //flex 公共样式 | 157 | //flex 公共样式 |
| ... | @@ -365,14 +367,14 @@ aside { | ... | @@ -365,14 +367,14 @@ aside { |
| 365 | height: 28px; | 367 | height: 28px; |
| 366 | background: rgba(255, 255, 255, 0.1); | 368 | background: rgba(255, 255, 255, 0.1); |
| 367 | border-radius: 16px; | 369 | border-radius: 16px; |
| 368 | color: #04c0a7; | 370 | color: #b0e4dd; |
| 369 | } | 371 | } |
| 370 | .resetbtnColor { | 372 | .resetbtnColor { |
| 371 | width: 64px; | 373 | width: 64px; |
| 372 | height: 28px; | 374 | height: 28px; |
| 373 | background: rgba(255, 255, 255, 0.1); | 375 | background: rgba(255, 255, 255, 0.1); |
| 374 | border-radius: 16px; | 376 | border-radius: 16px; |
| 375 | color: #04c0a7; | 377 | color: #A5CBDA; |
| 376 | } | 378 | } |
| 377 | .movebtnColor { | 379 | .movebtnColor { |
| 378 | width: 64px; | 380 | width: 64px; | ... | ... |
| 1 | /* | 1 | /* |
| 2 | * @Description: | 2 | * @Description: |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-03-15 17:14:42 | 4 | * @LastEditTime: 2023-03-16 13:31:27 |
| 5 | */ | 5 | */ |
| 6 | // 获取浏览器便签标题 | 6 | // 获取浏览器便签标题 |
| 7 | import config from '/public/config' | 7 | import Vue from 'vue' |
| 8 | const title = config.TITLE | 8 | const title = Vue.prototype.BASE_API.TITLE |
| 9 | 9 | ||
| 10 | export default function getPageTitle (pageTitle) { | 10 | export default function getPageTitle (pageTitle) { |
| 11 | if (pageTitle) { | 11 | if (pageTitle) { | ... | ... |
| ... | @@ -114,7 +114,7 @@ export function js_strto_time (str_time) { | ... | @@ -114,7 +114,7 @@ export function js_strto_time (str_time) { |
| 114 | var date = new Date(str) // 构造一个日期型数据，值为传入的字符串 | 114 | var date = new Date(str) // 构造一个日期型数据，值为传入的字符串 |
| 115 | return date.getTime() | 115 | return date.getTime() |
| 116 | } | 116 | } |
| 117 | // 时间戳转日期 | 117 | // 时间戳转日期 |
| 118 | export function timestampToTime (timestamp) { | 118 | export function timestampToTime (timestamp) { |
| 119 | var date = new Date(timestamp)//时间戳为10位需*1000，时间戳为13位的话不需乘1000 | 119 | var date = new Date(timestamp)//时间戳为10位需*1000，时间戳为13位的话不需乘1000 |
| 120 | var Y = date.getFullYear() + '-' | 120 | var Y = date.getFullYear() + '-' |
| ... | @@ -216,7 +216,6 @@ function addRangeBorder (range, ws) { | ... | @@ -216,7 +216,6 @@ function addRangeBorder (range, ws) { |
| 216 | range.forEach(item => { | 216 | range.forEach(item => { |
| 217 | let startColNumber = Number(item.s.r), endColNumber = Number(item.e.r); | 217 | let startColNumber = Number(item.s.r), endColNumber = Number(item.e.r); |
| 218 | let startRowNumber = Number(item.s.c), endRowNumber = Number(item.e.c); | 218 | let startRowNumber = Number(item.s.c), endRowNumber = Number(item.e.c); |
| 219 | console.log(startColNumber); | ||
| 220 | const test = ws[arr[startRowNumber] + (startColNumber + 1)]; | 219 | const test = ws[arr[startRowNumber] + (startColNumber + 1)]; |
| 221 | for (let col = startColNumber; col <= endColNumber; col++) { | 220 | for (let col = startColNumber; col <= endColNumber; col++) { |
| 222 | for (let row = startRowNumber; row <= endRowNumber; row++) { | 221 | for (let row = startRowNumber; row <= endRowNumber; row++) { | ... | ... |
| ... | @@ -5,7 +5,7 @@ | ... | @@ -5,7 +5,7 @@ |
| 5 | <el-form-item> | 5 | <el-form-item> |
| 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="5"> | 9 | <el-col :span="5"> |
| 10 | <el-form-item label="行政区" label-width="80px"> | 10 | <el-form-item label="行政区" label-width="80px"> |
| 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | ... | ... |
| ... | @@ -5,7 +5,7 @@ | ... | @@ -5,7 +5,7 @@ |
| 5 | <el-form-item> | 5 | <el-form-item> |
| 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="行政区" label-width="80px"> | 10 | <el-form-item label="行政区" label-width="80px"> |
| 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | ... | ... |
| ... | @@ -5,7 +5,7 @@ | ... | @@ -5,7 +5,7 @@ |
| 5 | <el-form-item> | 5 | <el-form-item> |
| 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="5"> | 9 | <el-col :span="5"> |
| 10 | <el-form-item label="行政区" label-width="80px"> | 10 | <el-form-item label="行政区" label-width="80px"> |
| 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> |
| ... | @@ -81,84 +81,84 @@ | ... | @@ -81,84 +81,84 @@ |
| 81 | </template> | 81 | </template> |
| 82 | 82 | ||
| 83 | <script> | 83 | <script> |
| 84 | // 地役权登记 | 84 | // 地役权登记 |
| 85 | import data from "./data" | 85 | import data from "./data" |
| 86 | import qlfQlDyiq from '@/api/qlfQlDyiq' | 86 | import qlfQlDyiq from '@/api/qlfQlDyiq' |
| 87 | import tableMixin from '@/mixins/tableMixin.js' | 87 | import tableMixin from '@/mixins/tableMixin.js' |
| 88 | import treeSelect from '@/components/TreeSelect.vue' | 88 | import treeSelect from '@/components/TreeSelect.vue' |
| 89 | export default { | 89 | export default { |
| 90 | name: "dyiq", | 90 | name: "dyiq", |
| 91 | mixins: [tableMixin], | 91 | mixins: [tableMixin], |
| 92 | components: { | 92 | components: { |
| 93 | treeSelect | 93 | treeSelect |
| 94 | }, | 94 | }, |
| 95 | data () { | 95 | data () { |
| 96 | return { | 96 | return { |
| 97 | form: { | 97 | form: { |
| 98 | XZQDM: '', | 98 | XZQDM: '', |
| 99 | QSZT: '', | 99 | QSZT: '', |
| 100 | ZL: '', | 100 | ZL: '', |
| 101 | BDCQZH: '', | 101 | BDCQZH: '', |
| 102 | QLR: '', | 102 | QLR: '', |
| 103 | BDCDYH: '', | 103 | BDCDYH: '', |
| 104 | // 供役地不动产单元号 | 104 | // 供役地不动产单元号 |
| 105 | GYDBDCDYH: '', | 105 | GYDBDCDYH: '', |
| 106 | // 需役地不动产单元号 | 106 | // 需役地不动产单元号 |
| 107 | XYDBDCDYH: '', | 107 | XYDBDCDYH: '', |
| 108 | currentPage: 1 | 108 | currentPage: 1 |
| 109 | }, | 109 | }, |
| 110 | tableData: { | 110 | tableData: { |
| 111 | columns: [{ | 111 | columns: [{ |
| 112 | label: '序号', | 112 | label: '序号', |
| 113 | type: 'index', | 113 | type: 'index', |
| 114 | width: '50', | 114 | width: '50', |
| 115 | index: this.indexMethod, | 115 | index: this.indexMethod, |
| 116 | }].concat(data.columns()).concat([ | 116 | }].concat(data.columns()).concat([ |
| 117 | { | 117 | { |
| 118 | label: "操作", | 118 | label: "操作", |
| 119 | width: 80, | 119 | width: 80, |
| 120 | render: (h, scope) => { | 120 | render: (h, scope) => { |
| 121 | return ( | 121 | return ( |
| 122 | <div> | 122 | <div> |
| 123 | <el-button | 123 | <el-button |
| 124 | type="text" | 124 | type="text" |
| 125 | class='btnColor' | 125 | class='btnColor' |
| 126 | onClick={() => { this.handleEdit(scope.row) }} | 126 | onClick={() => { this.handleEdit(scope.row) }} |
| 127 | > | 127 | > |
| 128 | 详情 | 128 | 详情 |
| 129 | </el-button> | 129 | </el-button> |
| 130 | </div> | 130 | </div> |
| 131 | ) | 131 | ) |
| 132 | } | ||
| 132 | } | 133 | } |
| 133 | } | 134 | ]), |
| 134 | ]), | 135 | data: [] |
| 135 | data: [] | 136 | }, |
| 136 | }, | 137 | pageData: { |
| 137 | pageData: { | 138 | total: 0, |
| 138 | total: 0, | 139 | pageSize: 15, |
| 139 | pageSize: 15, | 140 | current: 1, |
| 140 | current: 1, | 141 | } |
| 141 | } | 142 | } |
| 142 | } | 143 | }, |
| 143 | }, | 144 | methods: { |
| 144 | methods: { | 145 | async featchData () { |
| 145 | async featchData () { | 146 | try { |
| 146 | try { | 147 | this.form = Object.assign(this.form, this.formData) |
| 147 | this.form = Object.assign(this.form, this.formData) | 148 | let { result: { list, total, pages: pageSize, pageNum: current } |
| 148 | let { result: { list, total, pages: pageSize, pageNum: current } | 149 | } = await qlfQlDyiq.getQlfQlDyiqList(this.form) |
| 149 | } = await qlfQlDyiq.getQlfQlDyiqList(this.form) | 150 | this.tableData.data = list |
| 150 | this.tableData.data = list | 151 | this.pageData = { |
| 151 | this.pageData = { | 152 | pageSize, |
| 152 | pageSize, | 153 | current, |
| 153 | current, | 154 | total |
| 154 | total | 155 | } |
| 156 | } catch (error) { | ||
| 155 | } | 157 | } |
| 156 | } catch (error) { | ||
| 157 | } | 158 | } |
| 158 | } | 159 | } |
| 159 | } | 160 | } |
| 160 | } | ||
| 161 | </script> | 161 | </script> |
| 162 | <style scoped lang="scss"> | 162 | <style scoped lang="scss"> |
| 163 | // @import "~@/styles/public.scss"; | 163 | // @import "~@/styles/public.scss"; |
| 164 | </style> | 164 | </style> | ... | ... |
| ... | @@ -5,7 +5,7 @@ | ... | @@ -5,7 +5,7 @@ |
| 5 | <el-form-item> | 5 | <el-form-item> |
| 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-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | ... | ... |
| ... | @@ -5,7 +5,7 @@ | ... | @@ -5,7 +5,7 @@ |
| 5 | <el-form-item> | 5 | <el-form-item> |
| 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="5"> | 9 | <el-col :span="5"> |
| 10 | <el-form-item label="业务号"> | 10 | <el-form-item label="业务号"> |
| 11 | <el-input v-model="form.YWH" clearable placeholder="业务号"></el-input> | 11 | <el-input v-model="form.YWH" clearable placeholder="业务号"></el-input> | ... | ... |
| ... | @@ -5,7 +5,7 @@ | ... | @@ -5,7 +5,7 @@ |
| 5 | <el-form-item> | 5 | <el-form-item> |
| 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-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | ... | ... |
| ... | @@ -5,7 +5,7 @@ | ... | @@ -5,7 +5,7 @@ |
| 5 | <el-form-item> | 5 | <el-form-item> |
| 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-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | ... | ... |
| ... | @@ -6,7 +6,7 @@ | ... | @@ -6,7 +6,7 @@ |
| 6 | <Breadcrumb /> | 6 | <Breadcrumb /> |
| 7 | </el-form-item> | 7 | </el-form-item> |
| 8 | <el-row> | 8 | <el-row> |
| 9 | <el-col :span="6"> | 9 | <el-col :span="6" class="mb-5"> |
| 10 | <el-form-item label="行政区"> | 10 | <el-form-item label="行政区"> |
| 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> |
| 12 | <el-option v-for="item in dicData['A20']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE"> | 12 | <el-option v-for="item in dicData['A20']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE"> | ... | ... |
| ... | @@ -5,7 +5,7 @@ | ... | @@ -5,7 +5,7 @@ |
| 5 | <el-form-item> | 5 | <el-form-item> |
| 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-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | ... | ... |
| ... | @@ -6,7 +6,7 @@ | ... | @@ -6,7 +6,7 @@ |
| 6 | <Breadcrumb /> | 6 | <Breadcrumb /> |
| 7 | </el-form-item> | 7 | </el-form-item> |
| 8 | <el-row> | 8 | <el-row> |
| 9 | <el-col :span="6"> | 9 | <el-col :span="6" class="mb-5"> |
| 10 | <el-form-item label="行政区"> | 10 | <el-form-item label="行政区"> |
| 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> |
| 12 | <el-option v-for="item in dicData['A20']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE"> | 12 | <el-option v-for="item in dicData['A20']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE"> | ... | ... |
| ... | @@ -5,7 +5,7 @@ | ... | @@ -5,7 +5,7 @@ |
| 5 | <el-form-item> | 5 | <el-form-item> |
| 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-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | ... | ... |
| ... | @@ -5,7 +5,7 @@ | ... | @@ -5,7 +5,7 @@ |
| 5 | <el-form-item> | 5 | <el-form-item> |
| 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-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | ... | ... |
| ... | @@ -5,7 +5,7 @@ | ... | @@ -5,7 +5,7 @@ |
| 5 | <el-form-item> | 5 | <el-form-item> |
| 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="行政区" label-width="106px"> | 10 | <el-form-item label="行政区" label-width="106px"> |
| 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | ... | ... |
| ... | @@ -6,7 +6,7 @@ | ... | @@ -6,7 +6,7 @@ |
| 6 | <Breadcrumb /> | 6 | <Breadcrumb /> |
| 7 | </el-form-item> | 7 | </el-form-item> |
| 8 | <el-row> | 8 | <el-row> |
| 9 | <el-col :span="5"> | 9 | <el-col :span="5" class="mb-5"> |
| 10 | <el-form-item label="行政区" label-width="80px"> | 10 | <el-form-item label="行政区" label-width="80px"> |
| 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> |
| 12 | <el-option v-for="item in dicData['A20']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE"> | 12 | <el-option v-for="item in dicData['A20']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE"> | ... | ... |
| ... | @@ -5,7 +5,7 @@ | ... | @@ -5,7 +5,7 @@ |
| 5 | <el-form-item> | 5 | <el-form-item> |
| 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-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | 11 | <el-select v-model="form.XZQDM" class="width100" clearable placeholder="行政区"> | ... | ... |
| ... | @@ -40,11 +40,8 @@ | ... | @@ -40,11 +40,8 @@ |
| 40 | mounted () { | 40 | mounted () { |
| 41 | this.getdjywltotal(); | 41 | this.getdjywltotal(); |
| 42 | window.addEventListener("resize", () => { | 42 | window.addEventListener("resize", () => { |
| 43 | this.cdata.seriesData = []; | 43 | this.config.data = []; |
| 44 | this.getdjywltotal(); | 44 | this.getdjywltotal(); |
| 45 | window.addEventListener("resize", () => { | ||
| 46 | this.getdjywltotal(); | ||
| 47 | }); | ||
| 48 | // scroll(tableref.value.$refs.bodyWrapper);//设置滚动 | 45 | // scroll(tableref.value.$refs.bodyWrapper);//设置滚动 |
| 49 | }) | 46 | }) |
| 50 | }, | 47 | }, | ... | ... |
| ... | @@ -39,317 +39,326 @@ | ... | @@ -39,317 +39,326 @@ |
| 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 | }, | ||
| 55 | }, | 56 | }, |
| 56 | }, | 57 | // 结束日期限制 |
| 57 | // 结束日期限制 | 58 | pickerOptionsEnd: { |
| 58 | pickerOptionsEnd: { | 59 | disabledDate: (time) => { |
| 59 | disabledDate: (time) => { | 60 | if (this.form.startTime) { |
| 60 | if (this.form.startTime) { | 61 | return time.getTime() < new Date(this.form.startTime).getTime(); |
| 61 | return time.getTime() < new Date(this.form.startTime).getTime(); | 62 | } |
| 62 | } | 63 | }, |
| 63 | }, | 64 | }, |
| 64 | }, | 65 | form: { |
| 65 | form: { | 66 | startTime: getFirstDayOfSeason(), |
| 66 | startTime: getFirstDayOfSeason(), | 67 | endTime: timeFormat(new Date(), true), |
| 67 | endTime: timeFormat(new Date(), true), | 68 | }, |
| 68 | }, | 69 | // 搜索表单 |
| 69 | // 搜索表单 | 70 | pieChartsData: [], |
| 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); | ||
| 83 | }, | ||
| 84 | //查询各区县办件数量 | ||
| 85 | async 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 | }); | ||
| 109 | }, | ||
| 110 | // 重置 | ||
| 111 | resetForm () { | ||
| 112 | this.form = { | ||
| 113 | startTime: getFirstDayOfSeason(), | ||
| 114 | endTime: timeFormat(new Date(), true), | ||
| 115 | }; | 71 | }; |
| 72 | }, | ||
| 73 | created () { }, | ||
| 74 | mounted () { | ||
| 116 | this.getProcessCounts(); | 75 | this.getProcessCounts(); |
| 117 | }, | 76 | }, |
| 118 | //玫瑰图初始化 | 77 | computed: { |
| 119 | echartInit () { | 78 | ...mapGetters(["dicData"]), |
| 120 | let _this = this; | 79 | }, |
| 121 | // 基于准备好的dom，初始化echarts实例 | 80 | methods: { |
| 122 | let myChart = this.$echarts.init(document.getElementById("myChart")); | 81 | endTimeChange (val) { |
| 123 | // 绘制图表 | 82 | this.form.endTime = timeFormat(new Date(val), true); |
| 124 | myChart.setOption({ | 83 | }, |
| 125 | legend: { | 84 | //查询各区县办件数量 |
| 126 | bottom: "2%", | 85 | async getProcessCounts () { |
| 127 | left: "center", | 86 | this.pieChartsData = []; |
| 128 | textStyle: { | 87 | let { result: res } = await efficient.getProcessCounts( |
| 129 | color: "#fff", | 88 | this.form.startTime, |
| 130 | }, | 89 | this.form.endTime |
| 131 | }, | 90 | ); |
| 132 | tooltip: { | 91 | //获取图表配置项需要的数据 |
| 133 | trigger: "item", | 92 | res.length > 0 && |
| 134 | formatter: "{b} : {c}", | 93 | res.forEach((item) => { |
| 135 | }, | 94 | this.pieChartsData.push({ |
| 136 | series: [ | 95 | //登记数量 |
| 137 | { | 96 | value: item.counts, |
| 138 | name: "各业务类型办理数量", | 97 | //登记数量 |
| 139 | type: "pie", | 98 | name: item.recTypeName, |
| 140 | radius: [0, 250], | 99 | //登记类型代码 |
| 141 | center: ["50%", "45%"], | 100 | groupId: item.recType, |
| 142 | roseType: "area", | 101 | }); |
| 143 | itemStyle: { | 102 | }); |
| 144 | borderRadius: 8, | 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", | ||
| 145 | }, | 130 | }, |
| 146 | data: this.pieChartsData, | ||
| 147 | }, | 131 | }, |
| 148 | ], | 132 | tooltip: { |
| 149 | }); | 133 | trigger: "item", |
| 150 | //添加点击事件 | 134 | formatter: "{b} : {c}", |
| 151 | myChart.on("click", function (param) { | 135 | }, |
| 152 | _this.barChartInit(param.data.groupId); | 136 | label: { |
| 153 | }); | 137 | color: 'inherit', |
| 154 | //默认选中第一个 | 138 | }, |
| 155 | let index = 1; | 139 | series: [ |
| 156 | myChart.dispatchAction({ | 140 | { |
| 157 | type: "highlight", | 141 | name: "各业务类型办理数量", |
| 158 | seriesIndex: 0, | 142 | type: "pie", |
| 159 | dataIndex: 0, | 143 | radius: [0, 250], |
| 160 | }); | 144 | center: ["50%", "45%"], |
| 161 | myChart.on("mouseover", function (e) { | 145 | roseType: "area", |
| 162 | if (e.dataIndex != index) { | 146 | itemStyle: { |
| 163 | myChart.dispatchAction({ | 147 | borderRadius: 8, |
| 164 | type: "downplay", | 148 | }, |
| 165 | seriesIndex: 0, | 149 | data: this.pieChartsData, |
| 166 | dataIndex: index, | 150 | }, |
| 167 | }); | 151 | ], |
| 168 | } | 152 | }); |
| 169 | }); | 153 | //添加点击事件 |
| 170 | myChart.on("mouseout", function (e) { | 154 | myChart.on("click", function (param) { |
| 171 | index = e.dataIndex; | 155 | _this.barChartInit(param.data.groupId); |
| 156 | }); | ||
| 157 | //默认选中第一个 | ||
| 158 | let index = 1; | ||
| 172 | myChart.dispatchAction({ | 159 | myChart.dispatchAction({ |
| 173 | type: "highlight", | 160 | type: "highlight", |
| 174 | seriesIndex: 0, | 161 | seriesIndex: 0, |
| 175 | dataIndex: e.dataIndex, | 162 | dataIndex: 0, |
| 176 | }); | 163 | }); |
| 177 | }); | 164 | myChart.on("mouseover", function (e) { |
| 178 | }, | 165 | if (e.dataIndex != index) { |
| 179 | //柱图初始化 | 166 | myChart.dispatchAction({ |
| 180 | async barChartInit (recType) { | 167 | type: "downplay", |
| 181 | //请求recType对应业务的各区县数据 | 168 | seriesIndex: 0, |
| 182 | let { result: res } = await efficient.getProcessDays( | 169 | dataIndex: index, |
| 183 | recType, | 170 | }); |
| 184 | this.form.startTime, | 171 | } |
| 185 | this.form.endTime | ||
| 186 | ); | ||
| 187 | //行政区数组 | ||
| 188 | let xzqArr = []; | ||
| 189 | this.dicData["A20"].forEach((item) => { | ||
| 190 | xzqArr.push(item.DNAME); | ||
| 191 | let tempArr = res.filter((i) => { | ||
| 192 | return i.qxdm == item.DCODE; | ||
| 193 | }); | 172 | }); |
| 194 | if (tempArr.length) { | 173 | myChart.on("mouseout", function (e) { |
| 195 | item.avgDay = tempArr[0].avgDay; | 174 | index = e.dataIndex; |
| 196 | item.maxDay = tempArr[0].maxDay; | 175 | myChart.dispatchAction({ |
| 197 | item.minDay = tempArr[0].minDay; | 176 | type: "highlight", |
| 198 | } else { | 177 | seriesIndex: 0, |
| 199 | item.avgDay = 0; | 178 | dataIndex: e.dataIndex, |
| 200 | item.maxDay = 0; | 179 | }); |
| 201 | item.minDay = 0; | 180 | }); |
| 202 | } | 181 | }, |
| 203 | }); | 182 | //柱图初始化 |
| 204 | //补全无数据行政区后的结果数组 | 183 | async barChartInit (recType) { |
| 205 | let dealArr = [...this.dicData["A20"]]; | 184 | //请求recType对应业务的各区县数据 |
| 206 | let myChartBar = this.$echarts.init( | 185 | let { result: res } = await efficient.getProcessDays( |
| 207 | document.getElementById("myChart-bar") | 186 | recType, |
| 208 | ); | 187 | this.form.startTime, |
| 209 | myChartBar.setOption({ | 188 | this.form.endTime |
| 210 | color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"], | 189 | ); |
| 211 | tooltip: { | 190 | //行政区数组 |
| 212 | show: true, | 191 | let xzqArr = []; |
| 213 | trigger: "axis", | 192 | this.dicData["A20"].forEach((item) => { |
| 214 | textStyle: { | 193 | xzqArr.push(item.DNAME); |
| 215 | fontSize: 16, // 字体大小 | 194 | let tempArr = res.filter((i) => { |
| 216 | }, | 195 | return i.qxdm == item.DCODE; |
| 217 | extraCssText: "width:220px;height:160px;", // 背景色 | 196 | }); |
| 218 | }, | 197 | if (tempArr.length) { |
| 219 | grid: { | 198 | item.avgDay = tempArr[0].avgDay; |
| 220 | top: 120, | 199 | item.maxDay = tempArr[0].maxDay; |
| 221 | }, | 200 | item.minDay = tempArr[0].minDay; |
| 222 | legend: { | 201 | } else { |
| 223 | data: ["最短用时", "平均用时", "最长用时"], | 202 | item.avgDay = 0; |
| 224 | top: 20, | 203 | item.maxDay = 0; |
| 225 | textStyle: { | 204 | item.minDay = 0; |
| 205 | } | ||
| 206 | }); | ||
| 207 | //补全无数据行政区后的结果数组 | ||
| 208 | let dealArr = [...this.dicData["A20"]]; | ||
| 209 | let myChartBar = this.$echarts.init( | ||
| 210 | document.getElementById("myChart-bar") | ||
| 211 | ); | ||
| 212 | myChartBar.setOption({ | ||
| 213 | color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"], | ||
| 214 | tooltip: { | ||
| 226 | show: true, | 215 | show: true, |
| 227 | color: "#fff", | 216 | trigger: "axis", |
| 228 | fontSize: "16", | 217 | textStyle: { |
| 229 | }, | 218 | fontSize: 16, // 字体大小 |
| 230 | }, | ||
| 231 | xAxis: [ | ||
| 232 | { | ||
| 233 | type: "category", | ||
| 234 | data: xzqArr, | ||
| 235 | axisLabel: { | ||
| 236 | interval: 0, | ||
| 237 | textStyle: { | ||
| 238 | show: true, | ||
| 239 | color: "#fff", | ||
| 240 | fontSize: "16", | ||
| 241 | }, | ||
| 242 | }, | 219 | }, |
| 220 | extraCssText: "width:220px;height:160px;", // 背景色 | ||
| 221 | }, | ||
| 222 | grid: { | ||
| 223 | top: 120, | ||
| 243 | }, | 224 | }, |
| 244 | ], | 225 | legend: { |
| 245 | yAxis: [ | 226 | data: ["最短用时", "平均用时", "最长用时"], |
| 246 | { | 227 | top: 20, |
| 247 | type: "value", | 228 | textStyle: { |
| 248 | name: "单位：天", | 229 | show: true, |
| 249 | nameTextStyle: { | ||
| 250 | color: "#fff", | 230 | color: "#fff", |
| 251 | fontSize: "16", | 231 | fontSize: "16", |
| 252 | }, | 232 | }, |
| 253 | axisLabel: { | 233 | }, |
| 254 | textStyle: { | 234 | xAxis: [ |
| 255 | show: true, | 235 | { |
| 236 | type: "category", | ||
| 237 | data: xzqArr, | ||
| 238 | axisLabel: { | ||
| 239 | interval: 0, | ||
| 240 | textStyle: { | ||
| 241 | show: true, | ||
| 242 | color: "#fff", | ||
| 243 | fontSize: "16", | ||
| 244 | }, | ||
| 245 | }, | ||
| 246 | }, | ||
| 247 | ], | ||
| 248 | yAxis: [ | ||
| 249 | { | ||
| 250 | type: "value", | ||
| 251 | name: "单位：天", | ||
| 252 | nameTextStyle: { | ||
| 256 | color: "#fff", | 253 | color: "#fff", |
| 257 | fontSize: "16", | 254 | fontSize: "16", |
| 258 | }, | 255 | }, |
| 256 | axisLabel: { | ||
| 257 | textStyle: { | ||
| 258 | show: true, | ||
| 259 | color: "#fff", | ||
| 260 | fontSize: "16", | ||
| 261 | }, | ||
| 262 | }, | ||
| 259 | }, | 263 | }, |
| 264 | ], | ||
| 265 | label: { | ||
| 266 | color: 'inherit', | ||
| 260 | }, | 267 | }, |
| 261 | ], | 268 | series: [ |
| 262 | series: [ | 269 | { |
| 263 | { | 270 | type: "bar", |
| 264 | type: "bar", | 271 | //显示数值 |
| 265 | //显示数值 | 272 | itemStyle: { |
| 266 | itemStyle: { | 273 | normal: { |
| 267 | normal: { | 274 | label: { |
| 268 | label: { | 275 | show: true, //开启显示 |
| 269 | show: true, //开启显示 | 276 | position: "top", //在上方显示 |
| 270 | position: "top", //在上方显示 | 277 | |
| 278 | }, | ||
| 271 | }, | 279 | }, |
| 272 | }, | 280 | }, |
| 281 | barMaxWidth: "60", | ||
| 282 | name: "最短用时", | ||
| 283 | data: dealArr.map((item) => item.minDay), | ||
| 273 | }, | 284 | }, |
| 274 | barMaxWidth: "60", | 285 | { |
| 275 | name: "最短用时", | 286 | type: "bar", |
| 276 | data: dealArr.map((item) => item.minDay), | 287 | //显示数值 |
| 277 | }, | 288 | itemStyle: { |
| 278 | { | 289 | normal: { |
| 279 | type: "bar", | 290 | label: { |
| 280 | //显示数值 | 291 | show: true, //开启显示 |
| 281 | itemStyle: { | 292 | position: "top", //在上方显示 |
| 282 | normal: { | 293 | |
| 283 | label: { | 294 | }, |
| 284 | show: true, //开启显示 | ||
| 285 | position: "top", //在上方显示 | ||
| 286 | }, | 295 | }, |
| 287 | }, | 296 | }, |
| 297 | barMaxWidth: "60", | ||
| 298 | name: "平均用时", | ||
| 299 | data: dealArr.map((item) => item.avgDay), | ||
| 288 | }, | 300 | }, |
| 289 | barMaxWidth: "60", | 301 | { |
| 290 | name: "平均用时", | 302 | type: "bar", |
| 291 | data: dealArr.map((item) => item.avgDay), | 303 | //显示数值 |
| 292 | }, | 304 | itemStyle: { |
| 293 | { | 305 | normal: { |
| 294 | type: "bar", | 306 | label: { |
| 295 | //显示数值 | 307 | show: true, //开启显示 |
| 296 | itemStyle: { | 308 | position: "top", //在上方显示 |
| 297 | normal: { | 309 | |
| 298 | label: { | 310 | }, |
| 299 | show: true, //开启显示 | ||
| 300 | position: "top", //在上方显示 | ||
| 301 | }, | 311 | }, |
| 302 | }, | 312 | }, |
| 313 | barMaxWidth: "60", | ||
| 314 | name: "最长用时", | ||
| 315 | data: dealArr.map((item) => item.maxDay), | ||
| 303 | }, | 316 | }, |
| 304 | barMaxWidth: "60", | 317 | ], |
| 305 | name: "最长用时", | 318 | }); |
| 306 | data: dealArr.map((item) => item.maxDay), | 319 | }, |
| 307 | }, | ||
| 308 | ], | ||
| 309 | }); | ||
| 310 | }, | 320 | }, |
| 311 | }, | 321 | }; |
| 312 | }; | ||
| 313 | </script> | 322 | </script> |
| 314 | <style scoped lang="scss"> | 323 | <style scoped lang="scss"> |
| 315 | // @import "~@/styles/public.scss"; | 324 | // @import "~@/styles/public.scss"; |
| 316 | 325 | ||
| 317 | .jktjDetail { | 326 | .jktjDetail { |
| 318 | height: 100%; | 327 | height: 100%; |
| 319 | display: flex; | 328 | display: flex; |
| 320 | flex-direction: column; | 329 | flex-direction: column; |
| 321 | 330 | ||
| 322 | .rows { | 331 | .rows { |
| 323 | margin-left: 100px; | 332 | margin-left: 100px; |
| 324 | } | 333 | } |
| 325 | 334 | ||
| 326 | .center { | 335 | .center { |
| 327 | line-height: 50vh; | 336 | line-height: 50vh; |
| 328 | text-align: center; | 337 | text-align: center; |
| 329 | } | 338 | } |
| 330 | 339 | ||
| 331 | .echarts-box { | 340 | .echarts-box { |
| 332 | display: flex; | 341 | display: flex; |
| 333 | justify-content: center; | 342 | justify-content: center; |
| 334 | 343 | ||
| 335 | .chart { | 344 | .chart { |
| 336 | width: 40%; | 345 | width: 40%; |
| 337 | height: 100%; | 346 | height: 100%; |
| 338 | float: left; | 347 | float: left; |
| 339 | } | 348 | } |
| 340 | 349 | ||
| 341 | .chart-bar { | 350 | .chart-bar { |
| 342 | width: 60%; | 351 | width: 60%; |
| 352 | } | ||
| 343 | } | 353 | } |
| 344 | } | ||
| 345 | 354 | ||
| 346 | .form-clues-content { | 355 | .form-clues-content { |
| 347 | flex: 1; | 356 | flex: 1; |
| 348 | height: 100%; | 357 | height: 100%; |
| 349 | color: #b6b5b5; | 358 | color: #b6b5b5; |
| 359 | } | ||
| 350 | } | 360 | } |
| 351 | } | ||
| 352 | </style> | 361 | </style> |
| 353 | <style scoped lang="scss"> | 362 | <style scoped lang="scss"> |
| 354 | // @import "~@/styles/public.scss"; | 363 | // @import "~@/styles/public.scss"; |
| 355 | </style> | 364 | </style> | ... | ... |
| ... | @@ -47,277 +47,279 @@ | ... | @@ -47,277 +47,279 @@ |
| 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 | }, | ||
| 63 | }, | 64 | }, |
| 64 | }, | 65 | // 结束日期限制 |
| 65 | // 结束日期限制 | 66 | pickerOptionsEnd: { |
| 66 | pickerOptionsEnd: { | 67 | disabledDate: (time) => { |
| 67 | disabledDate: (time) => { | 68 | if (this.form.startTime) { |
| 68 | if (this.form.startTime) { | 69 | return time.getTime() < new Date(this.form.startTime).getTime(); |
| 69 | return time.getTime() < new Date(this.form.startTime).getTime(); | 70 | } |
| 70 | } | 71 | }, |
| 71 | }, | 72 | }, |
| 72 | }, | 73 | recTypeArr: [], |
| 73 | recTypeArr: [], | 74 | chartData: [], |
| 74 | chartData: [], | 75 | // 搜索表单 |
| 75 | // 搜索表单 | 76 | form: { |
| 76 | form: { | 77 | startTime: getFirstDayOfSeason(), |
| 77 | startTime: getFirstDayOfSeason(), | 78 | endTime: timeFormat(new Date(), true), |
| 78 | endTime: timeFormat(new Date(), true), | 79 | qxdm: "", |
| 79 | qxdm: "", | 80 | }, |
| 80 | }, | 81 | interval: 50 |
| 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 | console.log(this.chartData); | ||
| 105 | |||
| 106 | let maxData = Math.max.apply(Math, this.chartData.map(item => { return item.failure })) | ||
| 107 | this.interval = Math.ceil(maxData / 10) | ||
| 108 | //行政区代码过滤 | ||
| 109 | res.length > 0 && | ||
| 110 | res.forEach((item) => { | ||
| 111 | this.recTypeArr.push(item.recTypeName); | ||
| 112 | }); | ||
| 113 | this.$nextTick(() => { | ||
| 114 | // 初始化图表 | ||
| 115 | this.chartData.length && this.echartInit(); | ||
| 116 | }); | ||
| 117 | }, | ||
| 118 | // 重置 | ||
| 119 | resetForm () { | ||
| 120 | this.form = { | ||
| 121 | startTime: getFirstDayOfSeason(), | ||
| 122 | endTime: timeFormat(new Date(), true), | ||
| 123 | qxdm: "", | ||
| 124 | }; | 82 | }; |
| 83 | }, | ||
| 84 | mounted () { | ||
| 85 | // 查询成功率 | ||
| 125 | this.getSuucessRate(); | 86 | this.getSuucessRate(); |
| 126 | }, | 87 | }, |
| 127 | echartInit () { | 88 | computed: { |
| 128 | let _this = this; | 89 | ...mapGetters(["dicData"]), |
| 129 | // 基于准备好的dom，初始化echarts实例 | 90 | }, |
| 130 | let myChart = this.$echarts.init(document.getElementById("myChart")); | 91 | methods: { |
| 131 | // 绘制图表 | 92 | endTimeChange (val) { |
| 132 | myChart.setOption({ | 93 | this.form.endTime = timeFormat(new Date(val), true) |
| 133 | color: ["#13E5FF", "#C99E68", "#E873B2", "#ffaf48"], | 94 | }, |
| 134 | tooltip: { | 95 | async getSuucessRate () { |
| 135 | trigger: "axis", | 96 | this.recTypeArr = []; |
| 136 | formatter: '{b}<br/>{a0}：{c0}个<br/>{a1}：{c1}个<br/>{a2}：{c2}%', | 97 | this.chartData = []; |
| 137 | axisPointer: { | 98 | let { result: res } = await business.getSuucessRate( |
| 138 | type: "cross", | 99 | this.form.startTime, |
| 139 | crossStyle: { | 100 | this.form.endTime, |
| 140 | color: "#fff", | 101 | this.form.qxdm |
| 141 | }, | 102 | ); |
| 142 | }, | 103 | this.chartData = res; |
| 143 | }, | 104 | |
| 144 | legend: { | 105 | let maxData = Math.max.apply(Math, this.chartData.map(item => { return item.failure })) |
| 145 | data: ["成功", "失败", "成功率"], | 106 | this.interval = Math.ceil(maxData / 10) |
| 146 | top: '16', | 107 | //行政区代码过滤 |
| 147 | textStyle: { | 108 | res.length > 0 && |
| 148 | show: true, | 109 | res.forEach((item) => { |
| 149 | color: "#fff", | 110 | this.recTypeArr.push(item.recTypeName); |
| 150 | fontSize: "16", | 111 | }); |
| 151 | }, | 112 | this.$nextTick(() => { |
| 152 | }, | 113 | // 初始化图表 |
| 153 | xAxis: [ | 114 | this.chartData.length && this.echartInit(); |
| 154 | { | 115 | }); |
| 155 | type: "category", | 116 | }, |
| 156 | data: _this.recTypeArr, | 117 | // 重置 |
| 118 | resetForm () { | ||
| 119 | this.form = { | ||
| 120 | startTime: getFirstDayOfSeason(), | ||
| 121 | endTime: timeFormat(new Date(), true), | ||
| 122 | qxdm: "", | ||
| 123 | }; | ||
| 124 | this.getSuucessRate(); | ||
| 125 | }, | ||
| 126 | echartInit () { | ||
| 127 | let _this = this; | ||
| 128 | // 基于准备好的dom，初始化echarts实例 | ||
| 129 | let myChart = this.$echarts.init(document.getElementById("myChart")); | ||
| 130 | // 绘制图表 | ||
| 131 | myChart.setOption({ | ||
| 132 | color: ["#13E5FF", "#C99E68", "#E873B2", "#ffaf48"], | ||
| 133 | tooltip: { | ||
| 134 | trigger: "axis", | ||
| 135 | formatter: '{b}<br/>{a0}：{c0}个<br/>{a1}：{c1}个<br/>{a2}：{c2}%', | ||
| 157 | axisPointer: { | 136 | axisPointer: { |
| 158 | type: "shadow", | 137 | type: "cross", |
| 159 | }, | 138 | crossStyle: { |
| 160 | axisLabel: { | ||
| 161 | textStyle: { | ||
| 162 | show: true, | ||
| 163 | color: "#fff", | 139 | color: "#fff", |
| 164 | fontSize: "16", | ||
| 165 | }, | ||
| 166 | formatter: function (val) { | ||
| 167 | let c = document.createElement("canvas"); | ||
| 168 | const ctx = c.getContext("2d"); | ||
| 169 | const arr = val.split(""); | ||
| 170 | arr | ||
| 171 | .map((item) => ctx.measureText(item).width) | ||
| 172 | .reduce((pre, next, index) => { | ||
| 173 | const nLen = pre + next; | ||
| 174 | if (nLen > 40) { | ||
| 175 | arr[index - 1] += "..."; | ||
| 176 | return next; | ||
| 177 | } else { | ||
| 178 | return nLen; | ||
| 179 | } | ||
| 180 | }); | ||
| 181 | c = null; | ||
| 182 | let ind = arr.findIndex((i) => { | ||
| 183 | return i.indexOf("...") > -1; | ||
| 184 | }); | ||
| 185 | let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr; | ||
| 186 | return newArr.join(""); | ||
| 187 | }, | 140 | }, |
| 188 | }, | 141 | }, |
| 189 | }, | 142 | }, |
| 190 | ], | 143 | legend: { |
| 191 | yAxis: [ | 144 | data: ["成功", "失败", "成功率"], |
| 192 | { | 145 | top: '16', |
| 193 | type: "value", | 146 | textStyle: { |
| 194 | name: "数量/个", | 147 | show: true, |
| 195 | nameTextStyle: { | ||
| 196 | color: "#fff", | 148 | color: "#fff", |
| 197 | fontSize: "16", | 149 | fontSize: "16", |
| 198 | }, | 150 | }, |
| 199 | // interval: this.interval, | 151 | }, |
| 200 | axisLabel: { | 152 | label: { |
| 201 | formatter: "{value}", | 153 | color: 'inherit', |
| 202 | textStyle: { | 154 | }, |
| 203 | show: true, | 155 | xAxis: [ |
| 156 | { | ||
| 157 | type: "category", | ||
| 158 | data: _this.recTypeArr, | ||
| 159 | axisPointer: { | ||
| 160 | type: "shadow", | ||
| 161 | }, | ||
| 162 | axisLabel: { | ||
| 163 | textStyle: { | ||
| 164 | show: true, | ||
| 165 | color: "#fff", | ||
| 166 | fontSize: "16", | ||
| 167 | }, | ||
| 168 | formatter: function (val) { | ||
| 169 | let c = document.createElement("canvas"); | ||
| 170 | const ctx = c.getContext("2d"); | ||
| 171 | const arr = val.split(""); | ||
| 172 | arr | ||
| 173 | .map((item) => ctx.measureText(item).width) | ||
| 174 | .reduce((pre, next, index) => { | ||
| 175 | const nLen = pre + next; | ||
| 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 | }); | ||
| 187 | let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr; | ||
| 188 | return newArr.join(""); | ||
| 189 | }, | ||
| 190 | }, | ||
| 191 | }, | ||
| 192 | ], | ||
| 193 | yAxis: [ | ||
| 194 | { | ||
| 195 | type: "value", | ||
| 196 | name: "数量/个", | ||
| 197 | nameTextStyle: { | ||
| 204 | color: "#fff", | 198 | color: "#fff", |
| 205 | fontSize: "16", | 199 | fontSize: "16", |
| 206 | }, | 200 | }, |
| 201 | // interval: this.interval, | ||
| 202 | axisLabel: { | ||
| 203 | formatter: "{value}", | ||
| 204 | textStyle: { | ||
| 205 | show: true, | ||
| 206 | color: "#fff", | ||
| 207 | fontSize: "16", | ||
| 208 | }, | ||
| 209 | }, | ||
| 207 | }, | 210 | }, |
| 208 | }, | 211 | { |
| 209 | { | 212 | type: "value", |
| 210 | type: "value", | 213 | name: "成功率", |
| 211 | name: "成功率", | 214 | nameTextStyle: { |
| 212 | nameTextStyle: { | ||
| 213 | color: "#fff", | ||
| 214 | fontSize: "16", | ||
| 215 | }, | ||
| 216 | splitNumber: 2, | ||
| 217 | axisLabel: { | ||
| 218 | formatter: "{value} %", | ||
| 219 | textStyle: { | ||
| 220 | show: true, | ||
| 221 | color: "#fff", | 215 | color: "#fff", |
| 222 | fontSize: "16", | 216 | fontSize: "16", |
| 223 | }, | 217 | }, |
| 218 | splitNumber: 2, | ||
| 219 | axisLabel: { | ||
| 220 | formatter: "{value} %", | ||
| 221 | textStyle: { | ||
| 222 | show: true, | ||
| 223 | color: "#fff", | ||
| 224 | fontSize: "16", | ||
| 225 | }, | ||
| 226 | }, | ||
| 224 | }, | 227 | }, |
| 225 | }, | 228 | ], |
| 226 | ], | 229 | series: [ |
| 227 | series: [ | 230 | { |
| 228 | { | 231 | name: "成功", |
| 229 | name: "成功", | 232 | type: "bar", |
| 230 | type: "bar", | 233 | //显示数值 |
| 231 | //显示数值 | 234 | itemStyle: { |
| 232 | itemStyle: { | 235 | normal: { |
| 233 | normal: { | 236 | label: { |
| 234 | label: { | 237 | show: true, //开启显示 |
| 235 | show: true, //开启显示 | 238 | position: "top", //在上方显示 |
| 236 | position: "top", //在上方显示 | 239 | }, |
| 237 | }, | 240 | }, |
| 238 | }, | 241 | }, |
| 242 | barMaxWidth: '60', | ||
| 243 | data: this.chartData.map((item) => { | ||
| 244 | return item.success; | ||
| 245 | }), | ||
| 239 | }, | 246 | }, |
| 240 | barMaxWidth: '60', | 247 | { |
| 241 | data: this.chartData.map((item) => { | 248 | name: "失败", |
| 242 | return item.success; | 249 | type: "bar", |
| 243 | }), | 250 | //显示数值 |
| 244 | }, | 251 | itemStyle: { |
| 245 | { | 252 | normal: { |
| 246 | name: "失败", | 253 | label: { |
| 247 | type: "bar", | 254 | show: true, //开启显示 |
| 248 | //显示数值 | 255 | position: "top", //在上方显示 |
| 249 | itemStyle: { | 256 | }, |
| 250 | normal: { | ||
| 251 | label: { | ||
| 252 | show: true, //开启显示 | ||
| 253 | position: "top", //在上方显示 | ||
| 254 | }, | 257 | }, |
| 255 | }, | 258 | }, |
| 259 | barMaxWidth: '60', | ||
| 260 | data: this.chartData.map((item) => { | ||
| 261 | return item.failure; | ||
| 262 | }), | ||
| 256 | }, | 263 | }, |
| 257 | barMaxWidth: '60', | 264 | { |
| 258 | data: this.chartData.map((item) => { | 265 | name: "成功率", |
| 259 | return item.failure; | 266 | //显示数值 |
| 260 | }), | 267 | itemStyle: { |
| 261 | }, | 268 | normal: { |
| 262 | { | 269 | label: { |
| 263 | name: "成功率", | 270 | show: true, //开启显示 |
| 264 | //显示数值 | 271 | position: "top", //在上方显示 |
| 265 | itemStyle: { | 272 | }, |
| 266 | normal: { | ||
| 267 | label: { | ||
| 268 | show: true, //开启显示 | ||
| 269 | position: "top", //在上方显示 | ||
| 270 | }, | 273 | }, |
| 271 | }, | 274 | }, |
| 275 | type: "line", | ||
| 276 | barMaxWidth: '60', | ||
| 277 | yAxisIndex: 1, | ||
| 278 | data: this.chartData.map((item) => { | ||
| 279 | return item.rate; | ||
| 280 | }), | ||
| 272 | }, | 281 | }, |
| 273 | type: "line", | 282 | ], |
| 274 | barMaxWidth: '60', | 283 | }); |
| 275 | yAxisIndex: 1, | 284 | }, |
| 276 | data: this.chartData.map((item) => { | ||
| 277 | return item.rate; | ||
| 278 | }), | ||
| 279 | }, | ||
| 280 | ], | ||
| 281 | }); | ||
| 282 | }, | 285 | }, |
| 283 | }, | 286 | }; |
| 284 | }; | ||
| 285 | </script> | 287 | </script> |
| 286 | <style scoped lang="scss"> | 288 | <style scoped lang="scss"> |
| 287 | // @import "~@/styles/public.scss"; | 289 | // @import "~@/styles/public.scss"; |
| 288 | 290 | ||
| 289 | .jktjDetail { | 291 | .jktjDetail { |
| 290 | height: 100%; | 292 | height: 100%; |
| 291 | display: flex; | 293 | display: flex; |
| 292 | flex-direction: column; | 294 | flex-direction: column; |
| 293 | 295 | ||
| 294 | .rows { | 296 | .rows { |
| 295 | margin-left: 100px; | 297 | margin-left: 100px; |
| 296 | } | 298 | } |
| 297 | 299 | ||
| 298 | .center { | 300 | .center { |
| 299 | line-height: 50vh; | 301 | line-height: 50vh; |
| 300 | text-align: center; | 302 | text-align: center; |
| 301 | color: #b6b5b5 | 303 | color: #b6b5b5; |
| 302 | } | 304 | } |
| 303 | 305 | ||
| 304 | .echarts-box { | 306 | .echarts-box { |
| 305 | display: flex; | 307 | display: flex; |
| 306 | justify-content: center; | 308 | justify-content: center; |
| 307 | height: 500px; | 309 | height: 500px; |
| 308 | 310 | ||
| 309 | .chart { | 311 | .chart { |
| 310 | width: 100%; | 312 | width: 100%; |
| 311 | height: 100%; | 313 | height: 100%; |
| 314 | } | ||
| 312 | } | 315 | } |
| 313 | } | ||
| 314 | 316 | ||
| 315 | .form-clues-content { | 317 | .form-clues-content { |
| 316 | flex: 1; | 318 | flex: 1; |
| 317 | height: 100%; | 319 | height: 100%; |
| 320 | } | ||
| 318 | } | 321 | } |
| 319 | } | ||
| 320 | </style> | 322 | </style> |
| 321 | <style scoped lang="scss"> | 323 | <style scoped lang="scss"> |
| 322 | // @import "~@/styles/public.scss"; | 324 | // @import "~@/styles/public.scss"; |
| 323 | </style> | 325 | </style> | ... | ... |
| ... | @@ -47,204 +47,207 @@ | ... | @@ -47,204 +47,207 @@ |
| 47 | </template> | 47 | </template> |
| 48 | 48 | ||
| 49 | <script> | 49 | <script> |
| 50 | import { mapGetters } from "vuex"; | 50 | import { mapGetters } from "vuex"; |
| 51 | import efficient from "@/api/efficient"; | 51 | import efficient from "@/api/efficient"; |
| 52 | import { getFirstDayOfSeason, timeFormat } from "@/utils/operation"; | 52 | import { getFirstDayOfSeason, timeFormat } from "@/utils/operation"; |
| 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 | }, | ||
| 63 | }, | 64 | }, |
| 64 | }, | 65 | // 结束日期限制 |
| 65 | // 结束日期限制 | 66 | pickerOptionsEnd: { |
| 66 | pickerOptionsEnd: { | 67 | disabledDate: (time) => { |
| 67 | disabledDate: (time) => { | 68 | if (this.form.startTime) { |
| 68 | if (this.form.startTime) { | 69 | return time.getTime() < new Date(this.form.startTime).getTime(); |
| 69 | return time.getTime() < new Date(this.form.startTime).getTime(); | 70 | } |
| 70 | } | 71 | }, |
| 71 | }, | 72 | }, |
| 72 | }, | 73 | // 搜索表单 |
| 73 | // 搜索表单 | 74 | valueTime: "", |
| 74 | valueTime: "", | 75 | // 搜索表单 |
| 75 | // 搜索表单 | 76 | form: { |
| 76 | form: { | 77 | startTime: getFirstDayOfSeason(), |
| 77 | startTime: getFirstDayOfSeason(), | 78 | endTime: timeFormat(new Date(), true), |
| 78 | endTime: timeFormat(new Date(), true), | 79 | qxdm: "", |
| 79 | qxdm: "", | 80 | }, |
| 80 | }, | 81 | chartData: [] |
| 81 | chartData: [] | ||
| 82 | }; | ||
| 83 | }, | ||
| 84 | mounted () { | ||
| 85 | // 查询业务量 | ||
| 86 | this.getProcessCounts(); | ||
| 87 | }, | ||
| 88 | computed: { | ||
| 89 | ...mapGetters(["dicData"]), | ||
| 90 | }, | ||
| 91 | methods: { | ||
| 92 | endTimeChange (val) { | ||
| 93 | this.form.endTime = timeFormat(new Date(val), true) | ||
| 94 | }, | ||
| 95 | async getProcessCounts () { | ||
| 96 | this.chartData = []; | ||
| 97 | let { result: res } = await efficient.getProcessCounts( | ||
| 98 | this.form.startTime, | ||
| 99 | this.form.endTime, | ||
| 100 | this.form.qxdm | ||
| 101 | ); | ||
| 102 | //获取图表配置项需要的数据 | ||
| 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 | }; | 82 | }; |
| 83 | }, | ||
| 84 | mounted () { | ||
| 85 | // 查询业务量 | ||
| 117 | this.getProcessCounts(); | 86 | this.getProcessCounts(); |
| 118 | }, | 87 | }, |
| 119 | //图表渲染 | 88 | computed: { |
| 120 | echartInit (chartArr) { | 89 | ...mapGetters(["dicData"]), |
| 121 | // 基于准备好的dom，初始化echarts实例 | 90 | }, |
| 122 | let myChart = this.$echarts.init(document.getElementById("myChart")); | 91 | methods: { |
| 123 | // 绘制图表 | 92 | endTimeChange (val) { |
| 124 | myChart.setOption({ | 93 | this.form.endTime = timeFormat(new Date(val), true) |
| 125 | color: ["#13E5FF"], | 94 | }, |
| 126 | tooltip: { | 95 | async getProcessCounts () { |
| 127 | show: true, | 96 | this.chartData = []; |
| 128 | trigger: "axis", | 97 | let { result: res } = await efficient.getProcessCounts( |
| 129 | textStyle: { | 98 | this.form.startTime, |
| 130 | fontSize: 16, // 字体大小 | 99 | this.form.endTime, |
| 100 | this.form.qxdm | ||
| 101 | ); | ||
| 102 | //获取图表配置项需要的数据 | ||
| 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 | }, | ||
| 131 | }, | 132 | }, |
| 132 | }, | 133 | grid: { |
| 133 | grid: { | 134 | top: 120, |
| 134 | top: 120, | 135 | bottom: 100, |
| 135 | bottom: 100, | 136 | }, |
| 136 | }, | 137 | label: { |
| 137 | xAxis: [ | 138 | color: 'inherit', |
| 138 | { | 139 | }, |
| 139 | type: "category", | 140 | xAxis: [ |
| 140 | data: chartArr.map(item => item.recTypeName), | 141 | { |
| 141 | axisLabel: { | 142 | type: "category", |
| 142 | interval: 0, | 143 | data: chartArr.map(item => item.recTypeName), |
| 143 | rotate: 40, | 144 | axisLabel: { |
| 144 | formatter: function (val) { | 145 | interval: 0, |
| 145 | let c = document.createElement("canvas"); | 146 | rotate: 40, |
| 146 | const ctx = c.getContext("2d"); | 147 | formatter: function (val) { |
| 147 | const arr = val.split(""); | 148 | let c = document.createElement("canvas"); |
| 148 | arr | 149 | const ctx = c.getContext("2d"); |
| 149 | .map((item) => ctx.measureText(item).width) | 150 | const arr = val.split(""); |
| 150 | .reduce((pre, next, index) => { | 151 | arr |
| 151 | const nLen = pre + next; | 152 | .map((item) => ctx.measureText(item).width) |
| 152 | if (nLen > 60) { | 153 | .reduce((pre, next, index) => { |
| 153 | arr[index - 1] += "..."; | 154 | const nLen = pre + next; |
| 154 | return next; | 155 | if (nLen > 60) { |
| 155 | } else { | 156 | arr[index - 1] += "..."; |
| 156 | return nLen; | 157 | return next; |
| 157 | } | 158 | } else { |
| 159 | return nLen; | ||
| 160 | } | ||
| 161 | }); | ||
| 162 | c = null; | ||
| 163 | let ind = arr.findIndex((i) => { | ||
| 164 | return i.indexOf("...") > -1; | ||
| 158 | }); | 165 | }); |
| 159 | c = null; | 166 | let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr; |
| 160 | let ind = arr.findIndex((i) => { | 167 | return newArr.join(""); |
| 161 | return i.indexOf("...") > -1; | 168 | }, |
| 162 | }); | 169 | textStyle: { |
| 163 | let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr; | 170 | show: true, |
| 164 | return newArr.join(""); | 171 | color: "#fff", |
| 165 | }, | 172 | fontSize: "16", |
| 166 | textStyle: { | 173 | }, |
| 167 | show: true, | ||
| 168 | color: "#fff", | ||
| 169 | fontSize: "16", | ||
| 170 | }, | 174 | }, |
| 171 | }, | 175 | }, |
| 172 | }, | 176 | ], |
| 173 | ], | 177 | yAxis: [ |
| 174 | yAxis: [ | 178 | { |
| 175 | { | 179 | type: "value", |
| 176 | type: "value", | 180 | name: "数量/个", |
| 177 | name: "数量/个", | 181 | nameTextStyle: { |
| 178 | nameTextStyle: { | ||
| 179 | color: "#fff", | ||
| 180 | fontSize: "16", | ||
| 181 | }, | ||
| 182 | axisLabel: { | ||
| 183 | textStyle: { | ||
| 184 | show: true, | ||
| 185 | color: "#fff", | 182 | color: "#fff", |
| 186 | fontSize: "16", | 183 | fontSize: "16", |
| 187 | }, | 184 | }, |
| 185 | axisLabel: { | ||
| 186 | textStyle: { | ||
| 187 | show: true, | ||
| 188 | color: "#fff", | ||
| 189 | fontSize: "16", | ||
| 190 | }, | ||
| 191 | }, | ||
| 188 | }, | 192 | }, |
| 189 | }, | 193 | ], |
| 190 | ], | ||
| 191 | 194 | ||
| 192 | series: [ | 195 | series: [ |
| 193 | { | 196 | { |
| 194 | type: "bar", | 197 | type: "bar", |
| 195 | //显示数值 | 198 | //显示数值 |
| 196 | itemStyle: { | 199 | itemStyle: { |
| 197 | normal: { | 200 | normal: { |
| 198 | label: { | 201 | label: { |
| 199 | show: true, //开启显示 | 202 | show: true, //开启显示 |
| 200 | position: "top", //在上方显示 | 203 | position: "top", //在上方显示 |
| 204 | }, | ||
| 201 | }, | 205 | }, |
| 202 | }, | 206 | }, |
| 207 | barMaxWidth: '60', | ||
| 208 | data: chartArr.map(item => item.counts), | ||
| 203 | }, | 209 | }, |
| 204 | barMaxWidth: '60', | 210 | ], |
| 205 | data: chartArr.map(item => item.counts), | 211 | }); |
| 206 | }, | 212 | }, |
| 207 | ], | ||
| 208 | }); | ||
| 209 | }, | 213 | }, |
| 210 | }, | 214 | }; |
| 211 | }; | ||
| 212 | </script> | 215 | </script> |
| 213 | <style scoped lang="scss"> | 216 | <style scoped lang="scss"> |
| 214 | // @import "~@/styles/public.scss"; | 217 | // @import "~@/styles/public.scss"; |
| 218 | |||
| 219 | .jktjDetail { | ||
| 220 | height: 100%; | ||
| 221 | display: flex; | ||
| 222 | flex-direction: column; | ||
| 215 | 223 | ||
| 216 | .jktjDetail { | 224 | .rows { |
| 217 | height: 100%; | 225 | margin-left: 100px; |
| 218 | display: flex; | 226 | } |
| 219 | flex-direction: column; | ||
| 220 | 227 | ||
| 221 | .rows { | 228 | .center { |
| 222 | margin-left: 100px; | 229 | line-height: 50vh; |
| 223 | } | 230 | text-align: center; |
| 231 | color: #b6b5b5; | ||
| 232 | } | ||
| 224 | 233 | ||
| 225 | .center { | 234 | .echarts-box { |
| 226 | line-height: 50vh; | 235 | display: flex; |
| 227 | text-align: center; | 236 | justify-content: center; |
| 228 | color: #b6b5b5 | 237 | height: 500px; |
| 229 | } | ||
| 230 | 238 | ||
| 231 | .echarts-box { | 239 | .chart { |
| 232 | display: flex; | 240 | width: 100%; |
| 233 | justify-content: center; | 241 | height: 100%; |
| 234 | height: 500px; | 242 | } |
| 243 | } | ||
| 235 | 244 | ||
| 236 | .chart { | 245 | .form-clues-content { |
| 237 | width: 100%; | 246 | flex: 1; |
| 238 | height: 100%; | 247 | height: 100%; |
| 239 | } | 248 | } |
| 240 | } | 249 | } |
| 241 | |||
| 242 | .form-clues-content { | ||
| 243 | flex: 1; | ||
| 244 | height: 100%; | ||
| 245 | } | ||
| 246 | } | ||
| 247 | </style> | 250 | </style> |
| 248 | <style scoped lang="scss"> | 251 | <style scoped lang="scss"> |
| 249 | // @import "~@/styles/public.scss"; | 252 | // @import "~@/styles/public.scss"; |
| 250 | </style> | 253 | </style> | ... | ... |
| 1 | /* | 1 | /* |
| 2 | * @Description: | 2 | * @Description: |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-03-15 14:08:59 | 4 | * @LastEditTime: 2023-03-16 13:44:11 |
| 5 | */ | 5 | */ |
| 6 | import filter from '@/utils/filter.js' | 6 | import filter from '@/utils/filter.js' |
| 7 | class data extends filter { | 7 | class data extends filter { |
| ... | @@ -51,7 +51,7 @@ class data extends filter { | ... | @@ -51,7 +51,7 @@ class data extends filter { |
| 51 | { | 51 | { |
| 52 | prop: "bizMsgid", | 52 | prop: "bizMsgid", |
| 53 | label: "业务报文ID", | 53 | label: "业务报文ID", |
| 54 | minWidth: 100, | 54 | minWidth: 150, |
| 55 | }, | 55 | }, |
| 56 | { | 56 | { |
| 57 | prop: "createdate", | 57 | prop: "createdate", | ... | ... |
| ... | @@ -59,7 +59,7 @@ | ... | @@ -59,7 +59,7 @@ |
| 59 | <el-col :span="3"> | 59 | <el-col :span="3"> |
| 60 | <el-form-item label="检查结果" prop="jcjg"> | 60 | <el-form-item label="检查结果" prop="jcjg"> |
| 61 | <el-select v-model="form.jcjg" class="width100" clearable placeholder="检查结果"> | 61 | <el-select v-model="form.jcjg" class="width100" clearable placeholder="检查结果"> |
| 62 | <el-option v-for="item in dicData['sysSjsbCkeck']" :key="item.DCODE" :label="item.DNAME" | 62 | <el-option v-for="item in dicData['sysSjsbCkeck']" class="lastdom" :key="item.DCODE" :label="item.DNAME" |
| 63 | :value="item.DCODE"> | 63 | :value="item.DCODE"> |
| 64 | </el-option> | 64 | </el-option> |
| 65 | </el-select> | 65 | </el-select> |
| ... | @@ -69,7 +69,7 @@ | ... | @@ -69,7 +69,7 @@ |
| 69 | <el-col :span="3"> | 69 | <el-col :span="3"> |
| 70 | <el-form-item label="入库结果" prop="rkjg"> | 70 | <el-form-item label="入库结果" prop="rkjg"> |
| 71 | <el-select v-model="form.rkjg" class="width100" clearable placeholder="入库结果"> | 71 | <el-select v-model="form.rkjg" class="width100" clearable placeholder="入库结果"> |
| 72 | <el-option v-for="item in dicData['sysSjsbStorage']" :key="item.DCODE" :label="item.DNAME" | 72 | <el-option v-for="item in dicData['sysSjsbStorage']" class="lastdom" :key="item.DCODE" :label="item.DNAME" |
| 73 | :value="item.DCODE"> | 73 | :value="item.DCODE"> |
| 74 | </el-option> | 74 | </el-option> |
| 75 | </el-select> | 75 | </el-select> |
| ... | @@ -99,201 +99,205 @@ | ... | @@ -99,201 +99,205 @@ |
| 99 | </template> | 99 | </template> |
| 100 | 100 | ||
| 101 | <script> | 101 | <script> |
| 102 | // 接收报文查询 | 102 | // 接收报文查询 |
| 103 | // 引入表格头部数据 | 103 | // 引入表格头部数据 |
| 104 | import data from "./data"; | 104 | import data from "./data"; |
| 105 | // 引入table混入方法 | 105 | // 引入table混入方法 |
| 106 | import tableMixin from "@/mixins/tableMixin.js"; | 106 | import tableMixin from "@/mixins/tableMixin.js"; |
| 107 | import { getReceiveDataReportPage } from "@/api/dataReport.js"; | 107 | import { getReceiveDataReportPage } from "@/api/dataReport.js"; |
| 108 | // 引入详情弹框 | 108 | // 引入详情弹框 |
| 109 | import dataDetails from "@/components/EditDialog"; | 109 | import dataDetails from "@/components/EditDialog"; |
| 110 | //引入日期处理方法 | 110 | //引入日期处理方法 |
| 111 | import { timeFormat } from "@/utils/operation"; | 111 | import { timeFormat } from "@/utils/operation"; |
| 112 | export default { | 112 | export default { |
| 113 | name: "jsbwcx", | 113 | name: "jsbwcx", |
| 114 | mixins: [tableMixin], | 114 | mixins: [tableMixin], |
| 115 | // 注册组件 | 115 | // 注册组件 |
| 116 | components: { | 116 | components: { |
| 117 | dataDetails, | 117 | dataDetails, |
| 118 | }, | 118 | }, |
| 119 | data () { | 119 | data () { |
| 120 | return { | 120 | return { |
| 121 | 121 | ||
| 122 | pickerOptionsStart: { | 122 | pickerOptionsStart: { |
| 123 | disabledDate: (time) => { | 123 | disabledDate: (time) => { |
| 124 | let endDateVal = this.form.receiveEndTime; | 124 | let endDateVal = this.form.receiveEndTime; |
| 125 | if (endDateVal) { | 125 | if (endDateVal) { |
| 126 | return ( | 126 | return ( |
| 127 | time.getTime() >= | 127 | time.getTime() >= |
| 128 | new Date(endDateVal).getTime() | 128 | new Date(endDateVal).getTime() |
| 129 | ); | 129 | ); |
| 130 | } | 130 | } |
| 131 | }, | ||
| 131 | }, | 132 | }, |
| 132 | }, | 133 | pickerOptionsEnd: { |
| 133 | pickerOptionsEnd: { | 134 | disabledDate: (time) => { |
| 134 | disabledDate: (time) => { | 135 | let beginDateVal = this.form.receiveStartTime; |
| 135 | let beginDateVal = this.form.receiveStartTime; | 136 | if (beginDateVal) { |
| 136 | if (beginDateVal) { | 137 | return ( |
| 137 | return ( | 138 | time.getTime() < |
| 138 | time.getTime() < | 139 | new Date(beginDateVal).getTime() |
| 139 | new Date(beginDateVal).getTime() | 140 | ); |
| 140 | ); | 141 | } |
| 141 | } | 142 | }, |
| 142 | }, | 143 | }, |
| 143 | }, | 144 | // 表格数据 |
| 144 | // 表格数据 | 145 | form: { |
| 145 | form: { | 146 | qxdm: "", // 行政区 |
| 146 | qxdm: "", // 行政区 | 147 | receiveStartTime: "", // 开始日期 |
| 147 | receiveStartTime: "", // 开始日期 | 148 | receiveEndTime: "", // 结束日期 |
| 148 | receiveEndTime: "", // 结束日期 | 149 | bdcdyh: "", // 不动产单元号 |
| 149 | bdcdyh: "", // 不动产单元号 | 150 | ywh: "", // 业务号 |
| 150 | ywh: "", // 业务号 | 151 | qllx: "", // 权利类型 |
| 151 | qllx: "", // 权利类型 | 152 | djlx: "", // 登记类型 |
| 152 | djlx: "", // 登记类型 | 153 | jcjg: "", // 检查结果 |
| 153 | jcjg: "", // 检查结果 | 154 | rkjg: "", //入库结果 |
| 154 | rkjg: "", //入库结果 | 155 | currentPage: 1 |
| 155 | currentPage: 1 | 156 | }, |
| 156 | }, | 157 | // 校验规则 |
| 157 | // 校验规则 | 158 | rules: { |
| 158 | rules: { | 159 | pcode: [{ required: true, message: "请选择行政区", trigger: "change" }], |
| 159 | pcode: [{ required: true, message: "请选择行政区", trigger: "change" }], | 160 | startTime: [ |
| 160 | startTime: [ | 161 | { required: true, message: "请选择开始日期", trigger: "change" }, |
| 161 | { required: true, message: "请选择开始日期", trigger: "change" }, | 162 | ], |
| 162 | ], | 163 | endTime: [ |
| 163 | endTime: [ | 164 | { required: true, message: "请选择结束日期", trigger: "change" }, |
| 164 | { required: true, message: "请选择结束日期", trigger: "change" }, | 165 | ], |
| 165 | ], | 166 | bdcdyh: [ |
| 166 | bdcdyh: [ | 167 | { required: true, message: "不动产单元号", trigger: "change" }, |
| 167 | { required: true, message: "不动产单元号", trigger: "change" }, | 168 | ], |
| 168 | ], | 169 | ywmc: [{ required: true, message: "业务名称", trigger: "change" }], |
| 169 | ywmc: [{ required: true, message: "业务名称", trigger: "change" }], | 170 | jcjg: [{ required: true, message: "检查结果", trigger: "change" }], |
| 170 | jcjg: [{ required: true, message: "检查结果", trigger: "change" }], | 171 | rkjg: [{ required: true, message: "入库结果", trigger: "change" }], |
| 171 | rkjg: [{ required: true, message: "入库结果", trigger: "change" }], | 172 | }, |
| 172 | }, | 173 | // 表格数据 |
| 173 | // 表格数据 | 174 | tableData: { |
| 174 | tableData: { | 175 | // 表格头部 |
| 175 | // 表格头部 | 176 | columns: [ |
| 176 | columns: [ | ||
| 177 | { | ||
| 178 | label: "序号", | ||
| 179 | type: "index", | ||
| 180 | width: "50", | ||
| 181 | index: this.indexMethod, | ||
| 182 | } | ||
| 183 | ] | ||
| 184 | .concat(data.columns()) | ||
| 185 | .concat([ | ||
| 186 | { | 177 | { |
| 187 | label: "操作", | 178 | label: "序号", |
| 188 | width: "90", | 179 | type: "index", |
| 189 | render: (h, scope) => { | 180 | width: "50", |
| 190 | return ( | 181 | index: this.indexMethod, |
| 191 | <div> | 182 | } |
| 192 | { | 183 | ] |
| 193 | scope.row.receiveState == 2 ? | 184 | .concat(data.columns()) |
| 194 | <el-button | 185 | .concat([ |
| 195 | type="text" | 186 | { |
| 196 | class='successColor' | 187 | label: "操作", |
| 197 | onClick={() => { | 188 | width: "90", |
| 198 | this.handleDetails(scope.row); | 189 | render: (h, scope) => { |
| 199 | }} | 190 | return ( |
| 200 | > | 191 | <div> |
| 201 | 修改 | 192 | { |
| 202 | </el-button> : | 193 | scope.row.receiveState == 2 ? |
| 203 | <el-button | 194 | <el-button |
| 204 | type="text" | 195 | type="text" |
| 205 | class='btnColor' | 196 | class='successColor' |
| 206 | onClick={() => { | 197 | onClick={() => { |
| 207 | this.handleDetails(scope.row); | 198 | this.handleDetails(scope.row); |
| 208 | }} | 199 | }} |
| 209 | > | 200 | > |
| 210 | 详情 | 201 | 修改 |
| 211 | </el-button> | 202 | </el-button> : |
| 212 | } | 203 | <el-button |
| 213 | </div> | 204 | type="text" |
| 214 | ) | 205 | class='btnColor' |
| 206 | onClick={() => { | ||
| 207 | this.handleDetails(scope.row); | ||
| 208 | }} | ||
| 209 | > | ||
| 210 | 详情 | ||
| 211 | </el-button> | ||
| 212 | } | ||
| 213 | </div> | ||
| 214 | ) | ||
| 215 | } | ||
| 215 | } | 216 | } |
| 217 | ]), | ||
| 218 | // 表格列表数据 | ||
| 219 | total: 0, | ||
| 220 | data: [], | ||
| 221 | }, | ||
| 222 | // 分页 | ||
| 223 | pageData: { | ||
| 224 | total: 0, | ||
| 225 | pageSize: 10, | ||
| 226 | current: 1 | ||
| 227 | }, | ||
| 228 | title: "", | ||
| 229 | }; | ||
| 230 | }, | ||
| 231 | methods: { | ||
| 232 | //截止日期变化 | ||
| 233 | endTimeChange (val) { | ||
| 234 | this.form.receiveEndTime = timeFormat(new Date(val), true) | ||
| 235 | }, | ||
| 236 | // 初始化数据 | ||
| 237 | queryClick () { | ||
| 238 | getReceiveDataReportPage({ ...this.form, ...this.formData }).then( | ||
| 239 | (res) => { | ||
| 240 | if (res.code === 200) { | ||
| 241 | let { total, records, current } = res.result; | ||
| 242 | this.tableData.total = total; | ||
| 243 | this.tableData.data = records ? records : []; | ||
| 244 | this.pageData.current = current | ||
| 216 | } | 245 | } |
| 217 | ]), | 246 | } |
| 218 | // 表格列表数据 | 247 | ) |
| 219 | total: 0, | ||
| 220 | data: [], | ||
| 221 | }, | 248 | }, |
| 222 | // 分页 | 249 | // 重置 |
| 223 | pageData: { | 250 | resetForm () { |
| 224 | total: 0, | 251 | this.$refs.ruleForm.resetFields(); |
| 225 | pageSize: 10, | 252 | this.form.currentPage = 1 |
| 226 | current: 1 | 253 | this.queryClick(); |
| 227 | }, | 254 | }, |
| 228 | title: "", | 255 | featchData () { |
| 229 | }; | 256 | this.queryClick(); |
| 230 | }, | 257 | }, |
| 231 | methods: { | 258 | // 结果 |
| 232 | //截止日期变化 | 259 | handleResult (row) { |
| 233 | endTimeChange (val) { | 260 | this.$popupDialog('响应结果', 'views/jsbwcx/components/result', row) |
| 234 | this.form.receiveEndTime = timeFormat(new Date(val), true) | 261 | }, |
| 235 | }, | 262 | // 详情 |
| 236 | // 初始化数据 | 263 | handleDetails (row) { |
| 237 | queryClick () { | 264 | if (row.rectypeName) { |
| 238 | getReceiveDataReportPage({ ...this.form, ...this.formData }).then( | 265 | this.title = row.rectypeName |
| 239 | (res) => { | 266 | } else { |
| 240 | if (res.code === 200) { | 267 | let Title = '' |
| 241 | let { total, records, current } = res.result; | 268 | this.dicData['A21'].map(item => { |
| 242 | this.tableData.total = total; | 269 | if (item.DCODE == row.DJLX || item.DCODE == row.djlx) { |
| 243 | this.tableData.data = records ? records : []; | 270 | Title = item.DNAME |
| 244 | this.pageData.current = current | 271 | return |
| 245 | } | 272 | } |
| 246 | } | 273 | }) |
| 247 | ) | ||
| 248 | }, | ||
| 249 | // 重置 | ||
| 250 | resetForm () { | ||
| 251 | this.$refs.ruleForm.resetFields(); | ||
| 252 | this.form.currentPage = 1 | ||
| 253 | this.queryClick(); | ||
| 254 | }, | ||
| 255 | featchData () { | ||
| 256 | this.queryClick(); | ||
| 257 | }, | ||
| 258 | // 结果 | ||
| 259 | handleResult (row) { | ||
| 260 | this.$popupDialog('响应结果', 'views/jsbwcx/components/result', row) | ||
| 261 | }, | ||
| 262 | // 详情 | ||
| 263 | handleDetails (row) { | ||
| 264 | if (row.rectypeName) { | ||
| 265 | this.title = row.rectypeName | ||
| 266 | } else { | ||
| 267 | let Title = '' | ||
| 268 | this.dicData['A21'].map(item => { | ||
| 269 | if (item.DCODE == row.DJLX || item.DCODE == row.djlx) { | ||
| 270 | Title = item.DNAME | ||
| 271 | return | ||
| 272 | } | ||
| 273 | }) | ||
| 274 | 274 | ||
| 275 | this.dicData['A8'].map(item => { | 275 | this.dicData['A8'].map(item => { |
| 276 | if (item.DCODE == row.QLLX || item.DCODE == row.qllx) { | 276 | if (item.DCODE == row.QLLX || item.DCODE == row.qllx) { |
| 277 | Title += '-' + item.DNAME | 277 | Title += '-' + item.DNAME |
| 278 | return | 278 | return |
| 279 | } | 279 | } |
| 280 | }) | 280 | }) |
| 281 | this.title = Title | 281 | this.title = Title |
| 282 | } | 282 | } |
| 283 | this.$refs.editLog.isShow(row); | 283 | this.$refs.editLog.isShow(row); |
| 284 | if (row.receiveState == 2) { | 284 | if (row.receiveState == 2) { |
| 285 | this.$store.dispatch('business/setReportLogEdit') | 285 | this.$store.dispatch('business/setReportLogEdit') |
| 286 | } else { | 286 | } else { |
| 287 | this.$store.dispatch('business/setEdit') | 287 | this.$store.dispatch('business/setEdit') |
| 288 | } | 288 | } |
| 289 | }, | 289 | }, |
| 290 | } | ||
| 290 | } | 291 | } |
| 291 | } | ||
| 292 | </script> | 292 | </script> |
| 293 | <style scoped lang="scss"> | 293 | <style scoped lang="scss"> |
| 294 | // 引入表单整体样式 | 294 | // 引入表单整体样式 |
| 295 | // // @import "~@/styles/public.scss"; | 295 | // // @import "~@/styles/public.scss"; |
| 296 | // 引入当前css | 296 | // 引入当前css |
| 297 | @import "./index.scss"; | 297 | @import "./index.scss"; |
| 298 | .lastdom:nth-child(3) { | ||
| 299 | margin-bottom: 0px; | ||
| 300 | } | ||
| 301 | |||
| 298 | </style> | 302 | </style> |
| 299 | 303 | ... | ... |
| ... | @@ -59,11 +59,9 @@ | ... | @@ -59,11 +59,9 @@ |
| 59 | //根据子系统code获取子系统详细信息 | 59 | //根据子系统code获取子系统详细信息 |
| 60 | getAction(api.subsystem, params).then((res) => { | 60 | getAction(api.subsystem, params).then((res) => { |
| 61 | if (res.status === 1) { | 61 | if (res.status === 1) { |
| 62 | console.log(" res.contentJJJGGG", res.content); | ||
| 63 | this.productName = res.content[0].name; | 62 | this.productName = res.content[0].name; |
| 64 | this.$store.dispatch("products/setData", res.content[0].code); | 63 | this.$store.dispatch("products/setData", res.content[0].code); |
| 65 | sessionStorage.setItem("products", res.content[0].code) | 64 | sessionStorage.setItem("products", res.content[0].code) |
| 66 | console.log("jjjggg的product"); | ||
| 67 | } else { | 65 | } else { |
| 68 | this.$message.error({ message: res.message, showClose: true }); | 66 | this.$message.error({ message: res.message, showClose: true }); |
| 69 | } | 67 | } | ... | ... |
| ... | @@ -104,6 +104,8 @@ | ... | @@ -104,6 +104,8 @@ |
| 104 | this.$store.dispatch('business/setInitRules', "layout1") | 104 | this.$store.dispatch('business/setInitRules', "layout1") |
| 105 | //存储token | 105 | //存储token |
| 106 | localStorage.setItem("token", `Bearer ${res.content}`); | 106 | localStorage.setItem("token", `Bearer ${res.content}`); |
| 107 | this.$store.dispatch("products/setData", res.content[0].code); | ||
| 108 | sessionStorage.setItem("products", res.content[0].code) | ||
| 107 | //登录成功后需判断有无重定向，没有重定向则跳转首页 | 109 | //登录成功后需判断有无重定向，没有重定向则跳转首页 |
| 108 | this.$router.replace(this.$route.query.redirect || "/"); | 110 | this.$router.replace(this.$route.query.redirect || "/"); |
| 109 | } else { | 111 | } else { | ... | ... |
| ... | @@ -484,8 +484,7 @@ export default { | ... | @@ -484,8 +484,7 @@ export default { |
| 484 | .regularHeight { | 484 | .regularHeight { |
| 485 | display: flex; | 485 | display: flex; |
| 486 | flex-direction: column; | 486 | flex-direction: column; |
| 487 | flex: 1; | 487 | height: 87vh; |
| 488 | height: 100%; | ||
| 489 | margin-bottom: 5px; | 488 | margin-bottom: 5px; |
| 490 | 489 | ||
| 491 | .editDialogBox-con, | 490 | .editDialogBox-con, | ... | ... |
| ... | @@ -35,7 +35,7 @@ | ... | @@ -35,7 +35,7 @@ |
| 35 | </el-form-item> | 35 | </el-form-item> |
| 36 | </el-form> | 36 | </el-form> |
| 37 | <div class="bottom-wrapper"> | 37 | <div class="bottom-wrapper"> |
| 38 | <btn nativeType="cx" type="primary" @click="updateInfo">更新信息</btn> | 38 | <btn nativeType="cx" type="primary" @click="updateInfo">更新信息</btn> |
| 39 | </div> | 39 | </div> |
| 40 | </div> | 40 | </div> |
| 41 | </div> | 41 | </div> | ... | ... |
| ... | @@ -2,7 +2,7 @@ | ... | @@ -2,7 +2,7 @@ |
| 2 | * @Author: xiaomiao 1158771342@qq.com | 2 | * @Author: xiaomiao 1158771342@qq.com |
| 3 | * @Date: 2023-03-09 20:54:28 | 3 | * @Date: 2023-03-09 20:54:28 |
| 4 | * @LastEditors: xiaomiao 1158771342@qq.com | 4 | * @LastEditors: xiaomiao 1158771342@qq.com |
| 5 | * @LastEditTime: 2023-03-15 15:45:01 | 5 | * @LastEditTime: 2023-03-16 19:40:40 |
| 6 | * @FilePath: \上报\bdcjg-web\src\views\system\information\index.vue | 6 | * @FilePath: \上报\bdcjg-web\src\views\system\information\index.vue |
| 7 | * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE | 7 | * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE |
| 8 | --> | 8 | --> |
| ... | @@ -14,11 +14,11 @@ | ... | @@ -14,11 +14,11 @@ |
| 14 | <Breadcrumb /> | 14 | <Breadcrumb /> |
| 15 | </el-form-item> | 15 | </el-form-item> |
| 16 | <el-row class="mb-5"> | 16 | <el-row class="mb-5"> |
| 17 | <el-col :span="4" class="btnColRight"> | 17 | <el-col class="btnColRight"> |
| 18 | <btn nativeType="cx" type="primary" @click="information"> | 18 | <btn nativeType="cx" @click="information"> |
| 19 | 基本信息 | 19 | 基本信息 |
| 20 | </btn> | 20 | </btn> |
| 21 | <btn nativeType="cz" @click="password"> | 21 | <btn nativeType="cx" @click="password"> |
| 22 | 修改密码 | 22 | 修改密码 |
| 23 | </btn> | 23 | </btn> |
| 24 | </el-col> | 24 | </el-col> |
| ... | @@ -73,18 +73,11 @@ | ... | @@ -73,18 +73,11 @@ |
| 73 | display: flex; | 73 | display: flex; |
| 74 | flex-direction: column; | 74 | flex-direction: column; |
| 75 | .btnColRight { | 75 | .btnColRight { |
| 76 | margin-top: 10px; | ||
| 77 | display: flex; | ||
| 78 | justify-content: center; | ||
| 76 | // background-color: cadetblue; | 79 | // background-color: cadetblue; |
| 77 | height: 60px; | 80 | height: 30px; |
| 78 | .button:nth-child(1) { | ||
| 79 | position: absolute; | ||
| 80 | left: 30px; | ||
| 81 | top: 20px; | ||
| 82 | } | ||
| 83 | .button:nth-child(2) { | ||
| 84 | position: absolute; | ||
| 85 | top: 20px; | ||
| 86 | left: 120px; | ||
| 87 | } | ||
| 88 | } | 81 | } |
| 89 | /deep/.content { | 82 | /deep/.content { |
| 90 | .el-input__inner { | 83 | .el-input__inner { | ... | ... |
| ... | @@ -214,11 +214,10 @@ | ... | @@ -214,11 +214,10 @@ |
| 214 | 214 | ||
| 215 | // @import "~@/styles/public.scss"; | 215 | // @import "~@/styles/public.scss"; |
| 216 | .btnColRight { | 216 | .btnColRight { |
| 217 | height: 60px; | 217 | height: 30px; |
| 218 | .button { | 218 | .button { |
| 219 | position: absolute; | 219 | position: absolute; |
| 220 | left: 30px; | 220 | left: 30px; |
| 221 | top: 20px; | ||
| 222 | } | 221 | } |
| 223 | } | 222 | } |
| 224 | /deep/.el-table__expand-icon { | 223 | /deep/.el-table__expand-icon { | ... | ... |
| ... | @@ -180,7 +180,7 @@ | ... | @@ -180,7 +180,7 @@ |
| 180 | class="configurationbtnColor" | 180 | class="configurationbtnColor" |
| 181 | icon="el-icon-video-pause" | 181 | icon="el-icon-video-pause" |
| 182 | onClick={() => { | 182 | onClick={() => { |
| 183 | this.getUserList(scope.row); | 183 | this.getList(scope.row); |
| 184 | }} | 184 | }} |
| 185 | > | 185 | > |
| 186 | 配置 | 186 | 配置 |
| ... | @@ -351,7 +351,7 @@ | ... | @@ -351,7 +351,7 @@ |
| 351 | }, | 351 | }, |
| 352 | 352 | ||
| 353 | // 配置 | 353 | // 配置 |
| 354 | getUserList (row) { | 354 | getList (row) { |
| 355 | this.getTableList() | 355 | this.getTableList() |
| 356 | const params = {}; | 356 | const params = {}; |
| 357 | const queryOptions = { | 357 | const queryOptions = { |
| ... | @@ -485,11 +485,10 @@ | ... | @@ -485,11 +485,10 @@ |
| 485 | 485 | ||
| 486 | // @import "~@/styles/public.scss"; | 486 | // @import "~@/styles/public.scss"; |
| 487 | .btnColRight { | 487 | .btnColRight { |
| 488 | height: 60px; | 488 | height: 30px; |
| 489 | .button { | 489 | .button { |
| 490 | position: absolute; | 490 | position: absolute; |
| 491 | left: 30px; | 491 | left: 30px; |
| 492 | top: 20px; | ||
| 493 | } | 492 | } |
| 494 | } | 493 | } |
| 495 | /deep/.el-button.is-disabled.el-button--text { | 494 | /deep/.el-button.is-disabled.el-button--text { | ... | ... |
| ... | @@ -168,7 +168,6 @@ | ... | @@ -168,7 +168,6 @@ |
| 168 | // 获取授权主体的菜单权限 | 168 | // 获取授权主体的菜单权限 |
| 169 | // getMenuAuthorityList | 169 | // getMenuAuthorityList |
| 170 | menulist (operationList, id, Code, menutablelistData, operationCodes) { | 170 | menulist (operationList, id, Code, menutablelistData, operationCodes) { |
| 171 | console.log("Code", Code); | ||
| 172 | this.selectedSubsystemCode = Code | 171 | this.selectedSubsystemCode = Code |
| 173 | this.menuList = menutablelistData; | 172 | this.menuList = menutablelistData; |
| 174 | getRoleAuthorityList( | 173 | getRoleAuthorityList( | ... | ... |
| ... | @@ -113,7 +113,6 @@ export default { | ... | @@ -113,7 +113,6 @@ export default { |
| 113 | this.form = Object.assign(this.form, this.formData) | 113 | this.form = Object.assign(this.form, this.formData) |
| 114 | let { result } = await sjsbTask.getTaskListByName(this.form) | 114 | let { result } = await sjsbTask.getTaskListByName(this.form) |
| 115 | this.tableData.data = result.list | 115 | this.tableData.data = result.list |
| 116 | console.log(this.tableData.data, 'fffffffffffffffffff') | ||
| 117 | } catch (error) { | 116 | } catch (error) { |
| 118 | this.message = error | 117 | this.message = error |
| 119 | } | 118 | } | ... | ... |
| ... | @@ -332,11 +332,10 @@ | ... | @@ -332,11 +332,10 @@ |
| 332 | <style scoped lang="scss"> | 332 | <style scoped lang="scss"> |
| 333 | @import "~@/styles/mixin.scss"; | 333 | @import "~@/styles/mixin.scss"; |
| 334 | .btnColRight { | 334 | .btnColRight { |
| 335 | height: 60px; | 335 | height: 30px; |
| 336 | .button { | 336 | .button { |
| 337 | position: absolute; | 337 | position: absolute; |
| 338 | left: 30px; | 338 | left: 30px; |
| 339 | top: 20px; | ||
| 340 | } | 339 | } |
| 341 | } | 340 | } |
| 342 | /deep/.el-button.is-disabled.el-button--text { | 341 | /deep/.el-button.is-disabled.el-button--text { | ... | ... |
-
Please register or sign in to post a comment