From d0e3b27db01795b76dd6b68beef0bfe1cdc599e6 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 07 Jan 2023 17:26:58 +0800
Subject: [PATCH] 首页相关更改
---
src/views/home/components/rightContainer.vue | 264 +++++++++++++++++++++++++++++++++-------------------
1 files changed, 167 insertions(+), 97 deletions(-)
diff --git a/src/views/home/components/rightContainer.vue b/src/views/home/components/rightContainer.vue
index e868b8b..f5845aa 100644
--- a/src/views/home/components/rightContainer.vue
+++ b/src/views/home/components/rightContainer.vue
@@ -32,9 +32,9 @@
<div class="title">
案件统计
<div class="timer">
- <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels
- range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
- :picker-options="pickerOptions"></el-date-picker>
+ <el-date-picker :clearable="false" v-model="eventTime" type="daterange" align="right"
+ unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+ @change="caseTimeChange" :picker-options="pickerOptions"></el-date-picker>
</div>
</div>
<div id="EventChangeEcharts" class="echarts-box"></div>
@@ -112,6 +112,7 @@
import recorderArr from '@/assets/data/equimentsDate/recorder.js'
import { getSchedulingList } from '@/api/home/index.js'
import { fontSize } from '@/utils/fontSize.js'
+import { getCaseAll } from "@/api/home/index.js"
const timeEvents = []
@@ -119,7 +120,7 @@
export default {
data () {
return {
- eventTime: '',
+ eventTime: [],
pickerOptions: {
shortcuts: [{
text: '最近一周',
@@ -164,6 +165,17 @@
}
},
created () {
+ this.pickerOptions = {
+ ...this.pickerOptions,
+ disabledDate (time) {
+ // 设置可选择的日期为今天之后的一个月内
+ let curDate = (new Date()).getTime()
+ return time.getTime() > curDate
+ }
+ }
+
+ this.defaultDate()
+
this.workingSaveArr = this.workingSaveArr.concat(this.getEquimentChartStateData(phoneArr).workingArr).concat(this.getEquimentChartStateData(carArr).workingArr).concat(this.getEquimentChartStateData(recorderArr).workingArr)
this.faultSaveArr = this.faultSaveArr.concat(this.getEquimentChartStateData(phoneArr).faultArr).concat(this.getEquimentChartStateData(carArr).faultArr).concat(this.getEquimentChartStateData(recorderArr).faultArr)
this.getSchedulingList()
@@ -216,7 +228,6 @@
trigger: 'item',
confine: true,
formatter: function (params) {
- console.log(params, 555)
let tipHtml = ``
if ('carCount' in params.data) {
tipHtml = `${params.marker} <strong style="color: ${params.color}">${params.data.name} ${params.data.value}台</strong><br /><strong style="margin-left:10px;color:#5c7bd9">占比：${params.percent}%</strong><br /><span style="color:#5470c6">警车：${params.data.carCount}台</span><br /><span style="margin-left:10px;color:#91cc75">监控：${params.data.monitorCount}台</span><br /><span style="color:#fac858">手台：${params.data.phoneCount}台</span><br /><span style="margin-left:10px;color:#ee6666">手持记录仪：${params.data.recorderCount}台</span>`
@@ -354,92 +365,167 @@
})
},
- initEventChangeEcharts () {
- var chartDom = document.getElementById('EventChangeEcharts')
- eventchangemychart = this.$echarts.init(chartDom)
- eventchangemychart.setOption(this.initEventChangeOption([10, 9, 12, 6, 4, 14, 8]))
+ // 案件统计中时间变化
+ async caseTimeChange (e) {
+ const date = e.map(item => {
+ return this.dateFormat(item)
+ })
+
+ eventchangemychart.clear()
+ const optionsData = await this.getCaseAll(date[0], date[1])
+ eventchangemychart.setOption(this.initEventChangeOption(optionsData.xData, optionsData.yData))
},
- initEventChangeOption (seriesData) {
- return {
- tooltip: {
- trigger: 'item',
- formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px;color:#5c7bd9">{c0}起</strong>'
- },
- xAxis: {
- type: 'category',
- data: ['3-26', '3-27', '3-28', '3-29', '3-30', '3-31', '4-1'],
- axisLabel: {
- color: "#fff",
- fontSize: fontSize(14)
- },
- axisLine: {
- lineStyle: {
- color: "#fff"
+ // 设置默认时间
+ defaultDate () {
+ var current = new Date()
+
+ var seven = new Date(current.getTime() - 7 * 24 * 60 * 60 * 1000)
+
+ this.eventTime = [seven, current] //将值设置给插件绑定的数据
+ },
+
+ // 获取当前日期
+ dateFormat (dateData) {
+ var date = new Date(dateData)
+ var y = date.getFullYear()
+ var m = date.getMonth() + 1
+ m = m < 10 ? ('0' + m) : m
+ var d = date.getDate()
+ d = d < 10 ? ('0' + d) : d
+ const time = y + '-' + m + '-' + d
+ return time
+ },
+
+ // 获取案件统计值
+ getCaseAll (start, end) {
+ const caseAll = getCaseAll(start, end).then(res => {
+ return res.data.reduce((previous, current) => {
+ previous.xData.push(current.days)
+ previous.yData.push(current.cout)
+ return previous
+ }, { xData: [], yData: [] })
+ })
+
+ return caseAll
+ },
+
+ // 初始化案件统计
+ async initEventChangeEcharts () {
+ var chartDom = document.getElementById('EventChangeEcharts')
+ eventchangemychart = this.$echarts.init(chartDom)
+
+ const date = this.eventTime.map(item => {
+ return this.dateFormat(item)
+ })
+
+ const optionsData = await this.getCaseAll(date[0], date[1])
+
+ eventchangemychart.setOption(this.initEventChangeOption(optionsData.xData, optionsData.yData))
+ },
+
+ // 案件统计的options
+ initEventChangeOption (xData, yData) {
+ let option
+ if (xData.length == 0) { //暂无数据
+ option = {
+ title: {
+ text: '暂无数据',
+ x: 'center',
+ y: 'center',
+ textStyle: {
+ color: "#fff",
+ fontSize: fontSize(14),
+ fontWeight: 'normal',
}
}
- },
- yAxis: {
- type: 'value',
- splitLine: {
- show: false
+ }
+ } else {
+ option = {
+ tooltip: {
+ trigger: 'item',
+ formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px;color:#5c7bd9">{c0}起</strong>'
},
- axisLabel: {
- color: "#fff",
- fontSize: fontSize(14)
- },
- axisLine: {
- lineStyle: {
- color: "#fff"
- }
- }
- },
- series: [
- {
- data: seriesData,
- type: 'line',
- smooth: true,
- areaStyle: {
- normal: {
- //渐变色
- color: new this.$echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- //波形图渐变色样式
- offset: 0,
- color: "rgba(3, 108, 255, 0.7)"
- },
- {
- offset: 0.8,
- color: "rgba(3, 108, 255, 0.1)"
- }
- ],
- false
- )
- }
+ xAxis: {
+ type: 'category',
+ data: xData,
+ axisLabel: {
+ color: "#fff",
+ fontSize: fontSize(14)
},
- itemStyle: {
- normal: {
- color: 'red', //改变折线点的颜色
- lineStyle: {
- color: 'rgba(3, 108, 255, 1)' //改变折线颜色
+ axisLine: {
+ lineStyle: {
+ color: "#fff"
+ }
+ }
+ },
+ yAxis: {
+ type: 'value',
+
+ minInterval: 1,
+
+ splitLine: {
+ show: false
+ },
+ axisLabel: {
+ color: "#fff",
+ fontSize: fontSize(14)
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#fff"
+ }
+ }
+ },
+ series: [
+ {
+ data: yData,
+ type: 'line',
+ smooth: true,
+ areaStyle: {
+ normal: {
+ //渐变色
+ color: new this.$echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ //波形图渐变色样式
+ offset: 0,
+ color: "rgba(3, 108, 255, 0.7)"
+ },
+ {
+ offset: 0.8,
+ color: "rgba(3, 108, 255, 0.1)"
+ }
+ ],
+ false
+ )
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: 'red', //改变折线点的颜色
+ lineStyle: {
+ color: 'rgba(3, 108, 255, 1)' //改变折线颜色
+ }
}
}
}
- }
- ],
- grid: {
- top: '4%',
- left: '3%',
- right: '2%',
- bottom: '4%',
- containLabel: true
- },
+ ],
+ grid: {
+ top: '4%',
+ left: '3%',
+ right: '2%',
+ bottom: '4%',
+ containLabel: true
+ },
+ }
}
+
+ return option
},
clickEquimentChart () {
@@ -484,22 +570,6 @@
// }
equipmentmyChart.setOption(this.initEquipmentOptions(this.getEquimentChartData(police)), true)
this.policeName = police
- },
-
- selectPoliceChangeEventData (police) {
- if (police == '全部') {
- eventchangemychart.setOption(this.initEventChangeOption([10, 9, 12, 6, 4, 14, 8]), true)
- } else if (police == '车站派出所') {
- eventchangemychart.setOption(this.initEventChangeOption([6, 1, 4, 0, 1, 3, 0]), true)
- } else if (police == '沙溪派出所') {
- eventchangemychart.setOption(this.initEventChangeOption([1, 4, 0, 1, 0, 2, 1]), true)
- } else if (police == '北门派出所') {
- eventchangemychart.setOption(this.initEventChangeOption([2, 0, 3, 2, 1, 7, 1]), true)
- } else if (police == '灵溪派出所') {
- eventchangemychart.setOption(this.initEventChangeOption([0, 3, 2, 1, 1, 2, 4]), true)
- } else if (police == '江光派出所') {
- eventchangemychart.setOption(this.initEventChangeOption([1, 1, 3, 2, 1, 0, 2]), true)
- }
},
getEquimentDataCountandArr (data, policeStationName) {
--
Gitblit v1.9.3