|
|
|
|
@ -21,19 +21,19 @@ |
|
|
|
|
</div> --> |
|
|
|
|
<div class="center_box"> |
|
|
|
|
<div class="sb_box"> |
|
|
|
|
<div style="margin-right:8px; ">今日上报数</div> |
|
|
|
|
<div style="margin-right: 8px">今日上报数</div> |
|
|
|
|
<div><span class="number_txt">7</span> <span class="num_name">件</span></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="sb_box cen"> |
|
|
|
|
<div style="margin-right:8px; ">本周上报数</div> |
|
|
|
|
<div style="margin-right: 8px">本周上报数</div> |
|
|
|
|
<div><span class="number_txt">25</span> <span class="num_name">件</span></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="sb_box cen"> |
|
|
|
|
<div style="margin-right:8px; ">本月上报数</div> |
|
|
|
|
<div style="margin-right: 8px">本月上报数</div> |
|
|
|
|
<div><span class="number_txt">32</span> <span class="num_name">件</span></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="sb_box last"> |
|
|
|
|
<div style="margin-right:8px; ">本年上报数</div> |
|
|
|
|
<div style="margin-right: 8px">本年上报数</div> |
|
|
|
|
<div><span class="number_txt">7</span> <span class="num_name">件</span></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -98,7 +98,7 @@ |
|
|
|
|
<div class="chart_box" id="trendChart"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="hj_box"> |
|
|
|
|
<div class="title">矛盾纠纷月份趋势统计</div> |
|
|
|
|
<div class="title">矛盾纠纷类型占比统计</div> |
|
|
|
|
<div class="chart_box pie" id="pieChart"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -121,7 +121,10 @@ |
|
|
|
|
<div class="bottom_box"> |
|
|
|
|
<div class="sele_box"> |
|
|
|
|
<el-select v-model="timeFrame" class="slect_box" popper-class="select_time"> |
|
|
|
|
<el-option v-for="item in timeData" :key="item.value" :label="item.label" |
|
|
|
|
<el-option |
|
|
|
|
v-for="item in timeData" |
|
|
|
|
:key="item.value" |
|
|
|
|
:label="item.label" |
|
|
|
|
:value="item.value" |
|
|
|
|
></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
@ -134,12 +137,19 @@ |
|
|
|
|
type="daterange" |
|
|
|
|
range-separator="-" |
|
|
|
|
start-placeholder="开始日期" |
|
|
|
|
end-placeholder="结束日期"> |
|
|
|
|
end-placeholder="结束日期" |
|
|
|
|
> |
|
|
|
|
</el-date-picker> |
|
|
|
|
</div> |
|
|
|
|
<div class="btn_box" @click="handleReli(1)" :class="active == 1 ? 'actived' : ''">事件上报热力图</div> |
|
|
|
|
<div class="btn_box" @click="handleReli(2)" :class="active == 2 ? 'actived' : ''">矛盾解决热力图</div> |
|
|
|
|
<div class="btn_box" @click="handleReli(3)" :class="active == 3 ? 'actived' : ''">越级上报热力图</div> |
|
|
|
|
<div class="btn_box" @click="handleReli(1)" :class="active == 1 ? 'actived' : ''"> |
|
|
|
|
事件上报热力图 |
|
|
|
|
</div> |
|
|
|
|
<div class="btn_box" @click="handleReli(2)" :class="active == 2 ? 'actived' : ''"> |
|
|
|
|
矛盾解决热力图 |
|
|
|
|
</div> |
|
|
|
|
<div class="btn_box" @click="handleReli(3)" :class="active == 3 ? 'actived' : ''"> |
|
|
|
|
越级上报热力图 |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -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: { |
|
|
|
|
@ -173,8 +183,8 @@ export default { |
|
|
|
|
ob: null, |
|
|
|
|
selectedArea: null, |
|
|
|
|
zoom: 1, |
|
|
|
|
date:'', |
|
|
|
|
time:'', |
|
|
|
|
date: "", |
|
|
|
|
time: "", |
|
|
|
|
calssOption: { |
|
|
|
|
step: 0.2, // 数值越大速度滚动越快 |
|
|
|
|
limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length |
|
|
|
|
@ -186,9 +196,9 @@ export default { |
|
|
|
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms) |
|
|
|
|
}, |
|
|
|
|
timeData: [ |
|
|
|
|
{label:'月',value:1}, |
|
|
|
|
{label:'季',value:2}, |
|
|
|
|
{label:'年',value:3}, |
|
|
|
|
{ label: "月", value: 1 }, |
|
|
|
|
{ label: "季", value: 2 }, |
|
|
|
|
{ label: "年", value: 3 }, |
|
|
|
|
], |
|
|
|
|
trendChart: null, |
|
|
|
|
pieChart: null, |
|
|
|
|
@ -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(); |
|
|
|
|
@ -320,27 +330,27 @@ export default { |
|
|
|
|
this.ob?.unsubscribe(); |
|
|
|
|
}, |
|
|
|
|
created() { |
|
|
|
|
this.getResolve() |
|
|
|
|
this.getResolve(); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
handleReli(val) { |
|
|
|
|
this.active = val; |
|
|
|
|
if (val == 1) { |
|
|
|
|
this.reliData = [{胶东街道:2, 洋河镇:80, 铺集镇:90,九龙街道:40}] |
|
|
|
|
this.reliData = [{ 胶东街道: 2, 洋河镇: 80, 铺集镇: 90, 九龙街道: 40 }]; |
|
|
|
|
} else if (val == 2) { |
|
|
|
|
this.reliData = [{里岔镇:20, 胶西街道:80, 中云街道:90,九龙街道:40}] |
|
|
|
|
this.reliData = [{ 里岔镇: 20, 胶西街道: 80, 中云街道: 90, 九龙街道: 40 }]; |
|
|
|
|
} else if (val == 3) { |
|
|
|
|
this.reliData = [{阜安街道:50, 三里河街道:84, 胶东街道:86,胶北街道:40}] |
|
|
|
|
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 |
|
|
|
|
}) |
|
|
|
|
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, |
|
|
|
|
@ -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, |
|
|
|
|
@ -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); |
|
|
|
|
@ -932,7 +1021,6 @@ export default { |
|
|
|
|
-webkit-text-fill-color: transparent; |
|
|
|
|
font-size: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -969,7 +1057,7 @@ export default { |
|
|
|
|
|
|
|
|
|
::v-deep .el-range-input { |
|
|
|
|
background: transparent; |
|
|
|
|
color:#fff |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
::v-deep .el-range-separator { |
|
|
|
|
color: #fff; |
|
|
|
|
|
jinna
3 years ago