523 lines
13 KiB
Vue
523 lines
13 KiB
Vue
<!--
|
||
* @Author: SunTao 328867980@qq.com
|
||
* @Date: 2024-10-18 10:25:29
|
||
* @LastEditors: SunTao 328867980@qq.com
|
||
* @LastEditTime: 2024-12-05 15:08:14
|
||
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\patrol-order.vue
|
||
* @Description: 总览大屏-巡查里程
|
||
-->
|
||
|
||
<template>
|
||
<div class="content">
|
||
<div class="patrol-div">
|
||
<div class="value">
|
||
<span @click="showDetail">{{ formatNumber(patrolObject.len) }}</span>km
|
||
</div>
|
||
</div>
|
||
<div class="patrol-div">
|
||
<div class="value">
|
||
<span @click="showDetail">{{ formatTime(patrolObject.time) }}</span>h
|
||
</div>
|
||
</div>
|
||
<!-- 巡查里程弹窗 -->
|
||
<el-dialog title="巡查里程总览" :visible.sync="showDialogVisible" width="50rem" append-to-body
|
||
:close-on-click-modal="false" destroy-on-close @close="screenCancel">
|
||
<div class="patrol-content">
|
||
<div class="patrol-select">
|
||
<el-select :popper-append-to-body="false" v-model="companySelect" @change="changeSelect" clearable
|
||
placeholder="请选择">
|
||
<el-option v-for="item in companyList" :key="`${item.name}-${item.index}`" :label="item.name"
|
||
:value="item.name" />
|
||
</el-select>
|
||
<el-radio-group v-model="checkCycle" class="screen-checkBox" size="mini" @change="changCycle">
|
||
<el-radio-button label="day">今日</el-radio-button>
|
||
<el-radio-button label="month">本月</el-radio-button>
|
||
<el-radio-button label="year">本年</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
<div ref="patrolChart" class="dialog-div"></div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
import { getMileage, getMileageDetail } from "@/api/xj/screen/disease-screen";
|
||
export default {
|
||
name: "PatrolOrder",
|
||
data() {
|
||
return {
|
||
// 时间选择
|
||
checkCycle: "day",
|
||
// 累计里程数据
|
||
patrolObject: {},
|
||
// 弹窗显隐控制
|
||
showDialogVisible: false,
|
||
// 公司选择绑定
|
||
companySelect: "",
|
||
// 公司下拉绑定
|
||
companyList: [],
|
||
// echart图数据
|
||
echartData: [],
|
||
};
|
||
},
|
||
created() {
|
||
this.getData();
|
||
},
|
||
methods: {
|
||
/**
|
||
* @description: 获取巡查里程数据
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
getData() {
|
||
getMileage().then(({ code, data }) => {
|
||
if (code === 200) {
|
||
this.patrolObject = data;
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* @description: 累计里程修改
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
formatNumber(num) {
|
||
if (num >= 100000000) {
|
||
// 超过1亿显示 x.xx亿
|
||
return (num / 100000000).toFixed(2) + "亿";
|
||
} else if (num >= 10000) {
|
||
// 超过1万显示 x.xx万
|
||
return (num / 10000).toFixed(2) + "万";
|
||
} else {
|
||
// 小于1万直接返回原数字
|
||
return num;
|
||
}
|
||
},
|
||
|
||
/**
|
||
* @description: 累计时长修改
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
formatTime(num) {
|
||
if (num >= 100000000) {
|
||
// 超过1亿显示 x.xx亿
|
||
return (num / 100000000).toFixed(2) + "亿";
|
||
} else if (num >= 10000) {
|
||
// 超过1万显示 x.xx万
|
||
return (num / 10000).toFixed(2) + "万";
|
||
} else {
|
||
// 小于1万直接返回原数字
|
||
return num;
|
||
}
|
||
},
|
||
|
||
/**
|
||
* @description: 打开弹窗方法
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
showDetail() {
|
||
this.showDialogVisible = true;
|
||
this.getChartData();
|
||
},
|
||
|
||
/**
|
||
* @description: 选择框绑定值修改
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
changeSelect(value) {
|
||
this.echartData = this.echartList.filter((item) => {
|
||
if (value) {
|
||
return item.name === value;
|
||
}
|
||
return item;
|
||
});
|
||
this.$nextTick(() => {
|
||
this.drawChart();
|
||
});
|
||
},
|
||
|
||
/**
|
||
* @description: 时间选择修改
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
changCycle() {
|
||
this.getChartData();
|
||
},
|
||
|
||
/**
|
||
* @description: 请求弹窗数据
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
getChartData() {
|
||
getMileageDetail({ dateType: this.checkCycle }).then(({ code, data }) => {
|
||
if (code === 200) {
|
||
this.companyList = data.map((item, index) => {
|
||
return {
|
||
...item,
|
||
index,
|
||
};
|
||
});
|
||
this.echartList = data;
|
||
this.echartData = data;
|
||
this.$nextTick(() => {
|
||
this.drawChart();
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* @description: 绘制echart图
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
drawChart() {
|
||
if (this.$refs.patrolChart) {
|
||
const xData = this.echartData.map((item) => {
|
||
return item.name;
|
||
});
|
||
const y1Data = this.echartData.map((item) => {
|
||
return item.len;
|
||
});
|
||
const y2Data = this.echartData.map((item) => {
|
||
return item.time;
|
||
});
|
||
const chart = echarts.init(this.$refs.patrolChart);
|
||
chart.setOption({
|
||
color: [
|
||
{
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: "#8DF2FF" }, // 0% 处的颜色
|
||
{ offset: 1, color: "#82B3FD" }, // 100% 处的颜色
|
||
],
|
||
},
|
||
{
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: "#8087FF" }, // 0% 处的颜色
|
||
{ offset: 1, color: "#532EFF" }, // 100% 处的颜色
|
||
],
|
||
},
|
||
{
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: "#FFB3B3" }, // 0% 处的颜色
|
||
{ offset: 1, color: "#FF2E2E" }, // 100% 处的颜色
|
||
],
|
||
},
|
||
{
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: "#F7DA15" }, // 0% 处的颜色
|
||
{ offset: 1, color: "#FCC105" }, // 100% 处的颜色
|
||
],
|
||
},
|
||
],
|
||
title: {
|
||
text: "",
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
show: true,
|
||
confine: false,
|
||
backgroundColor: "rgba(9, 24, 48, 0.5)",
|
||
borderColor: "rgba(75, 253, 238, 0.4)",
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: "#ffffff",
|
||
},
|
||
},
|
||
grid: {
|
||
left: "3%",
|
||
right: "0%",
|
||
bottom: "10%",
|
||
containLabel: true,
|
||
},
|
||
legend: {
|
||
orient: "horizontal",
|
||
left: "right",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
itemWidth: 8,
|
||
itemHeight: 8,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
axisLabel: {
|
||
interval: 0,
|
||
color: "#fff",
|
||
formatter: (params) => {
|
||
if (params.length > 4) {
|
||
return `${params.slice(0, 4)}...`;
|
||
}
|
||
return params;
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
data: xData,
|
||
},
|
||
yAxis: [
|
||
{
|
||
name: "单位：km",
|
||
type: "value",
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.65)",
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.2)",
|
||
},
|
||
},
|
||
nameTextStyle: {
|
||
color: "rgba(255,255,255,0.65)",
|
||
},
|
||
},
|
||
{
|
||
name: "单位：h",
|
||
type: "value",
|
||
axisLabel: {
|
||
color: "rgba(255,255,255,0.65)",
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.2)",
|
||
},
|
||
},
|
||
nameTextStyle: {
|
||
color: "rgba(255,255,255,0.65)",
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
barWidth: 10,
|
||
name: "巡查里程",
|
||
type: "bar",
|
||
data: y1Data,
|
||
},
|
||
{
|
||
barWidth: 10,
|
||
name: "巡查时长",
|
||
type: "bar",
|
||
data: y2Data,
|
||
yAxisIndex: 1,
|
||
},
|
||
],
|
||
dataZoom: [
|
||
{
|
||
// 设置滚动条的隐藏与显示
|
||
show: false,
|
||
// 设置滚动条类型
|
||
type: "slider",
|
||
// 设置背景颜色
|
||
backgroundColor: "rgba(225,225,225,0.2)",
|
||
// 设置选中范围的填充颜色
|
||
fillerColor: "#ccc",
|
||
// 设置边框颜色
|
||
borderColor: "rgba(225,225,225,0.2)",
|
||
// 是否显示detail，即拖拽时候显示详细数值信息
|
||
showDetail: false,
|
||
// 数据窗口范围的起始数值
|
||
startValue: 0,
|
||
// 数据窗口范围的结束数值（一页显示多少条数据）
|
||
endValue: 6,
|
||
// empty：当前数据窗口外的数据，被设置为空。
|
||
// 即不会影响其他轴的数据范围
|
||
filterMode: "empty",
|
||
// 设置滚动条宽度，相对于盒子宽度
|
||
width: "80%",
|
||
// 设置滚动条高度
|
||
height: 5,
|
||
// 设置滚动条显示位置
|
||
left: "center",
|
||
// 是否锁定选择区域（或叫做数据窗口）的大小
|
||
zoomLoxk: true,
|
||
// 控制手柄的尺寸
|
||
handleSize: 10,
|
||
// dataZoom-slider组件离容器下侧的距离
|
||
bottom: 0,
|
||
},
|
||
{
|
||
// 没有下面这块的话，只能拖动滚动条，
|
||
// 鼠标滚轮在区域内不能控制外部滚动条
|
||
type: "inside",
|
||
// 滚轮是否触发缩放
|
||
zoomOnMouseWheel: false,
|
||
// 鼠标滚轮触发滚动
|
||
moveOnMouseMove: true,
|
||
moveOnMouseWheel: true,
|
||
},
|
||
],
|
||
});
|
||
window.addEventListener("resize", () => {
|
||
chart.resize();
|
||
});
|
||
}
|
||
},
|
||
|
||
/**
|
||
* @description: 弹窗关闭
|
||
* @param {*}
|
||
* @return {*}
|
||
*/
|
||
screenCancel() {
|
||
this.showDialogVisible = false;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
color: #ffffff;
|
||
background: url("~@/assets/screen/disease/patrol-order.png") no-repeat;
|
||
background-size: 90%;
|
||
background-position: 50%;
|
||
|
||
.patrol-div {
|
||
width: 50%;
|
||
height: 100%;
|
||
padding-left: 5rem;
|
||
padding-bottom: 1rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.8rem;
|
||
|
||
.value {
|
||
span {
|
||
cursor: pointer;
|
||
font-family: "DouYu";
|
||
font-size: 1.4rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 弹窗内容样式
|
||
.patrol-content {
|
||
height: 30rem;
|
||
padding: 0 2rem;
|
||
|
||
.patrol-select {
|
||
width: 100%;
|
||
height: 7%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
::v-deep .el-select {
|
||
width: 12rem;
|
||
|
||
.el-input .el-select__caret {
|
||
line-height: 1.5rem;
|
||
}
|
||
|
||
.el-input--medium .el-input__inner {
|
||
height: 1.5rem;
|
||
background-color: transparent;
|
||
color: #89c5e8;
|
||
border-color: #6991cd;
|
||
}
|
||
|
||
.el-select-dropdown {
|
||
background-color: #102649;
|
||
border-color: #08204f;
|
||
|
||
.el-scrollbar {
|
||
.el-select-dropdown__wrap {
|
||
.el-scrollbar__view {
|
||
.el-select-dropdown__item {
|
||
color: #aaabb8;
|
||
}
|
||
|
||
.el-select-dropdown__item:hover {
|
||
background-color: #2b4c7e;
|
||
}
|
||
|
||
.el-select-dropdown__item.selected {
|
||
background-color: #2b4c7e;
|
||
}
|
||
|
||
.el-select-dropdown__item.hover {
|
||
background-color: #2b4c7e;
|
||
}
|
||
}
|
||
|
||
.el-select-dropdown__list {
|
||
background-color: #102649;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .screen-checkBox {
|
||
.el-radio-button__inner {
|
||
background-color: transparent;
|
||
padding: 0.3rem;
|
||
border-color: #1cb6ff;
|
||
}
|
||
|
||
.el-radio-button__orig-radio:checked+.el-radio-button__inner {
|
||
color: #1cb6ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dialog-div {
|
||
width: 100%;
|
||
height: 93%;
|
||
}
|
||
}
|
||
|
||
/* 修改弹窗样式 */
|
||
::v-deep .el-dialog__header {
|
||
padding: 10px;
|
||
background-color: #113463;
|
||
|
||
span,
|
||
i {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-dialog__body {
|
||
padding: 0;
|
||
background-color: #113463;
|
||
}
|
||
</style> |