| | |
| | | <div>值班信息(当日)</div> |
| | | </div> |
| | | |
| | | <div class="duty-information-box"> |
| | | <div class="duty-information-box" v-show="!showMJL"> |
| | | <div v-for="item in schedulingList" :key="item.id"> |
| | | <div> |
| | | <span>{{ item.type }}</span> |
| | | </div> |
| | | <div> |
| | | <span>{{ item.person }}</span> |
| | | </div> |
| | | </div> |
| | | <div v-if="schedulingList.length == 0" class="no-zb-data">暂无值班数据</div> |
| | | </div> |
| | | |
| | | <div class="duty-information-box" v-show="showMJL"> |
| | | <div> |
| | | <div> |
| | | <span>值班</span> |
| | | </div> |
| | | <div> |
| | | <span>徐星逸,任圣日,娄永攀,蔡善龙,陈小强,刘开勇,梅祥,吕镇,付建冬</span> |
| | | </div> |
| | | </div> |
| | | <div> |
| | | <div> |
| | | <span>副班、巡逻</span> |
| | | </div> |
| | | <div> |
| | | <span>章正椿,夏文翔,叶江明,黄俊龙,苏茯林,王顺祥</span> |
| | | </div> |
| | | </div> |
| | | <div v-if="schedulingList.length == 0" class="no-zb-data">暂无值班数据</div> |
| | |
| | | <div class="tab-title-small">警情变化趋势</div> |
| | | </div> |
| | | <div class="tab" :class="{ 'select-on-tab': caseInfoType == 1 }" @click="initEventChangeEcharts(1)"> |
| | | <div class="tab-title-small">警情排行</div> |
| | | <div class="tab-title-small">社区警情排行</div> |
| | | </div> |
| | | <div class="tab" :class="{ 'select-on-tab': caseInfoType == 2 }" @click="initEventChangeEcharts(2)"> |
| | | <div class="tab-title-small">辖区警情排行</div> |
| | | </div> |
| | | </div> |
| | | <div id="EventChangeEcharts" class="echarts-box"></div> |
| | |
| | | import { getSchedulingList, getSchedulingDeptList } from "@/api/home/index.js" |
| | | import { fontSize } from "@/utils/fontSize.js" |
| | | |
| | | import { getCaseAll, getCaseRanking, getEquipment } from "@/api/home/index.js" |
| | | import { getCaseAll, getCaseRanking, getCaseRankingArea, getEquipment } from "@/api/home/index.js" |
| | | |
| | | const timeEvents = [] |
| | | |
| | |
| | | schedulingList: [], |
| | | schedulingDeptList: [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6], |
| | | policeStaionID: "", |
| | | showMJL: false, |
| | | originTitle: ['值班', '副班、巡逻'], |
| | | transTitle: [{ label: '人员', width: '28%', align: 'center' }, { label: '人员', width: '', align: 'left' },], |
| | | caseInfoType: 0 |
| | |
| | | |
| | | getSchedulingList () { |
| | | this.schedulingLoading = true |
| | | |
| | | const params = { |
| | | sameday: 1, |
| | | isPage: 1 |
| | | } |
| | | |
| | | getSchedulingList(params).then((res) => { |
| | | this.schedulingList = res.data.data |
| | | }) |
| | | |
| | | setTimeout(() => { |
| | | if (this.userInfo.dept_id == "1596020515064381442") { |
| | | this.schedulingNoDataText = ' ' |
| | | this.schedulingLoading = false |
| | | if (!this.schedulingList.length) { |
| | | setTimeout(() => { |
| | | this.schedulingNoDataText = '暂无值班数据' |
| | | }, 200) |
| | | const data = [ |
| | | { |
| | | person: |
| | | "徐星逸,任圣日,娄永攀,蔡善龙,陈小强,刘开勇,梅祥,吕镇,付建冬", |
| | | patrol: "章正椿,夏文翔,叶江明,黄俊龙,苏茯林,王顺祥", |
| | | } |
| | | ] |
| | | |
| | | const matrixData = data.map((row) => { |
| | | let arr = [] |
| | | for (let key in row) { |
| | | arr.push(row[key]) |
| | | } |
| | | return arr |
| | | }) |
| | | setTimeout(() => { |
| | | this.schedulingList = matrixData[0].map((col, i) => { |
| | | return [this.originTitle[i], ...matrixData.map((row) => { |
| | | return row[i] |
| | | })] |
| | | }) |
| | | this.schedulingLoading = false |
| | | }, 1000) |
| | | |
| | | this.$nextTick(() => { |
| | | this.tableHeight = |
| | | this.$refs.Container.offsetHeight - |
| | | this.$refs.caseBox.offsetHeight - |
| | | this.$refs.crowdBox.offsetHeight - |
| | | this.$refs.alertBoxTitle.offsetHeight |
| | | }) |
| | | |
| | | this.showMJL = true |
| | | } else { |
| | | const params = { |
| | | sameday: 1, |
| | | isPage: 1 |
| | | } |
| | | }, 500) |
| | | |
| | | this.showMJL = false |
| | | getSchedulingList(params).then((res) => { |
| | | this.schedulingList = res.data.data |
| | | }) |
| | | |
| | | setTimeout(() => { |
| | | this.schedulingNoDataText = ' ' |
| | | this.schedulingLoading = false |
| | | if (!this.schedulingList.length) { |
| | | setTimeout(() => { |
| | | this.schedulingNoDataText = '暂无值班数据' |
| | | }, 200) |
| | | } |
| | | }, 500) |
| | | } |
| | | }, |
| | | |
| | | echartsResize () { |
| | |
| | | }) |
| | | |
| | | eventchangemychart.clear() |
| | | const optionsData = await this.getCaseAll(date[0], date[1]) |
| | | eventchangemychart.showLoading({ |
| | | text: '拼命加载中', |
| | | color: '#c23531', |
| | | textColor: '#FFF', |
| | | maskColor: 'rgba(0, 0, 0, 0.2)', |
| | | zlevel: 0, |
| | | }) |
| | | setTimeout(() => { |
| | | eventchangemychart.hideLoading() |
| | | eventchangemychart.setOption(this.initEventChangeOption(optionsData.xData, optionsData.yDataList)) |
| | | }, 500) |
| | | |
| | | if (this.caseInfoType == 0) { |
| | | this.getCaseAll(date[0], date[1]) |
| | | } else if (this.caseInfoType == 1) { |
| | | this.getCaseRanking(date[0], date[1]) |
| | | } else { |
| | | this.getCaseRankingArea(date[0], date[1]) |
| | | } |
| | | }, |
| | | |
| | | // 设置默认时间 |
| | |
| | | }) |
| | | }, |
| | | |
| | | // 获取警情排行统计值 |
| | | // 获取警情社区排行统计值 |
| | | getCaseRanking (start, end) { |
| | | getCaseRanking( |
| | | start, |
| | |
| | | let data = [] |
| | | |
| | | if (res.data.data) { |
| | | res.data.data = res.data.data.sort((a, b) => a.value - b.value) |
| | | res.data.data = res.data.data.map((item, index) => { |
| | | res.data.data = res.data.data.sort((a, b) => b.value - a.value) |
| | | res.data.data = res.data.data.filter((item, index) => index < 8).map((item, index) => { |
| | | item.value = item.count |
| | | |
| | | if (index == 0) { |
| | |
| | | return item |
| | | }).sort((a, b) => b.value - a.value) |
| | | |
| | | console.log(res.data.data, 465) |
| | | data = res.data.data |
| | | } else { |
| | | data = [] |
| | | } |
| | | |
| | | eventchangemychart.setOption(this.initRankingOption(data)) |
| | | |
| | | setTimeout(() => { |
| | | this.eventChangeEchartsLoading = false |
| | | }, 500) |
| | | }) |
| | | }, |
| | | |
| | | // 获取警情辖区排行统计值 |
| | | getCaseRankingArea (start, end) { |
| | | getCaseRankingArea( |
| | | start, |
| | | end, |
| | | this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id |
| | | ).then((res) => { |
| | | let data = [] |
| | | if (res.data.data) { |
| | | res.data.data = res.data.data.sort((a, b) => b.num - a.num) |
| | | res.data.data = res.data.data.filter((item) => { |
| | | return 'num' in item && 'police_station_name' in item |
| | | }).filter((item, index) => index < 8).map((item, index) => { |
| | | item.value = item.num |
| | | item.name = item.police_station_name |
| | | |
| | | if (index == 0) { |
| | | item.itemStyle = { |
| | | color: '#EB3C5A' |
| | | } |
| | | } else if (index == 1) { |
| | | item.itemStyle = { |
| | | color: '#FA8331' |
| | | } |
| | | } else if (index == 2) { |
| | | item.itemStyle = { |
| | | color: '#F7B833' |
| | | } |
| | | } else { |
| | | item.itemStyle = { |
| | | color: '#395FFD' |
| | | } |
| | | } |
| | | |
| | | return item |
| | | }) |
| | | |
| | | data = res.data.data |
| | | } else { |
| | |
| | | |
| | | if (type == 0) { |
| | | this.getCaseAll(date[0], date[1]) |
| | | } else { |
| | | } else if (type == 1) { |
| | | this.getCaseRanking(date[0], date[1]) |
| | | } else { |
| | | this.getCaseRankingArea(date[0], date[1]) |
| | | } |
| | | |
| | | }, |
| | | |
| | | // 警情数量统计的options |
| | |
| | | return { value: item.value, itemStyle: item.itemStyle } |
| | | }) |
| | | let xData = dataArr.map((item) => { |
| | | let name = item.name.substring(0, 6) + '…' |
| | | if (item.name.length > 5) { |
| | | let name = item.name.substring(0, 6) + '…' |
| | | |
| | | return name |
| | | return name |
| | | } else { |
| | | return item.name |
| | | } |
| | | }) |
| | | option = { |
| | | tooltip: { |
| | |
| | | ], |
| | | grid: { |
| | | top: "3%", |
| | | left: "-20%", |
| | | left: "-14%", |
| | | right: "2%", |
| | | bottom: "3%", |
| | | containLabel: true, |
| | |
| | | // 现有设备统计 |
| | | getEquipment () { |
| | | const typeData = { |
| | | carCount: "车辆", |
| | | carCount: "警车", |
| | | monitorCount: "摄像头", |
| | | phoneCount: "执法记录仪", |
| | | recorderCount: "手台", |
| | | } |
| | | |
| | | const typeIndexData = { |
| | | 车辆: 0, |
| | | 警车: 0, |
| | | 摄像头: 1, |
| | | 手台: 2, |
| | | 执法记录仪: 3, |