fix：大屏页面
This commit is contained in:
parent
c720a8b0c0
commit
ebb4b51161
BIN
src/assets/screen/index/disease-title.png
Normal file
BIN
src/assets/screen/index/disease-title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/screen/index/exit.png
Normal file
BIN
src/assets/screen/index/exit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 775 B |
BIN
src/assets/screen/road/statistic-bg.png
Normal file
BIN
src/assets/screen/road/statistic-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/assets/screen/traffic/emergency-top.png
Normal file
BIN
src/assets/screen/traffic/emergency-top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
src/assets/screen/traffic/rank-top-0.png
Normal file
BIN
src/assets/screen/traffic/rank-top-0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
src/assets/screen/traffic/rank-top-1.png
Normal file
BIN
src/assets/screen/traffic/rank-top-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/screen/traffic/rank-top-2.png
Normal file
BIN
src/assets/screen/traffic/rank-top-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/screen/traffic/rank-top-3.png
Normal file
BIN
src/assets/screen/traffic/rank-top-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/screen/traffic/rank-top-4.png
Normal file
BIN
src/assets/screen/traffic/rank-top-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/screen/traffic/rank-top-5.png
Normal file
BIN
src/assets/screen/traffic/rank-top-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/screen/traffic/rank-top-6.png
Normal file
BIN
src/assets/screen/traffic/rank-top-6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/assets/screen/traffic/rank-top-7.png
Normal file
BIN
src/assets/screen/traffic/rank-top-7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/screen/traffic/rank-top-8.png
Normal file
BIN
src/assets/screen/traffic/rank-top-8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/screen/traffic/rank-top-9.png
Normal file
BIN
src/assets/screen/traffic/rank-top-9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/screen/traffic/right-rate.png
Normal file
BIN
src/assets/screen/traffic/right-rate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/screen/traffic/right-sum.png
Normal file
BIN
src/assets/screen/traffic/right-sum.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/screen/traffic/road-index-2.png
Normal file
BIN
src/assets/screen/traffic/road-index-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 570 B |
BIN
src/assets/screen/traffic/statistic-chart.png
Normal file
BIN
src/assets/screen/traffic/statistic-chart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
BIN
src/assets/screen/traffic/traffic-left.png
Normal file
BIN
src/assets/screen/traffic/traffic-left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
src/assets/text/DINBM.ttf
Normal file
BIN
src/assets/text/DINBM.ttf
Normal file
Binary file not shown.
BIN
src/assets/text/DOUYU.ttf
Normal file
BIN
src/assets/text/DOUYU.ttf
Normal file
Binary file not shown.
14
src/assets/text/font.css
Normal file
14
src/assets/text/font.css
Normal file
@ -0,0 +1,14 @@
|
||||
@font-face{
|
||||
font-family: "DouYu";
|
||||
src: url("./DOUYU.ttf");
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: "DinBm";
|
||||
src: url("./DINBM.ttf");
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: "ys";
|
||||
src: url("./ys.ttf");
|
||||
}
|
||||
BIN
src/assets/text/ys.ttf
Normal file
BIN
src/assets/text/ys.ttf
Normal file
Binary file not shown.
@ -40,6 +40,7 @@ import DictData from '@/components/DictData'
|
||||
//工作流
|
||||
|
||||
import Tinymce from '@/components/tinymce/index.vue'
|
||||
import "./assets/text/font.css"
|
||||
|
||||
// 全局方法挂载
|
||||
Vue.prototype.getDicts = getDicts
|
||||
|
||||
@ -2,14 +2,27 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:19:56
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 13:15:47
|
||||
* @LastEditTime: 2024-10-21 17:14:45
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-current.vue
|
||||
* @Description: 病害巡检-病害三维饼图
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="content-select">下拉框</div>
|
||||
<div class="content-select">
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="itemSelect"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in currentList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="echart" ref="currentChart"></div>
|
||||
<div class="food-legend">
|
||||
<div
|
||||
@ -33,8 +46,34 @@ export default {
|
||||
name: "DiseaseCurrent",
|
||||
data() {
|
||||
return {
|
||||
// 下拉框绑定
|
||||
itemSelect: "1",
|
||||
// 下拉框数据
|
||||
currentList: [
|
||||
{
|
||||
label: "分公司",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "分公司2",
|
||||
value: "2",
|
||||
},
|
||||
{
|
||||
label: "分公3",
|
||||
value: "3",
|
||||
},
|
||||
{
|
||||
label: "分公司4",
|
||||
value: "4",
|
||||
},
|
||||
{
|
||||
label: "分公司5",
|
||||
value: "5",
|
||||
},
|
||||
],
|
||||
// 配置项数据
|
||||
options: {},
|
||||
// 颜色盘
|
||||
colorList: [
|
||||
"#F29C1F",
|
||||
"#E163EF",
|
||||
@ -113,6 +152,28 @@ export default {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
// title: [
|
||||
// {
|
||||
// x: "center",
|
||||
// top: "20%",
|
||||
// text: 50,
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 42,
|
||||
// fontWeight: "bold",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// x: "center",
|
||||
// top: "50%",
|
||||
// text: "还款总额",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// fontWeight: 400,
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
grid3D: {
|
||||
show: false,
|
||||
width: "250%",
|
||||
@ -123,7 +184,7 @@ export default {
|
||||
left: "-75%",
|
||||
viewControl: {
|
||||
// 是否自动旋转
|
||||
autoRotate: false,
|
||||
autoRotate: true,
|
||||
// 调节角度
|
||||
alpha: 25,
|
||||
rotateSensitivity: 0, //设置旋转灵敏度，为0无法旋转
|
||||
@ -299,6 +360,49 @@ export default {
|
||||
.content-select {
|
||||
position: absolute;
|
||||
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 {
|
||||
@ -327,19 +431,19 @@ export default {
|
||||
.name {
|
||||
width: 3.5rem;
|
||||
padding-left: 0.3rem;
|
||||
color: #AAC6C7;
|
||||
color: #aac6c7;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.rate {
|
||||
width: 1.5rem;
|
||||
color: #808C9F;
|
||||
color: #808c9f;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 2rem;
|
||||
color: #808C9F;
|
||||
color: #808c9f;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -66,6 +66,7 @@ export default {
|
||||
fontSize: 12,
|
||||
color: "#808C9F",
|
||||
},
|
||||
confine:true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
@ -239,6 +240,7 @@ export default {
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,7 +24,9 @@
|
||||
<a>{{ index + 1 }}</a
|
||||
>{{ item.name }}
|
||||
</div>
|
||||
<div class="pic-top-value">{{ item.value }}</div>
|
||||
<div class="pic-top-value">
|
||||
<span>{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pic-bottom">
|
||||
<div
|
||||
@ -83,7 +85,7 @@ export default {
|
||||
justify-content: space-between;
|
||||
margin: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #2f78aa;
|
||||
border: 1px solid rgba(47, 120, 170, 0.4);
|
||||
|
||||
.pic-top {
|
||||
display: flex;
|
||||
@ -101,18 +103,27 @@ export default {
|
||||
margin-right: 0.5rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid #2f78aa;
|
||||
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;
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 09:42:49
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 11:04:18
|
||||
* @LastEditTime: 2024-10-22 09:30:05
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\today-inspection.vue
|
||||
* @Description: 病害巡检-今日巡查
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="today-left"><span>87</span></div>
|
||||
<div class="today-left"><span>86</span></div>
|
||||
<div class="today-right">
|
||||
<div class="right-sum"><span>261</span>个</div>
|
||||
<div class="right-rate"><span> 37 </span>%</div>
|
||||
@ -40,11 +40,23 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 1.5rem;
|
||||
font-size: 3rem;
|
||||
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 {
|
||||
@ -60,17 +72,34 @@ export default {
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
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: 4rem;
|
||||
padding-left: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
line-height: 3rem;
|
||||
@ -78,6 +107,21 @@ export default {
|
||||
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; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:25:29
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 13:34:00
|
||||
* @LastEditTime: 2024-10-22 09:30:43
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\work-order.vue
|
||||
* @Description: 病害巡检-工单统计
|
||||
-->
|
||||
@ -14,7 +14,7 @@
|
||||
v-for="(item, index) in workList"
|
||||
:key="`work-${index}`"
|
||||
>
|
||||
{{ item.value }}
|
||||
<span>{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -52,10 +52,12 @@ export default {
|
||||
> div {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
font-size: 1.5rem;
|
||||
line-height: 8rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
font-family: "DouYu";
|
||||
}
|
||||
|
||||
.work-div-0 {
|
||||
@ -63,6 +65,16 @@ export default {
|
||||
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 {
|
||||
@ -70,6 +82,16 @@ export default {
|
||||
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 {
|
||||
@ -77,6 +99,16 @@ export default {
|
||||
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>
|
||||
|
||||
@ -2,13 +2,15 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 16:05:15
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-17 16:41:33
|
||||
* @LastEditTime: 2024-10-21 14:26:47
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-screen.vue
|
||||
* @Description: 大屏-病害巡检
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="disease-content">病害巡检</div>
|
||||
<div class="disease-content">
|
||||
<div class="disease-title"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -24,5 +26,18 @@ export default {
|
||||
background-image: url("../../assets/screen/index/map-liaoning.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.disease-title {
|
||||
width: 20rem;
|
||||
height: 2.8rem;
|
||||
position: absolute;
|
||||
// top: 5rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%,5rem);
|
||||
background-image: url("../../assets/screen/index/disease-title.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,14 +2,24 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 15:33:00
|
||||
* @LastEditTime: 2024-10-22 09:52:38
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
<template>
|
||||
<div class="screen-content">
|
||||
<div class="screen-header">
|
||||
<div class="header-weather">多云转中雨</div>
|
||||
<div class="header-weather">
|
||||
<iframe
|
||||
width="150"
|
||||
scrolling="no"
|
||||
height="45"
|
||||
frameborder="0"
|
||||
allowtransparency="true"
|
||||
@load="loadFrame"
|
||||
src="https://i.tianqi.com?c=code&id=12&icon=1&color=%2389C5E8&py=shenyang&num=1&site=12"
|
||||
></iframe>
|
||||
</div>
|
||||
<div class="header-time">
|
||||
<div class="header-data">{{ dataTime }}</div>
|
||||
<div class="header-week">
|
||||
@ -17,7 +27,7 @@
|
||||
<span>{{ yearTime }}</span>
|
||||
</div>
|
||||
<div class="header-home">
|
||||
<i class="el-icon-s-home" @click="goIndex"></i>
|
||||
<div class="home" @click="goIndex"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -31,22 +41,15 @@
|
||||
:title="item.title"
|
||||
:class="item.class"
|
||||
>
|
||||
<template><component :is="item.component"></component></template>
|
||||
<!-- <template slot="operation" v-if="item.selectIsShow">
|
||||
<el-select
|
||||
v-model="item.select"
|
||||
popper-class="ioc-el-select"
|
||||
v-if="item.title === '证照临期超期情况'"
|
||||
>
|
||||
<el-option
|
||||
v-for="temp in item.selectCreditList"
|
||||
:key="temp.value"
|
||||
:label="temp.label"
|
||||
:value="temp.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template> -->
|
||||
<template
|
||||
><component :select="item.select" :is="item.component"></component
|
||||
></template>
|
||||
<template slot="operation" v-if="item.selectIsShow">
|
||||
<el-radio-group class="screen-checkBox" v-model="item.select">
|
||||
<el-radio-button label="1">公司</el-radio-button>
|
||||
<el-radio-button label="2">线路</el-radio-button>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
</module-block>
|
||||
</div>
|
||||
<div class="screen-right">
|
||||
@ -59,21 +62,12 @@
|
||||
:class="item.class"
|
||||
>
|
||||
<template><component :is="item.component"></component></template>
|
||||
<!-- <template slot="operation" v-if="item.selectIsShow">
|
||||
<el-select
|
||||
v-model="item.select"
|
||||
popper-class="ioc-el-select"
|
||||
v-if="item.title === '证照临期超期情况'"
|
||||
>
|
||||
<el-option
|
||||
v-for="temp in item.selectCreditList"
|
||||
:key="temp.value"
|
||||
:label="temp.label"
|
||||
:value="temp.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template> -->
|
||||
<template slot="operation" v-if="item.selectIsShow">
|
||||
<el-radio-group class="screen-checkBox" v-model="item.select">
|
||||
<el-radio-button label="1">公司</el-radio-button>
|
||||
<el-radio-button label="2">线路</el-radio-button>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
</module-block>
|
||||
</div>
|
||||
<!-- 底图切换 -->
|
||||
@ -82,6 +76,7 @@
|
||||
</div>
|
||||
<div class="screen-footer">
|
||||
<div class="footer-change-map">
|
||||
<template v-if="elementDiv !== 'DiseaseScreen'">
|
||||
<div
|
||||
class="change-map-div"
|
||||
:class="mapClick === item.click ? 'change-map-click' : ''"
|
||||
@ -91,6 +86,7 @@
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="footer-change-vue">
|
||||
<div
|
||||
@ -122,6 +118,11 @@ 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";
|
||||
export default {
|
||||
name: "BigScreen",
|
||||
components: {
|
||||
@ -138,6 +139,11 @@ export default {
|
||||
ManageMaintain,
|
||||
AnomalyFacilities,
|
||||
AncillaryFacilities,
|
||||
TrafficSafety,
|
||||
TrafficTrend,
|
||||
TrafficStatistic,
|
||||
TrafficRank,
|
||||
TrafficEmergency,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -153,39 +159,57 @@ export default {
|
||||
leftModuleList: [
|
||||
{
|
||||
width: "100%",
|
||||
height: "9rem",
|
||||
title: "管养道路统计",
|
||||
component: ManageMaintain,
|
||||
height: "14rem",
|
||||
title: "今日巡查",
|
||||
component: TodayInspection,
|
||||
selectIsShow: false,
|
||||
class: "one",
|
||||
},
|
||||
{
|
||||
width: "100%",
|
||||
height: "28rem",
|
||||
title: "附属设施分布",
|
||||
component: AncillaryFacilities,
|
||||
height: "14rem",
|
||||
title: "病害趋势",
|
||||
component: DiseaseTrends,
|
||||
selectIsShow: false,
|
||||
class: "twe",
|
||||
},
|
||||
{
|
||||
width: "100%",
|
||||
height: "15rem",
|
||||
title: "病害趋势",
|
||||
component: DiseaseCurrent,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
class: "twe",
|
||||
},
|
||||
],
|
||||
// 右侧切换模块
|
||||
rightModuleList: [
|
||||
{
|
||||
width: "100%",
|
||||
height: "15rem",
|
||||
title: "附属设施异常统计",
|
||||
component: AnomalyFacilities,
|
||||
height: "13rem",
|
||||
title: "工单统计",
|
||||
component: WorkOrder,
|
||||
selectIsShow: false,
|
||||
class: "one",
|
||||
},
|
||||
{
|
||||
width: "100%",
|
||||
height: "29rem",
|
||||
title: "路产统计",
|
||||
component: RoadStatistic,
|
||||
height: "17rem",
|
||||
title: "PIC排名",
|
||||
component: PicRank,
|
||||
selectIsShow: false,
|
||||
class: "twe",
|
||||
},
|
||||
{
|
||||
width: "100%",
|
||||
height: "13rem",
|
||||
title: "路面状况排名",
|
||||
component: RoadRank,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
class: "twe",
|
||||
},
|
||||
],
|
||||
// 切换地图按钮
|
||||
changeMapBtn: [
|
||||
@ -209,6 +233,10 @@ export default {
|
||||
this.setTime();
|
||||
},
|
||||
methods: {
|
||||
/* iframe加载完成回调方法 */
|
||||
loadFrame() {
|
||||
const iframe = document.getElementById("iframeId");
|
||||
},
|
||||
/* 获取当前时间 */
|
||||
setTime() {
|
||||
this.timeFlag = setInterval(() => {
|
||||
@ -274,7 +302,8 @@ export default {
|
||||
height: "15rem",
|
||||
title: "病害趋势",
|
||||
component: DiseaseCurrent,
|
||||
selectIsShow: false,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
@ -300,7 +329,8 @@ export default {
|
||||
height: "13rem",
|
||||
title: "路面状况排名",
|
||||
component: RoadRank,
|
||||
selectIsShow: false,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
@ -329,7 +359,8 @@ export default {
|
||||
height: "15rem",
|
||||
title: "附属设施异常统计",
|
||||
component: AnomalyFacilities,
|
||||
selectIsShow: false,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
class: "one",
|
||||
},
|
||||
{
|
||||
@ -337,6 +368,54 @@ export default {
|
||||
height: "29rem",
|
||||
title: "路产统计",
|
||||
component: RoadStatistic,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
} else if (item.component === "TrafficScreen") {
|
||||
this.leftModuleList = [
|
||||
{
|
||||
width: "100%",
|
||||
height: "14rem",
|
||||
title: "交安事件",
|
||||
component: TrafficSafety,
|
||||
selectIsShow: false,
|
||||
class: "one",
|
||||
},
|
||||
{
|
||||
width: "100%",
|
||||
height: "14rem",
|
||||
title: "交安事件趋势",
|
||||
component: TrafficTrend,
|
||||
selectIsShow: false,
|
||||
class: "twe",
|
||||
},
|
||||
{
|
||||
width: "100%",
|
||||
height: "17rem",
|
||||
title: "交安事件统计",
|
||||
component: TrafficStatistic,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
this.rightModuleList = [
|
||||
{
|
||||
width: "100%",
|
||||
height: "29rem",
|
||||
title: "交安事件排名",
|
||||
component: TrafficRank,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
class: "one",
|
||||
},
|
||||
{
|
||||
width: "100%",
|
||||
height: "15rem",
|
||||
title: "交安突发事件",
|
||||
component: TrafficEmergency,
|
||||
selectIsShow: false,
|
||||
class: "twe",
|
||||
},
|
||||
@ -413,13 +492,25 @@ export default {
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
::v-deep .screen-checkBox {
|
||||
.el-radio-button__inner {
|
||||
background-color: transparent;
|
||||
padding: 0 0.3rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||||
color: #1cb6ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 头部样式
|
||||
.screen-header {
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
padding: 0 3rem;
|
||||
padding: 1rem 3rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
display: flex;
|
||||
@ -459,8 +550,14 @@ export default {
|
||||
}
|
||||
|
||||
.header-home {
|
||||
.home {
|
||||
cursor: pointer;
|
||||
font-size: 1.8rem;
|
||||
height: 1.5rem;
|
||||
width: 1.2rem;
|
||||
background-image: url("../../assets/screen/index/exit.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 09:29:51
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 09:50:09
|
||||
* @LastEditTime: 2024-10-21 18:00:45
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\module-block.vue
|
||||
* @Description: 大屏数据栏
|
||||
-->
|
||||
@ -10,7 +10,7 @@
|
||||
<div class="module-block" :style="{ width, height }">
|
||||
<div class="module-block__header">
|
||||
<div class="header-title">
|
||||
{{ title }}
|
||||
<span>{{ title }}</span>
|
||||
</div>
|
||||
<div class="header-operation" v-if="$slots.operation">
|
||||
<slot name="operation"></slot>
|
||||
@ -55,6 +55,7 @@ export default {
|
||||
.module-block__header {
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
background-image: url("../../assets/screen/index/title.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
@ -68,11 +69,14 @@ export default {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-family: "ys";
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.header-operation {
|
||||
width: calc(100% - 18rem);
|
||||
height: 2.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 15:18:03
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 16:37:19
|
||||
* @LastEditTime: 2024-10-22 09:05:30
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\road-components\ancillary-facilities.vue
|
||||
* @Description: 道路资产大屏-附属设施分布
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="ancillary-top">21465</div>
|
||||
<div class="ancillary-top"><span>21465</span></div>
|
||||
<div class="ancillary-bottom">
|
||||
<div
|
||||
:class="`ancillary-bottom-${index}`"
|
||||
@ -18,8 +18,8 @@
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div>
|
||||
<a>{{ item.value }}</a
|
||||
><span>{{ item.unit }}</span>
|
||||
<span>{{ item.value }}</span
|
||||
><a>{{ item.unit }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -60,12 +60,24 @@ export default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
line-height: 8rem;
|
||||
font-size: 2rem;
|
||||
padding-right: 2rem;
|
||||
background-image: url("../../../assets/screen/road/ancillary-top.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 90% 80%;
|
||||
background-position: 50%;
|
||||
|
||||
span {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
font-family: "DouYu";
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#2773d0
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
|
||||
.ancillary-bottom {
|
||||
@ -82,9 +94,17 @@ export default {
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding-left: 3.5rem;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.8rem;
|
||||
|
||||
span {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 800;
|
||||
font-family: "DouYu";
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 0.7rem;
|
||||
color: #aac6c7;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
@ -95,7 +115,7 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
background-position: 50%;
|
||||
|
||||
a {
|
||||
span {
|
||||
color: #ac8018;
|
||||
}
|
||||
}
|
||||
@ -106,7 +126,7 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
background-position: 50%;
|
||||
|
||||
a {
|
||||
span {
|
||||
color: #ac8018;
|
||||
}
|
||||
}
|
||||
@ -117,7 +137,7 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
background-position: 50%;
|
||||
|
||||
a {
|
||||
span {
|
||||
color: #08afa3;
|
||||
}
|
||||
}
|
||||
@ -128,7 +148,7 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
background-position: 50%;
|
||||
|
||||
a {
|
||||
span {
|
||||
color: #08afa3;
|
||||
}
|
||||
}
|
||||
@ -139,7 +159,7 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
background-position: 50%;
|
||||
|
||||
a {
|
||||
span {
|
||||
color: #3f84e3;
|
||||
}
|
||||
}
|
||||
@ -150,7 +170,7 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
background-position: 50%;
|
||||
|
||||
a {
|
||||
span {
|
||||
color: #3f84e3;
|
||||
}
|
||||
}
|
||||
@ -161,7 +181,7 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
background-position: 50%;
|
||||
|
||||
a {
|
||||
span {
|
||||
color: #ac8018;
|
||||
}
|
||||
}
|
||||
@ -172,7 +192,7 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
background-position: 50%;
|
||||
|
||||
a {
|
||||
span {
|
||||
color: #ac8018;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,14 +2,27 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 15:21:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 17:06:39
|
||||
* @LastEditTime: 2024-10-21 16:03:14
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\road-components\anomaly-facilities.vue
|
||||
* @Description: 附属设施异常统计
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="anomaly-select">下拉框</div>
|
||||
<div class="anomaly-select">
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="itemSelect"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in currentList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div ref="anomalyChart" class="anomaly-echart"></div>
|
||||
</div>
|
||||
</template>
|
||||
@ -19,7 +32,33 @@ import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "AnomalyFacilities",
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
// 下拉框绑定
|
||||
itemSelect: "1",
|
||||
// 下拉框数据
|
||||
currentList: [
|
||||
{
|
||||
label: "分公司",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "分公司2",
|
||||
value: "2",
|
||||
},
|
||||
{
|
||||
label: "分公3",
|
||||
value: "3",
|
||||
},
|
||||
{
|
||||
label: "分公司4",
|
||||
value: "4",
|
||||
},
|
||||
{
|
||||
label: "分公司5",
|
||||
value: "5",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getChartData();
|
||||
@ -315,9 +354,54 @@ export default {
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.anomaly-select {
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.anomaly-echart {
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="maintain-left">286<span>km</span></div>
|
||||
<div class="maintain-right">86<span>条</span></div>
|
||||
<div class="maintain-left"><span>286</span>km</div>
|
||||
<div class="maintain-right"><span>86</span>条</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -39,12 +39,14 @@ export default {
|
||||
line-height: 5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1rem;
|
||||
color: #aac6c7;
|
||||
|
||||
span {
|
||||
padding-left: 0.5rem;
|
||||
color: #d1d1d1;
|
||||
font-size: 1rem;
|
||||
padding-right: 0.5rem;
|
||||
font-weight: 800;
|
||||
font-family: "DouYu";
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -53,6 +55,16 @@ export default {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100%;
|
||||
background-size: 100% 65%;
|
||||
|
||||
span {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#e9bc5c
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
|
||||
.maintain-right {
|
||||
@ -60,6 +72,16 @@ export default {
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100%;
|
||||
background-size: 100% 65%;
|
||||
|
||||
span {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#2773d0
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 15:22:31
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 17:29:19
|
||||
* @LastEditTime: 2024-10-22 09:13:22
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\road-components\road-statistic.vue
|
||||
* @Description: 道路资产大屏-路产统计
|
||||
-->
|
||||
@ -16,19 +16,29 @@
|
||||
>
|
||||
<div class="road-top">
|
||||
<div class="road-top-name">
|
||||
<a>{{ index + 1 }}</a
|
||||
<a>{{ index + 1 < 10 ? "0" + (index + 1) : index + 1 }}</a
|
||||
>{{ item.name }}
|
||||
</div>
|
||||
<div class="road-top-value">{{ item.value }}</div>
|
||||
<div class="road-top-value">
|
||||
<span>{{ item.value }}</span
|
||||
><a>个</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="road-bottom">
|
||||
<div
|
||||
:style="{ width: `${(item.value / 300) * 100}%` }"
|
||||
:class="`road-bottom-${index}`"
|
||||
class="road-bottom-div"
|
||||
:style="{ width: `${item.value * 10}%` }"
|
||||
:class="`bottom-${index}`"
|
||||
>
|
||||
<div
|
||||
v-for="(it, ind) in item.value"
|
||||
:key="`info-${ind}`"
|
||||
class="road-info"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -37,16 +47,16 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
roadList: [
|
||||
{ name: "G10152", value: 523 },
|
||||
{ name: "G10152", value: 523 },
|
||||
{ name: "G10152", value: 523 },
|
||||
{ name: "G10152", value: 523 },
|
||||
{ name: "G10152", value: 523 },
|
||||
{ name: "G10152", value: 523 },
|
||||
{ name: "G10152", value: 523 },
|
||||
{ name: "G10152", value: 523 },
|
||||
{ name: "G10152", value: 523 },
|
||||
{ name: "G10152", value: 523 },
|
||||
{ name: "G10152", value: 7 },
|
||||
{ name: "G10152", value: 6 },
|
||||
{ name: "G10152", value: 5 },
|
||||
{ name: "G10152", value: 5 },
|
||||
{ name: "G10152", value: 1 },
|
||||
{ name: "G10152", value: 5 },
|
||||
{ name: "G10152", value: 3 },
|
||||
{ name: "G10152", value: 8 },
|
||||
{ name: "G10152", value: 3 },
|
||||
{ name: "G10152", value: 6 },
|
||||
],
|
||||
};
|
||||
},
|
||||
@ -61,7 +71,7 @@ export default {
|
||||
color: #ffffff;
|
||||
|
||||
.road-div {
|
||||
height: 3rem;
|
||||
height: 2.5rem;
|
||||
width: 100%;
|
||||
padding: 0 1.5rem;
|
||||
display: flex;
|
||||
@ -89,12 +99,95 @@ export default {
|
||||
.road-top {
|
||||
.road-top-name {
|
||||
line-height: 1.5rem;
|
||||
color: #c7daf2;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 1.5rem;
|
||||
color: #808c9f;
|
||||
}
|
||||
}
|
||||
|
||||
.road-top-value {
|
||||
span {
|
||||
font-family: "DouYu";
|
||||
|
||||
color: #c7daf2;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#2773d0
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
|
||||
a {
|
||||
margin-left: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
color: #808c9f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.road-bottom {
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
background-color: red;
|
||||
background-color: rgba(50, 72, 127, 0.3);
|
||||
position: relative;
|
||||
|
||||
.img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.road-bottom-div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.road-info {
|
||||
height: 100%;
|
||||
width: 40px;
|
||||
border-left: 2px black solid;
|
||||
margin: 0 0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-0 {
|
||||
background: linear-gradient(90deg, #0e183e 0%, #4087e8 100%);
|
||||
}
|
||||
|
||||
.bottom-1 {
|
||||
background: linear-gradient(90deg, #0e183e 0%, #08b4a6 100%);
|
||||
}
|
||||
|
||||
.bottom-2 {
|
||||
background: linear-gradient(90deg, #0e183e 0%, #be8b13 100%);
|
||||
}
|
||||
|
||||
.bottom-3 {
|
||||
background: linear-gradient(90deg, #0e183e 0%, #4087e8 100%);
|
||||
}
|
||||
.bottom-4 {
|
||||
background: linear-gradient(90deg, #0e183e 0%, #08b4a6 100%);
|
||||
}
|
||||
.bottom-5 {
|
||||
background: linear-gradient(90deg, #0e183e 0%, #be8b13 100%);
|
||||
}
|
||||
.bottom-6 {
|
||||
background: linear-gradient(90deg, #0e183e 0%, #4087e8 100%);
|
||||
}
|
||||
.bottom-7 {
|
||||
background: linear-gradient(90deg, #0e183e 0%, #08b4a6 100%);
|
||||
}
|
||||
.bottom-8 {
|
||||
background: linear-gradient(90deg, #0e183e 0%, #be8b13 100%);
|
||||
}
|
||||
.bottom-9 {
|
||||
background: linear-gradient(90deg, #0e183e 0%, #4087e8 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
190
src/views/big-screen/traffic-components/traffic-emergency.vue
Normal file
190
src/views/big-screen/traffic-components/traffic-emergency.vue
Normal file
@ -0,0 +1,190 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 10:12:55
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-22 09:38:45
|
||||
* @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.name }}</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";
|
||||
|
||||
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: [
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</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>
|
||||
230
src/views/big-screen/traffic-components/traffic-rank.vue
Normal file
230
src/views/big-screen/traffic-components/traffic-rank.vue
Normal file
@ -0,0 +1,230 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 10:11:03
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-21 14:04:49
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-rank.vue
|
||||
* @Description: 交安事件大屏-交安事件排名
|
||||
-->
|
||||
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<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.value / 600) * 100}%` }"
|
||||
:class="`rank-bottom-${index}`"
|
||||
></div>
|
||||
<div class="rank-bottom-tip"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TrafficRank",
|
||||
data() {
|
||||
return {
|
||||
// 排名数据
|
||||
rankList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取排名数据 */
|
||||
getData() {
|
||||
this.rankList = [
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 456 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 356 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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>
|
||||
125
src/views/big-screen/traffic-components/traffic-safety.vue
Normal file
125
src/views/big-screen/traffic-components/traffic-safety.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 09:59:32
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-22 09:29:30
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-safety.vue
|
||||
* @Description: 交安事件大屏-交安事件
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="traffic-left"><span>87</span></div>
|
||||
<div class="traffic-right">
|
||||
<div class="right-sum"><span>261</span>个</div>
|
||||
<div class="right-rate"><span> 37 </span>%</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TrafficSafety",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.traffic-left {
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 1.5rem;
|
||||
font-size: 2rem;
|
||||
background-image: url("../../../assets/screen/traffic/traffic-left.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 85%;
|
||||
background-position: 100% 60%;
|
||||
|
||||
span {
|
||||
font-family: "DouYu";
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#2773d0
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
|
||||
.traffic-right {
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
|
||||
.right-sum {
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
padding-left: 1rem;
|
||||
justify-content: center;
|
||||
line-height: 3rem;
|
||||
background-image: url("../../../assets/screen/traffic/right-sum.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: 100% 50%;
|
||||
color:#AAC6C7;
|
||||
font-size: 0.9rem;
|
||||
|
||||
span {
|
||||
margin-right: 0.5rem;
|
||||
|
||||
font-size: 1.2rem;
|
||||
font-family: "DouYu";
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#21f1e1
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
|
||||
.right-rate {
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-left: 1rem;
|
||||
line-height: 3rem;
|
||||
background-image: url("../../../assets/screen/traffic/right-rate.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: 100% 50%;
|
||||
color:#AAC6C7;
|
||||
font-size: 0.9rem;
|
||||
|
||||
span {
|
||||
margin-right: 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
font-family: "DouYu";
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#e9bc5c
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
316
src/views/big-screen/traffic-components/traffic-statistic.vue
Normal file
316
src/views/big-screen/traffic-components/traffic-statistic.vue
Normal file
@ -0,0 +1,316 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 10:06:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-22 09:27:49
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-statistic.vue
|
||||
* @Description: 交安事件大屏-交安事件统计
|
||||
-->
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="statistic-select">
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="itemSelect"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in currentList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div ref="statisticChart" class="statistic-chart"></div>
|
||||
<div class="statistic-lenged">
|
||||
<div
|
||||
class="lenged-item"
|
||||
v-for="(item, index) in echartList"
|
||||
:key="`static-${index}`"
|
||||
>
|
||||
<div class="index" :style="{ backgroundColor: colorList[index] }"></div>
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="rate">{{ item.rate }}</div>
|
||||
<div class="value">{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "TrafficStatistic",
|
||||
data() {
|
||||
return {
|
||||
// 下拉数据绑定
|
||||
itemSelect: "1",
|
||||
// 下拉框数据
|
||||
currentList: [
|
||||
{
|
||||
label: "分公司",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "分公司2",
|
||||
value: "2",
|
||||
},
|
||||
{
|
||||
label: "分公3",
|
||||
value: "3",
|
||||
},
|
||||
{
|
||||
label: "分公司4",
|
||||
value: "4",
|
||||
},
|
||||
{
|
||||
label: "分公司5",
|
||||
value: "5",
|
||||
},
|
||||
],
|
||||
// 取色盘
|
||||
colorList: [
|
||||
"#18F7FF",
|
||||
"#6FC36F",
|
||||
"#4C83FF",
|
||||
"#FFEA68",
|
||||
"#FF8F5F",
|
||||
"#FC5976",
|
||||
"#AE74F3",
|
||||
"#4C21D5",
|
||||
"#6669DB",
|
||||
],
|
||||
echartList: [
|
||||
{
|
||||
value: 335,
|
||||
name: "脱岗",
|
||||
rate: "110%",
|
||||
},
|
||||
{
|
||||
value: 234,
|
||||
name: "在岗",
|
||||
rate: "110%",
|
||||
},
|
||||
{
|
||||
value: 335,
|
||||
name: "比骚大苏打是",
|
||||
rate: "110%",
|
||||
},
|
||||
{
|
||||
value: 234,
|
||||
name: "发士大夫",
|
||||
rate: "110%",
|
||||
},
|
||||
{
|
||||
value: 335,
|
||||
name: "的风格",
|
||||
rate: "110%",
|
||||
},
|
||||
{
|
||||
value: 234,
|
||||
name: "返回",
|
||||
rate: "110%",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getChartData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取echart图数据 */
|
||||
getChartData() {
|
||||
this.$nextTick(() => {
|
||||
this.drawChart();
|
||||
});
|
||||
},
|
||||
/* 绘制echart图 */
|
||||
drawChart() {
|
||||
const echart = echarts.init(this.$refs.statisticChart);
|
||||
echart.setOption({
|
||||
color: this.colorList,
|
||||
tooltip: {
|
||||
confine: true,
|
||||
backgroundColor: "rgba(9, 24, 48, 0.5)",
|
||||
borderColor: "rgba(75, 253, 238, 0.4)",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#808C9F",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "0%",
|
||||
left: "0%",
|
||||
right: "0%",
|
||||
bottom: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
orient: "horizontal",
|
||||
// itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
icon: "circle",
|
||||
right: 40,
|
||||
bottom: "0%",
|
||||
textStyle: {
|
||||
color: "rgba(0,0,0,0.65)",
|
||||
},
|
||||
height: 10,
|
||||
formatter: (name) => {
|
||||
const value = this.echartList.find(
|
||||
(item) => item.name === name
|
||||
).value;
|
||||
return `${name}：${value} 人`;
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["45%", "60%"],
|
||||
center: ["50%", "50%"],
|
||||
label: {
|
||||
// 鼠标悬浮具体数据显示
|
||||
show: false,
|
||||
position: "center",
|
||||
formatter: (params) => {
|
||||
return `{a|${params.percent.toFixed()}%}\n{b|${params.name}}`;
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontFamily:"DouYu",
|
||||
fontSize: 28,
|
||||
color: "rgba(255, 183, 89, 0.8)",
|
||||
},
|
||||
b: {
|
||||
fontFamily:"DinBm",
|
||||
fontSize: 12,
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 20,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
data: this.echartList,
|
||||
},
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
echart.resize();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.statistic-select {
|
||||
position: absolute;
|
||||
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 {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
background-image: url("../../../assets/screen/traffic/statistic-chart.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100%;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.statistic-lenged {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
z-index: 0;
|
||||
|
||||
.lenged-item {
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
margin: 0.1rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #808c9f;
|
||||
font-size: 0.7rem;
|
||||
|
||||
.index {
|
||||
width: 0.8rem;
|
||||
height: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.rate {
|
||||
font-size: 0.8rem;
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 0.8rem;
|
||||
width: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
413
src/views/big-screen/traffic-components/traffic-trend.vue
Normal file
413
src/views/big-screen/traffic-components/traffic-trend.vue
Normal file
@ -0,0 +1,413 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 10:03:08
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-21 15:59:07
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-trend.vue
|
||||
* @Description: 交安事件大屏-交安事件趋势
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="traffic-select">
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="itemSelect"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in trafficList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div ref="trafficChart" class="traffic-echart"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "TrafficTrend",
|
||||
data() {
|
||||
return {
|
||||
// 下拉框选中绑定
|
||||
itemSelect: "1",
|
||||
// 下拉框数据
|
||||
trafficList: [
|
||||
{
|
||||
label: "分公司",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "分公司2",
|
||||
value: "2",
|
||||
},
|
||||
{
|
||||
label: "分公3",
|
||||
value: "3",
|
||||
},
|
||||
{
|
||||
label: "分公司4",
|
||||
value: "4",
|
||||
},
|
||||
{
|
||||
label: "分公司5",
|
||||
value: "5",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getChartData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取柱状图数据 */
|
||||
getChartData() {
|
||||
this.$nextTick(() => {
|
||||
this.drawChart();
|
||||
});
|
||||
},
|
||||
/* 绘制echart */
|
||||
drawChart() {
|
||||
const chart = echarts.init(this.$refs.trafficChart);
|
||||
chart.setOption({
|
||||
// backgroundColor: "#041139",
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "rgba(9, 24, 48, 0.5)",
|
||||
borderColor: "rgba(75, 253, 238, 0.4)",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#808C9F",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "10%",
|
||||
right: 0,
|
||||
bottom: "20%",
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
data: ["fdfs", "frffs", "wdwe", "10-1", "asdasd", "asd", "fdfs"],
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#808C9F",
|
||||
fontSize: 12,
|
||||
},
|
||||
interval: 0,
|
||||
},
|
||||
axisLine: {
|
||||
show: false, //不显示x轴
|
||||
lineStyle: {
|
||||
color: "rgba(53,65,95,1)",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false, //不显示刻度
|
||||
},
|
||||
boundaryGap: true,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: "数量",
|
||||
nameTextStyle: {
|
||||
color: "#C7DAF2",
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false, //不显示x轴
|
||||
lineStyle: {
|
||||
color: "rgba(53,65,95,1)",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#808C9F",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
// 柱体
|
||||
{
|
||||
name: "人数",
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
borderColor: "#08B4A6",
|
||||
borderWidth: 1,
|
||||
},
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "rgba(105,160,231,0.1)",
|
||||
},
|
||||
// itemStyle: {
|
||||
|
||||
// },
|
||||
label: {
|
||||
show: false, //每条柱状图是否显示数字
|
||||
formatter: "{c}",
|
||||
position: "top",
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 15,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#034299",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#35F0FF",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 25,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#033E43",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00FFEA",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 35,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#034299",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#35F0FF",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 45,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#033E43",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00FFEA",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 55,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#034299",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#35F0FF",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 65,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#033E43",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00FFEA",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 75,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#034299",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#35F0FF",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
chart.resize();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.traffic-select {
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.traffic-echart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user