| | |
| | | "@turf/turf": "^6.5.0", |
| | | "axios": "^0.22.0", |
| | | "core-js": "^3.6.5", |
| | | "echarts": "^4.9.0", |
| | | "echarts": "^5.3.0", |
| | | "element-resize-detector": "^1.2.4", |
| | | "element-ui": "^2.15.6", |
| | | "flv.js": "^1.6.2", |
| | |
| | | "sass-loader": "^8.0.2", |
| | | "vue-template-compiler": "^2.6.11" |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | .select-on-tab { |
| | | box-shadow: 0 2px 2px $menu-tab-shadow; |
| | | color: #fff; |
| | | } |
| | |
| | | .sub-tab { |
| | | padding: 10px; |
| | | display: flex; |
| | | color: #99cccc; |
| | | |
| | | .tab, |
| | | .tab3 { |
| | |
| | | <div>值班信息(当日)</div> |
| | | </div> |
| | | <div class="table-box"> |
| | | <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" |
| | | > |
| | | :row-class-name="tableRowClassName"> |
| | | <el-table-column prop="station" label="岗位"></el-table-column> |
| | | <el-table-column prop="name" label="姓名"></el-table-column> |
| | | <el-table-column prop="contact" label="联系方式"></el-table-column> |
| | |
| | | <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 v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至" |
| | | start-placeholder="开始日期" end-placeholder="结束日期" |
| | | :picker-options="pickerOptions"></el-date-picker> |
| | | </div> |
| | | </div> |
| | | <div id="EventChangeEcharts" class="echarts-box"></div> |
| | |
| | | } |
| | | } |
| | | }, |
| | | emphasis: { |
| | | label: { |
| | | color: 'red' |
| | | } |
| | | }, |
| | | label: { |
| | | color: function (params) { |
| | | let colorList = [] |
| | |
| | | if (timer) { |
| | | clearInterval(timer) |
| | | } |
| | | |
| | | timer = setInterval(() => { |
| | | equipmentmyChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: curIndex }) |
| | | curIndex = (curIndex + 1) % dataLen |
| | |
| | | type: 'highlight', seriesIndex: 0, dataIndex: curIndex |
| | | }) |
| | | }, 1000) |
| | | |
| | | equipmentmyChart.on('mouseover', function (param) { |
| | | clearInterval(timer) |
| | | equipmentmyChart.dispatchAction({ |
| | |
| | | }) |
| | | curIndex = param.dataIndex |
| | | }) |
| | | |
| | | equipmentmyChart.on('mouseout', function (param) { |
| | | curIndex = param.dataIndex |
| | | if (timer) { |
| | |
| | | }, |
| | | |
| | | getEquimentChartData (policeStationName) { |
| | | |
| | | const oneColor = ['#4caf50', '#2979ff', '#ffd600', '#0d47a1', '#b71c1c'] |
| | | |
| | | const twoColor = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] |
| | | |
| | | let dataArr = [] |
| | | let phoneCount = 0 |
| | | let carCount = 0 |
| | |
| | | recorderState = this.getEquimentChartStateData(this.recorderNewArr) |
| | | if (this.linetype == 0) { |
| | | dataArr = [ |
| | | { value: carCount, name: '车辆', working: carState.working, fault: carState.fault, maintain: carState.maintain, disable: carState.disable, sealing: carState.sealing }, |
| | | { value: monitorCount, name: '摄像头', working: monitorState.working, fault: monitorState.fault, maintain: monitorState.maintain, disable: monitorState.disable, sealing: monitorState.sealing }, |
| | | { value: recorderCount, name: '执法记录仪', working: recorderState.working, fault: recorderState.fault, maintain: recorderState.maintain, disable: recorderState.disable, sealing: recorderState.sealing }, |
| | | { value: phoneCount, name: '手台', working: phoneState.working, fault: phoneState.fault, maintain: phoneState.maintain, disable: phoneState.disable, sealing: phoneState.sealing }, |
| | | { value: carCount, name: '车辆', working: carState.working, fault: carState.fault, maintain: carState.maintain, disable: carState.disable, sealing: carState.sealing, label: { color: twoColor[0] } }, |
| | | { value: monitorCount, name: '摄像头', working: monitorState.working, fault: monitorState.fault, maintain: monitorState.maintain, disable: monitorState.disable, sealing: monitorState.sealing, label: { color: twoColor[1] } }, |
| | | { value: recorderCount, name: '执法记录仪', working: recorderState.working, fault: recorderState.fault, maintain: recorderState.maintain, disable: recorderState.disable, sealing: recorderState.sealing, label: { color: twoColor[2] } }, |
| | | { value: phoneCount, name: '手台', working: phoneState.working, fault: phoneState.fault, maintain: phoneState.maintain, disable: phoneState.disable, sealing: phoneState.sealing, label: { color: twoColor[3] } }, |
| | | ] |
| | | this.regionTotal = phoneCount + monitorCount + carCount + recorderCount |
| | | } else { |
| | |
| | | let disableObj = this.getEquimentChartTypeData(phoneState, carState, recorderState, monitorState).disableObj |
| | | let sealingObj = this.getEquimentChartTypeData(phoneState, carState, recorderState, monitorState).sealingObj |
| | | dataArr = [ |
| | | { value: workingObj.total, name: '正常', carCount: workingObj.carCount, monitorCount: workingObj.monitorCount, recorderCount: workingObj.recorderCount, phoneCount: workingObj.phoneCount, color: '#4caf50' }, |
| | | { value: maintainObj.total, name: '保养', carCount: maintainObj.carCount, monitorCount: maintainObj.monitorCount, recorderCount: maintainObj.recorderCount, phoneCount: maintainObj.phoneCount, color: '#2979ff' }, |
| | | { value: faultObj.total, name: '故障', carCount: faultObj.carCount, monitorCount: faultObj.monitorCount, recorderCount: faultObj.recorderCount, phoneCount: faultObj.phoneCount, color: '#ffd600' }, |
| | | { value: disableObj.total, name: '停用', carCount: disableObj.carCount, monitorCount: disableObj.monitorCount, recorderCount: disableObj.recorderCount, phoneCount: disableObj.phoneCount, color: '#0d47a1' }, |
| | | { value: sealingObj.total, name: '封存', carCount: sealingObj.carCount, monitorCount: sealingObj.monitorCount, recorderCount: sealingObj.recorderCount, phoneCount: sealingObj.phoneCount, color: '#b71c1c' }, |
| | | { value: workingObj.total, name: '正常', carCount: workingObj.carCount, monitorCount: workingObj.monitorCount, recorderCount: workingObj.recorderCount, phoneCount: workingObj.phoneCount, color: '#4caf50', label: { color: oneColor[0] } }, |
| | | { value: maintainObj.total, name: '保养', carCount: maintainObj.carCount, monitorCount: maintainObj.monitorCount, recorderCount: maintainObj.recorderCount, phoneCount: maintainObj.phoneCount, color: '#2979ff', label: { color: oneColor[1] } }, |
| | | { value: faultObj.total, name: '故障', carCount: faultObj.carCount, monitorCount: faultObj.monitorCount, recorderCount: faultObj.recorderCount, phoneCount: faultObj.phoneCount, color: '#ffd600', label: { color: oneColor[2] } }, |
| | | { value: disableObj.total, name: '停用', carCount: disableObj.carCount, monitorCount: disableObj.monitorCount, recorderCount: disableObj.recorderCount, phoneCount: disableObj.phoneCount, color: '#0d47a1', label: { color: oneColor[3] } }, |
| | | { value: sealingObj.total, name: '封存', carCount: sealingObj.carCount, monitorCount: sealingObj.monitorCount, recorderCount: sealingObj.recorderCount, phoneCount: sealingObj.phoneCount, color: '#b71c1c', label: { color: oneColor[4] } }, |
| | | ] |
| | | this.regionTotal = workingObj.total + faultObj.total + maintainObj.total + disableObj.total + sealingObj.total |
| | | } |
| | |
| | | margin-left: 50%; |
| | | letter-spacing: 1px; |
| | | } |
| | | |
| | | .legend { |
| | | position: absolute; |
| | | width: calc(100% - 36px); |
| | |
| | | top: 120%; |
| | | font-style: normal; |
| | | font-weight: normal; |
| | | |
| | | ul { |
| | | display: flex; |
| | | height: 100%; |
| | | |
| | | li { |
| | | height: 100%; |
| | | display: flex; |
| | | line-height: 160%; |
| | | margin-right: 10px; |
| | | |
| | | img { |
| | | height: 60%; |
| | | } |
| | | |
| | | div { |
| | | width: 20px; |
| | | height: 42%; |
| | |
| | | background: $sub-tab-bg-color; |
| | | cursor: pointer; |
| | | |
| | | & > div { |
| | | &>div { |
| | | height: 26px; |
| | | line-height: 26px; |
| | | } |
| | |
| | | padding: 12px; |
| | | flex: 1; |
| | | } |
| | | |
| | | .table-box { |
| | | padding: 0 12px; |
| | | flex: 1; |