SunTao/xjsaas-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改大屏总览传参，修改大屏下拉框样式

Browse Source
This commit is contained in:
SunTao 2024-12-20 14:16:00 +08:00
parent 157c7323aa
commit c16b4e72eb
12 changed files with 270 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/xj/screen/disease-screen.js
View File

@ -27,11 +27,11 @@ export function roadTrends(query) {
// params: query, // params: query,
// }); // });
// } // }
export function roadToday(query) { export function roadToday(params) {
return request({ return request({
url: "/bigscreen/v2/getInspectionInfo", url: "/bigscreen/v2/getInspectionInfo",
method: "get", method: "get",
params: query, params,
}); });
} }

9
src/views/big-screen/disease-components/traffic-log.vue
View File

@ -22,10 +22,10 @@
<el-form-item class="form-item" label="路线名称" prop="routeId"> <el-form-item class="form-item" label="路线名称" prop="routeId">
<el-select <el-select
v-model="trafficForm.routeId" v-model="trafficForm.routeId"
:popper-append-to-body="false"
placeholder="请选择路线" placeholder="请选择路线"
filterable filterable
clearable clearable
popper-class="screen-select"
@change="chengeLine" @change="chengeLine"
> >
<el-option <el-option
@ -39,7 +39,7 @@
<el-form-item class="form-item" label="路段名称" prop="segmentId"> <el-form-item class="form-item" label="路段名称" prop="segmentId">
<el-select <el-select
v-model="trafficForm.segmentId" v-model="trafficForm.segmentId"
:popper-append-to-body="false" popper-class="screen-select"
placeholder="请选择路段" placeholder="请选择路段"
filterable filterable
clearable clearable
@ -59,6 +59,7 @@
> >
<el-select <el-select
v-model="trafficForm.inspectDirection" v-model="trafficForm.inspectDirection"
popper-class="screen-select"
:popper-append-to-body="false" :popper-append-to-body="false"
placeholder="请选择上下行" placeholder="请选择上下行"
clearable clearable
@ -99,7 +100,7 @@
<el-form-item class="form-item" label="病害类型" prop="defectType"> <el-form-item class="form-item" label="病害类型" prop="defectType">
<el-select <el-select
v-model="trafficForm.defectType" v-model="trafficForm.defectType"
:popper-append-to-body="false" popper-class="screen-select"
placeholder="请选择病害类型" placeholder="请选择病害类型"
clearable clearable
> >
@ -114,7 +115,7 @@
<el-form-item class="form-item" label="病害状态" prop="state"> <el-form-item class="form-item" label="病害状态" prop="state">
<el-select <el-select
v-model="trafficForm.state" v-model="trafficForm.state"
:popper-append-to-body="false" popper-class="screen-select"
placeholder="请选择病害状态" placeholder="请选择病害状态"
clearable clearable
> >

2
src/views/big-screen/disease-components/traffic-statistic.vue
View File

@ -10,9 +10,9 @@
<div class="content"> <div class="content">
<div class="statistic-select"> <div class="statistic-select">
<el-select <el-select
:popper-append-to-body="false"
v-model="itemSelect" v-model="itemSelect"
placeholder="请选择" placeholder="请选择"
popper-class="screen-select"
> >
<el-option <el-option
v-for="item in currentList" v-for="item in currentList"

4
src/views/big-screen/disease-components/traffic-trend.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-21 10:03:08 * @Date: 2024-10-21 10:03:08
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-19 10:44:06 * @LastEditTime: 2024-12-20 10:53:53
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-trend.vue * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-trend.vue
* @Description: 病害巡检大屏-病害趋势 * @Description: 病害巡检大屏-病害趋势
--> -->
@ -11,9 +11,9 @@
<div class="content"> <div class="content">
<div class="traffic-select"> <div class="traffic-select">
<el-select <el-select
:popper-append-to-body="false"
v-model="itemSelect" v-model="itemSelect"
placeholder="请选择" placeholder="请选择"
popper-class="screen-select"
> >
<el-option <el-option
v-for="item in trafficList" v-for="item in trafficList"

238
src/views/big-screen/index.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-17 11:34:00 * @Date: 2024-10-17 11:34:00
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-19 15:22:15 * @LastEditTime: 2024-12-20 11:54:55
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
* @Description: 大屏首页 * @Description: 大屏首页
--> -->
@ -107,6 +107,7 @@
:select="item.select" :select="item.select"
:is="item.component" :is="item.component"
:bottomTipClick="bottomTipClick" :bottomTipClick="bottomTipClick"
:companyId="companyId"
></component> ></component>
</template> </template>
<template slot="operation" v-if="item.selectIsShow"> <template slot="operation" v-if="item.selectIsShow">
@ -136,6 +137,7 @@
:select="item.select" :select="item.select"
:is="item.component" :is="item.component"
:bottomTipClick="bottomTipClick" :bottomTipClick="bottomTipClick"
:companyId="companyId"
@imagePoint="getimagePoint" @imagePoint="getimagePoint"
></component> ></component>
</template> </template>
@ -171,15 +173,30 @@
v-if="elementDiv === 'OverviewScreen' && !showMap" v-if="elementDiv === 'OverviewScreen' && !showMap"
> >
<div class="work-order-left"> <div class="work-order-left">
<el-button class="btn-time" size="mini" @click="changeOrder(1)" <div
>本周</el-button class="btn-time"
:class="workOrderType === 1 ? 'btn-time-click' : ''"
size="mini"
@click="changeOrder(1)"
> >
<el-button class="btn-time" size="mini" @click="changeOrder(2)" 本周
>本月</el-button </div>
<div
class="btn-time"
:class="workOrderType === 2 ? 'btn-time-click' : ''"
size="mini"
@click="changeOrder(2)"
> >
<el-button class="btn-time" size="mini" @click="changeOrder(3)" 本月
>本年</el-button </div>
<div
class="btn-time"
:class="workOrderType === 3 ? 'btn-time-click' : ''"
size="mini"
@click="changeOrder(3)"
> >
本年
</div>
</div> </div>
<div class="work-order-right"> <div class="work-order-right">
<div <div
@ -204,7 +221,7 @@
</div> </div>
</div> </div>
<!-- 地图图例 --> <!-- 地图图例 -->
<div class="map-legend"> <div class="map-legend" v-if="elementDiv != 'RoadScreen'">
<span>≥{{ mapLegendList.s5 }}</span> <span>≥{{ mapLegendList.s5 }}</span>
<span>≥{{ mapLegendList.s4 }}</span> <span>≥{{ mapLegendList.s4 }}</span>
<span>≥{{ mapLegendList.s3 }}</span> <span>≥{{ mapLegendList.s3 }}</span>
@ -311,7 +328,7 @@
</div> </div>
</div> --> </div> -->
</div> </div>
<span slot="reference" @click="showMapByCompany">{{ <span slot="reference" @click="showMapByCompany(item)">{{
item.name item.name
}}</span> }}</span>
</el-popover> </el-popover>
@ -556,6 +573,8 @@ export default {
{ name: "未完成工单数", value: 562254 }, { name: "未完成工单数", value: 562254 },
{ name: "已完成工单数", value: 562254 }, { name: "已完成工单数", value: 562254 },
], ],
// 工单时间选择绑定
workOrderType: 1,
// 图片背景下打点坐标数据 // 图片背景下打点坐标数据
mapCareList: [], mapCareList: [],
// 图例循环数据 // 图例循环数据
@ -578,6 +597,8 @@ export default {
showMap: false, showMap: false,
// 图片背景下popover弹窗病害名称 // 图片背景下popover弹窗病害名称
screenMapPopoverName: "", screenMapPopoverName: "",
// 图片背景下点击得公司id
companyId: null,
// 图标类别切换标识 // 图标类别切换标识
bottomTipClick: "1", bottomTipClick: "1",
@ -633,6 +654,7 @@ export default {
carPointList: [], carPointList: [],
// 小车地图点位features数组 // 小车地图点位features数组
mapPointFeatures: [], mapPointFeatures: [],
// websocket监听事件id
indexListenerId: Symbol("index-listener"), indexListenerId: Symbol("index-listener"),
}; };
}, },
@ -702,29 +724,6 @@ export default {
this.noticeNum = total; this.noticeNum = total;
} }
}); });
// this.messageList = [
// {
// title: "成功",
// status: "SUCCESS",
// time: "2024/45/62",
// car: "辽jskdn",
// content: "骄傲的是否哈德half绝对符合卡的法拉第",
// },
// {
// title: "告警",
// status: "WARNING",
// time: "2024/45/62",
// car: "辽jskdn",
// content: "骄傲的是否哈德half绝对符合卡的法拉第",
// },
// {
// title: "提醒",
// status: "REMIND",
// time: "2024/45/62",
// car: "辽jskdn",
// content: "骄傲的是否哈德half绝对符合卡的法拉第",
// },
// ];
}, },
/** /**
@ -778,6 +777,7 @@ export default {
const [node] = this.$refs.screenCascader.getCheckedNodes(); const [node] = this.$refs.screenCascader.getCheckedNodes();
this.screenMapPopoverName = node?.label; this.screenMapPopoverName = node?.label;
this.getMapCare(value); this.getMapCare(value);
this.getLinePoint();
}, },
/** /**
@ -785,15 +785,19 @@ export default {
* @return {void} * @return {void}
*/ */
changeOrder(val) { changeOrder(val) {
this.workOrderList = [ if (this.workOrderType != val) {
{ name: "生成工单数", value: 54 }, this.workOrderType = val;
{ name: "未完成工单数", value: 5254 }, this.companyId;
{ name: "已完成工单数", value: 554 }, this.workOrderList = [
]; { name: "生成工单数", value: 54 },
{ name: "未完成工单数", value: 5254 },
{ name: "已完成工单数", value: 554 },
];
}
}, },
/** /**
* @description: 获取图片背景下坐标数据 * @description: 获取图片背景下坐标数据以及图例数据
* @return {void} * @return {void}
*/ */
getMapCare(value) { getMapCare(value) {
@ -803,6 +807,13 @@ export default {
}; };
comppanyImg(data).then(({ code, data }) => { comppanyImg(data).then(({ code, data }) => {
if (code === 200) { if (code === 200) {
this.mapLegendList = {
s1: "0",
s2: "20",
s3: "40",
s4: "60",
s5: "80",
};
this.mapCareList = data; this.mapCareList = data;
} }
}); });
@ -812,7 +823,8 @@ export default {
* @description: 点击图片背景下公司名称切换地图 * @description: 点击图片背景下公司名称切换地图
* @return {void} * @return {void}
*/ */
showMapByCompany() { showMapByCompany(val) {
this.companyId = val.id;
this.showMap = true; this.showMap = true;
this.getLinePoint(); this.getLinePoint();
}, },
@ -824,6 +836,7 @@ export default {
disabledMapCompany() { disabledMapCompany() {
this.showMap = false; this.showMap = false;
this.markLayerLines = null; this.markLayerLines = null;
this.companyId = null;
}, },
/** /**
@ -1021,28 +1034,39 @@ export default {
* @return {void} * @return {void}
*/ */
getLinePoint() { getLinePoint() {
if (!this.markLayerLines) { if (this.markLayerLines) {
mapPciList().then(({ code, data }) => { // 清除线段图层
// if (code === 200 && data) { this.$nextTick(() => {
// this.lineString = data.filter((item) => item.coordinates !== null); let map = null;
// this.drawLine(); if (this.$refs.roadMap) {
// } map = this.$refs.roadMap.instance.get("map");
if (code === 200) { } else {
this.lineString = [ map = this.$refs.overViewMap.instance.get("map");
[123.09835060586187, 41.95723497452143],
[122.96926125039312, 41.8459984022558],
[123.14366920937749, 41.8185325819433],
[123.10384376992437, 41.71141588272455],
[122.91982277383062, 41.67708360733393],
[123.10109718789312, 41.6207786756933],
[123.37300880898687, 41.63039171280268],
[123.31121071328374, 41.8240257460058],
[123.21782692422124, 41.98195421280268],
];
this.drawLine();
} }
map.removeLayer(this.markLayerLines);
this.markLayerLines = null;
}); });
} }
mapPciList().then(({ code, data }) => {
// if (code === 200 && data) {
// this.lineString = data.filter((item) => item.coordinates !== null);
// this.drawLine();
// }
if (code === 200) {
this.lineString = [
[123.09835060586187, 41.95723497452143],
[122.96926125039312, 41.8459984022558],
[123.14366920937749, 41.8185325819433],
[123.10384376992437, 41.71141588272455],
[122.91982277383062, 41.67708360733393],
[123.10109718789312, 41.6207786756933],
[123.37300880898687, 41.63039171280268],
[123.31121071328374, 41.8240257460058],
[123.21782692422124, 41.98195421280268],
];
this.drawLine();
}
});
}, },
/** /**
@ -1358,7 +1382,17 @@ export default {
this.showIconList = true; this.showIconList = true;
// 进行地图打点 // 进行地图打点
this.getCenterPiont(); this.getCenterPiont();
this.getLinePoint(); // 清除线段图层
this.$nextTick(() => {
let map = null;
if (this.$refs.roadMap) {
map = this.$refs.roadMap.instance.get("map");
} else {
map = this.$refs.overViewMap.instance.get("map");
}
map.removeLayer(this.markLayerLines);
this.markLayerLines = null;
});
} else if (item.component === "DiseaseScreen") { } else if (item.component === "DiseaseScreen") {
this.leftModuleList = [ this.leftModuleList = [
{ {
@ -1696,14 +1730,18 @@ export default {
align-items: flex-end; align-items: flex-end;
.btn-time { .btn-time {
cursor: pointer;
width: 7rem; width: 7rem;
height: 2rem; height: 2rem;
display: flex;
justify-content: center;
align-items: center;
margin: 0; margin: 0;
background: url("~@/assets/screen/index/btn-time.png") no-repeat; background: url("~@/assets/screen/index/btn-time.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
border-color: transparent; border-color: transparent;
color: #ffffff; color: #ffffff;
font-size: 0.8rem; font-size: 0.7rem;
font-family: "DouYu"; font-family: "DouYu";
&:hover { &:hover {
@ -1711,12 +1749,12 @@ export default {
no-repeat; no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
}
&:focus { .btn-time-click {
background: url("~@/assets/screen/index/btn-time-click.png") cursor: pointer;
no-repeat; background: url("~@/assets/screen/index/btn-time-click.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
}
} }
} }
@ -1734,12 +1772,12 @@ export default {
align-items: center; align-items: center;
.value { .value {
font-size: 0.8rem; font-size: 0.7rem;
font-family: "DouYu"; font-family: "DouYu";
color: #ffffff; color: #ffffff;
span { span {
font-size: 1.5rem; font-size: 1.4rem;
font-family: "DouYu"; font-family: "DouYu";
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
@ -1755,7 +1793,7 @@ export default {
} }
.name { .name {
font-size: 0.8rem; font-size: 0.7rem;
font-family: "DouYu"; font-family: "DouYu";
color: #ffffff; color: #ffffff;
} }
@ -2149,37 +2187,6 @@ export default {
color: #89c5e8; color: #89c5e8;
border-color: #6991cd; 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;
}
}
}
}
} }
// 修改级联样式 // 修改级联样式
@ -2195,6 +2202,39 @@ export default {
} }
</style> </style>
<style lang="scss"> <style lang="scss">
// 下拉样式
.screen-select {
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;
}
}
}
}
// 级联样式
.screen-index-cascader { .screen-index-cascader {
background-color: #102649; background-color: #102649;
border-color: #08204f; border-color: #08204f;

15
src/views/big-screen/overview-components/disease-current.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 10:19:56 * @Date: 2024-10-18 10:19:56
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-13 16:44:58 * @LastEditTime: 2024-12-20 10:50:40
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\disease-current.vue * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\disease-current.vue
* @Description: 总览大屏-病害三维饼图 * @Description: 总览大屏-病害三维饼图
--> -->
@ -19,9 +19,10 @@
>返回</el-button >返回</el-button
> >
<el-select <el-select
:popper-append-to-body="false"
v-model="itemSelect" v-model="itemSelect"
placeholder="请选择" placeholder="请选择"
@change="getChartList"
popper-class="screen-select"
> >
<el-option <el-option
v-for="item in currentList" v-for="item in currentList"
@ -89,10 +90,16 @@ export default {
FssmScroll, FssmScroll,
}, },
props: { props: {
// 数据栏右上角
select: { select: {
type: String, type: String,
default: "", default: "",
}, },
// 传过来得公司id
companyId: {
type: Number,
default: null,
},
}, },
data() { data() {
return { return {
@ -142,10 +149,11 @@ export default {
}, },
immediate: true, immediate: true,
}, },
itemSelect: { companyId: {
handler() { handler() {
this.getChartList(); this.getChartList();
}, },
immediate: true,
}, },
}, },
mounted() { mounted() {
@ -167,6 +175,7 @@ export default {
type: this.select, type: this.select,
itemName: this.itemSelect, itemName: this.itemSelect,
classType: this.clickType, classType: this.clickType,
companyId: this.companyId,
}; };
roadCurrent(data).then(({ code, data }) => { roadCurrent(data).then(({ code, data }) => {
if (code === 200) { if (code === 200) {

34
src/views/big-screen/overview-components/disease-trends.vue
View File

@ -2,13 +2,13 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 10:16:30 * @Date: 2024-10-18 10:16:30
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-19 13:42:02 * @LastEditTime: 2024-12-20 10:36:54
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-trends.vue * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-trends.vue
* @Description: 总览大屏-病害趋势 * @Description: 总览大屏-主要病害趋势
--> -->
<template> <template>
<div class="content"> <div class="content">
<div class="chart" ref="trendsChart"></div> <div class="chart" ref="trendsChart"></div>
</div> </div>
</template> </template>
@ -17,19 +17,36 @@ import * as echarts from "echarts";
import { roadTrends } from "@/api/xj/screen/disease-screen"; import { roadTrends } from "@/api/xj/screen/disease-screen";
export default { export default {
name: "DiseaseTrends", name: "DiseaseTrends",
props: {
// 传过来得公司id
companyId: {
type: Number,
default: null,
},
},
data() { data() {
return { return {
// echart数据 // echart数据
echartList: [], echartList: [],
// chart对象
chart: null,
}; };
}, },
watch: {
companyId: {
handler() {
this.geteEhartList();
},
immediate: true,
},
},
mounted() { mounted() {
this.geteEhartList(); this.geteEhartList();
}, },
methods: { methods: {
/* 获取折线图数据 */ /* 获取折线图数据 */
geteEhartList() { geteEhartList() {
roadTrends().then(({ data, code }) => { roadTrends({ companyId: this.companyId }).then(({ data, code }) => {
if (code === 200) { if (code === 200) {
this.echartList = data; this.echartList = data;
this.$nextTick(() => { this.$nextTick(() => {
@ -52,9 +69,12 @@ export default {
const yData3 = this.echartList.map((item) => { const yData3 = this.echartList.map((item) => {
return item.sanluowu; return item.sanluowu;
}); });
if (this.chart) {
this.chart.dispose();
}
if (this.$refs.trendsChart) { if (this.$refs.trendsChart) {
const chart = echarts.init(this.$refs.trendsChart); this.chart = echarts.init(this.$refs.trendsChart);
chart.setOption({ this.chart.setOption({
//你的代码 //你的代码
title: { title: {
text: "", text: "",
@ -278,7 +298,7 @@ export default {
], ],
}); });
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
chart.resize(); this.chart.resize();
}); });
} }
}, },

45
src/views/big-screen/overview-components/inspection-vehicles.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-11-08 09:40:18 * @Date: 2024-11-08 09:40:18
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-13 09:51:07 * @LastEditTime: 2024-12-20 11:15:31
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\inspection-vehicles.vue * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\inspection-vehicles.vue
* @Description: 总览大屏-巡检车辆 * @Description: 总览大屏-巡检车辆
--> -->
@ -168,6 +168,13 @@ export default {
InspectionFollow, InspectionFollow,
InspectionView, InspectionView,
}, },
props: {
// 传过来得公司id
companyId: {
type: Number,
default: null,
},
},
data() { data() {
return { return {
// 车辆总数 // 车辆总数
@ -199,6 +206,14 @@ export default {
viewTitle: "", viewTitle: "",
}; };
}, },
watch: {
companyId: {
handler() {
this.getTableData();
},
immediate: true,
},
},
mounted() { mounted() {
this.getTableData(); this.getTableData();
}, },
@ -209,24 +224,32 @@ export default {
* @return {*} * @return {*}
*/ */
getTableData() { getTableData() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
this.timer = setInterval(() => { this.timer = setInterval(() => {
getCarList({ no: this.tableInput }).then(({ code, data }) => { getCarList({ no: this.tableInput, companyId: this.companyId }).then(
({ code, data }) => {
if (code === 200) {
this.carNum = data.total;
this.tableTotal = data.total;
this.onlineNum = data.online;
this.inspectionTableData = data.rows;
}
}
);
}, 5000);
getCarList({ no: this.tableInput, companyId: this.companyId }).then(
({ code, data }) => {
if (code === 200) { if (code === 200) {
this.carNum = data.total; this.carNum = data.total;
this.tableTotal = data.total; this.tableTotal = data.total;
this.onlineNum = data.online; this.onlineNum = data.online;
this.inspectionTableData = data.rows; this.inspectionTableData = data.rows;
} }
});
}, 5000);
getCarList({ no: this.tableInput }).then(({ code, data }) => {
if (code === 200) {
this.carNum = data.total;
this.tableTotal = data.total;
this.onlineNum = data.online;
this.inspectionTableData = data.rows;
} }
}); );
}, },
/** /**

16
src/views/big-screen/overview-components/patrol-order.vue
View File

@ -69,6 +69,12 @@ import * as echarts from "echarts";
import { getMileage, getMileageDetail } from "@/api/xj/screen/disease-screen"; import { getMileage, getMileageDetail } from "@/api/xj/screen/disease-screen";
export default { export default {
name: "PatrolOrder", name: "PatrolOrder",
props: {
companyId: {
type: Number,
default: null,
},
},
data() { data() {
return { return {
// 时间选择 // 时间选择
@ -85,6 +91,14 @@ export default {
echartData: [], echartData: [],
}; };
}, },
watch: {
companyId: {
handler() {
this.getData();
},
immediate: true,
},
},
mounted() { mounted() {
this.getData(); this.getData();
}, },
@ -95,7 +109,7 @@ export default {
* @return {*} * @return {*}
*/ */
getData() { getData() {
getMileage().then(({ code, data }) => { getMileage({ companyId: this.companyId }).then(({ code, data }) => {
if (code === 200) { if (code === 200) {
this.patrolObject = data; this.patrolObject = data;
} }

22
src/views/big-screen/overview-components/today-inspection.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 09:42:49 * @Date: 2024-10-18 09:42:49
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-19 10:42:31 * @LastEditTime: 2024-12-20 11:22:56
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\today-inspection.vue * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\today-inspection.vue
* @Description: 总览大屏-今日巡查 * @Description: 总览大屏-今日巡查
--> -->
@ -90,6 +90,13 @@ import * as echarts from "echarts";
import { roadToday, roadTodayDetail } from "@/api/xj/screen/disease-screen"; import { roadToday, roadTodayDetail } from "@/api/xj/screen/disease-screen";
export default { export default {
name: "TodayInspection", name: "TodayInspection",
props: {
// 传过来得公司id
companyId: {
type: Number,
default: null,
},
},
data() { data() {
return { return {
// 新增病害总数 // 新增病害总数
@ -122,13 +129,21 @@ export default {
rightChartData: [], rightChartData: [],
}; };
}, },
watch: {
companyId: {
handler() {
this.getData();
},
immediate: true,
},
},
mounted() { mounted() {
this.getData(); this.getData();
}, },
methods: { methods: {
/* 获取数据 */ /* 获取数据 */
getData() { getData() {
roadToday().then(({ data, code }) => { roadToday({ companyId: this.companyId }).then(({ data, code }) => {
if (code === 200) { if (code === 200) {
this.today = data.today; this.today = data.today;
this.all = data.all; this.all = data.all;
@ -723,7 +738,8 @@ export default {
color: red; color: red;
} }
.el-icon-bottom,.el-icon-minus { .el-icon-bottom,
.el-icon-minus {
font-size: 1.5rem; font-size: 1.5rem;
color: #19eb27; color: #19eb27;
} }

4
src/views/big-screen/road-components/ancillary-facilities.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 15:18:03 * @Date: 2024-10-18 15:18:03
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-11-19 10:41:33 * @LastEditTime: 2024-12-20 14:01:09
* @FilePath: \znxjxt-ui\src\views\big-screen\road-components\ancillary-facilities.vue * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\ancillary-facilities.vue
* @Description: 道路资产大屏-附属设施分布 * @Description: 道路资产大屏-附属设施分布
--> -->
@ -83,8 +83,6 @@ export default {
getAncillaryList() { getAncillaryList() {
ancillaryList().then(({ code, data }) => { ancillaryList().then(({ code, data }) => {
if (code === 200) { if (code === 200) {
console.log(data, "ddddd");
this.ancillaryList = data; this.ancillaryList = data;
} }
}); });

17
src/views/big-screen/road-components/anomaly-facilities.vue
View File

@ -10,8 +10,17 @@
<template> <template>
<div class="content"> <div class="content">
<div class="anomaly-select"> <div class="anomaly-select">
<el-select :popper-append-to-body="false" v-model="itemSelect" placeholder="请选择"> <el-select
<el-option v-for="item in currentList" :key="item.value" :label="item.label" :value="item.value" /> v-model="itemSelect"
placeholder="请选择"
popper-class="screen-select"
>
<el-option
v-for="item in currentList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
</div> </div>
<div ref="anomalyChart" class="anomaly-echart"></div> <div ref="anomalyChart" class="anomaly-echart"></div>
@ -251,7 +260,8 @@ export default {
// 是否显示detail，即拖拽时候显示详细数值信息 // 是否显示detail，即拖拽时候显示详细数值信息
showDetail: false, showDetail: false,
// 数据窗口范围的起始数值 // 数据窗口范围的起始数值
startValue: this.anomalyData.length > 8 ? this.anomalyData.length - 8 : 0, startValue:
this.anomalyData.length > 8 ? this.anomalyData.length - 8 : 0,
// 数据窗口范围的结束数值（一页显示多少条数据） // 数据窗口范围的结束数值（一页显示多少条数据）
endValue: this.anomalyData.length, endValue: this.anomalyData.length,
// empty：当前数据窗口外的数据，被设置为空。 // empty：当前数据窗口外的数据，被设置为空。
@ -302,7 +312,6 @@ export default {
z-index: 1; z-index: 1;
right: 0; right: 0;
top: 0.2rem; top: 0.2rem;
} }
.anomaly-echart { .anomaly-echart {