| | |
| | | <div>值班信息(当日)</div> |
| | | </div> |
| | | |
| | | <div class="table-box" v-show="!showMJL"> |
| | | <el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%" |
| | | :header-cell-style="{ 'text-align': 'center' }" |
| | | :cell-style="{ 'text-align': 'center', borderColor: '#324e75' }" :row-class-name="tableRowClassName" |
| | | empty-text="暂无值班信息"> |
| | | <el-table-column prop="dept" label="值班单位"></el-table-column> |
| | | <el-table-column prop="person" label="姓名"></el-table-column> |
| | | <el-table-column prop="contact" label="联系方式"></el-table-column> |
| | | </el-table> |
| | | <div class="pointList"> |
| | | <el-tooltip class="item" effect="dark" :content="item.dept" placement="top" |
| | | v-for="(item, index) in schedulingDeptList" :key="index"> |
| | | <div class="point" @click="getSchedlingList(item)"></div> |
| | | </el-tooltip> |
| | | <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="table-box" v-show="showMJL"> |
| | | <el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%" |
| | | :show-header="false" :header-cell-style="{ 'text-align': 'center' }" |
| | | :cell-style="{ 'text-align': 'center', borderColor: '#324e75' }" |
| | | :row-class-name="tableRowClassName"> |
| | | <el-table-column :show-overflow-tooltip="true" v-for="(item, index) in transTitle" :label="item" |
| | | :key="index" align="center"> |
| | | <template slot-scope="scope"> |
| | | {{ scope.row[index] }} |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <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> |
| | | </div> |
| | | |
| | |
| | | <div class="alert-box" ref="alertBox "> |
| | | <div class="box"> |
| | | <div class="title"> |
| | | 案件统计 |
| | | 警情统计 |
| | | <div class="timer"> |
| | | <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> |
| | | <el-main v-loading="eventChangeEchartsLoading" element-loading-text="拼命加载中" |
| | | element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"> |
| | | <div class="sub-tab"> |
| | | <div class="tab" :class="{ 'select-on-tab': caseInfoType == 0 }" @click="initEventChangeEcharts(0)"> |
| | | <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> |
| | | <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> |
| | | </el-main> |
| | | </div> |
| | | |
| | | <svg class="border-svg"> |
| | |
| | | |
| | | <div class="crowd-box" ref="crowdBox"> |
| | | <div class="box"> |
| | | <div class="title"> |
| | | <div>现有设备</div> |
| | | <div class="title-tab"> |
| | | <span :class="{ choosed: linetype == 0 }" @click="initEquipmentEcharts(0)">设备种类</span>/ |
| | | <span :class="{ choosed: linetype == 1 }" @click="initEquipmentEcharts(1)">设备状态</span> |
| | | <div class="title">现有设备</div> |
| | | <el-main v-loading="equipmentEchartsLoading" element-loading-text="拼命加载中" |
| | | element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"> |
| | | <div class="sub-tab"> |
| | | <div class="tab" :class="{ 'select-on-tab': linetype == 0 }" @click="initEquipmentEcharts(0)"> |
| | | <div class="tab-title-small">设备种类</div> |
| | | </div> |
| | | <div class="tab" :class="{ 'select-on-tab': linetype == 1 }" @click="initEquipmentEcharts(1)"> |
| | | <div class="tab-title-small">设备状态</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div style="overflow: hidden" id="EquipmentEcharts" class="echarts-box"></div> |
| | | <div style="overflow: hidden" id="EquipmentEcharts" class="echarts-box"></div> |
| | | </el-main> |
| | | </div> |
| | | |
| | | <svg class="border-svg"> |
| | |
| | | import { getSchedulingList, getSchedulingDeptList } from "@/api/home/index.js" |
| | | import { fontSize } from "@/utils/fontSize.js" |
| | | |
| | | import { getCaseAll, getEquipment } from "@/api/home/index.js" |
| | | import { getCaseAll, getCaseRanking, getCaseRankingArea, getEquipment } from "@/api/home/index.js" |
| | | |
| | | const timeEvents = [] |
| | | |
| | |
| | | data () { |
| | | return { |
| | | eventTime: [], |
| | | equipmentEchartsLoading: false, |
| | | eventChangeEchartsLoading: false, |
| | | schedulingNoDataText: ' ', |
| | | schedulingLoading: false, |
| | | pickerOptions: { |
| | | shortcuts: [ |
| | | { |
| | | text: "最近一周", |
| | | text: '最近一周', |
| | | onClick (picker) { |
| | | const end = new Date() |
| | | const start = new Date() |
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 7) |
| | | picker.$emit("pick", [start, end]) |
| | | }, |
| | | picker.$emit('pick', [start, end]) |
| | | } |
| | | }, |
| | | { |
| | | text: "最近一个月", |
| | | text: '最近两周', |
| | | onClick (picker) { |
| | | const end = new Date() |
| | | const start = new Date() |
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 14) |
| | | picker.$emit('pick', [start, end]) |
| | | } |
| | | }, |
| | | { |
| | | text: '最近一个月', |
| | | onClick (picker) { |
| | | const end = new Date() |
| | | const start = new Date() |
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 30) |
| | | picker.$emit("pick", [start, end]) |
| | | }, |
| | | picker.$emit('pick', [start, end]) |
| | | } |
| | | }, |
| | | { |
| | | text: "最近三个月", |
| | | text: '最近三个月', |
| | | onClick (picker) { |
| | | const end = new Date() |
| | | const start = new Date() |
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 90) |
| | | picker.$emit("pick", [start, end]) |
| | | }, |
| | | }, |
| | | ], |
| | | picker.$emit('pick', [start, end]) |
| | | } |
| | | }] |
| | | }, |
| | | regionTotal: 0, |
| | | linetype: 0, |
| | |
| | | schedulingDeptList: [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6], |
| | | policeStaionID: "", |
| | | showMJL: false, |
| | | originTitle: ['值班人员', '副班、巡逻人员'], |
| | | transTitle: ['', '人员', '人员'], |
| | | originTitle: ['值班', '副班、巡逻'], |
| | | transTitle: [{ label: '人员', width: '28%', align: 'center' }, { label: '人员', width: '', align: 'left' },], |
| | | caseInfoType: 0 |
| | | } |
| | | }, |
| | | |
| | |
| | | this.$refs.caseBox.offsetHeight - |
| | | this.$refs.crowdBox.offsetHeight - |
| | | this.$refs.alertBoxTitle.offsetHeight - |
| | | 86 |
| | | 55 |
| | | }) |
| | | }, |
| | | |
| | |
| | | getHomeAllData (id = "") { |
| | | this.policeStaionID = id |
| | | |
| | | this.initEventChangeEcharts() |
| | | this.initEventChangeEcharts(this.caseInfoType) |
| | | |
| | | this.initEquipmentEcharts(this.linetype) |
| | | |
| | |
| | | } |
| | | |
| | | rightTiming = setInterval(async () => { |
| | | this.initEventChangeEcharts(this.caseInfoType) |
| | | this.initEquipmentEcharts(this.linetype) |
| | | }, 600000) |
| | | }, |
| | | |
| | | getSchedulingList () { |
| | | console.log(this.userInfo, 4567) |
| | | this.schedulingLoading = true |
| | | if (this.userInfo.dept_id == "1596020515064381442") { |
| | | this.schedulingNoDataText = ' ' |
| | | const data = [ |
| | | { |
| | | person: |
| | | "徐星逸、任圣日、娄永攀、蔡善龙、陈小强、梅祥、吕镇、刘开勇、付建冬", |
| | | "徐星逸,任圣日,娄永攀,蔡善龙,陈小强,刘开勇,梅祥,吕镇,付建冬", |
| | | patrol: "章正椿,夏文翔,叶江明,黄俊龙,苏茯林,王顺祥", |
| | | }, |
| | | { |
| | | person: |
| | | "矢裕忠、戴饶平、余传公、杨敏、苏浩男、周安云、蒋丁岩、陈圣俊、雷智荐", |
| | | patrol: "潘林彬,刘志祥,李志强,杨俊浩,黄天行,叶子淳", |
| | | }, |
| | | { |
| | | person: |
| | | "齐光华、周静、吕来城、周骏、邓道群、沈强、王岳、魏霄峰、夏添、李道福", |
| | | patrol: "余梦宝,徐宝盛,李仁豪,付涵,周林,王宗强", |
| | | }, |
| | | } |
| | | ] |
| | | |
| | | const matrixData = data.map((row) => { |
| | |
| | | } |
| | | return arr |
| | | }) |
| | | |
| | | this.schedulingList = matrixData[0].map((col, i) => { |
| | | return [this.originTitle[i], ...matrixData.map((row) => { |
| | | return row[i] |
| | | })] |
| | | }) |
| | | 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 = |
| | |
| | | } else { |
| | | const params = { |
| | | sameday: 1, |
| | | isPage: 1 |
| | | } |
| | | |
| | | this.showMJL = false |
| | | getSchedulingList(1, 100, params).then((res) => { |
| | | this.schedulingList = res.data.data.records |
| | | getSchedulingList(params).then((res) => { |
| | | this.schedulingList = res.data.data |
| | | }) |
| | | |
| | | setTimeout(() => { |
| | | this.schedulingNoDataText = ' ' |
| | | this.schedulingLoading = false |
| | | if (!this.schedulingList.length) { |
| | | setTimeout(() => { |
| | | this.schedulingNoDataText = '暂无值班数据' |
| | | }, 200) |
| | | } |
| | | }, 500) |
| | | } |
| | | }, |
| | | |
| | |
| | | eventchangemychart.resize() |
| | | }, |
| | | |
| | | // 案件统计中时间变化 |
| | | // 警情统计中时间变化 |
| | | async caseTimeChange (e) { |
| | | const date = e.map((item) => { |
| | | return this.dateFormat(item) |
| | | }) |
| | | |
| | | 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.yData)) |
| | | }, 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]) |
| | | } |
| | | }, |
| | | |
| | | // 设置默认时间 |
| | |
| | | return time |
| | | }, |
| | | |
| | | // 获取案件统计值 |
| | | // 获取警情统计值 |
| | | getCaseAll (start, end) { |
| | | const caseAll = getCaseAll( |
| | | getCaseAll( |
| | | start, |
| | | end, |
| | | this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id |
| | | ).then((res) => { |
| | | if (res.data.length > 0) { |
| | | return res.data.reduce( |
| | | let obj = {} |
| | | if (res.data.timeList) { |
| | | console.log(res.data, 1111) |
| | | let yDataList = {} |
| | | yDataList.dqList = res.data.dqList.reduce( |
| | | (previous, current) => { |
| | | previous.xData.push(current.days) |
| | | previous.yData.push(current.cout) |
| | | previous.push(current.count) |
| | | return previous |
| | | }, |
| | | { xData: [], yData: [] } |
| | | [] |
| | | ) |
| | | yDataList.zpList = res.data.zpList.reduce( |
| | | (previous, current) => { |
| | | previous.push(current.count) |
| | | return previous |
| | | }, |
| | | [] |
| | | ) |
| | | yDataList.jfList = res.data.jfList.reduce( |
| | | (previous, current) => { |
| | | previous.push(current.count) |
| | | return previous |
| | | }, |
| | | [] |
| | | ) |
| | | yDataList.qtList = res.data.qtList.reduce( |
| | | (previous, current) => { |
| | | previous.push(current.count) |
| | | return previous |
| | | }, |
| | | [] |
| | | ) |
| | | yDataList.qjList = res.data.qjList.reduce( |
| | | (previous, current) => { |
| | | previous.push(current.count) |
| | | return previous |
| | | }, |
| | | [] |
| | | ) |
| | | yDataList.sdList = res.data.sdList.reduce( |
| | | (previous, current) => { |
| | | previous.push(current.count) |
| | | return previous |
| | | }, |
| | | [] |
| | | ) |
| | | yDataList.sduList = res.data.sduList.reduce( |
| | | (previous, current) => { |
| | | previous.push(current.count) |
| | | return previous |
| | | }, |
| | | [] |
| | | ) |
| | | yDataList.shList = res.data.shList.reduce( |
| | | (previous, current) => { |
| | | previous.push(current.count) |
| | | return previous |
| | | }, |
| | | [] |
| | | ) |
| | | let xData = res.data.timeList.map(item => item.slice(5, 10)) |
| | | obj = { xData, yDataList } |
| | | } else { |
| | | return { xData: [], yData: [] } |
| | | obj = { xData: [], yDataList: {} } |
| | | } |
| | | }) |
| | | |
| | | return caseAll |
| | | eventchangemychart.setOption(this.initEventChangeOption(obj.xData, obj.yDataList)) |
| | | |
| | | setTimeout(() => { |
| | | this.eventChangeEchartsLoading = false |
| | | }, 500) |
| | | }) |
| | | }, |
| | | |
| | | // 初始化案件统计 |
| | | async initEventChangeEcharts () { |
| | | var chartDom = document.getElementById("EventChangeEcharts") |
| | | // 获取警情社区排行统计值 |
| | | getCaseRanking (start, end) { |
| | | getCaseRanking( |
| | | 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.value - a.value) |
| | | res.data.data = res.data.data.filter((item, index) => index < 8).map((item, index) => { |
| | | item.value = item.count |
| | | |
| | | 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 |
| | | }).sort((a, b) => b.value - a.value) |
| | | |
| | | 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 { |
| | | data = [] |
| | | } |
| | | |
| | | eventchangemychart.setOption(this.initRankingOption(data)) |
| | | |
| | | setTimeout(() => { |
| | | this.eventChangeEchartsLoading = false |
| | | }, 500) |
| | | }) |
| | | }, |
| | | |
| | | // 初始化警情数量统计 |
| | | async initEventChangeEcharts (type) { |
| | | this.caseInfoType = type |
| | | this.eventChangeEchartsLoading = true |
| | | |
| | | if ( |
| | | eventchangemychart != null && |
| | | eventchangemychart != "" && |
| | | eventchangemychart != undefined |
| | | ) |
| | | ) { |
| | | |
| | | eventchangemychart.clear() |
| | | eventchangemychart.dispose() |
| | | |
| | | } |
| | | |
| | | 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.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.yData)) |
| | | }, 500) |
| | | if (type == 0) { |
| | | this.getCaseAll(date[0], date[1]) |
| | | } else if (type == 1) { |
| | | this.getCaseRanking(date[0], date[1]) |
| | | } else { |
| | | this.getCaseRankingArea(date[0], date[1]) |
| | | } |
| | | }, |
| | | |
| | | // 案件统计的options |
| | | initEventChangeOption (xData, yData) { |
| | | // 警情数量统计的options |
| | | initEventChangeOption (xData, yDataList) { |
| | | let option |
| | | if (xData.length == 0) { |
| | | //暂无数据 |
| | | option = { |
| | | title: { |
| | | text: "暂无案件数据", |
| | | text: "暂无警情数据", |
| | | x: "center", |
| | | y: "center", |
| | | textStyle: { |
| | |
| | | } |
| | | } else { |
| | | option = { |
| | | color: ['#5470C6', '#73C0DE', '#EE6666', '#FAC858'], |
| | | tooltip: { |
| | | trigger: "item", |
| | | formatter: |
| | |
| | | color: "#fff", |
| | | }, |
| | | }, |
| | | }, |
| | | legend: { |
| | | data: ['盗窃', '涉诈', '纠纷', '其他', '求助', '涉毒', '涉赌', '涉黄'], |
| | | textStyle: { |
| | | color: "#fff" |
| | | } |
| | | }, |
| | | yAxis: { |
| | | type: "value", |
| | |
| | | }, |
| | | series: [ |
| | | { |
| | | data: yData, |
| | | name: '盗窃', |
| | | data: yDataList.dqList, |
| | | 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)", //改变折线颜色 |
| | | }, |
| | | }, |
| | | }, |
| | | // 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)", //改变折线颜色 |
| | | // }, |
| | | // }, |
| | | // }, |
| | | }, |
| | | { |
| | | name: '涉诈', |
| | | data: yDataList.zpList, |
| | | type: "line", |
| | | smooth: true, |
| | | }, |
| | | { |
| | | name: '纠纷', |
| | | data: yDataList.jfList, |
| | | type: "line", |
| | | smooth: true, |
| | | }, |
| | | { |
| | | name: '其他', |
| | | data: yDataList.qtList, |
| | | type: "line", |
| | | smooth: true, |
| | | }, |
| | | { |
| | | name: '求助', |
| | | data: yDataList.qjList, |
| | | type: "line", |
| | | smooth: true, |
| | | }, |
| | | { |
| | | name: '涉毒', |
| | | data: yDataList.sduList, |
| | | type: "line", |
| | | smooth: true, |
| | | }, |
| | | { |
| | | name: '涉赌', |
| | | data: yDataList.sdList, |
| | | type: "line", |
| | | smooth: true, |
| | | }, |
| | | { |
| | | name: '涉黄', |
| | | data: yDataList.shList, |
| | | type: "line", |
| | | smooth: true, |
| | | } |
| | | |
| | | ], |
| | | grid: { |
| | | top: "4%", |
| | | top: "24%", |
| | | left: "3%", |
| | | right: "2%", |
| | | bottom: "4%", |
| | |
| | | return option |
| | | }, |
| | | |
| | | // 警情排行统计的options |
| | | initRankingOption (dataArr) { |
| | | let option |
| | | if (dataArr.length == 0) { |
| | | //暂无数据 |
| | | option = { |
| | | title: { |
| | | text: "暂无警情排行数据", |
| | | x: "center", |
| | | y: "center", |
| | | textStyle: { |
| | | color: "#fff", |
| | | fontSize: fontSize(14), |
| | | fontWeight: "normal", |
| | | }, |
| | | }, |
| | | } |
| | | } else { |
| | | let seriesData = dataArr.map(item => { |
| | | return { value: item.value, itemStyle: item.itemStyle } |
| | | }) |
| | | let xData = dataArr.map((item) => { |
| | | if (item.name.length > 5) { |
| | | let name = item.name.substring(0, 6) + '…' |
| | | |
| | | return name |
| | | } else { |
| | | return item.name |
| | | } |
| | | }) |
| | | option = { |
| | | tooltip: { |
| | | trigger: "item", |
| | | confine: true, |
| | | 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: "value", |
| | | splitLine: { show: false }, |
| | | axisLabel: { show: false }, |
| | | axisTick: { show: false }, |
| | | axisLine: { show: false } |
| | | }, |
| | | yAxis: [ |
| | | { |
| | | type: "category", |
| | | inverse: true, |
| | | axisLine: { show: false }, |
| | | axisTick: { show: false }, |
| | | data: dataArr.map(item => item.name), |
| | | axisLabel: { |
| | | rich: { |
| | | nt1: { |
| | | color: "#fff", |
| | | backgroundColor: '#EB3B5A', |
| | | width: fontSize(12), |
| | | height: fontSize(12), |
| | | fontSize: fontSize(10), |
| | | align: "center", |
| | | borderRadius: fontSize(50), |
| | | padding: [0, 1, 2, 1] |
| | | }, |
| | | nt2: { |
| | | color: "#fff", |
| | | backgroundColor: '#FA8231', |
| | | width: fontSize(12), |
| | | height: fontSize(12), |
| | | fontSize: fontSize(10), |
| | | align: "center", |
| | | borderRadius: fontSize(50), |
| | | padding: [0, 1, 2, 1] |
| | | }, |
| | | nt3: { |
| | | color: "#fff", |
| | | backgroundColor: '#F7B731', |
| | | width: fontSize(12), |
| | | height: fontSize(12), |
| | | fontSize: fontSize(10), |
| | | align: "center", |
| | | borderRadius: fontSize(50), |
| | | padding: [0, 1, 2, 1] |
| | | }, |
| | | nt: { |
| | | color: "#fff", |
| | | backgroundColor: '#00a9c8', |
| | | width: fontSize(12), |
| | | height: fontSize(12), |
| | | fontSize: fontSize(10), |
| | | align: "center", |
| | | borderRadius: fontSize(50), |
| | | padding: [0, 1, 2, 1] |
| | | } |
| | | }, |
| | | formatter: function (value, index) { |
| | | let idx = index + 1 |
| | | if (idx <= 3) { |
| | | return ["{nt" + idx + "|" + idx + "}"].join("\n") |
| | | } else { |
| | | return ["{nt|" + idx + "}"].join("\n") |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | {//名称 |
| | | type: 'category', |
| | | offset: -10, |
| | | position: "left", |
| | | axisLine: { show: false }, |
| | | axisTick: { show: false }, |
| | | axisLabel: { |
| | | color: '#fff', |
| | | align: "left", |
| | | verticalAlign: "bottom", |
| | | lineHeight: fontSize(24), |
| | | fontSize: fontSize(10) |
| | | }, |
| | | data: xData.reverse(), |
| | | }, |
| | | ], |
| | | series: [ |
| | | { |
| | | zlevel: 1, |
| | | type: "bar", |
| | | barWidth: fontSize(10), |
| | | data: seriesData, |
| | | itemStyle: { |
| | | normal: { |
| | | barBorderRadius: fontSize(5) |
| | | } |
| | | }, |
| | | label: { |
| | | show: true, |
| | | fontSize: fontSize(10), |
| | | color: "#fff" |
| | | } |
| | | } |
| | | ], |
| | | grid: { |
| | | top: "3%", |
| | | left: "-14%", |
| | | right: "2%", |
| | | bottom: "3%", |
| | | containLabel: true, |
| | | } |
| | | } |
| | | } |
| | | |
| | | return option |
| | | }, |
| | | |
| | | // 现有设备统计 |
| | | getEquipment () { |
| | | const typeData = { |
| | | carCount: "车辆", |
| | | carCount: "警车", |
| | | monitorCount: "摄像头", |
| | | phoneCount: "执法记录仪", |
| | | recorderCount: "手台", |
| | | } |
| | | |
| | | const typeIndexData = { |
| | | 车辆: 0, |
| | | 警车: 0, |
| | | 摄像头: 1, |
| | | 手台: 2, |
| | | 执法记录仪: 3, |
| | |
| | | |
| | | let data = [] |
| | | this.regionTotal = 0 |
| | | |
| | | const dataAll = getEquipment( |
| | | let dataAll = null |
| | | dataAll = getEquipment( |
| | | this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id |
| | | ).then((res) => { |
| | | if (this.linetype == 0) { |
| | |
| | | |
| | | return data |
| | | } |
| | | }).catch(res => { |
| | | dataAll = '请求错误' |
| | | }) |
| | | |
| | | return dataAll |
| | |
| | | // 现有设备饼图初始化 |
| | | async initEquipmentEcharts (type) { |
| | | this.linetype = type |
| | | this.equipmentEchartsLoading = true |
| | | |
| | | if ( |
| | | equipmentmyChart != null && |
| | |
| | | |
| | | const data = await this.getEquipment() |
| | | |
| | | if (data == '请求错误') { |
| | | setTimeout(() => { |
| | | this.equipmentEchartsLoading = false |
| | | }, 500) |
| | | } |
| | | const newData = data.filter((item) => { |
| | | if (item.value != 0) { |
| | | return item |
| | | } |
| | | }) |
| | | |
| | | equipmentmyChart.showLoading({ |
| | | text: '拼命加载中', |
| | | color: '#c23531', |
| | | textColor: '#FFF', |
| | | maskColor: 'rgba(0, 0, 0, 0.2)', |
| | | zlevel: 0, |
| | | }) |
| | | setTimeout(() => { |
| | | equipmentmyChart.hideLoading() |
| | | equipmentmyChart.setOption(this.initEquipmentOptions(newData)) |
| | | }, 500) |
| | | |
| | | equipmentmyChart.setOption(this.initEquipmentOptions(newData)) |
| | | |
| | | this.clickEquimentChart() |
| | | |
| | |
| | | equipmentmyChart.off("mouseover") |
| | | equipmentmyChart.off("mouseout") |
| | | } |
| | | setTimeout(() => { |
| | | this.equipmentEchartsLoading = false |
| | | }, 500) |
| | | }, |
| | | |
| | | // 现有设备options饼图数据 |
| | |
| | | } |
| | | }, |
| | | |
| | | // 饼图轮播 |
| | | // 设备饼图轮播 |
| | | equipmentEchartsCarousel () { |
| | | let curIndex = 0 |
| | | if (timer) { |
| | |
| | | // margin-left: 8px; |
| | | // } |
| | | |
| | | :deep(.el-main) { |
| | | padding: 0; |
| | | } |
| | | |
| | | .box { |
| | | display: flex; |
| | | position: absolute; |
| | |
| | | .sub-tab { |
| | | padding: 10px; |
| | | display: flex; |
| | | color: #99cccc; |
| | | |
| | | .tab { |
| | | display: flex; |
| | | justify-content: center; |
| | | margin: 0 10px; |
| | | flex: 1; |
| | | background: $sub-tab-bg-color; |
| | | border-radius: 8px; |
| | | cursor: pointer; |
| | | height: 22px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | |
| | | &>div { |
| | | height: 26px; |
| | | line-height: 26px; |
| | | height: 22px; |
| | | line-height: 22px; |
| | | white-space: nowrap; |
| | | } |
| | | } |
| | | } |
| | |
| | | .echarts-box { |
| | | padding: 12px; |
| | | flex: 1; |
| | | // height: 100%; |
| | | // width: 100%; |
| | | } |
| | | |
| | | .table-box { |
| | |
| | | width: 100%; |
| | | display: flex; |
| | | justify-content: space-evenly; |
| | | margin-top: 15px; |
| | | margin-top: -10px; |
| | | |
| | | .point { |
| | | width: 12px; |
| | |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | |
| | | :deep(.el-table) { |
| | | .cell { |
| | | // white-space: pre-line; |
| | | white-space: pre-wrap; |
| | | height: 100% !important; |
| | | line-height: 3.2 !important; |
| | | } |
| | | |
| | | .el-table__body-wrapper { |
| | | height: 100% !important; |
| | | overflow: hidden; |
| | | |
| | | .el-table__body { |
| | | width: 100% !important; |
| | | height: 100% !important; |
| | | |
| | | tbody { |
| | | width: 100% !important; |
| | | height: 100% !important; |
| | | |
| | | td { |
| | | flex: 1; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .duty-information-box { |
| | | height: 100%; |
| | | |
| | | &>div:first-child { |
| | | background: $table-body-tr-n-color; |
| | | } |
| | | |
| | | &>div:last-child { |
| | | background: $table-body-tr-2n-color; |
| | | } |
| | | |
| | | &>div { |
| | | display: flex; |
| | | height: 50%; |
| | | |
| | | &>div { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | &>div:first-child { |
| | | width: 28%; |
| | | justify-content: center; |
| | | } |
| | | |
| | | &>div:last-child { |
| | | width: 72%; |
| | | text-align: left; |
| | | } |
| | | } |
| | | |
| | | .no-zb-data { |
| | | width: 100%; |
| | | height: 100%; |
| | | background: transparent !important; |
| | | align-items: center; |
| | | display: flex; |
| | | justify-content: center; |
| | | } |
| | | } |
| | | |
| | | #peopleList { |