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,
// });
// }
export function roadToday(query) {
export function roadToday(params) {
return request({
url: "/bigscreen/v2/getInspectionInfo",
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-select
v-model="trafficForm.routeId"
:popper-append-to-body="false"
placeholder="请选择路线"
filterable
clearable
popper-class="screen-select"
@change="chengeLine"
>
<el-option
@ -39,7 +39,7 @@
<el-form-item class="form-item" label="路段名称" prop="segmentId">
<el-select
v-model="trafficForm.segmentId"
:popper-append-to-body="false"
popper-class="screen-select"
placeholder="请选择路段"
filterable
clearable
@ -59,6 +59,7 @@
>
<el-select
v-model="trafficForm.inspectDirection"
popper-class="screen-select"
:popper-append-to-body="false"
placeholder="请选择上下行"
clearable
@ -99,7 +100,7 @@
<el-form-item class="form-item" label="病害类型" prop="defectType">
<el-select
v-model="trafficForm.defectType"
:popper-append-to-body="false"
popper-class="screen-select"
placeholder="请选择病害类型"
clearable
>
@ -114,7 +115,7 @@
<el-form-item class="form-item" label="病害状态" prop="state">
<el-select
v-model="trafficForm.state"
:popper-append-to-body="false"
popper-class="screen-select"
placeholder="请选择病害状态"
clearable
>

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

@ -10,9 +10,9 @@
<div class="content">
<div class="statistic-select">
<el-select
:popper-append-to-body="false"
v-model="itemSelect"
placeholder="请选择"
popper-class="screen-select"
>
<el-option
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
* @Date: 2024-10-21 10:03:08
* @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
* @Description: 病害巡检大屏-病害趋势
-->
@ -11,9 +11,9 @@
<div class="content">
<div class="traffic-select">
<el-select
:popper-append-to-body="false"
v-model="itemSelect"
placeholder="请选择"
popper-class="screen-select"
>
<el-option
v-for="item in trafficList"

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

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-17 11:34:00
* @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
* @Description: 大屏首页
-->
@ -107,6 +107,7 @@
:select="item.select"
:is="item.component"
:bottomTipClick="bottomTipClick"
:companyId="companyId"
></component>
</template>
<template slot="operation" v-if="item.selectIsShow">
@ -136,6 +137,7 @@
:select="item.select"
:is="item.component"
:bottomTipClick="bottomTipClick"
:companyId="companyId"
@imagePoint="getimagePoint"
></component>
</template>
@ -171,15 +173,30 @@
v-if="elementDiv === 'OverviewScreen' && !showMap"
>
<div class="work-order-left">
<el-button class="btn-time" size="mini" @click="changeOrder(1)"
>本周</el-button
<div
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 class="work-order-right">
<div
@ -204,7 +221,7 @@
</div>
</div>
<!-- 地图图例 -->
<div class="map-legend">
<div class="map-legend" v-if="elementDiv != 'RoadScreen'">
<span>≥{{ mapLegendList.s5 }}</span>
<span>≥{{ mapLegendList.s4 }}</span>
<span>≥{{ mapLegendList.s3 }}</span>
@ -311,7 +328,7 @@
</div>
</div> -->
</div>
<span slot="reference" @click="showMapByCompany">{{
<span slot="reference" @click="showMapByCompany(item)">{{
item.name
}}</span>
</el-popover>
@ -556,6 +573,8 @@ export default {
{ name: "未完成工单数", value: 562254 },
{ name: "已完成工单数", value: 562254 },
],
// 工单时间选择绑定
workOrderType: 1,
// 图片背景下打点坐标数据
mapCareList: [],
// 图例循环数据
@ -578,6 +597,8 @@ export default {
showMap: false,
// 图片背景下popover弹窗病害名称
screenMapPopoverName: "",
// 图片背景下点击得公司id
companyId: null,
// 图标类别切换标识
bottomTipClick: "1",
@ -633,6 +654,7 @@ export default {
carPointList: [],
// 小车地图点位features数组
mapPointFeatures: [],
// websocket监听事件id
indexListenerId: Symbol("index-listener"),
};
},
@ -702,29 +724,6 @@ export default {
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();
this.screenMapPopoverName = node?.label;
this.getMapCare(value);
this.getLinePoint();
},
/**
@ -785,15 +785,19 @@ export default {
* @return {void}
*/
changeOrder(val) {
this.workOrderList = [
{ name: "生成工单数", value: 54 },
{ name: "未完成工单数", value: 5254 },
{ name: "已完成工单数", value: 554 },
];
if (this.workOrderType != val) {
this.workOrderType = val;
this.companyId;
this.workOrderList = [
{ name: "生成工单数", value: 54 },
{ name: "未完成工单数", value: 5254 },
{ name: "已完成工单数", value: 554 },
];
}
},
/**
* @description: 获取图片背景下坐标数据
* @description: 获取图片背景下坐标数据以及图例数据
* @return {void}
*/
getMapCare(value) {
@ -803,6 +807,13 @@ export default {
};
comppanyImg(data).then(({ code, data }) => {
if (code === 200) {
this.mapLegendList = {
s1: "0",
s2: "20",
s3: "40",
s4: "60",
s5: "80",
};
this.mapCareList = data;
}
});
@ -812,7 +823,8 @@ export default {
* @description: 点击图片背景下公司名称切换地图
* @return {void}
*/
showMapByCompany() {
showMapByCompany(val) {
this.companyId = val.id;
this.showMap = true;
this.getLinePoint();
},
@ -824,6 +836,7 @@ export default {
disabledMapCompany() {
this.showMap = false;
this.markLayerLines = null;
this.companyId = null;
},
/**
@ -1021,28 +1034,39 @@ export default {
* @return {void}
*/
getLinePoint() {
if (!this.markLayerLines) {
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();
if (this.markLayerLines) {
// 清除线段图层
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;
});
}
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.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") {
this.leftModuleList = [
{
@ -1696,14 +1730,18 @@ export default {
align-items: flex-end;
.btn-time {
cursor: pointer;
width: 7rem;
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
background: url("~@/assets/screen/index/btn-time.png") no-repeat;
background-size: 100% 100%;
border-color: transparent;
color: #ffffff;
font-size: 0.8rem;
font-size: 0.7rem;
font-family: "DouYu";
&:hover {
@ -1711,12 +1749,12 @@ export default {
no-repeat;
background-size: 100% 100%;
}
}
&:focus {
background: url("~@/assets/screen/index/btn-time-click.png")
no-repeat;
background-size: 100% 100%;
}
.btn-time-click {
cursor: pointer;
background: url("~@/assets/screen/index/btn-time-click.png") no-repeat;
background-size: 100% 100%;
}
}
@ -1734,12 +1772,12 @@ export default {
align-items: center;
.value {
font-size: 0.8rem;
font-size: 0.7rem;
font-family: "DouYu";
color: #ffffff;
span {
font-size: 1.5rem;
font-size: 1.4rem;
font-family: "DouYu";
background: linear-gradient(
to bottom,
@ -1755,7 +1793,7 @@ export default {
}
.name {
font-size: 0.8rem;
font-size: 0.7rem;
font-family: "DouYu";
color: #ffffff;
}
@ -2149,37 +2187,6 @@ export default {
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;
}
}
}
}
}
// 修改级联样式
@ -2195,6 +2202,39 @@ export default {
}
</style>
<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 {
background-color: #102649;
border-color: #08204f;

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

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

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

@ -2,13 +2,13 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 10:16:30
* @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
* @Description: 总览大屏-病害趋势
* @Description: 总览大屏-主要病害趋势
-->
<template>
<div class="content">
<div class="chart" ref="trendsChart"></div>
<div class="chart" ref="trendsChart"></div>
</div>
</template>
@ -17,19 +17,36 @@ import * as echarts from "echarts";
import { roadTrends } from "@/api/xj/screen/disease-screen";
export default {
name: "DiseaseTrends",
props: {
// 传过来得公司id
companyId: {
type: Number,
default: null,
},
},
data() {
return {
// echart数据
echartList: [],
// chart对象
chart: null,
};
},
watch: {
companyId: {
handler() {
this.geteEhartList();
},
immediate: true,
},
},
mounted() {
this.geteEhartList();
},
methods: {
/* 获取折线图数据 */
geteEhartList() {
roadTrends().then(({ data, code }) => {
roadTrends({ companyId: this.companyId }).then(({ data, code }) => {
if (code === 200) {
this.echartList = data;
this.$nextTick(() => {
@ -52,9 +69,12 @@ export default {
const yData3 = this.echartList.map((item) => {
return item.sanluowu;
});
if (this.chart) {
this.chart.dispose();
}
if (this.$refs.trendsChart) {
const chart = echarts.init(this.$refs.trendsChart);
chart.setOption({
this.chart = echarts.init(this.$refs.trendsChart);
this.chart.setOption({
//你的代码
title: {
text: "",
@ -278,7 +298,7 @@ export default {
],
});
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
* @Date: 2024-11-08 09:40:18
* @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
* @Description: 总览大屏-巡检车辆
-->
@ -168,6 +168,13 @@ export default {
InspectionFollow,
InspectionView,
},
props: {
// 传过来得公司id
companyId: {
type: Number,
default: null,
},
},
data() {
return {
// 车辆总数
@ -199,6 +206,14 @@ export default {
viewTitle: "",
};
},
watch: {
companyId: {
handler() {
this.getTableData();
},
immediate: true,
},
},
mounted() {
this.getTableData();
},
@ -209,24 +224,32 @@ export default {
* @return {*}
*/
getTableData() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
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) {
this.carNum = data.total;
this.tableTotal = data.total;
this.onlineNum = data.online;
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";
export default {
name: "PatrolOrder",
props: {
companyId: {
type: Number,
default: null,
},
},
data() {
return {
// 时间选择
@ -85,6 +91,14 @@ export default {
echartData: [],
};
},
watch: {
companyId: {
handler() {
this.getData();
},
immediate: true,
},
},
mounted() {
this.getData();
},
@ -95,7 +109,7 @@ export default {
* @return {*}
*/
getData() {
getMileage().then(({ code, data }) => {
getMileage({ companyId: this.companyId }).then(({ code, data }) => {
if (code === 200) {
this.patrolObject = data;
}

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

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

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

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 15:18:03
* @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
* @Description: 道路资产大屏-附属设施分布
-->
@ -83,8 +83,6 @@ export default {
getAncillaryList() {
ancillaryList().then(({ code, data }) => {
if (code === 200) {
console.log(data, "ddddd");
this.ancillaryList = data;
}
});

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

@ -10,8 +10,17 @@
<template>
<div class="content">
<div class="anomaly-select">
<el-select :popper-append-to-body="false" v-model="itemSelect" placeholder="请选择">
<el-option v-for="item in currentList" :key="item.value" :label="item.label" :value="item.value" />
<el-select
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>
</div>
<div ref="anomalyChart" class="anomaly-echart"></div>
@ -251,7 +260,8 @@ export default {
// 是否显示detail，即拖拽时候显示详细数值信息
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,
// empty：当前数据窗口外的数据，被设置为空。
@ -302,7 +312,6 @@ export default {
z-index: 1;
right: 0;
top: 0.2rem;
}
.anomaly-echart {