From e24f70ababdee2b4fdce71c6b80a9bc928fa0331 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 08 May 2023 14:45:08 +0800
Subject: [PATCH] 警情排行调整
---
src/views/home/components/rightContainer.vue | 725 ++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 577 insertions(+), 148 deletions(-)
diff --git a/src/views/home/components/rightContainer.vue b/src/views/home/components/rightContainer.vue
index 53b2e20..cda0565 100644
--- a/src/views/home/components/rightContainer.vue
+++ b/src/views/home/components/rightContainer.vue
@@ -7,42 +7,72 @@
</div>
<div class="table-box" v-show="!showMJL">
- <el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%"
+ <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="暂无值班信息">
+ :cell-style="{ 'text-align': 'center', borderColor: '#324e75' }"
+ :row-class-name="tableRowClassName"
+ :empty-text="schedulingNoDataText"
+ v-loading="schedulingLoading"
+ element-loading-text="拼命加载中"
+ element-loading-spinner="el-icon-loading"
+ element-loading-background="rgba(0, 0, 0, 0.5)"
+ >
<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="pointList" v-if="schedulingList == []">
+ <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>
</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>
</div>
<svg class="border-svg">
- <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
- mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
- <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
- repeatCount="indefinite" />
+ <use
+ stroke-width="2"
+ xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
+ mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
+ stroke="#4fd2dd"
+ >
+ <animate
+ attributeName="stroke-dasharray"
+ from="0, 1442"
+ to="1442, 0"
+ dur="8s"
+ repeatCount="indefinite"
+ />
</use>
</svg>
</div>
@@ -50,21 +80,62 @@
<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>
+ <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>
+ <div id="EventChangeEcharts" class="echarts-box"></div>
+ </el-main>
</div>
<svg class="border-svg">
- <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
- mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
- <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
- repeatCount="indefinite" />
+ <use
+ stroke-width="2"
+ xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
+ mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
+ stroke="#4fd2dd"
+ >
+ <animate
+ attributeName="stroke-dasharray"
+ from="0, 1442"
+ to="1442, 0"
+ dur="8s"
+ repeatCount="indefinite"
+ />
</use>
</svg>
</div>
@@ -99,21 +170,47 @@
<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">
- <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
- mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
- <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
- repeatCount="indefinite" />
+ <use
+ stroke-width="2"
+ xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
+ mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
+ stroke="#4fd2dd"
+ >
+ <animate
+ attributeName="stroke-dasharray"
+ from="0, 1442"
+ to="1442, 0"
+ dur="8s"
+ repeatCount="indefinite"
+ />
</use>
</svg>
</div>
@@ -144,7 +241,7 @@
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, getEquipment } from "@/api/home/index.js"
const timeEvents = []
@@ -153,6 +250,10 @@
data () {
return {
eventTime: [],
+ equipmentEchartsLoading: false,
+ eventChangeEchartsLoading: false,
+ schedulingNoDataText: ' ',
+ schedulingLoading: false,
pickerOptions: {
shortcuts: [
{
@@ -191,8 +292,9 @@
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
}
},
@@ -223,7 +325,7 @@
this.$refs.caseBox.offsetHeight -
this.$refs.crowdBox.offsetHeight -
this.$refs.alertBoxTitle.offsetHeight -
- 86
+ 55
})
},
@@ -254,7 +356,7 @@
getHomeAllData (id = "") {
this.policeStaionID = id
- this.initEventChangeEcharts()
+ this.initEventChangeEcharts(this.caseInfoType)
this.initEquipmentEcharts(this.linetype)
@@ -264,29 +366,21 @@
}
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) => {
@@ -296,12 +390,14 @@
}
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 =
@@ -321,7 +417,21 @@
getSchedulingList(1, 100, params).then((res) => {
this.schedulingList = res.data.data.records
})
+
+
+ setTimeout(() => {
+ this.schedulingNoDataText = ' '
+ this.schedulingLoading = false
+ if (!this.schedulingList.length) {
+ setTimeout(() => {
+ this.schedulingNoDataText = '暂无值班数据'
+ }, 200)
+ }
+ }, 500)
+
+
}
+
},
echartsResize () {
@@ -331,7 +441,7 @@
eventchangemychart.resize()
},
- // 案件统计中时间变化
+ // 警情统计中时间变化
async caseTimeChange (e) {
const date = e.map((item) => {
return this.dateFormat(item)
@@ -348,7 +458,7 @@
})
setTimeout(() => {
eventchangemychart.hideLoading()
- eventchangemychart.setOption(this.initEventChangeOption(optionsData.xData, optionsData.yData))
+ eventchangemychart.setOption(this.initEventChangeOption(optionsData.xData, optionsData.yDataList))
}, 500)
},
@@ -373,70 +483,147 @@
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) {
+ 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
+ },
+ []
+ )
+ 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) => a.value - b.value)
+ res.data.data = res.data.data.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)
+
+ console.log(res.data.data, 465)
+
+ 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])
+ if (type == 0) {
+ this.getCaseAll(date[0], date[1])
+ } else {
+ this.getCaseRanking(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)
},
- // 案件统计的options
- initEventChangeOption (xData, yData) {
+ // 警情数量统计的options
+ initEventChangeOption (xData, yDataList) {
let option
if (xData.length == 0) {
//暂无数据
option = {
title: {
- text: "暂无案件数据",
+ text: "暂无警情数据",
x: "center",
y: "center",
textStyle: {
@@ -448,6 +635,7 @@
}
} else {
option = {
+ color: ['#5470C6', '#73C0DE', '#EE6666', '#FAC858'],
tooltip: {
trigger: "item",
formatter:
@@ -465,6 +653,12 @@
color: "#fff",
},
},
+ },
+ legend: {
+ data: ['盗窃', '诈骗', '纠纷', '其他'],
+ textStyle: {
+ color: "#fff"
+ }
},
yAxis: {
type: "value",
@@ -486,41 +680,60 @@
},
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,
+ }
],
grid: {
top: "4%",
@@ -529,6 +742,147 @@
bottom: "4%",
containLabel: true,
},
+ }
+ }
+
+ 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 }
+ })
+ 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>',
+ },
+ 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: dataArr.reverse().map((item) => item.name),
+ },
+ ],
+ 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: "-20%",
+ right: "2%",
+ bottom: "3%",
+ containLabel: true,
+ }
}
}
@@ -553,8 +907,8 @@
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) {
@@ -611,6 +965,8 @@
return data
}
+ }).catch(res => {
+ dataAll = '请求错误'
})
return dataAll
@@ -619,6 +975,7 @@
// 现有设备饼图初始化
async initEquipmentEcharts (type) {
this.linetype = type
+ this.equipmentEchartsLoading = true
if (
equipmentmyChart != null &&
@@ -634,24 +991,18 @@
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()
@@ -662,6 +1013,9 @@
equipmentmyChart.off("mouseover")
equipmentmyChart.off("mouseout")
}
+ setTimeout(() => {
+ this.equipmentEchartsLoading = false
+ }, 500)
},
// 现有设备options饼图数据
@@ -816,7 +1170,7 @@
}
},
- // 饼图轮播
+ // 设备饼图轮播
equipmentEchartsCarousel () {
let curIndex = 0
if (timer) {
@@ -956,6 +1310,10 @@
// margin-left: 8px;
// }
+ :deep(.el-main) {
+ padding: 0;
+ }
+
.box {
display: flex;
position: absolute;
@@ -1016,16 +1374,25 @@
.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;
+ & > div {
+ height: 22px;
+ line-height: 22px;
+ white-space: nowrap;
}
}
}
@@ -1033,6 +1400,8 @@
.echarts-box {
padding: 12px;
flex: 1;
+ // height: 100%;
+ // width: 100%;
}
.table-box {
@@ -1043,7 +1412,7 @@
width: 100%;
display: flex;
justify-content: space-evenly;
- margin-top: 15px;
+ margin-top: -10px;
.point {
width: 12px;
@@ -1053,6 +1422,66 @@
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;
+ }
+ }
}
#peopleList {
--
Gitblit v1.9.3