From 7a4161f1e6cf6d5bf93d64a23d669182f4e7cf90 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Fri, 02 Dec 2022 11:38:08 +0800
Subject: [PATCH] 1
---
src/views/home/components/rightContainer.vue | 201 ++++++++++++++++++++++++++++++++-----------------
1 files changed, 130 insertions(+), 71 deletions(-)
diff --git a/src/views/home/components/rightContainer.vue b/src/views/home/components/rightContainer.vue
index a2279ae..7297db8 100644
--- a/src/views/home/components/rightContainer.vue
+++ b/src/views/home/components/rightContainer.vue
@@ -4,9 +4,16 @@
<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>
@@ -14,20 +21,24 @@
<div class="alert-box" ref="alertBox">
<div class="title" ref="alertBoxTitle">
- <div>
- 安保活动
- </div>
+ <div>安保活动</div>
<div class="title-tab">
- <span :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>/<span
- :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
+ <span :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>/
+ <span :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
</div>
</div>
<div id="peopleList" class="echarts-box">
- <el-table size="small" :height="tableHeight" :data="acttype == 0 ? underwayArr : historyArr"
+ <el-table
+ size="small"
+ :height="tableHeight"
+ :data="acttype == 0 ? underwayArr : historyArr"
style="width: 100%"
:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
- :row-class-name="tableRowClassName" ref="activityTable" @row-click="activityRowClick">
+ :row-class-name="tableRowClassName"
+ ref="activityTable"
+ @row-click="activityRowClick"
+ >
<el-table-column prop="activityName" label="活动名称"></el-table-column>
<el-table-column prop="startTime" label="开始时间"></el-table-column>
<el-table-column prop="endTime" label="结束时间"></el-table-column>
@@ -38,12 +49,31 @@
<div class="crowd-box" ref="crowdBox">
<div class="title">
- <div>
- 现有设备
- </div>
+ <div>现有设备</div>
<div class="title-tab">
- <span :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">设备种类</span>/<span
- :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">设备状态</span>
+ <span :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">设备种类</span>/
+ <span :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">设备状态</span>
+ </div>
+ <div class="legend">
+ <ul>
+ <li>
+ <div>
+ <img src="/img/icon/pCar.png" alt />
+ </div>车辆
+ </li>
+ <li>
+ <img src="/img/icon/monitor.png" alt />
+ <div></div>摄像头
+ </li>
+ <li>
+ <img src="/img/icon/recorder.png" alt />
+ <div></div>执法记录仪
+ </li>
+ <li>
+ <img src="/img/icon/pPhone.png" alt />
+ <div></div>手台
+ </li>
+ </ul>
</div>
</div>
<div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div>
@@ -171,30 +201,32 @@
tipHtml = `<span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> ${params.data.name}<strong style="margin-left:10px">${params.data.value}台</strong><strong style="margin-left:10px;color:#5c7bd9">${params.percent}%</strong><br /><span style="color:#00fe01">运行：${params.data.working}台</span><span style="margin-left:10px;color:#949494">备用：${params.data.spare}台</span><br /><span style="color:#fe2929">检修：${params.data.overhaul}台</span><span style="margin-left:10px;color:#69a9ff">禁用：${params.data.disable}台</span>`
}
return tipHtml
- }
- },
- legend: {
- left: '60%',
- y: '25%',
- itemGap: 20,
- textStyle: {
- color: '#fff'
},
- formatter: function (name) {
- let tarValue
- for (let i = 0; i < dataArr.length; i++) {
- if (dataArr[i].name == name) {
- tarValue = dataArr[i].value
- }
- }
- let v = tarValue
- return `${name} ${v} 台 `
- },
+ backgroundColor: 'rgba(0,0,0,0.8)',
+ borderColor: 'rgba(0,0,0,0.7)',
},
+ // legend: {
+ // left: '60%',
+ // y: '25%',
+ // itemGap: 20,
+ // textStyle: {
+ // color: '#fff'
+ // },
+ // formatter: function (name) {
+ // let tarValue
+ // for (let i = 0; i < dataArr.length; i++) {
+ // if (dataArr[i].name == name) {
+ // tarValue = dataArr[i].value
+ // }
+ // }
+ // let v = tarValue
+ // return `${name} ${v} 台 `
+ // },
+ // },
graphic: {
type: "text",
- left: "16.5%",
- top: "45%",
+ left: "36.5%",
+ top: "48%",
style: {
text: "设备总数",
textAlign: "center",
@@ -205,7 +237,7 @@
},
title: {
text: `${this.regionTotal}`,
- left: "22%",
+ left: "42%",
top: "56%",
textStyle: {
color: "#27D9C8",
@@ -219,31 +251,37 @@
name: '',
type: 'pie',
radius: ['40%', '70%'],
- center: ['27%', '57%'],
+ center: ['47%', '57%'],
avoidLabelOverlap: false,
+ labelLine: {
+ normal: {
+ length: 15,
+ lineStyle: {
+ width: 3
+ }
+ }
+ },
label: {
show: false,
position: 'center',
- // normal: {
- // formatter: function (params) {
- // // return params.name + "\n\n" + params.percent + "%"
- // console.log(params, 22222)
- // let tipHtml = ``
- // if ('carCount' in params.data) {
- // tipHtml = `${params.data.name}${params.data.value}台${params.percent}%警车：${params.data.carCount}台\n\n监控：${params.data.monitorCount}台手台：${params.data.phoneCount}台手持记录仪：${params.data.recorderCount}台`
- // } else {
- // tipHtml = `${params.data.name}${params.data.value}台${params.percent}%运行：${params.data.working}台\n\n备用：${params.data.spare}台检修：${params.data.overhaul}台禁用：${params.data.disable}台`
- // }
- // return tipHtml
- // },
- // textStyle: {
- // color: '#fff',
- // fontSize: 14
- // }
- // }
- },
- labelLine: {
- show: false
+ normal: {
+ formatter: '{b}',
+ // formatter: function (params) {
+ // // return params.name + "\n\n" + params.percent + "%"
+ // console.log(params, 22222)
+ // let tipHtml = ``
+ // if ('carCount' in params.data) {
+ // tipHtml = `${params.data.name}${params.data.value}台${params.percent}%警车：${params.data.carCount}台\n\n监控：${params.data.monitorCount}台手台：${params.data.phoneCount}台手持记录仪：${params.data.recorderCount}台`
+ // } else {
+ // tipHtml = `${params.data.name}${params.data.value}台${params.percent}%运行：${params.data.working}台\n\n备用：${params.data.spare}台检修：${params.data.overhaul}台禁用：${params.data.disable}台`
+ // }
+ // return tipHtml
+ // },
+ textStyle: {
+ color: '#fff',
+ fontSize: 14
+ }
+ }
},
data: dataArr,
itemStyle: {
@@ -282,12 +320,12 @@
equipmentmyChart.dispatchAction({
type: 'highlight', seriesIndex: 0, dataIndex: curIndex
})
- equipmentmyChart.dispatchAction({
- type: "showTip",
- seriesIndex: 0,
- dataIndex: curIndex,
- // position: ['5%', '5%'],
- })
+ // equipmentmyChart.dispatchAction({ select
+ // type: "showTip",
+ // seriesIndex: 0,
+ // dataIndex: curIndex,
+ // // position: ['5%', '5%'],
+ // })
}, 1000)
equipmentmyChart.on('mouseover', function (param) {
clearInterval(timer)
@@ -314,12 +352,12 @@
equipmentmyChart.dispatchAction({
type: 'highlight', seriesIndex: 0, dataIndex: curIndex
})
- equipmentmyChart.dispatchAction({
- type: "showTip",
- seriesIndex: 0,
- dataIndex: curIndex,
- // position: ['5%', '5%'],
- })
+ // equipmentmyChart.dispatchAction({
+ // type: "showTip",
+ // seriesIndex: 0,
+ // dataIndex: curIndex,
+ // // position: ['5%', '5%'],
+ // })
}, 1000)
})
},
@@ -706,7 +744,7 @@
// background-image: linear-gradient(to right, #2e4aba, #010d3e);
.title-tab {
- color: #99CCCC;
+ color: #99cccc;
span {
cursor: pointer;
@@ -730,6 +768,27 @@
margin-left: 50%;
letter-spacing: 1px;
}
+ .legend {
+ position: absolute;
+ width: calc(100% - 36px);
+ height: 70%;
+ top: 100%;
+ ul {
+ display: flex;
+ height: 100%;
+ li {
+ height: 100%;
+ display: flex;
+ line-height: 100%;
+ img {
+ height: 80%;
+ }
+ // div::before {
+ // content: '';
+ // }
+ }
+ }
+ }
}
.sub-title {
@@ -748,7 +807,7 @@
background: $sub-tab-bg-color;
cursor: pointer;
- &>div {
+ & > div {
height: 26px;
line-height: 26px;
}
--
Gitblit v1.9.3