fix：大屏联调接口，待验证完善
This commit is contained in:
parent
13c6607cbd
commit
1590e2acc6
@ -35,7 +35,7 @@ export function roadToday(query) {
|
||||
});
|
||||
}
|
||||
|
||||
// 今日巡查弹窗
|
||||
// 今日巡查病害弹窗
|
||||
export function roadTodayDetail(query) {
|
||||
return request({
|
||||
url: "/bigscreen/v2/getInspectionDetailInfo",
|
||||
@ -90,6 +90,15 @@ export function getMileage(query) {
|
||||
});
|
||||
}
|
||||
|
||||
// 获取巡查里程弹窗数据
|
||||
export function getMileageDetail(query) {
|
||||
return request({
|
||||
url: "/bigscreen/v2/getTaskDetailInfo",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取巡检车辆数据
|
||||
export function getCarList(query) {
|
||||
return request({
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-24 15:03:28
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-15 16:13:41
|
||||
* @LastEditTime: 2024-11-18 10:09:30
|
||||
* @FilePath: \znxjxt-ui\src\api\xj\screen\index.js
|
||||
* @Description: 大屏首页接口
|
||||
*/
|
||||
@ -113,3 +113,11 @@ export function getRoadListTypes() {
|
||||
method: "post",
|
||||
});
|
||||
}
|
||||
|
||||
// 获取病害类型筛选级联下拉
|
||||
export function getDefectTypes() {
|
||||
return request({
|
||||
url: "/bigscreen/v2/getDefectTypesDrowDown",
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 09:59:32
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-13 13:39:33
|
||||
* @LastEditTime: 2024-11-18 13:37:03
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-safety.vue
|
||||
* @Description: 病害巡检大屏-今日巡查
|
||||
-->
|
||||
@ -10,10 +10,10 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="traffic-left">
|
||||
<span>{{ today }}</span>
|
||||
<span @click="showDialog('today')">{{ today }}</span>
|
||||
</div>
|
||||
<div class="traffic-right">
|
||||
<div class="right-sum" @click="showDialog">
|
||||
<div class="right-sum" @click="showDialog('')">
|
||||
<span>{{ all }}</span
|
||||
>个
|
||||
</div>
|
||||
@ -33,8 +33,44 @@
|
||||
@close="screenCancel"
|
||||
>
|
||||
<div class="today-content">
|
||||
<div ref="leftChart" class="dialog-div"></div>
|
||||
<div ref="rightChart" class="dialog-div"></div>
|
||||
<div class="today-select">
|
||||
<div>
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="roadSelect"
|
||||
@change="changeRoad"
|
||||
clearable
|
||||
placeholder="请选择路段"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roadList"
|
||||
:key="`${item.name}-${item.index}`"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div>
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="companySelect"
|
||||
clearable
|
||||
@change="changeCompany"
|
||||
placeholder="请选择分公司"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in companyList"
|
||||
:key="`${item.name}-${item.index}`"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="today-bottom">
|
||||
<div ref="leftChart" class="dialog-div"></div>
|
||||
<div ref="rightChart" class="dialog-div"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
@ -62,8 +98,20 @@ export default {
|
||||
scale: 0,
|
||||
// 弹窗显隐控制
|
||||
showDialogVisible: false,
|
||||
// 左侧路段选择绑定
|
||||
roadSelect: "",
|
||||
// 左侧路段下拉数据
|
||||
roadList: [],
|
||||
// 左侧图表总数据
|
||||
leftChartList: [],
|
||||
// 左侧图表数据
|
||||
leftChartData: [],
|
||||
// 右侧公司选择绑定
|
||||
companySelect: "",
|
||||
// 右侧公司选择下拉
|
||||
companyList: [],
|
||||
// 右侧图表总数据
|
||||
rightChartList: [],
|
||||
// 右侧图表数据
|
||||
rightChartData: [],
|
||||
};
|
||||
@ -91,18 +139,58 @@ export default {
|
||||
},
|
||||
|
||||
/* 点击打开弹窗 */
|
||||
showDialog() {
|
||||
this.getChartData();
|
||||
showDialog(item) {
|
||||
this.getChartData(item);
|
||||
this.showDialogVisible = true;
|
||||
},
|
||||
|
||||
/* 弹窗路段修改事件 */
|
||||
changeRoad(value) {
|
||||
this.leftChartData = this.leftChartList.filter((item) => {
|
||||
if (value) {
|
||||
return item.name === value;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.drawLeftChart();
|
||||
});
|
||||
},
|
||||
|
||||
/* 弹窗公司修改事件 */
|
||||
changeCompany(value) {
|
||||
this.rightChartData = this.rightChartList.filter((item) => {
|
||||
if (value) {
|
||||
return item.name === value;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.drawRightChart();
|
||||
});
|
||||
},
|
||||
|
||||
/* 请求弹窗数据 */
|
||||
getChartData() {
|
||||
roadTodayDetail({ classType: this.bottomTipClick }).then(
|
||||
getChartData(item) {
|
||||
roadTodayDetail({ classType: this.bottomTipClick, type: item }).then(
|
||||
({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.leftChartList = data[0];
|
||||
this.leftChartData = data[0];
|
||||
this.roadList = data[0].map((item, index) => {
|
||||
return {
|
||||
...item,
|
||||
index: index,
|
||||
};
|
||||
});
|
||||
this.rightChartList = data[1];
|
||||
this.rightChartData = data[1];
|
||||
this.companyList = data[1].map((item, index) => {
|
||||
return {
|
||||
...item,
|
||||
index: index,
|
||||
};
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.drawLeftChart();
|
||||
this.drawRightChart();
|
||||
@ -268,6 +356,51 @@ export default {
|
||||
data: y4Data,
|
||||
},
|
||||
],
|
||||
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();
|
||||
@ -424,6 +557,51 @@ export default {
|
||||
data: y4Data,
|
||||
},
|
||||
],
|
||||
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();
|
||||
@ -461,6 +639,7 @@ export default {
|
||||
background-position: 100% 60%;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
font-family: "DouYu";
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
@ -555,6 +734,81 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗内容样式
|
||||
.today-content {
|
||||
height: 30rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.today-select {
|
||||
width: 100%;
|
||||
// height: 10%;
|
||||
display: flex;
|
||||
|
||||
> div {
|
||||
width: 50%;
|
||||
padding: 0 2rem;
|
||||
|
||||
::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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.today-bottom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.dialog-div {
|
||||
width: 50%;
|
||||
height: 90%;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 修改弹窗样式 */
|
||||
::v-deep .el-dialog__header {
|
||||
padding: 10px;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 10:06:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-13 13:57:00
|
||||
* @LastEditTime: 2024-11-18 13:47:54
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-statistic.vue
|
||||
* @Description: 病害巡检大屏-病害统计
|
||||
-->
|
||||
@ -24,16 +24,21 @@
|
||||
</div>
|
||||
<div ref="statisticChart" class="statistic-chart"></div>
|
||||
<div class="statistic-lenged">
|
||||
<div
|
||||
class="lenged-item"
|
||||
v-for="(item, index) in echartList"
|
||||
:key="`static-${index}`"
|
||||
>
|
||||
<div class="index" :style="{ backgroundColor: colorList[index] }"></div>
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="rate">{{ item.rate }}</div>
|
||||
<div class="value">{{ item.value }}</div>
|
||||
</div>
|
||||
<fssm-scroll>
|
||||
<div
|
||||
class="lenged-item"
|
||||
v-for="(item, index) in echartList"
|
||||
:key="`static-${index}`"
|
||||
>
|
||||
<div
|
||||
class="index"
|
||||
:style="{ backgroundColor: colorList[index] }"
|
||||
></div>
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="rate">{{ item.rate }}</div>
|
||||
<div class="value">{{ item.value }}</div>
|
||||
</div>
|
||||
</fssm-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -42,8 +47,10 @@
|
||||
import * as echarts from "echarts";
|
||||
import { getDropList } from "@/api/xj/screen/disease-screen";
|
||||
import { roadCurrent } from "@/api/xj/screen/traffic-screen";
|
||||
import fssmScroll from "@/components/scroll/fssm-scroll.vue";
|
||||
export default {
|
||||
name: "TrafficStatistic",
|
||||
components: { fssmScroll },
|
||||
props: {
|
||||
select: {
|
||||
type: String,
|
||||
@ -72,6 +79,15 @@ export default {
|
||||
"#AE74F3",
|
||||
"#4C21D5",
|
||||
"#6669DB",
|
||||
"#18F7FF",
|
||||
"#6FC36F",
|
||||
"#4C83FF",
|
||||
"#FFEA68",
|
||||
"#FF8F5F",
|
||||
"#FC5976",
|
||||
"#AE74F3",
|
||||
"#4C21D5",
|
||||
"#6669DB",
|
||||
],
|
||||
// echart图数据
|
||||
echartList: [],
|
||||
@ -278,9 +294,11 @@ export default {
|
||||
.statistic-lenged {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
padding: 2rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
|
||||
.lenged-item {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-15 17:40:06
|
||||
* @LastEditTime: 2024-11-18 11:18:49
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@ -110,25 +110,11 @@
|
||||
<!-- 图背景下选择框 -->
|
||||
<div class="map-image-select">
|
||||
病害类型筛选：
|
||||
<!-- <el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="mapCareSelect"
|
||||
placeholder="请选择"
|
||||
@change="getMapCare"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dieaseTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select> -->
|
||||
<el-cascader
|
||||
v-model="mapCareSelect"
|
||||
popper-class="screen-index-cascader"
|
||||
:options="dieaseOptions"
|
||||
:props="{ checkStrictly: true, emitPath: false }"
|
||||
:props="{checkStrictly:true, emitPath: true, children: 'subTypes' }"
|
||||
@change="getMapCare"
|
||||
clearable
|
||||
></el-cascader>
|
||||
@ -274,6 +260,7 @@ import {
|
||||
comppanyImg,
|
||||
getItemTypes,
|
||||
getRoadListTypes,
|
||||
getDefectTypes,
|
||||
} from "@/api/xj/screen/index";
|
||||
export default {
|
||||
name: "BigScreen",
|
||||
@ -368,7 +355,6 @@ export default {
|
||||
// 图片背景下病害类型下拉选择绑定
|
||||
mapCareSelect: "",
|
||||
// 图片背景下病害类型下拉选择数据
|
||||
dieaseTypeList: [],
|
||||
dieaseOptions: [
|
||||
{
|
||||
value: "zhinan",
|
||||
@ -703,21 +689,26 @@ export default {
|
||||
|
||||
/* 获取图片背景左上角病害类型下拉 */
|
||||
getDieaseTypeList() {
|
||||
getItemTypes().then(({ code, data }) => {
|
||||
getDefectTypes().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.dieaseTypeList = data;
|
||||
this.dieaseOptions = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取图片背景下坐标数据 */
|
||||
getMapCare(value) {
|
||||
console.log(value,this.mapCareSelect, "获取图片背景下坐标数据");
|
||||
comppanyImg({ type: value }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.mapCareList = data;
|
||||
const data = {
|
||||
classType: value ? value[0] : "",
|
||||
type: value ? (value.length > 1 ? value[1] : "") : "",
|
||||
};
|
||||
comppanyImg(data).then(
|
||||
({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.mapCareList = data;
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
},
|
||||
|
||||
/* 点击病害日志详情打开弹窗进行地图打点 */
|
||||
@ -986,7 +977,10 @@ export default {
|
||||
/* 获取icon多选数据 */
|
||||
getIconType() {
|
||||
this.mapLogeList = {};
|
||||
getItemTypes({ classType: this.bottomTipClick,type:this.elementDiv }).then(({ code, data }) => {
|
||||
getItemTypes({
|
||||
classType: this.bottomTipClick,
|
||||
type: this.elementDiv,
|
||||
}).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.iconTypeList = data;
|
||||
this.iconType = data.map((item) => {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:25:29
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-14 16:16:56
|
||||
* @LastEditTime: 2024-11-18 11:44:52
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\work-order.vue
|
||||
* @Description: 总览大屏-巡查里程
|
||||
-->
|
||||
@ -35,13 +35,15 @@
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="companySelect"
|
||||
@change="changeSelect"
|
||||
clearable
|
||||
placeholder="请选择分公司"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in companyList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="`${item.name}-${item.index}`"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
<div ref="patrolChart" class="dialog-div"></div>
|
||||
@ -52,7 +54,7 @@
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { getMileage } from "@/api/xj/screen/disease-screen";
|
||||
import { getMileage, getMileageDetail } from "@/api/xj/screen/disease-screen";
|
||||
export default {
|
||||
name: "PatrolOrder",
|
||||
data() {
|
||||
@ -65,6 +67,8 @@ export default {
|
||||
companySelect: "",
|
||||
// 公司下拉绑定
|
||||
companyList: [],
|
||||
// echart图数据
|
||||
echartData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -114,16 +118,50 @@ export default {
|
||||
this.getChartData();
|
||||
},
|
||||
|
||||
/* 请求弹窗数据 */
|
||||
getChartData() {
|
||||
/* 选择框绑定值修改 */
|
||||
changeSelect(value) {
|
||||
this.echartData = this.echartList.filter((item) => {
|
||||
if (value) {
|
||||
return item.name === value;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.drawChart();
|
||||
});
|
||||
},
|
||||
|
||||
/* 请求弹窗数据 */
|
||||
getChartData() {
|
||||
getMileageDetail().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();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 绘制echart图 */
|
||||
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: [
|
||||
@ -219,35 +257,53 @@ export default {
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
data: ["dsds", "4ds", "5454", "sff"],
|
||||
data: xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,0.65)",
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.2)",
|
||||
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: "单位：个",
|
||||
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: [10, 25, 23, 58],
|
||||
data: y1Data,
|
||||
},
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "巡查时长",
|
||||
type: "bar",
|
||||
data: [10, 25, 23, 58],
|
||||
data: y2Data,
|
||||
yAxisIndex: 1,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 09:42:49
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-14 15:48:21
|
||||
* @LastEditTime: 2024-11-18 13:36:55
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\today-inspection.vue
|
||||
* @Description: 总览大屏-今日巡查
|
||||
-->
|
||||
@ -10,10 +10,10 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="today-left">
|
||||
<span @click="showDialog('1')">{{ today }}</span>
|
||||
<span @click="showDialog('today')">{{ today }}</span>
|
||||
</div>
|
||||
<div class="today-right">
|
||||
<div class="right-sum" @click="showDialog('2')">
|
||||
<div class="right-sum" @click="showDialog('')">
|
||||
<span>{{ all }}</span
|
||||
>个
|
||||
</div>
|
||||
@ -38,13 +38,15 @@
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="roadSelect"
|
||||
@change="changeRoad"
|
||||
clearable
|
||||
placeholder="请选择路段"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roadList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="`${item.name}-${item.index}`"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
@ -52,13 +54,15 @@
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="companySelect"
|
||||
clearable
|
||||
@change="changeCompany"
|
||||
placeholder="请选择分公司"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in companyList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:key="`${item.name}-${item.index}`"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
@ -85,20 +89,22 @@ export default {
|
||||
all: "0",
|
||||
// 增长率
|
||||
scale: "0",
|
||||
// 新增/当前总数区分
|
||||
clickTip: "",
|
||||
// 弹窗显隐控制
|
||||
showDialogVisible: false,
|
||||
// 左侧路段选择绑定
|
||||
roadSelect: "",
|
||||
// 左侧路段下拉数据
|
||||
roadList: [],
|
||||
// 左侧图表总数据
|
||||
leftChartList: [],
|
||||
// 左侧图表数据
|
||||
leftChartData: [],
|
||||
// 右侧公司选择绑定
|
||||
companySelect: "",
|
||||
// 右侧公司选择下拉
|
||||
companyList: [],
|
||||
// 右侧图表总数据
|
||||
rightChartList: [],
|
||||
// 右侧图表数据
|
||||
rightChartData: [],
|
||||
};
|
||||
@ -120,17 +126,56 @@ export default {
|
||||
|
||||
/* 点击打开弹窗 */
|
||||
showDialog(item) {
|
||||
this.clickTip = item;
|
||||
this.getChartData();
|
||||
this.getChartData(item);
|
||||
this.showDialogVisible = true;
|
||||
},
|
||||
|
||||
/* 请求弹窗数据 */
|
||||
getChartData() {
|
||||
roadTodayDetail().then(({ code, data }) => {
|
||||
/* 弹窗路段修改事件 */
|
||||
changeRoad(value) {
|
||||
this.leftChartData = this.leftChartList.filter((item) => {
|
||||
if (value) {
|
||||
return item.name === value;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.drawLeftChart();
|
||||
});
|
||||
},
|
||||
|
||||
/* 弹窗公司修改事件 */
|
||||
changeCompany(value) {
|
||||
this.rightChartData = this.rightChartList.filter((item) => {
|
||||
if (value) {
|
||||
return item.name === value;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.drawRightChart();
|
||||
});
|
||||
},
|
||||
|
||||
/* 请求病害弹窗数据 */
|
||||
getChartData(item) {
|
||||
roadTodayDetail({ type: item }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.leftChartList = data[0];
|
||||
this.leftChartData = data[0];
|
||||
this.roadList = data[0].map((item, index) => {
|
||||
return {
|
||||
...item,
|
||||
index: index,
|
||||
};
|
||||
});
|
||||
this.rightChartList = data[1];
|
||||
this.rightChartData = data[1];
|
||||
this.companyList = data[1].map((item, index) => {
|
||||
return {
|
||||
...item,
|
||||
index: index,
|
||||
};
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.drawLeftChart();
|
||||
this.drawRightChart();
|
||||
@ -295,6 +340,51 @@ export default {
|
||||
data: y4Data,
|
||||
},
|
||||
],
|
||||
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();
|
||||
@ -443,6 +533,51 @@ export default {
|
||||
data: y4Data,
|
||||
},
|
||||
],
|
||||
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();
|
||||
@ -452,7 +587,10 @@ export default {
|
||||
|
||||
/* 关闭 弹窗事件 */
|
||||
screenCancel() {
|
||||
this.clickTip = "";
|
||||
this.leftChartList = [];
|
||||
this.leftChartData = [];
|
||||
this.rightChartList = [];
|
||||
this.rightChartData = [];
|
||||
this.showDialogVisible = false;
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user