fix：页面新修改，重新分类，大屏样式修改
This commit is contained in:
@@ -2,22 +2,30 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-22 15:30:25
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-04 15:19:03
|
||||
* @LastEditTime: 2024-11-11 14:37:32
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
|
||||
* @Description: 大屏查看图片弹窗
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="app">
|
||||
<div class="sidebar" ref="sidebar" @scroll="handleScroll">
|
||||
<img
|
||||
v-for="(item, index) in defectData"
|
||||
:key="item.id"
|
||||
:src="item.media[0].img"
|
||||
:alt="'Image ' + (index + 1)"
|
||||
@click="showImage(index)"
|
||||
:class="{ selected: currentIndex === index }"
|
||||
/>
|
||||
<div class="left-list">
|
||||
<div class="img-top">
|
||||
<el-radio-group v-model="labelCheck" size="small">
|
||||
<el-radio-button label="left">目标维度</el-radio-button>
|
||||
<el-radio-button label="right">空间维度</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="sidebar" ref="sidebar" @scroll="handleScroll">
|
||||
<img
|
||||
v-for="(item, index) in defectData"
|
||||
:key="item.id"
|
||||
:src="item.media[0].img"
|
||||
:alt="'Image ' + (index + 1)"
|
||||
@click="showImage(index)"
|
||||
:class="{ selected: currentIndex === index }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
@@ -30,73 +38,64 @@
|
||||
:inline="true"
|
||||
label-width="5rem"
|
||||
>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="7">
|
||||
<el-form-item label="路段名称">
|
||||
<el-select
|
||||
v-model="imgForm.segmentId"
|
||||
placeholder="请选择路段名称"
|
||||
:popper-append-to-body="false"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roadTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-form-item label="病害类型">
|
||||
<el-select
|
||||
v-model="imgForm.defectType"
|
||||
placeholder="请选择路段名称"
|
||||
:popper-append-to-body="false"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in defectTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item label="公里桩">
|
||||
<el-input
|
||||
v-model="imgForm.stakeStart"
|
||||
placeholder="起始公里桩"
|
||||
style="width: 8rem"
|
||||
clearable
|
||||
/>
|
||||
<span style="margin: 0 5px">-</span>
|
||||
<el-input
|
||||
v-model="imgForm.stakeEnd"
|
||||
placeholder="终止公里桩"
|
||||
style="width: 8rem"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="路段名称">
|
||||
<el-select
|
||||
v-model="imgForm.segmentId"
|
||||
placeholder="请选择路段名称"
|
||||
:popper-append-to-body="false"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roadTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="病害类型">
|
||||
<el-select
|
||||
v-model="imgForm.defectType"
|
||||
placeholder="请选择路段名称"
|
||||
:popper-append-to-body="false"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in defectTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="公里桩">
|
||||
<el-input
|
||||
v-model="imgForm.stakeStart"
|
||||
placeholder="起始公里桩"
|
||||
style="width: 8rem"
|
||||
clearable
|
||||
/>
|
||||
<span style="margin: 0 5px">-</span>
|
||||
<el-input
|
||||
v-model="imgForm.stakeEnd"
|
||||
placeholder="终止公里桩"
|
||||
style="width: 8rem"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 图片展示 -->
|
||||
@@ -114,12 +113,13 @@
|
||||
:key="index"
|
||||
:style="getRectStyle(rect)"
|
||||
></div>
|
||||
</div>
|
||||
<div class="image-info">
|
||||
采集时间: {{ new Date(rectsItem.createdTime).toLocaleString() }}<br />
|
||||
起始桩号: {{ rectsItem.stakeStart || "暂无数据" }} 终止桩号:
|
||||
{{ rectsItem.stakeEnd || "暂无数据" }}<br />
|
||||
路产状态: {{ filterState(rectsItem.state) }}
|
||||
<div class="image-info">
|
||||
采集时间:
|
||||
{{ new Date(rectsItem.createdTime).toLocaleString() }} 起始桩号:
|
||||
{{ rectsItem.stakeStart || "暂无数据" }} 终止桩号:
|
||||
{{ rectsItem.stakeEnd || "暂无数据" }}
|
||||
路产状态: {{ filterState(rectsItem.state) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小图展示 -->
|
||||
@@ -144,6 +144,9 @@ export default {
|
||||
name: "ImgDialog",
|
||||
data() {
|
||||
return {
|
||||
// 维度选择
|
||||
labelCheck: "left",
|
||||
|
||||
// 左侧图片数据
|
||||
defectData: [],
|
||||
// 当前选择的index
|
||||
@@ -192,9 +195,9 @@ export default {
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getSegmentList();
|
||||
this.getDefectStatusList();
|
||||
this.getDefectType();
|
||||
// this.getSegmentList();
|
||||
// this.getDefectStatusList();
|
||||
// this.getDefectType();
|
||||
},
|
||||
methods: {
|
||||
/* 查询病害状态下拉数据 */
|
||||
@@ -319,18 +322,13 @@ export default {
|
||||
if (currentImageElement) {
|
||||
currentImageElement.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "nearest",
|
||||
block: "center",
|
||||
});
|
||||
}
|
||||
},
|
||||
/* 滚动触发事件 */
|
||||
handleScroll() {
|
||||
// 滚动高度+容器高度 滚动区域高度
|
||||
const sidebar = this.$refs.sidebar;
|
||||
if (
|
||||
sidebar.scrollTop + sidebar.clientHeight >= sidebar.scrollHeight - 1 &&
|
||||
!this.loading
|
||||
) {
|
||||
if (this.currentIndex === this.defectData.length - 1) {
|
||||
this.loadMoreImages();
|
||||
}
|
||||
},
|
||||
@@ -342,6 +340,7 @@ export default {
|
||||
/* 键盘事件 */
|
||||
handleKeydown(event) {
|
||||
if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
if (this.currentIndex > 0) {
|
||||
this.currentIndex--;
|
||||
this.selectedThumbnail = 0; // Reset when changing main images via keyboard
|
||||
@@ -349,6 +348,7 @@ export default {
|
||||
this.updateRects();
|
||||
}
|
||||
} else if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
if (this.currentIndex <= this.defectData.length - 1) {
|
||||
this.currentIndex === this.defectData.length - 1
|
||||
? this.currentIndex
|
||||
@@ -433,43 +433,65 @@ export default {
|
||||
background-color: #2e3a46;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background-color: #1f292e;
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.left-list {
|
||||
width: 16rem;
|
||||
height: 100%;
|
||||
|
||||
.sidebar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
.img-top {
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.sidebar::-webkit-scrollbar-track {
|
||||
background: #2e3a46;
|
||||
border-radius: 10px;
|
||||
}
|
||||
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
background-color: #467198;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-thumb {
|
||||
background: #444c51;
|
||||
border-radius: 10px;
|
||||
}
|
||||
::v-deep .el-radio-button__inner{
|
||||
color: #ffffff;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-thumb:hover {
|
||||
background: #00aaff;
|
||||
}
|
||||
.sidebar {
|
||||
width: 15.5rem;
|
||||
height: calc(100% - 2.5rem);
|
||||
background-color: #1f292e;
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar img {
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
transition: transform 0.2s, border 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.sidebar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.sidebar img.selected {
|
||||
border: 3px solid #00aaff;
|
||||
transform: scale(1.05);
|
||||
.sidebar::-webkit-scrollbar-track {
|
||||
background: #2e3a46;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-thumb {
|
||||
background: #444c51;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-thumb:hover {
|
||||
background: #00aaff;
|
||||
}
|
||||
|
||||
.sidebar img {
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
transition: transform 0.2s, border 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sidebar img.selected {
|
||||
border: 3px solid #00aaff;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
@@ -482,7 +504,7 @@ export default {
|
||||
|
||||
.toolbar {
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #333c42;
|
||||
@@ -544,11 +566,18 @@ export default {
|
||||
.image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
height: 95%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
.image-info {
|
||||
position: absolute;
|
||||
color: red;
|
||||
bottom: 0;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
@@ -564,7 +593,7 @@ export default {
|
||||
}
|
||||
|
||||
.image-viewer {
|
||||
height: 32rem;
|
||||
height: 34rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
@@ -1,208 +0,0 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:31:31
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-30 16:21:25
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\pic-rank.vue
|
||||
* @Description: 病害巡检-pic排名
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<vue-seamless-scroll
|
||||
class="vue-scroll"
|
||||
:class-option="defaultOption"
|
||||
:data="picList"
|
||||
v-if="picList.length > 4"
|
||||
>
|
||||
<div
|
||||
class="pic-div"
|
||||
v-for="(item, index) in picList"
|
||||
:key="`pic-${index}`"
|
||||
>
|
||||
<div class="pic-top">
|
||||
<div class="pic-top-name">
|
||||
<a>{{ index + 1 }}</a
|
||||
>{{ item.roadName }}
|
||||
</div>
|
||||
<div class="pic-top-value">
|
||||
<span>{{ item.pci }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pic-bottom">
|
||||
<div
|
||||
:style="{ width: `${item.pci}%` }"
|
||||
:class="`pic-bottom-${index}`"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
<template v-else>
|
||||
<div
|
||||
class="pic-div"
|
||||
v-for="(item, index) in picList"
|
||||
:key="`pic-${index}`"
|
||||
>
|
||||
<div class="pic-top">
|
||||
<div class="pic-top-name">
|
||||
<a>{{ index + 1 }}</a
|
||||
>{{ item.roadName }}
|
||||
</div>
|
||||
<div class="pic-top-value">
|
||||
<span>{{ item.pci }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pic-bottom">
|
||||
<div
|
||||
:style="{ width: `${item.pci}%` }"
|
||||
:class="`pic-bottom-${index}`"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { roadPic } from "@/api/xj/screen/disease-screen";
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
export default {
|
||||
name: "PicRank",
|
||||
components: { vueSeamlessScroll },
|
||||
data() {
|
||||
return {
|
||||
// 轮播配置
|
||||
defaultOption: {
|
||||
step: 0.2, // 数值越大速度滚动越快
|
||||
limitMoveNum: 1,
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
|
||||
},
|
||||
// 排名数据
|
||||
picList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getPicData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取数据 */
|
||||
getPicData() {
|
||||
roadPic().then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.picList = data.slice(0, 5);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #c7daf2;
|
||||
overflow: hidden;
|
||||
|
||||
.pic-div {
|
||||
width: calc(100% - 1rem);
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid rgba(47, 120, 170, 0.4);
|
||||
|
||||
.pic-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.pic-top-name {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: 0.8rem;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 0.5rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid rgba(47, 120, 170, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.pic-top-value {
|
||||
font-family: "DouYu";
|
||||
font-size: 1rem;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#2773d0
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
|
||||
.pic-bottom {
|
||||
width: 100%;
|
||||
height: 0.3rem;
|
||||
background-color: rgba(2, 40, 88, 0.7);
|
||||
|
||||
.pic-bottom-0 {
|
||||
height: 0.3rem;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(3, 25, 56, 0.2) 0%,
|
||||
#ffc000 100%
|
||||
);
|
||||
}
|
||||
|
||||
.pic-bottom-1 {
|
||||
height: 0.3rem;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(3, 25, 56, 0.2) 0%,
|
||||
#00fcff 100%
|
||||
);
|
||||
}
|
||||
|
||||
.pic-bottom-2 {
|
||||
height: 0.3rem;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(3, 25, 56, 0.2) 0%,
|
||||
#22b5ff 100%
|
||||
);
|
||||
}
|
||||
|
||||
.pic-bottom-3 {
|
||||
height: 0.3rem;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(3, 25, 56, 0.2) 0%,
|
||||
#00fcff 100%
|
||||
);
|
||||
}
|
||||
|
||||
.pic-bottom-4 {
|
||||
height: 0.3rem;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(3, 25, 56, 0.2) 0%,
|
||||
#22b5ff 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,228 +0,0 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:33:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-25 16:19:23
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\road-rank.vue
|
||||
* @Description: 病害巡检-路面状况排名
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<vue-seamless-scroll
|
||||
class="vue-scroll"
|
||||
:class-option="defaultOption"
|
||||
:data="roadList"
|
||||
v-if="roadList.length > 4"
|
||||
>
|
||||
<div
|
||||
class="road-div"
|
||||
v-for="(item, index) in roadList"
|
||||
:key="`road-${index}`"
|
||||
>
|
||||
<div class="index" :class="`road-index-${index}`">TOP</div>
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="value">病害数：{{ item.value }}</div>
|
||||
<div
|
||||
:class="`rate-${
|
||||
item.huanbi > 0 ? 'up' : item.huanbi === 0 ? '' : 'down'
|
||||
}`"
|
||||
class="rate"
|
||||
>
|
||||
环比：<span>{{ item.huanbi }}</span>
|
||||
</div>
|
||||
<div
|
||||
:class="`rate-${
|
||||
item.tongbi > 0 ? 'up' : item.tongbi === 0 ? '' : 'down'
|
||||
}`"
|
||||
class="rate"
|
||||
>
|
||||
同比：<span>{{ item.tongbi }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
<template v-else>
|
||||
<div
|
||||
class="road-div"
|
||||
v-for="(item, index) in roadList"
|
||||
:key="`road-${index}`"
|
||||
>
|
||||
<div class="index" :class="`road-index-${index}`">TOP</div>
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="value">病害数：{{ item.value }}</div>
|
||||
<div
|
||||
:class="`rate-${
|
||||
item.huanbi > 0 ? 'up' : item.huanbi === 0 ? '' : 'down'
|
||||
}`"
|
||||
class="rate"
|
||||
>
|
||||
环比：<span>{{ item.huanbi }}</span>
|
||||
</div>
|
||||
<div
|
||||
:class="`rate-${
|
||||
item.tongbi > 0 ? 'up' : item.tongbi === 0 ? '' : 'down'
|
||||
}`"
|
||||
class="rate"
|
||||
>
|
||||
同比：<span>{{ item.tongbi }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
import { roadRankList } from "@/api/xj/screen/disease-screen";
|
||||
export default {
|
||||
name: "RoadRank",
|
||||
components: { vueSeamlessScroll },
|
||||
props: {
|
||||
select: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 轮播配置
|
||||
defaultOption: {
|
||||
step: 0.2, // 数值越大速度滚动越快
|
||||
limitMoveNum: 1,
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
|
||||
},
|
||||
// 路面状况排名数据
|
||||
roadList: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
select: {
|
||||
handler() {
|
||||
this.getRoadList();
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
/* 获取路面状况排名数据 */
|
||||
getRoadList() {
|
||||
roadRankList({ type: this.select }).then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.roadList = data
|
||||
.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
tongbi: item.tongbi.slice(0, 3),
|
||||
huanbi: item.huanbi.slice(0, 3),
|
||||
};
|
||||
})
|
||||
.slice(0, 5);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 0.8rem;
|
||||
color: #aac6c7;
|
||||
overflow: hidden;
|
||||
|
||||
.road-div {
|
||||
min-height: 2rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
background-color: #0c203f;
|
||||
}
|
||||
|
||||
.index {
|
||||
width: 4.5rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 6.5rem;
|
||||
}
|
||||
|
||||
.rate {
|
||||
width: 7rem;
|
||||
}
|
||||
|
||||
.rate-up {
|
||||
span {
|
||||
color: #fd9604;
|
||||
}
|
||||
background-image: url("../../../assets/screen/disease/rate-up.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20%;
|
||||
background-position: 85% 50%;
|
||||
}
|
||||
|
||||
.rate-down {
|
||||
span {
|
||||
color: #1fa318;
|
||||
}
|
||||
background-image: url("../../../assets/screen/disease/rate-down.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20%;
|
||||
background-position: 85% 50%;
|
||||
}
|
||||
|
||||
.road-index-0 {
|
||||
background-image: url("../../../assets/screen/disease/road-index-0.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 30%;
|
||||
background-position: 60% 50%;
|
||||
}
|
||||
|
||||
.road-index-1 {
|
||||
background-image: url("../../../assets/screen/disease/road-index-1.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 30%;
|
||||
background-position: 60% 50%;
|
||||
}
|
||||
|
||||
.road-index-2 {
|
||||
background-image: url("../../../assets/screen/disease/road-index-2.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 30%;
|
||||
background-position: 60% 50%;
|
||||
}
|
||||
|
||||
.road-index-3 {
|
||||
background-image: url("../../../assets/screen/disease/road-index-3.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 30%;
|
||||
background-position: 60% 50%;
|
||||
}
|
||||
|
||||
.road-index-4 {
|
||||
background-image: url("../../../assets/screen/disease/road-index-4.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 30%;
|
||||
background-position: 60% 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,159 +0,0 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 09:42:49
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-24 14:10:06
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\today-inspection.vue
|
||||
* @Description: 病害巡检-今日巡查
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="today-left">
|
||||
<span>{{ today }}</span>
|
||||
</div>
|
||||
<div class="today-right">
|
||||
<div class="right-sum">
|
||||
<span>{{ all }}</span
|
||||
>个
|
||||
</div>
|
||||
<div class="right-rate">
|
||||
<span> {{ scale }}</span
|
||||
>%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { roadToday } from "@/api/xj/screen/disease-screen";
|
||||
export default {
|
||||
name: "TodayInspection",
|
||||
data() {
|
||||
return {
|
||||
// 新增病害总数
|
||||
today: "0",
|
||||
// 病害总数
|
||||
all: "0",
|
||||
// 增长率
|
||||
scale: "0",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取数据 */
|
||||
getData() {
|
||||
roadToday().then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.today = data.today;
|
||||
this.all = data.all;
|
||||
this.scale = (data.scale * 1).toFixed(2);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.today-left {
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 1.5rem;
|
||||
background-image: url("../../../assets/screen/disease/today-left.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 85%;
|
||||
background-position: 100% 60%;
|
||||
|
||||
span {
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
font-family: "DouYu";
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#2773d0
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
|
||||
.today-right {
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
color: #ffffff;
|
||||
|
||||
.right-sum {
|
||||
width: 100%;
|
||||
height: 45%;
|
||||
display: flex;
|
||||
padding-left: 1rem;
|
||||
justify-content: center;
|
||||
line-height: 3rem;
|
||||
background-image: url("../../../assets/screen/disease/right-sum.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: 100% 50%;
|
||||
color: #aac6c7;
|
||||
|
||||
span {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
font-family: "DouYu";
|
||||
margin-right: 0.5rem;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#2773d0
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
|
||||
.right-rate {
|
||||
width: 100%;
|
||||
height: 45%;
|
||||
padding-left: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
line-height: 3rem;
|
||||
background-image: url("../../../assets/screen/disease/right-rate.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: 100% 50%;
|
||||
color: #aac6c7;
|
||||
|
||||
span {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
font-family: "DouYu";
|
||||
margin-right: 0.5rem;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#e9bc5c
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,376 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-08 11:56:02
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-08 14:53:32
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-log.vue
|
||||
* @Description: 病害巡检-交安事件日志
|
||||
-->
|
||||
<template>
|
||||
<div class="content">
|
||||
<!-- 搜索表单 -->
|
||||
<div class="traffic-form">
|
||||
<el-form
|
||||
:model="trafficForm"
|
||||
ref="trafficForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
label-position="left"
|
||||
label-width="5rem"
|
||||
>
|
||||
<el-form-item class="form-item" label="道路名称" prop="segmentName">
|
||||
<el-select
|
||||
v-model="trafficForm.segmentName"
|
||||
:popper-append-to-body="false"
|
||||
placeholder="请选择道路名称"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in segmentList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" label="上下行" prop="inspectDirection">
|
||||
<el-select
|
||||
v-model="trafficForm.inspectDirection"
|
||||
:popper-append-to-body="false"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
<el-option label="上行" value="0" />
|
||||
<el-option label="下行" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" label="公里桩" prop="stakeRange">
|
||||
<el-input
|
||||
v-model="trafficForm.stakeStart"
|
||||
placeholder="起始公里桩"
|
||||
style="width: 9rem"
|
||||
clearable
|
||||
/>
|
||||
<span style="margin: 0 5px; color: #ffffff">-</span>
|
||||
<el-input
|
||||
v-model="trafficForm.stakeEnd"
|
||||
placeholder="终止公里桩"
|
||||
style="width: 9rem"
|
||||
clearable
|
||||
/>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="格式为K0000+000"
|
||||
placement="top"
|
||||
>
|
||||
<i :style="{ color: '#ffffff' }" class="el-icon-info"></i>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" label="事件类型" prop="equipmentType">
|
||||
<el-select
|
||||
v-model="trafficForm.equipmentType"
|
||||
:popper-append-to-body="false"
|
||||
placeholder="请选择事件类型"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in eventType"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" label="事件状态" prop="state">
|
||||
<el-select
|
||||
v-model="trafficForm.state"
|
||||
:popper-append-to-body="false"
|
||||
placeholder="请选择事件状态"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in defectStatus"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="form-btn">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="traffic-title">
|
||||
<div class="emergency-type">事件类型</div>
|
||||
<div class="emergency-name">段路名称</div>
|
||||
<div class="emergency-status">事件状态</div>
|
||||
<div class="emergency-operation">操作</div>
|
||||
</div>
|
||||
<div class="traffic-table">
|
||||
<vue-seamless-scroll
|
||||
class="vue-scroll"
|
||||
:class-option="defaultOption"
|
||||
:data="emergencyList"
|
||||
>
|
||||
<div
|
||||
class="emergency-bottom-div"
|
||||
v-for="(item, index) in emergencyList"
|
||||
:key="`emergency-${index}`"
|
||||
>
|
||||
<div class="emergency-type">{{ item.type }}</div>
|
||||
<div class="emergency-name">{{ item.segmentName }}</div>
|
||||
<div class="emergency-status"><a></a>{{ item.status }}</div>
|
||||
<div class="emergency-operation">操作</div>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { emergencyData } from "@/api/xj/screen/traffic-screen";
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
export default {
|
||||
name: "TrafficLog",
|
||||
components: { vueSeamlessScroll },
|
||||
props: {
|
||||
// 病害巡检中4种类型点击绑定
|
||||
bottomTipClick: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 查询表单绑定
|
||||
trafficForm: {
|
||||
// 道路名称
|
||||
segmentName: "",
|
||||
// 上下行
|
||||
inspectDirection: "",
|
||||
// 公里桩
|
||||
stakeStart: "",
|
||||
stakeEnd: "",
|
||||
// 事件类型
|
||||
equipmentType: "",
|
||||
// 事件状态
|
||||
state: "",
|
||||
},
|
||||
// 道路名称下拉数据
|
||||
segmentList: [],
|
||||
// 事件类型下拉数据
|
||||
eventType: [],
|
||||
// 事件状态下拉数据
|
||||
defectStatus: [],
|
||||
// 轮播配置
|
||||
defaultOption: {
|
||||
step: 0.2, // 数值越大速度滚动越快
|
||||
limitMoveNum: 1,
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
|
||||
},
|
||||
// 事件列表
|
||||
emergencyList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/* 点击搜索事件 */
|
||||
handleQuery() {},
|
||||
|
||||
/* 点击重置事件 */
|
||||
resetQuery() {},
|
||||
|
||||
/* 获取事件列表数据 */
|
||||
getData() {
|
||||
emergencyData().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.emergencyList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.traffic-form {
|
||||
width: calc(100% - 0.5rem);
|
||||
height: 38%;
|
||||
padding: 0.5rem;
|
||||
|
||||
.form-item {
|
||||
width: 100%;
|
||||
|
||||
::v-deep .el-form-item__content {
|
||||
width: calc(100% - 5rem);
|
||||
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
color: #ffffff;
|
||||
border-color: #47536f;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 6.5rem;
|
||||
|
||||
.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: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-btn {
|
||||
height: 4%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.traffic-title {
|
||||
width: 100%;
|
||||
height: 7%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// border: 1px solid #0b7ecf;
|
||||
color: #e6fcfe;
|
||||
font-size: 0.9rem;
|
||||
padding: 0 0.5rem;
|
||||
background-image: url("../../../assets/screen/traffic/emergency-top.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 90%;
|
||||
background-position: 50% 100%;
|
||||
|
||||
.emergency-type {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.emergency-name {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.emergency-status {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.emergency-operation {
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.traffic-table {
|
||||
width: 100%;
|
||||
height: 51%;
|
||||
overflow: hidden;
|
||||
|
||||
.emergency-bottom-div {
|
||||
height: 2rem;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
background-color: rgba(17, 52, 99, 0.3);
|
||||
}
|
||||
|
||||
> div {
|
||||
margin: 0 0.3rem;
|
||||
line-height: 2rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #808c9f;
|
||||
}
|
||||
|
||||
.emergency-type {
|
||||
width: 27%;
|
||||
}
|
||||
|
||||
.emergency-name {
|
||||
width: 27%;
|
||||
}
|
||||
|
||||
.emergency-status {
|
||||
width: 27%;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
background-color: #f7da15;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.emergency-operation {
|
||||
width: 10%;
|
||||
color: #0d9ee2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+19
-5
@@ -4,15 +4,22 @@
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-28 11:42:15
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-safety.vue
|
||||
* @Description: 交安事件大屏-交安事件
|
||||
* @Description: 病害巡检大屏-交安事件
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="traffic-left"><span>{{today}}</span></div>
|
||||
<div class="traffic-left">
|
||||
<span>{{ today }}</span>
|
||||
</div>
|
||||
<div class="traffic-right">
|
||||
<div class="right-sum"><span>{{all}}</span>个</div>
|
||||
<div class="right-rate"><span> {{scale}} </span>%</div>
|
||||
<div class="right-sum">
|
||||
<span>{{ all }}</span
|
||||
>个
|
||||
</div>
|
||||
<div class="right-rate">
|
||||
<span> {{ scale }} </span>%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -21,6 +28,13 @@
|
||||
import { safetyData } from "@/api/xj/screen/traffic-screen";
|
||||
export default {
|
||||
name: "TrafficSafety",
|
||||
props: {
|
||||
// 病害巡检中4种类型点击绑定
|
||||
bottomTipClick: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
today: 0,
|
||||
@@ -83,7 +97,7 @@ export default {
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
justify-content: space-around;
|
||||
color: #ffffff;
|
||||
|
||||
.right-sum {
|
||||
+7
-43
@@ -2,9 +2,9 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 10:06:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-31 09:12:24
|
||||
* @LastEditTime: 2024-11-11 10:08:56
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-statistic.vue
|
||||
* @Description: 交安事件大屏-交安事件统计
|
||||
* @Description: 病害巡检大屏-交安事件统计
|
||||
-->
|
||||
<template>
|
||||
<div class="content">
|
||||
@@ -49,6 +49,11 @@ export default {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
// 病害巡检中4种类型点击绑定
|
||||
bottomTipClick: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -250,47 +255,6 @@ export default {
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
top: 0.2rem;
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 6.5rem;
|
||||
|
||||
.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: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.statistic-chart {
|
||||
+9
-42
@@ -2,9 +2,9 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 10:03:08
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-31 14:34:36
|
||||
* @LastEditTime: 2024-11-11 10:08:41
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-trend.vue
|
||||
* @Description: 交安事件大屏-交安事件趋势
|
||||
* @Description: 病害巡检大屏-交安事件趋势
|
||||
-->
|
||||
|
||||
<template>
|
||||
@@ -34,10 +34,16 @@ import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "TrafficTrend",
|
||||
props: {
|
||||
// 数据栏选择绑定
|
||||
select: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
// 病害巡检中4种类型点击绑定
|
||||
bottomTipClick: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -314,46 +320,7 @@ export default {
|
||||
right: 0;
|
||||
top: 0.2rem;
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 6.5rem;
|
||||
|
||||
.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: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.traffic-echart {
|
||||
@@ -1,115 +0,0 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:25:29
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-22 09:30:43
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\work-order.vue
|
||||
* @Description: 病害巡检-工单统计
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div
|
||||
:class="`work-div-${index}`"
|
||||
v-for="(item, index) in workList"
|
||||
:key="`work-${index}`"
|
||||
>
|
||||
<span>{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "WorkOrder",
|
||||
data() {
|
||||
return {
|
||||
// 工单数据
|
||||
workList: [
|
||||
{
|
||||
value: 2565,
|
||||
},
|
||||
{
|
||||
value: 12,
|
||||
},
|
||||
{
|
||||
value: "22%",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
|
||||
> div {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
line-height: 8rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
font-family: "DouYu";
|
||||
}
|
||||
|
||||
.work-div-0 {
|
||||
background-image: url("../../../assets/screen/disease/work-div-0.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 95%;
|
||||
background-position: 0 50%;
|
||||
|
||||
span {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#2773d0
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
|
||||
.work-div-1 {
|
||||
background-image: url("../../../assets/screen/disease/work-div-1.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 95%;
|
||||
background-position: 0 50%;
|
||||
|
||||
span {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#E9BC5C
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
|
||||
.work-div-2 {
|
||||
background-image: url("../../../assets/screen/disease/work-div-2.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 95%;
|
||||
background-position: 0 50%;
|
||||
|
||||
span {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#21F1E1
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+182
-338
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-07 12:48:21
|
||||
* @LastEditTime: 2024-11-11 10:58:06
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@@ -41,7 +41,11 @@
|
||||
:class="item.class"
|
||||
>
|
||||
<template
|
||||
><component :select="item.select" :is="item.component"></component
|
||||
><component
|
||||
:select="item.select"
|
||||
:is="item.component"
|
||||
:bottomTipClick="bottomTipClick"
|
||||
></component
|
||||
></template>
|
||||
<template slot="operation" v-if="item.selectIsShow">
|
||||
<el-radio-group class="screen-checkBox" v-model="item.select">
|
||||
@@ -65,7 +69,11 @@
|
||||
:class="item.class"
|
||||
>
|
||||
<template
|
||||
><component :select="item.select" :is="item.component"></component
|
||||
><component
|
||||
:select="item.select"
|
||||
:is="item.component"
|
||||
:bottomTipClick="bottomTipClick"
|
||||
></component
|
||||
></template>
|
||||
<template slot="operation" v-if="item.selectIsShow">
|
||||
<el-radio-group class="screen-checkBox" v-model="item.select">
|
||||
@@ -80,23 +88,8 @@
|
||||
</module-block>
|
||||
</div>
|
||||
<div class="road-content">
|
||||
<!-- 左侧控制 -->
|
||||
<div class="road-select">
|
||||
<!-- 左上角病害筛查 -->
|
||||
<div class="road-div" v-if="mapClick === 'defect'" @click="clickImg">
|
||||
<span>病害筛查</span>
|
||||
</div>
|
||||
<!-- 返回图片底图 -->
|
||||
<div
|
||||
class="road-return"
|
||||
v-if="!showImgBk"
|
||||
@click="changeMap(true, '')"
|
||||
>
|
||||
返回
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右上角切换坐标类型多选框 -->
|
||||
<div class="road-checkBox" v-if="!showImgBk">
|
||||
<!-- 地图右上角多选框切换坐标类型 -->
|
||||
<!-- <div class="road-checkBox">
|
||||
<fssm-scroll class="road-scroll">
|
||||
<el-checkbox-group v-model="iconType" @change="handleChecked">
|
||||
<el-checkbox
|
||||
@@ -107,27 +100,29 @@
|
||||
>
|
||||
</el-checkbox-group>
|
||||
</fssm-scroll>
|
||||
</div>
|
||||
<!-- 切换路段选项框 -->
|
||||
<div class="road-checkBox-twe" v-if="!showImgBk">
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="roadSelect"
|
||||
placeholder="请选择路段"
|
||||
@change="getCenterPiont"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roadList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 地图图例 -->
|
||||
<div class="map-legend"></div>
|
||||
<!-- 图片背景 -->
|
||||
<div class="disease-content" v-if="showImgBk">
|
||||
<div class="disease-content" v-if="elementDiv === 'OverviewScreen'">
|
||||
<div class="disease-title"></div>
|
||||
<div class="map-legend"></div>
|
||||
<!-- 图背景下选择框 -->
|
||||
<div class="map-image-select">
|
||||
病害类型筛选：
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="mapCareSelect"
|
||||
placeholder="请选择"
|
||||
@change="getMapCare"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dieaseTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="map-care">
|
||||
<div
|
||||
class="map-care-div"
|
||||
@@ -136,19 +131,16 @@
|
||||
:key="`map-care-${index}`"
|
||||
:style="{ left: item.left, top: item.top }"
|
||||
>
|
||||
<span @click="item.lat ? changeMap(false, item) : ''">{{
|
||||
item.name
|
||||
}}</span>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地图 -->
|
||||
<fssm-map
|
||||
v-if="!showImgBk"
|
||||
v-if="elementDiv !== 'OverviewScreen'"
|
||||
ref="roadMap"
|
||||
:showChange="true"
|
||||
:controlStyle="{ top: '23%', left: '27%' }"
|
||||
:centerPoint="mapCenterPoint"
|
||||
:controlStyle="{ top: '10%', left: '26%' }"
|
||||
@map-moveend="mapMoveend"
|
||||
@map-zoom="getZoom"
|
||||
@feature-select="featureSelect"
|
||||
@@ -156,11 +148,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen-footer">
|
||||
<!-- 病害巡检4种类型按钮 -->
|
||||
<div class="footer-change-map">
|
||||
<template v-if="!showImgBk">
|
||||
<template v-if="elementDiv === 'DiseaseScreen'">
|
||||
<div
|
||||
class="change-map-div"
|
||||
:class="mapClick === item.click ? 'change-map-click' : ''"
|
||||
:class="bottomTipClick === item.click ? 'change-map-click' : ''"
|
||||
v-for="(item, index) in changeMapBtn"
|
||||
:key="`btn-${index}`"
|
||||
@click="changeIconType(item.click)"
|
||||
@@ -169,6 +162,7 @@
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<!-- 切换3种导航栏按钮 -->
|
||||
<div class="footer-change-vue">
|
||||
<div
|
||||
:class="
|
||||
@@ -186,7 +180,7 @@
|
||||
<el-dialog
|
||||
:title="imgTitle"
|
||||
:visible.sync="imgVisible"
|
||||
width="80rem"
|
||||
width="85rem"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@@ -205,7 +199,7 @@
|
||||
destroy-on-close
|
||||
@close="screenImgCancel"
|
||||
>
|
||||
<div class="image-container" ref="imageContainer">
|
||||
<div class="view-image-container" ref="imageContainer">
|
||||
<img
|
||||
:src="screenImage.imageUrl"
|
||||
alt="Main Image"
|
||||
@@ -235,21 +229,19 @@ import * as geomExports from "ol/geom";
|
||||
import Cluster from "ol/source/Cluster";
|
||||
// 组件
|
||||
import ModuleBlock from "./module-block.vue";
|
||||
import TodayInspection from "./disease-components/today-inspection.vue";
|
||||
import DiseaseTrends from "./disease-components/disease-trends.vue";
|
||||
import DiseaseCurrent from "./disease-components/disease-current.vue";
|
||||
import WorkOrder from "./disease-components/work-order.vue";
|
||||
import PicRank from "./disease-components/pic-rank.vue";
|
||||
import RoadRank from "./disease-components/road-rank.vue";
|
||||
import TodayInspection from "./overview-components/today-inspection.vue";
|
||||
import DiseaseTrends from "./overview-components/disease-trends.vue";
|
||||
import DiseaseCurrent from "./overview-components/disease-current.vue";
|
||||
import PatrolOrder from "./overview-components/patrol-order.vue";
|
||||
import InspectionVehicles from "./overview-components/inspection-vehicles.vue";
|
||||
import RoadStatistic from "./road-components/road-statistic.vue";
|
||||
import ManageMaintain from "./road-components/manage-maintain.vue";
|
||||
import AnomalyFacilities from "./road-components/anomaly-facilities";
|
||||
import AncillaryFacilities from "./road-components/ancillary-facilities.vue";
|
||||
import TrafficSafety from "./traffic-components/traffic-safety.vue";
|
||||
import TrafficTrend from "./traffic-components/traffic-trend.vue";
|
||||
import TrafficStatistic from "./traffic-components/traffic-statistic.vue";
|
||||
import TrafficRank from "./traffic-components/traffic-rank.vue";
|
||||
import TrafficEmergency from "./traffic-components/traffic-emergency.vue";
|
||||
import TrafficSafety from "./disease-components/traffic-safety.vue";
|
||||
import TrafficTrend from "./disease-components/traffic-trend.vue";
|
||||
import TrafficStatistic from "./disease-components/traffic-statistic.vue";
|
||||
import TrafficLog from "./disease-components/traffic-log.vue";
|
||||
import ImgDialog from "./components/img-dialog.vue";
|
||||
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
|
||||
// 接口
|
||||
@@ -269,9 +261,8 @@ export default {
|
||||
TodayInspection,
|
||||
DiseaseTrends,
|
||||
DiseaseCurrent,
|
||||
WorkOrder,
|
||||
PicRank,
|
||||
RoadRank,
|
||||
PatrolOrder,
|
||||
InspectionVehicles,
|
||||
RoadStatistic,
|
||||
ManageMaintain,
|
||||
AnomalyFacilities,
|
||||
@@ -279,10 +270,9 @@ export default {
|
||||
TrafficSafety,
|
||||
TrafficTrend,
|
||||
TrafficStatistic,
|
||||
TrafficRank,
|
||||
TrafficEmergency,
|
||||
ImgDialog,
|
||||
FssmScroll,
|
||||
TrafficLog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -328,61 +318,52 @@ export default {
|
||||
rightModuleList: [
|
||||
{
|
||||
width: "100%",
|
||||
height: "25%",
|
||||
title: "工单统计",
|
||||
component: WorkOrder,
|
||||
height: "23%",
|
||||
title: "巡查里程",
|
||||
component: PatrolOrder,
|
||||
selectIsShow: false,
|
||||
class: "one",
|
||||
},
|
||||
{
|
||||
width: "100%",
|
||||
height: "33%",
|
||||
title: "PIC排名",
|
||||
component: PicRank,
|
||||
height: "60%",
|
||||
title: "巡检车辆",
|
||||
component: InspectionVehicles,
|
||||
selectIsShow: false,
|
||||
class: "twe",
|
||||
},
|
||||
{
|
||||
width: "100%",
|
||||
height: "25%",
|
||||
title: "路面状况排名",
|
||||
component: RoadRank,
|
||||
selectIsShow: true,
|
||||
select: "",
|
||||
class: "twe",
|
||||
},
|
||||
],
|
||||
// 是否显示图片背景
|
||||
showImgBk: true,
|
||||
// 图片背景下打点坐标数据
|
||||
mapCareList: [],
|
||||
// 切换地图图标类别按钮
|
||||
changeMapBtn: [
|
||||
{ name: "巡查车", click: "1" },
|
||||
{ name: "病害", click: "defect" },
|
||||
{ name: "路产", click: "equipment" },
|
||||
{ name: "事件", click: "event" },
|
||||
{ name: "路面", click: "1" },
|
||||
{ name: "道桥", click: "defect" },
|
||||
{ name: "交安", click: "equipment" },
|
||||
{ name: "绿化", click: "event" },
|
||||
],
|
||||
// 具体icon类别
|
||||
iconTypeList: [],
|
||||
// icon类别绑定
|
||||
iconType: [],
|
||||
// 图片背景下病害类型下拉选择绑定
|
||||
mapCareSelect: "",
|
||||
// 图片背景下病害类型下拉选择数据
|
||||
dieaseTypeList: [],
|
||||
// 路段下拉绑定
|
||||
roadList: [],
|
||||
// 路段选择绑定
|
||||
roadSelect: "",
|
||||
// 图标类别切换标识
|
||||
mapClick: "",
|
||||
bottomTipClick: "1",
|
||||
// 中间展示的动态组件绑定
|
||||
elementDiv: "DiseaseScreen",
|
||||
elementDiv: "OverviewScreen",
|
||||
// 下方三个按钮数据
|
||||
elementList: [
|
||||
{ name: "病害巡检", component: "DiseaseScreen" },
|
||||
{ name: "总览", component: "OverviewScreen" },
|
||||
{ name: "道路资产", component: "RoadScreen" },
|
||||
{ name: "交安事件", component: "TrafficScreen" },
|
||||
{ name: "病害巡检", component: "DiseaseScreen" },
|
||||
],
|
||||
// 地图中心点
|
||||
mapCenterPoint: {},
|
||||
// 中心点集合(全部)
|
||||
centerPiont: [],
|
||||
// 中心点集合（当前）
|
||||
@@ -400,7 +381,7 @@ export default {
|
||||
// 图片弹窗标题
|
||||
imgTitle: "查看",
|
||||
// 图片弹窗显隐控制
|
||||
imgVisible: false,
|
||||
imgVisible: true,
|
||||
// 查看点位图片数据
|
||||
screenImage: {},
|
||||
// 查看点位图片弹窗显隐控制
|
||||
@@ -414,6 +395,7 @@ export default {
|
||||
this.getSelect();
|
||||
this.getMapCare();
|
||||
this.getRoadList();
|
||||
this.getDieaseTypeList();
|
||||
},
|
||||
methods: {
|
||||
/* 获取当前时间 */
|
||||
@@ -467,6 +449,11 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取图片背景左上角病害类型下拉 */
|
||||
getDieaseTypeList() {
|
||||
this.dieaseTypeList = [];
|
||||
},
|
||||
|
||||
/* 获取图片背景下坐标数据 */
|
||||
getMapCare() {
|
||||
comppanyImg().then(({ code, data }) => {
|
||||
@@ -504,23 +491,6 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 点击图片点位切换地图事件 */
|
||||
changeMap(boolen, item) {
|
||||
this.showImgBk = boolen;
|
||||
this.mapCenterPoint = { lat: item.lat * 1, lon: item.lon * 1 };
|
||||
if (!boolen) {
|
||||
// 默认点击的图标是巡查车
|
||||
this.changeIconType("defect");
|
||||
} else {
|
||||
this.mapClick = "";
|
||||
this.mapZoom = "";
|
||||
this.clusters = null;
|
||||
this.markLayerLines = null;
|
||||
this.mapCenterPoint = {};
|
||||
this.roadSelect = "";
|
||||
}
|
||||
},
|
||||
|
||||
/* 获取地图点位信息 */
|
||||
getCenterPiont() {
|
||||
// 如果当前已经有打点坐标
|
||||
@@ -531,31 +501,32 @@ export default {
|
||||
this.clusters = null;
|
||||
});
|
||||
}
|
||||
mapPointList({ type: this.mapClick, segmentId: this.roadSelect }).then(
|
||||
({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.drawPointList = data.map((item) => {
|
||||
if (item.geometry) {
|
||||
return {
|
||||
...item,
|
||||
geometry: [item.geometry[0], item.geometry[1]],
|
||||
};
|
||||
}
|
||||
return [];
|
||||
});
|
||||
this.centerPiont = data.map((item) => {
|
||||
if (item.geometry) {
|
||||
return {
|
||||
...item,
|
||||
geometry: [item.geometry[0], item.geometry[1]],
|
||||
};
|
||||
}
|
||||
return [];
|
||||
});
|
||||
this.drawPoint();
|
||||
}
|
||||
mapPointList({
|
||||
type: this.bottomTipClick,
|
||||
segmentId: this.roadSelect,
|
||||
}).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.drawPointList = data.map((item) => {
|
||||
if (item.geometry) {
|
||||
return {
|
||||
...item,
|
||||
geometry: [item.geometry[0], item.geometry[1]],
|
||||
};
|
||||
}
|
||||
return [];
|
||||
});
|
||||
this.centerPiont = data.map((item) => {
|
||||
if (item.geometry) {
|
||||
return {
|
||||
...item,
|
||||
geometry: [item.geometry[0], item.geometry[1]],
|
||||
};
|
||||
}
|
||||
return [];
|
||||
});
|
||||
this.drawPoint();
|
||||
}
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
/* 绘制地图点位 */
|
||||
@@ -718,25 +689,8 @@ export default {
|
||||
|
||||
/* 地图下方4图标类别切换点击事件 */
|
||||
changeIconType(value) {
|
||||
this.mapZoom = "";
|
||||
this.roadSelect = "";
|
||||
if (this.mapClick !== value) {
|
||||
this.mapClick = value;
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.markLayerLines);
|
||||
map.removeLayer(this.clusters);
|
||||
this.clusters = null;
|
||||
this.markLayerLines = null;
|
||||
});
|
||||
// 获取对应右上角icon类型
|
||||
this.getIconType(value);
|
||||
// 请求地图打点/绘制线段接口
|
||||
if (!this.mapZoom) {
|
||||
this.getZoom("11");
|
||||
} else {
|
||||
this.getZoom(this.mapZoom);
|
||||
}
|
||||
if (this.bottomTipClick !== value) {
|
||||
this.bottomTipClick = value;
|
||||
}
|
||||
},
|
||||
|
||||
@@ -823,7 +777,7 @@ export default {
|
||||
changeElement(item) {
|
||||
if (this.elementDiv !== item) {
|
||||
this.elementDiv = item.component;
|
||||
if (item.component === "DiseaseScreen") {
|
||||
if (item.component === "OverviewScreen") {
|
||||
this.leftModuleList = [
|
||||
{
|
||||
width: "100%",
|
||||
@@ -855,28 +809,19 @@ export default {
|
||||
{
|
||||
width: "100%",
|
||||
height: "25%",
|
||||
title: "工单统计",
|
||||
component: WorkOrder,
|
||||
title: "巡查里程",
|
||||
component: PatrolOrder,
|
||||
selectIsShow: false,
|
||||
class: "one",
|
||||
},
|
||||
{
|
||||
width: "100%",
|
||||
height: "33%",
|
||||
title: "PIC排名",
|
||||
component: PicRank,
|
||||
height: "60%",
|
||||
title: "巡检车辆",
|
||||
component: InspectionVehicles,
|
||||
selectIsShow: false,
|
||||
class: "twe",
|
||||
},
|
||||
{
|
||||
width: "100%",
|
||||
height: "25%",
|
||||
title: "路面状况排名",
|
||||
component: RoadRank,
|
||||
selectIsShow: true,
|
||||
select: "",
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
} else if (item.component === "RoadScreen") {
|
||||
this.leftModuleList = [
|
||||
@@ -917,7 +862,7 @@ export default {
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
} else if (item.component === "TrafficScreen") {
|
||||
} else if (item.component === "DiseaseScreen") {
|
||||
this.leftModuleList = [
|
||||
{
|
||||
width: "100%",
|
||||
@@ -948,21 +893,13 @@ export default {
|
||||
this.rightModuleList = [
|
||||
{
|
||||
width: "100%",
|
||||
height: "50%",
|
||||
title: "交安事件排名",
|
||||
component: TrafficRank,
|
||||
height: "85%",
|
||||
title: "交安事件日志",
|
||||
component: TrafficLog,
|
||||
selectIsShow: true,
|
||||
select: "",
|
||||
class: "one",
|
||||
},
|
||||
{
|
||||
width: "100%",
|
||||
height: "29%",
|
||||
title: "交安突发事件",
|
||||
component: TrafficEmergency,
|
||||
selectIsShow: false,
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -1087,96 +1024,17 @@ export default {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
// 病害筛查按钮样式
|
||||
.road-select {
|
||||
width: 4rem;
|
||||
height: 6.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
// 图例
|
||||
.map-legend {
|
||||
height: 7rem;
|
||||
width: 2rem;
|
||||
position: absolute;
|
||||
left: 27%;
|
||||
top: 10%;
|
||||
|
||||
.road-div {
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
cursor: pointer;
|
||||
color: #8deeff;
|
||||
background-image: url("../../assets/screen/road/road-select.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 80%;
|
||||
background-position: 50% 0;
|
||||
z-index: 1;
|
||||
|
||||
span {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 8rem;
|
||||
|
||||
.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: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 返回样式
|
||||
.road-return {
|
||||
cursor: pointer;
|
||||
width: 4rem;
|
||||
height: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 0.8rem;
|
||||
color: #ffffff;
|
||||
background-color: #395569;
|
||||
border: 1px #1cb6ff solid;
|
||||
border-radius: 0.5rem;
|
||||
z-index: 1;
|
||||
|
||||
&:hover {
|
||||
background-color: #2b4367;
|
||||
}
|
||||
}
|
||||
top: 17%;
|
||||
left: 26%;
|
||||
z-index: 1;
|
||||
background-image: url("../../assets/screen/index/map-legend.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
// 右上角切换图标样式多选框
|
||||
@@ -1201,57 +1059,6 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
// 切换线路段
|
||||
.road-checkBox-twe {
|
||||
position: absolute;
|
||||
left: 31.5%;
|
||||
top: 10%;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.4rem;
|
||||
z-index: 1;
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 15rem;
|
||||
|
||||
.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: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 图片背景样式
|
||||
.disease-content {
|
||||
width: 100%;
|
||||
@@ -1274,17 +1081,12 @@ export default {
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
// 图例
|
||||
.map-legend {
|
||||
height: 7rem;
|
||||
width: 2rem;
|
||||
position: absolute;
|
||||
top: 13%;
|
||||
// 筛选病害类型下拉
|
||||
.map-image-select {
|
||||
left: 28%;
|
||||
z-index: 1;
|
||||
background-image: url("../../assets/screen/index/map-legend.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
top: 10%;
|
||||
position: absolute;
|
||||
color:#ffffff;
|
||||
}
|
||||
|
||||
// 打点部分
|
||||
@@ -1310,7 +1112,6 @@ export default {
|
||||
|
||||
span {
|
||||
height: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1417,7 +1218,6 @@ export default {
|
||||
.footer-change-map {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
padding-right: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -1453,14 +1253,14 @@ export default {
|
||||
}
|
||||
|
||||
// 未点击样式
|
||||
.change-vue-DiseaseScreen {
|
||||
.change-vue-OverviewScreen {
|
||||
background-image: url("../../assets//screen/index/button-disease.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 97% 65%;
|
||||
background-position: 100% 15%;
|
||||
}
|
||||
|
||||
.change-vue-click-DiseaseScreen {
|
||||
.change-vue-click-OverviewScreen {
|
||||
background-image: url("../../assets//screen/index/button-disease-click.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 98% 65%;
|
||||
@@ -1480,14 +1280,14 @@ export default {
|
||||
background-position: 70% 15%;
|
||||
}
|
||||
|
||||
.change-vue-TrafficScreen {
|
||||
.change-vue-DiseaseScreen {
|
||||
background-image: url("../../assets//screen/index/button-traffic.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 95% 60%;
|
||||
background-position: 15% 15%;
|
||||
}
|
||||
|
||||
.change-vue-click-TrafficScreen {
|
||||
.change-vue-click-DiseaseScreen {
|
||||
background-image: url("../../assets//screen/index/button-traffic-click.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 95% 60%;
|
||||
@@ -1501,6 +1301,7 @@ export default {
|
||||
|
||||
/* 修改弹窗样式 */
|
||||
::v-deep .el-dialog__header {
|
||||
padding: 10px;
|
||||
background-color: #113463;
|
||||
|
||||
span,
|
||||
@@ -1510,10 +1311,11 @@ export default {
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 0;
|
||||
background-color: #113463;
|
||||
|
||||
/* 查看点位大图弹窗 */
|
||||
.image-container {
|
||||
.view-image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
@@ -1523,7 +1325,7 @@ export default {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
.view-image-container img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
@@ -1535,4 +1337,46 @@ export default {
|
||||
border: 2px solid red;
|
||||
}
|
||||
}
|
||||
|
||||
// 大屏下拉框样式
|
||||
::v-deep .el-select {
|
||||
width: 6.5rem;
|
||||
|
||||
.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: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+2
-43
@@ -2,9 +2,9 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:19:56
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-29 13:43:38
|
||||
* @LastEditTime: 2024-11-11 10:07:23
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-current.vue
|
||||
* @Description: 病害巡检-病害三维饼图
|
||||
* @Description: 总览大屏-病害三维饼图
|
||||
-->
|
||||
|
||||
<template>
|
||||
@@ -369,47 +369,6 @@ export default {
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
top: 0.2rem;
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 6.5rem;
|
||||
|
||||
.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: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.echart {
|
||||
+1
-1
@@ -4,7 +4,7 @@
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-24 17:09:27
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-trends.vue
|
||||
* @Description: 病害巡检-病害趋势
|
||||
* @Description: 总览大屏-病害趋势
|
||||
-->
|
||||
<template>
|
||||
<div class="content" ref="trendsChart"></div>
|
||||
@@ -0,0 +1,245 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-08 09:40:18
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-08 11:59:06
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\inspection-vehicles.vue
|
||||
* @Description: 总览大屏-巡检车辆
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="inspection-top">
|
||||
<div class="top-div">
|
||||
<span>车辆总数</span>
|
||||
<div>{{ carNum }}<span>辆</span></div>
|
||||
</div>
|
||||
<div class="top-div">
|
||||
<span>在线车辆数</span>
|
||||
<div>{{ onlineNum }}<span>辆</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inspection-bottom">
|
||||
<el-input placeholder="请输入车牌号" v-model="tableInput">
|
||||
<template slot="append"
|
||||
><el-button slot="append" icon="el-icon-search"></el-button
|
||||
></template>
|
||||
</el-input>
|
||||
<!-- 列表 -->
|
||||
<el-table :data="inspectionTableData" style="width: 100%" height="210">
|
||||
<el-table-column prop="date" label="车牌号码"> </el-table-column>
|
||||
<el-table-column prop="name" label="状态"> </el-table-column>
|
||||
<el-table-column prop="pci" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" @click="detailDefect(scope.row)"
|
||||
>详情
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="followCar(scope.row)"
|
||||
v-hasPermi="['system:defect:edit']"
|
||||
>跟车
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="videoDelete(scope.row)"
|
||||
v-hasPermi="['system:defect:remove']"
|
||||
>视频
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<div class="pagination-part">
|
||||
<el-pagination
|
||||
background
|
||||
:pager-count="5"
|
||||
:current-page.sync="pagination.page"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:page-size.sync="pagination.size"
|
||||
layout="prev, pager, next"
|
||||
:total="tableTotal"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "InspectionVehicles",
|
||||
data() {
|
||||
return {
|
||||
// 车辆总数
|
||||
carNum: 11,
|
||||
// 在线车辆数
|
||||
onlineNum: 60,
|
||||
// 车牌号输入绑定
|
||||
tableInput: "",
|
||||
// 下方列表数据
|
||||
inspectionTableData: [],
|
||||
// 分页数据绑定
|
||||
pagination: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
},
|
||||
// 分页总数
|
||||
tableTotal: 100,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getTableData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取表格数据 */
|
||||
getTableData() {
|
||||
this.inspectionTableData = [
|
||||
{
|
||||
date: "S225",
|
||||
name: "99.52",
|
||||
pci: "优",
|
||||
},
|
||||
{
|
||||
date: "G107",
|
||||
name: "98.6",
|
||||
pci: "优",
|
||||
},
|
||||
{
|
||||
date: "G105",
|
||||
name: "100",
|
||||
pci: "优",
|
||||
},
|
||||
{
|
||||
date: "S225",
|
||||
name: "99.52",
|
||||
pci: "优",
|
||||
},
|
||||
{
|
||||
date: "G107",
|
||||
name: "98.6",
|
||||
pci: "优",
|
||||
},
|
||||
{
|
||||
date: "G105",
|
||||
name: "100",
|
||||
pci: "优",
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
/* 表格详情事件 */
|
||||
detailDefect(val) {},
|
||||
|
||||
/* 表格跟车事件 */
|
||||
followCar(val) {},
|
||||
|
||||
/* 表格视频事件 */
|
||||
videoDelete(val) {},
|
||||
|
||||
/* 页码修改事件 */
|
||||
handleCurrentChange(arg) {
|
||||
this.pagination.page = arg;
|
||||
this.getTableData();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #ffffff;
|
||||
|
||||
.inspection-top {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.top-div {
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
padding-bottom: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
border:1px solid red;
|
||||
}
|
||||
}
|
||||
|
||||
.inspection-bottom {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
padding: 1rem 0.5rem;
|
||||
|
||||
::v-deep .el-input {
|
||||
margin-bottom: 0.5rem;
|
||||
.el-input__inner {
|
||||
color: #ffffff;
|
||||
background-color: transparent;
|
||||
border-color: rgb(69, 109, 211);
|
||||
}
|
||||
|
||||
.el-input-group__append {
|
||||
background-color: transparent;
|
||||
color: #ffffff;
|
||||
border-color: rgb(69, 109, 211);
|
||||
|
||||
&:hover {
|
||||
background-color: #3c5a8a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-table {
|
||||
th {
|
||||
color: #ffffff;
|
||||
background-color: #214175;
|
||||
}
|
||||
|
||||
tr {
|
||||
color: #ffffff;
|
||||
background-color: #16395a;
|
||||
|
||||
&:hover > td {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-table td.el-table__cell {
|
||||
border-color: rgb(82, 141, 229);
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
border-color: rgb(0, 102, 255);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 分页样式 */
|
||||
.pagination-part {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-top: 0.5rem;
|
||||
justify-content: flex-end;
|
||||
|
||||
::v-deep .el-pagination {
|
||||
color: #ffffff;
|
||||
.btn-prev,
|
||||
.btn-next {
|
||||
background-color: #6481aa;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-pager li {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:25:29
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-08 09:33:25
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\work-order.vue
|
||||
* @Description: 总览大屏-巡查里程
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="patrol-div">
|
||||
<div class="value"><span>{{ patrolObject.mileage }}</span>km</div>
|
||||
<div class="name">累计里程</div>
|
||||
</div>
|
||||
<div class="patrol-div">
|
||||
<div class="value"><span>{{ patrolObject.time }}</span>h</div>
|
||||
<div class="name">累计时长</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "PatrolOrder",
|
||||
data() {
|
||||
return {
|
||||
// 累计里程数据
|
||||
patrolObject: {
|
||||
mileage: 365,
|
||||
time: 12,
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
|
||||
.patrol-div{
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
.value{
|
||||
|
||||
span{
|
||||
font-family: "DouYu";
|
||||
font-size: 1.8rem;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,465 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 09:42:49
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-11 09:45:51
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\today-inspection.vue
|
||||
* @Description: 总览大屏-今日巡查
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="today-left">
|
||||
<span>{{ today }}</span>
|
||||
</div>
|
||||
<div class="today-right" @click="showDialog">
|
||||
<div class="right-sum">
|
||||
<span>{{ all }}</span
|
||||
>个
|
||||
</div>
|
||||
<div class="right-rate">
|
||||
<span> {{ scale }}</span
|
||||
>%
|
||||
</div>
|
||||
</div>
|
||||
<!-- 病害总览弹窗 -->
|
||||
<el-dialog
|
||||
title="当前病害总览"
|
||||
:visible.sync="showDialogVisible"
|
||||
width="75rem"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="screenCancel"
|
||||
>
|
||||
<div class="today-content">
|
||||
<div ref="leftChart" class="dialog-div"></div>
|
||||
<div ref="rightChart" class="dialog-div"></div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { roadToday } from "@/api/xj/screen/disease-screen";
|
||||
export default {
|
||||
name: "TodayInspection",
|
||||
data() {
|
||||
return {
|
||||
// 新增病害总数
|
||||
today: "0",
|
||||
// 病害总数
|
||||
all: "0",
|
||||
// 增长率
|
||||
scale: "0",
|
||||
// 弹窗显隐控制
|
||||
showDialogVisible: false,
|
||||
// 左侧图表数据
|
||||
leftChartData: [],
|
||||
// 右侧图表数据
|
||||
rightChartData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取数据 */
|
||||
getData() {
|
||||
roadToday().then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.today = data.today;
|
||||
this.all = data.all;
|
||||
this.scale = (data.scale * 1).toFixed(2);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 点击打开弹窗 */
|
||||
showDialog() {
|
||||
this.showDialogVisible = true;
|
||||
this.getChartData()
|
||||
},
|
||||
|
||||
/* 请求弹窗数据 */
|
||||
getChartData() {
|
||||
this.leftChartData = [];
|
||||
this.rightChartData = [];
|
||||
this.$nextTick(() => {
|
||||
this.drawLeftChart();
|
||||
this.drawRightChart();
|
||||
});
|
||||
},
|
||||
|
||||
/* 绘制左侧echart图 */
|
||||
drawLeftChart() {
|
||||
if (this.$refs.leftChart) {
|
||||
const chart = echarts.init(this.$refs.leftChart);
|
||||
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% 处的颜色
|
||||
],
|
||||
},
|
||||
],
|
||||
title: {
|
||||
text: "",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
orient: "horizontal",
|
||||
left: "right",
|
||||
data: ["分类A", "分类B", "分类C"],
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["类别1", "类别2", "类别3"],
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,0.65)",
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.2)",
|
||||
},
|
||||
},
|
||||
name: "单位：个",
|
||||
nameTextStyle: {
|
||||
color: "rgba(255,255,255,0.65)",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "分类A",
|
||||
type: "bar",
|
||||
data: [120, 200, 150],
|
||||
},
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "分类B",
|
||||
type: "bar",
|
||||
data: [220, 182, 191],
|
||||
},
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "分类C",
|
||||
type: "bar",
|
||||
data: [150, 232, 201],
|
||||
},
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
chart.resize();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/* 绘制右侧echart图 */
|
||||
drawRightChart() {
|
||||
if (this.$refs.rightChart) {
|
||||
const chart = echarts.init(this.$refs.rightChart);
|
||||
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% 处的颜色
|
||||
],
|
||||
},
|
||||
],
|
||||
title: {
|
||||
text: "",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
orient: "horizontal",
|
||||
left: "right",
|
||||
data: ["分类A", "分类B", "分类C"],
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["类别1", "类别2", "类别3"],
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "rgba(255,255,255,0.65)",
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0.2)",
|
||||
},
|
||||
},
|
||||
name: "单位：个",
|
||||
nameTextStyle: {
|
||||
color: "rgba(255,255,255,0.65)",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "分类A",
|
||||
type: "bar",
|
||||
data: [120, 200, 150],
|
||||
},
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "分类B",
|
||||
type: "bar",
|
||||
data: [220, 182, 191],
|
||||
},
|
||||
{
|
||||
barWidth: 10,
|
||||
name: "分类C",
|
||||
type: "bar",
|
||||
data: [150, 232, 201],
|
||||
},
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
chart.resize();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/* 关闭 弹窗事件 */
|
||||
screenCancel() {
|
||||
this.showDialogVisible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.today-left {
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 1.5rem;
|
||||
background-image: url("../../../assets/screen/disease/today-left.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 85%;
|
||||
background-position: 100% 60%;
|
||||
|
||||
span {
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
font-family: "DouYu";
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#2773d0
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
|
||||
.today-right {
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
color: #ffffff;
|
||||
|
||||
.right-sum {
|
||||
width: 100%;
|
||||
height: 45%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding-left: 1rem;
|
||||
justify-content: center;
|
||||
line-height: 3rem;
|
||||
background-image: url("../../../assets/screen/disease/right-sum.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: 100% 50%;
|
||||
color: #aac6c7;
|
||||
|
||||
span {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
font-family: "DouYu";
|
||||
margin-right: 0.5rem;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#2773d0
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
|
||||
.right-rate {
|
||||
width: 100%;
|
||||
height: 45%;
|
||||
padding-left: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
line-height: 3rem;
|
||||
background-image: url("../../../assets/screen/disease/right-rate.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: 100% 50%;
|
||||
color: #aac6c7;
|
||||
|
||||
span {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
font-family: "DouYu";
|
||||
margin-right: 0.5rem;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#e9bc5c
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗内容样式
|
||||
.today-content {
|
||||
height: 30rem;
|
||||
display: flex;
|
||||
|
||||
.dialog-div {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 修改弹窗样式 */
|
||||
::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>
|
||||
@@ -315,46 +315,6 @@ export default {
|
||||
right: 0;
|
||||
top: 0.2rem;
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 6.5rem;
|
||||
|
||||
.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: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.anomaly-echart {
|
||||
|
||||
@@ -1,167 +0,0 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 10:12:55
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-30 16:58:54
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-emergency.vue
|
||||
* @Description: 交安事件大屏-交安突发事件
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="emergency-top">
|
||||
<div class="emergency-type">事件类型</div>
|
||||
<div class="emergency-name">段路名称</div>
|
||||
<div class="emergency-status">事件状态</div>
|
||||
<div class="emergency-operation">操作</div>
|
||||
</div>
|
||||
<div class="emergency-bottom">
|
||||
<vue-seamless-scroll
|
||||
class="vue-scroll"
|
||||
:class-option="defaultOption"
|
||||
:data="emergencyList"
|
||||
>
|
||||
<div
|
||||
class="emergency-bottom-div"
|
||||
v-for="(item, index) in emergencyList"
|
||||
:key="`emergency-${index}`"
|
||||
>
|
||||
<div class="emergency-type">{{ item.type }}</div>
|
||||
<div class="emergency-name">{{ item.segmentName }}</div>
|
||||
<div class="emergency-status"><a></a>{{ item.status }}</div>
|
||||
<div class="emergency-operation">操作</div>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
import { emergencyData } from "@/api/xj/screen/traffic-screen";
|
||||
export default {
|
||||
name: "TrafficEmergency",
|
||||
components: { vueSeamlessScroll },
|
||||
data() {
|
||||
return {
|
||||
// 轮播配置
|
||||
defaultOption: {
|
||||
step: 0.2, // 数值越大速度滚动越快
|
||||
limitMoveNum: 1,
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
|
||||
},
|
||||
// 事件列表
|
||||
emergencyList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取事件列表数据 */
|
||||
getData() {
|
||||
emergencyData().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.emergencyList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 1rem;
|
||||
overflow: hidden;
|
||||
padding-left: 1rem;
|
||||
|
||||
.emergency-top {
|
||||
height: 2rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// border: 1px solid #0b7ecf;
|
||||
color: #e6fcfe;
|
||||
font-size: 0.9rem;
|
||||
padding: 0 0.5rem;
|
||||
background-image: url("../../../assets/screen/traffic/emergency-top.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
|
||||
.emergency-type {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.emergency-name {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.emergency-status {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.emergency-operation {
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.emergency-bottom {
|
||||
height: calc(100% - 2rem);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.emergency-bottom-div {
|
||||
height: 2rem;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
background-color: rgba(17, 52, 99, 0.3);
|
||||
}
|
||||
|
||||
> div {
|
||||
margin: 0 0.3rem;
|
||||
line-height: 2rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #808c9f;
|
||||
}
|
||||
|
||||
.emergency-type {
|
||||
width: 27%;
|
||||
}
|
||||
|
||||
.emergency-name {
|
||||
width: 27%;
|
||||
}
|
||||
|
||||
.emergency-status {
|
||||
width: 27%;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
background-color: #f7da15;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.emergency-operation {
|
||||
width: 10%;
|
||||
color: #0d9ee2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,290 +0,0 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 10:11:03
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-31 14:25:18
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-rank.vue
|
||||
* @Description: 交安事件大屏-交安事件排名
|
||||
-->
|
||||
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<vue-seamless-scroll
|
||||
class="vue-scroll"
|
||||
:class-option="defaultOption"
|
||||
:data="rankList"
|
||||
v-if="rankList.length > 7"
|
||||
>
|
||||
<div
|
||||
class="rank-div"
|
||||
v-for="(item, index) in rankList"
|
||||
:key="`rank-${index}`"
|
||||
>
|
||||
<div class="rank-top" :class="`rank-top-${index}`">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="value">{{ item.value }}</div>
|
||||
</div>
|
||||
<div class="rank-bottom">
|
||||
<div
|
||||
:style="{ width: `${item.rate}%` }"
|
||||
:class="`rank-bottom-${index}`"
|
||||
></div>
|
||||
<div class="rank-bottom-tip"></div>
|
||||
</div>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
<template v-else>
|
||||
<div
|
||||
class="rank-div"
|
||||
v-for="(item, index) in rankList"
|
||||
:key="`rank-${index}`"
|
||||
>
|
||||
<div class="rank-top" :class="`rank-top-${index}`">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="value">{{ item.value }}</div>
|
||||
</div>
|
||||
<div class="rank-bottom">
|
||||
<div
|
||||
:style="{ width: `${item.rate}%` }"
|
||||
:class="`rank-bottom-${index}`"
|
||||
></div>
|
||||
<div class="rank-bottom-tip"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
import { rankCount } from "@/api/xj/screen/traffic-screen";
|
||||
export default {
|
||||
name: "TrafficRank",
|
||||
components: { vueSeamlessScroll },
|
||||
props: {
|
||||
select: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 轮播配置
|
||||
defaultOption: {
|
||||
step: 0.2, // 数值越大速度滚动越快
|
||||
limitMoveNum: 1,
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
|
||||
},
|
||||
// 排名数据
|
||||
rankList: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
select: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.getData();
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取排名数据 */
|
||||
getData() {
|
||||
rankCount({ type: this.select }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
let sum = 0;
|
||||
data.forEach((element) => {
|
||||
sum += element.value * 1;
|
||||
});
|
||||
this.rankList = data
|
||||
.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
rate: (item.value * 100) / sum,
|
||||
};
|
||||
})
|
||||
.slice(0, 10);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding-left: 1rem;
|
||||
|
||||
.rank-div {
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
|
||||
.rank-top {
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
padding: 0 1rem 0.2rem 3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
font-size: 0.9rem;
|
||||
color: #c7daf2;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-family: "DouYu";
|
||||
font-size: 0.9rem;
|
||||
color: #1d92d1;
|
||||
}
|
||||
}
|
||||
|
||||
.rank-bottom {
|
||||
width: 100%;
|
||||
height: 0.3rem;
|
||||
display: flex;
|
||||
background-color: #113463;
|
||||
|
||||
> div:nth-child(1) {
|
||||
height: 100%;
|
||||
max-width: 99%;
|
||||
}
|
||||
|
||||
.rank-bottom-tip {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
top: -0.1rem;
|
||||
left: -0.1rem;
|
||||
position: relative;
|
||||
background-color: #8effce;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.rank-bottom-0 {
|
||||
background: linear-gradient(90deg, #322707 0%, #ffc000 100%);
|
||||
}
|
||||
|
||||
.rank-bottom-1 {
|
||||
background: linear-gradient(90deg, #322707 0%, #00fcff 100%);
|
||||
}
|
||||
|
||||
.rank-bottom-2 {
|
||||
background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
|
||||
}
|
||||
|
||||
.rank-bottom-3 {
|
||||
background: linear-gradient(90deg, #322707 0%, #00fcff 100%);
|
||||
}
|
||||
|
||||
.rank-bottom-4 {
|
||||
background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
|
||||
}
|
||||
|
||||
.rank-bottom-5 {
|
||||
background: linear-gradient(90deg, #322707 0%, #00fcff 100%);
|
||||
}
|
||||
|
||||
.rank-bottom-6 {
|
||||
background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
|
||||
}
|
||||
|
||||
.rank-bottom-7 {
|
||||
background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
|
||||
}
|
||||
|
||||
.rank-bottom-8 {
|
||||
background: linear-gradient(90deg, #322707 0%, #00fcff 100%);
|
||||
}
|
||||
|
||||
.rank-bottom-9 {
|
||||
background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.rank-top-0 {
|
||||
background-image: url("../../../assets/screen/traffic/rank-top-0.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 2% 50%;
|
||||
|
||||
.value {
|
||||
color: #fcc105;
|
||||
}
|
||||
}
|
||||
|
||||
.rank-top-1 {
|
||||
background-image: url("../../../assets/screen/traffic/rank-top-1.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 2% 50%;
|
||||
|
||||
.value {
|
||||
color: #00fffc;
|
||||
}
|
||||
}
|
||||
|
||||
.rank-top-2 {
|
||||
background-image: url("../../../assets/screen/traffic/rank-top-2.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 2% 50%;
|
||||
|
||||
.value {
|
||||
color: #6ac2ff;
|
||||
}
|
||||
}
|
||||
|
||||
.rank-top-3 {
|
||||
background-image: url("../../../assets/screen/traffic/rank-top-3.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 2% 50%;
|
||||
}
|
||||
|
||||
.rank-top-4 {
|
||||
background-image: url("../../../assets/screen/traffic/rank-top-4.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 2% 50%;
|
||||
}
|
||||
|
||||
.rank-top-5 {
|
||||
background-image: url("../../../assets/screen/traffic/rank-top-5.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 2% 50%;
|
||||
}
|
||||
|
||||
.rank-top-6 {
|
||||
background-image: url("../../../assets/screen/traffic/rank-top-6.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 2% 50%;
|
||||
}
|
||||
|
||||
.rank-top-7 {
|
||||
background-image: url("../../../assets/screen/traffic/rank-top-7.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 2% 50%;
|
||||
}
|
||||
|
||||
.rank-top-8 {
|
||||
background-image: url("../../../assets/screen/traffic/rank-top-8.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 2% 50%;
|
||||
}
|
||||
|
||||
.rank-top-9 {
|
||||
background-image: url("../../../assets/screen/traffic/rank-top-9.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 2% 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user