diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index bc440b3..314e2c6 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -15,53 +15,53 @@ -->
-
{{date}} {{time}}
- -
-
-
今日上报数
-
7 件
-
-
-
本周上报数
-
25 件
-
-
-
本月上报数
-
32 件
-
-
-
本年上报数
-
7 件
-
+
+
+
今日上报数
+
7 件
+
+
+
本周上报数
+
25 件
+
+
+
本月上报数
+
32 件
+
+
本年上报数
+
7 件
+
+
矛盾纠纷化解统计
-
{{monReso}}
-
本月化解
+
{{ monReso }}
+
本月化解
-
{{quaReso}}
+
{{ quaReso }}
本季度化解
-
{{yearReso}}
+
{{ yearReso }}
本年度化解
-
{{allReso}}
+
{{ allReso }}
截至目前总化解
@@ -98,7 +98,7 @@
-
矛盾纠纷月份趋势统计
+
矛盾纠纷类型占比统计
@@ -114,15 +114,18 @@
-
矛盾纠纷化解部门排行统计
-
+
矛盾纠纷化解部门排行统计
+
-
@@ -134,12 +137,19 @@ type="daterange" range-separator="-" start-placeholder="开始日期" - end-placeholder="结束日期"> + end-placeholder="结束日期" + >
-
事件上报热力图
-
矛盾解决热力图
-
越级上报热力图
+
+ 事件上报热力图 +
+
+ 矛盾解决热力图 +
+
+ 越级上报热力图 +
@@ -155,7 +165,7 @@ import AmapBg from "@/components/map.vue"; import { getZoom } from "@/libs/util"; import { selected_area$ } from "@/subjects/sub"; import vueSeamless from "vue-seamless-scroll"; -import {queryResolve} from "@/api/home" +import { queryResolve } from "@/api/home"; export default { name: "", components: { @@ -168,13 +178,13 @@ export default { }, data() { return { - reliData:[], - timeFrame:1, + reliData: [], + timeFrame: 1, ob: null, selectedArea: null, zoom: 1, - date:'', - time:'', + date: "", + time: "", calssOption: { step: 0.2, // 数值越大速度滚动越快 limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length @@ -185,15 +195,15 @@ export default { singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 waitTime: 1000, // 单步运动停止的时间(默认值1000ms) }, - timeData:[ - {label:'月',value:1}, - {label:'季',value:2}, - {label:'年',value:3}, + timeData: [ + { label: "月", value: 1 }, + { label: "季", value: 2 }, + { label: "年", value: 3 }, ], trendChart: null, pieChart: null, phChart: null, - deptChart:null, + deptChart: null, listData: [ { disputeName: "矛盾纠纷", @@ -285,19 +295,19 @@ export default { crtHeight: 400, domId: "dom1", mixedVideoDisplayMode: 2, - active:'1', - timePicker:'', - monReso:'', - quaReso:'', - yearReso:'', - allReso:'' + active: "1", + timePicker: "", + monReso: "", + quaReso: "", + yearReso: "", + allReso: "", }; }, mounted() { this.ws = this.DHWs.getInstance(); // console.log(ws) - this.reliData = [{胶东街道:2, 洋河镇:80, 铺集镇:90,九龙街道:40}] + this.reliData = [{ 胶东街道: 2, 洋河镇: 80, 铺集镇: 90, 九龙街道: 40 }]; this.ob = selected_area$.subscribe((obj) => { this.selectedArea = obj; @@ -308,7 +318,7 @@ export default { this.zoom = getZoom(); }); this.$nextTick(() => { - this.getTime() + this.getTime(); this.createChart(); this.createPieChart(); this.createPhChart(); @@ -319,28 +329,28 @@ export default { beforeUnmount() { this.ob?.unsubscribe(); }, - created(){ - this.getResolve() + created() { + this.getResolve(); }, methods: { - handleReli(val){ + handleReli(val) { this.active = val; - if(val == 1){ - this.reliData = [{胶东街道:2, 洋河镇:80, 铺集镇:90,九龙街道:40}] - }else if(val == 2){ - this.reliData = [{里岔镇:20, 胶西街道:80, 中云街道:90,九龙街道:40}] - }else if(val == 3){ - this.reliData = [{阜安街道:50, 三里河街道:84, 胶东街道:86,胶北街道:40}] + if (val == 1) { + this.reliData = [{ 胶东街道: 2, 洋河镇: 80, 铺集镇: 90, 九龙街道: 40 }]; + } else if (val == 2) { + this.reliData = [{ 里岔镇: 20, 胶西街道: 80, 中云街道: 90, 九龙街道: 40 }]; + } else if (val == 3) { + this.reliData = [{ 阜安街道: 50, 三里河街道: 84, 胶东街道: 86, 胶北街道: 40 }]; } }, - getResolve(){ - queryResolve().then(res =>{ - console.log('化解数据',res) - this.monReso = res.data.mon - this.quaReso = res.data.quarterly - this.yearReso = res.data.year - this.allReso = res.data.all - }) + getResolve() { + queryResolve().then((res) => { + console.log("化解数据", res); + this.monReso = res.data ? res.data.mon : 1; + this.quaReso = res.data ? res.data.quarterly : 3; + (this.yearReso = res.data ? res.data.year : 10), + (this.allReso = res.data ? res.data.all : 20); + }); }, fn(str) { let num = null; @@ -458,10 +468,23 @@ export default { window.addEventListener("resize", () => { this.trendChart.resize(); }); + let pictorialData1 = []; + let pictorialData2 = []; + this.yData1.map((v) => { + pictorialData1.push({ value: v, symbolPosition: "end" }); + }); + this.yData2.map((v) => { + pictorialData2.push({ value: v, symbolPosition: "end" }); + }); var option = { color: ["#115fff", "#1dd58e"], legend: { - data: ["矛盾登记数", "调解成功数"], + data: [ + { name: "矛盾登记数", itemStyle: { color: "#47c5f0" } }, + { name: "调解成功数", itemStyle: { color: "#02e8f1" } }, + ], + itemWidth: 8, + itemHeight: 8, textStyle: { color: "#fff", fontSize: this.fontSize(12), @@ -511,25 +534,53 @@ export default { }, series: [ { + z: 1, name: "矛盾登记数", type: "bar", data: this.yData1, itemStyle: { normal: { - color: "rgb(71, 197, 240)", + color: "rgba(71, 197, 240,0.45)", }, }, }, { + z: 2, name: "调解成功数", type: "bar", data: this.yData2, itemStyle: { normal: { - color: "rgb(2, 232, 241)", + color: "rgba(2, 232, 241,0.45)", }, }, }, + { + z: 1, + type: "pictorialBar", + symbol: "rect", + symbolPosition: "end", + symbolSize: [20, 3], + symbolOffset: ["-60%", "-3"], + itemStyle: { + color: "#47c5f0", + }, + tooltip: { show: false }, + data: this.yData1, + }, + { + z: 2, + type: "pictorialBar", + symbol: "rect", + symbolPosition: "end", + symbolSize: [20, 3], + symbolOffset: ["60%", "-3"], + itemStyle: { + color: "#02e8f1", + }, + tooltip: { show: false }, + data: this.yData2, + }, ], }; this.trendChart.setOption(option); @@ -548,6 +599,8 @@ export default { textStyle: { color: "#fff", }, + itemWidth: 35, + itemHeight: 3, }, series: [ { @@ -584,12 +637,8 @@ export default { window.addEventListener("resize", () => { this.phChart.resize(); }); - var colorList = [ - "#70d74d", - "#f39700", - "#de4657", - "#47c5f0", - ]; + var colorList = ["#00ff00", "#ffba00", "#ff3e54", "#36cfd9"]; + var colorList1 = ["rgba(112 ,215, 77,0.8)", "rgba(243,151,0,0.8)", "rgba(222, 70, 87,0.8)", "rgba(71, 197, 240,0.5)"]; var datas = [ { value: 99, @@ -645,10 +694,10 @@ export default { show: false, }, grid: { - top:3, + top: 3, left: 0, right: 10, - bottom:0, + bottom: 0, containLabel: true, }, xAxis: { @@ -706,11 +755,11 @@ export default { itemStyle.color = new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, - color: i < 3 ? colorList[i] : colorList[3], + color: i < 3 ? colorList1[i] : colorList1[3], }, { offset: 1, - color: i < 3 ? colorList[i] : colorList[3], + color: i < 3 ? colorList1[i] : colorList1[3], }, ]); return { @@ -722,6 +771,28 @@ export default { barBorderRadius: [0, 15, 15, 0], }, }, + { + name: "外圆", + type: "scatter", + emphasis: { + scale: false, + }, + symbol: "rect", + symbolSize: [3, 8], + symbolOffset: [2, 0], + z: 2, + data: datas, + itemStyle: { + normal: { + // barBorderRadius: 20, + color: function (params) { + // let color = ""; + let color = params.dataIndex < 3 ? colorList[params.dataIndex] : colorList[3]; + return color; + }, + }, + }, + }, ], }; this.phChart.setOption(option); @@ -731,12 +802,8 @@ export default { window.addEventListener("resize", () => { this.deptChart.resize(); }); - var colorList = [ - "#70d74d", - "#f39700", - "#de4657", - "#47c5f0", - ]; + var colorList = ["#00ff00", "#ffba00", "#ff3e54", "#36cfd9"]; + var colorList1 = ["rgba(112 ,215, 77,0.8)", "rgba(243,151,0,0.8)", "rgba(222, 70, 87,0.8)", "rgba(71, 197, 240,0.5)"]; var datas = [ { value: 99, @@ -768,10 +835,10 @@ export default { show: false, }, grid: { - top:3, + top: 3, left: 0, right: 10, - bottom:0, + bottom: 0, containLabel: true, }, xAxis: { @@ -829,11 +896,11 @@ export default { itemStyle.color = new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, - color: i < 3 ? colorList[i] : colorList[3], + color: i < 3 ? colorList1[i] : colorList1[3], }, { offset: 1, - color: i < 3 ? colorList[i] : colorList[3], + color: i < 3 ? colorList1[i] : colorList1[3], }, ]); return { @@ -845,6 +912,28 @@ export default { barBorderRadius: [0, 15, 15, 0], }, }, + { + name: "外圆", + type: "scatter", + emphasis: { + scale: false, + }, + symbol: "rect", + symbolSize: [3, 8], + symbolOffset: [2, 0], + z: 2, + data: datas, + itemStyle: { + normal: { + // barBorderRadius: 20, + color: function (params) { + // let color = ""; + let color = params.dataIndex < 3 ? colorList[params.dataIndex] : colorList[3]; + return color; + }, + }, + }, + }, ], }; this.deptChart.setOption(option); @@ -882,7 +971,7 @@ export default { left: 0; pointer-events: none; - .time_box{ + .time_box { font-size: 27px; color: #fff; position: absolute; @@ -890,8 +979,8 @@ export default { top: 38px; left: 48px; } - - .center_box{ + + .center_box { width: 40%; height: 30px; position: absolute; @@ -901,42 +990,41 @@ export default { align-items: center; justify-content: space-between; - .sb_box{ - width: 25%; - height: 100%; - display: flex; - font-size:18px; - color:#fff; - align-items: center; - border-right:1px solid #fff; - font-weight: bold; + .sb_box { + width: 25%; + height: 100%; + display: flex; + font-size: 18px; + color: #fff; + align-items: center; + border-right: 1px solid #fff; + font-weight: bold; - &.cen{ - justify-content: center; - } + &.cen { + justify-content: center; + } - &.last{ - border-right: none; - justify-content: flex-end; - } + &.last { + border-right: none; + justify-content: flex-end; + } - .number_txt{ - background-image: linear-gradient(to bottom, #92eeff, #5bcaf5); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - font-size:28px; - } - .num_name{ - background-image: linear-gradient(to bottom, #92eeff, #5bcaf5); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - font-size:20px; - } - + .number_txt { + background-image: linear-gradient(to bottom, #92eeff, #5bcaf5); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 28px; + } + .num_name { + background-image: linear-gradient(to bottom, #92eeff, #5bcaf5); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 20px; + } } } - .bottom_box{ + .bottom_box { width: 40%; position: absolute; bottom: 40px; @@ -944,44 +1032,44 @@ export default { pointer-events: auto; display: flex; - .sele_box{ + .sele_box { width: 90px; height: 34px; margin-right: 20px; - .slect_box{ - ::v-deep .el-input__inner{ + .slect_box { + ::v-deep .el-input__inner { background: url("@/assets/img/sele.png"); background-size: 100% 100%; border: none; color: #fff; text-align: center; - } + } } } - .time_picker{ - .date_pick{ + .time_picker { + .date_pick { background: url("@/assets/img/date.png"); background-size: 100% 100%; - border:none; - width:200px; + border: none; + width: 200px; - ::v-deep .el-range-input{ + ::v-deep .el-range-input { background: transparent; - color:#fff + color: #fff; } - ::v-deep .el-range-separator{ + ::v-deep .el-range-separator { color: #fff; } - ::v-deep .el-range__icon{ + ::v-deep .el-range__icon { display: none; } } } - .btn_box{ + .btn_box { width: 150px; height: 40px; background: url("@/assets/img/btn.png"); @@ -990,10 +1078,10 @@ export default { line-height: 40px; text-align: center; font-size: 15px; - color:#fff; + color: #fff; cursor: pointer; - &.actived{ + &.actived { color: #ffd13e; } } @@ -1215,46 +1303,46 @@ export default { } } - .dept_ph{ - width: 100%; - height: 21%; - .title { - font-size: 20px; - font-weight: bold; - font-stretch: normal; - letter-spacing: 0px; - color: #ffffff; - width: 88%; - margin-left: 12%; - text-align: left; - } + .dept_ph { + width: 100%; + height: 21%; + .title { + font-size: 20px; + font-weight: bold; + font-stretch: normal; + letter-spacing: 0px; + color: #ffffff; + width: 88%; + margin-left: 12%; + text-align: left; + } - .ph_box{ - width: 90%; - height: 80%; - margin: 0 auto; - margin-top: 2%; - } + .ph_box { + width: 90%; + height: 80%; + margin: 0 auto; + margin-top: 2%; + } } } } \ No newline at end of file +