fix：联调接口，差交安事件
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:19:56
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-23 14:32:47
|
||||
* @LastEditTime: 2024-10-24 16:37:52
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-current.vue
|
||||
* @Description: 病害巡检-病害三维饼图
|
||||
-->
|
||||
@@ -31,8 +31,8 @@
|
||||
:key="`chart-${index}`"
|
||||
>
|
||||
<div class="index" :style="{ backgroundColor: colorList[index] }"></div>
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="rate">{{ item.value }}</div>
|
||||
<div class="name">{{ item.typeName }}</div>
|
||||
<div class="rate">{{ item.rate }}%</div>
|
||||
<div class="value">{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -42,35 +42,21 @@
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import "echarts-gl";
|
||||
import { roadCurrent, getDropList } from "@/api/xj/screen/disease-screen";
|
||||
export default {
|
||||
name: "DiseaseCurrent",
|
||||
props: {
|
||||
select: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 下拉框绑定
|
||||
itemSelect: "1",
|
||||
itemSelect: "",
|
||||
// 下拉框数据
|
||||
currentList: [
|
||||
{
|
||||
label: "分公司",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "分公司2",
|
||||
value: "2",
|
||||
},
|
||||
{
|
||||
label: "分公3",
|
||||
value: "3",
|
||||
},
|
||||
{
|
||||
label: "分公司4",
|
||||
value: "4",
|
||||
},
|
||||
{
|
||||
label: "分公司5",
|
||||
value: "5",
|
||||
},
|
||||
],
|
||||
currentList: [],
|
||||
// 配置项数据
|
||||
options: {},
|
||||
// 颜色盘
|
||||
@@ -89,24 +75,57 @@ export default {
|
||||
dataList: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
select: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.getCurrentList();
|
||||
this.getChartList();
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
itemSelect: {
|
||||
handler() {
|
||||
this.getChartList();
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getChartList();
|
||||
},
|
||||
methods: {
|
||||
/* 获取右上角下拉框数据 */
|
||||
getCurrentList() {
|
||||
getDropList({ type: this.select }).then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.currentList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 获取echart数据 */
|
||||
getChartList() {
|
||||
this.dataList = [
|
||||
{ value: 500, name: "1111" },
|
||||
{ value: 600, name: "456" },
|
||||
{ value: 400, name: "撒大大大" },
|
||||
{ value: 550, name: "的风格" },
|
||||
{ value: 200, name: "规范化" },
|
||||
{ value: 900, name: "规划" },
|
||||
{ value: 100, name: "回家" },
|
||||
];
|
||||
this.$nextTick(() => {
|
||||
//获取echart图所需的options
|
||||
this.drawChart();
|
||||
const data = {
|
||||
type: this.select,
|
||||
itemName: this.itemSelect,
|
||||
};
|
||||
roadCurrent(data).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
let allSum = 0;
|
||||
data?.forEach((element) => {
|
||||
allSum += element.value;
|
||||
});
|
||||
this.dataList = data.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
rate: ((item.value / allSum) * 100).toFixed(1),
|
||||
};
|
||||
});
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
//获取echart图所需的options
|
||||
this.drawChart();
|
||||
});
|
||||
});
|
||||
},
|
||||
/* 绘制echart图 */
|
||||
@@ -131,7 +150,7 @@ export default {
|
||||
formatter: (params) => {
|
||||
return `${params.marker}${params.seriesName}：${
|
||||
data[params.seriesIndex].value
|
||||
}张`;
|
||||
}`;
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
@@ -152,28 +171,6 @@ 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%",
|
||||
@@ -195,7 +192,9 @@ export default {
|
||||
//最上方的series
|
||||
series: this.getPie3D(this.dataList, 0.8),
|
||||
});
|
||||
window.addEventListener("resize", chart.resize());
|
||||
window.addEventListener("resize", () => {
|
||||
chart.resize();
|
||||
});
|
||||
}
|
||||
},
|
||||
/* 绘制3d饼图配置项 */
|
||||
@@ -216,9 +215,9 @@ export default {
|
||||
|
||||
const seriesItem = {
|
||||
name:
|
||||
typeof pieData[i].name === "undefined"
|
||||
typeof pieData[i].typeName === "undefined"
|
||||
? `series${i}`
|
||||
: pieData[i].name,
|
||||
: pieData[i].typeName,
|
||||
type: "surface",
|
||||
parametric: true,
|
||||
wireframe: {
|
||||
@@ -251,12 +250,13 @@ export default {
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value / 100
|
||||
// 设置饼图高度
|
||||
series[i].pieData.value / 1000
|
||||
);
|
||||
|
||||
startValue = endValue;
|
||||
|
||||
legendData.push(series[i].name);
|
||||
legendData.push(series[i].typeName);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
@@ -355,6 +355,7 @@ export default {
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.content-select {
|
||||
@@ -429,14 +430,14 @@ export default {
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 3.5rem;
|
||||
width: 4.5rem;
|
||||
padding-left: 0.3rem;
|
||||
color: #aac6c7;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.rate {
|
||||
width: 1.5rem;
|
||||
width: 2rem;
|
||||
color: #808c9f;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:16:30
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 11:32:35
|
||||
* @LastEditTime: 2024-10-24 17:09:27
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-trends.vue
|
||||
* @Description: 病害巡检-病害趋势
|
||||
-->
|
||||
@@ -12,10 +12,14 @@
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { roadTrends } from "@/api/xj/screen/disease-screen";
|
||||
export default {
|
||||
name: "DiseaseTrends",
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
// echart数据
|
||||
echartList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.geteEhartList();
|
||||
@@ -23,12 +27,35 @@ export default {
|
||||
methods: {
|
||||
/* 获取折线图数据 */
|
||||
geteEhartList() {
|
||||
this.$nextTick(() => {
|
||||
this.drawChart();
|
||||
roadTrends().then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.echartList = data;
|
||||
this.$nextTick(() => {
|
||||
this.drawChart();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 绘制折线图 */
|
||||
drawChart() {
|
||||
const xData = this.echartList.map((item) => {
|
||||
return item.date;
|
||||
});
|
||||
const yData1 = this.echartList.map((item) => {
|
||||
return item.A1000;
|
||||
});
|
||||
const yData2 = this.echartList.map((item) => {
|
||||
return item.A2001;
|
||||
});
|
||||
const yData3 = this.echartList.map((item) => {
|
||||
return item.A2000;
|
||||
});
|
||||
const yData4 = this.echartList.map((item) => {
|
||||
return item.A0;
|
||||
});
|
||||
const yData5 = this.echartList.map((item) => {
|
||||
return item.A1;
|
||||
});
|
||||
const chart = echarts.init(this.$refs.trendsChart);
|
||||
chart.setOption({
|
||||
//你的代码
|
||||
@@ -49,8 +76,8 @@ export default {
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "15%",
|
||||
left: 0,
|
||||
top: "25%",
|
||||
left: "0%",
|
||||
right: "10%",
|
||||
bottom: "10%",
|
||||
containLabel: true,
|
||||
@@ -66,7 +93,7 @@ export default {
|
||||
fontSize: 12,
|
||||
color: "#808C9F",
|
||||
},
|
||||
confine:true,
|
||||
confine: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
@@ -85,6 +112,7 @@ export default {
|
||||
fontSize: 12,
|
||||
},
|
||||
boundaryGap: false, // true折线图以x轴刻度为中心点 false折线图折线从头开始
|
||||
data: xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
@@ -111,7 +139,7 @@ export default {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "龟裂",
|
||||
name: "坑槽",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
@@ -137,10 +165,10 @@ export default {
|
||||
itemStyle: {
|
||||
color: "#FFC100", // 节点颜色
|
||||
},
|
||||
data: [15, 29, 32, 5, 14, 42],
|
||||
data: yData1,
|
||||
},
|
||||
{
|
||||
name: "车辙",
|
||||
name: "块状修补(沥青)",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
@@ -166,10 +194,10 @@ export default {
|
||||
itemStyle: {
|
||||
color: "#08B4A6",
|
||||
},
|
||||
data: [30, 35, 32, 35, 18, 72],
|
||||
data: yData2,
|
||||
},
|
||||
{
|
||||
name: "坑槽",
|
||||
name: "条状修补(沥青)",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
@@ -195,7 +223,7 @@ export default {
|
||||
itemStyle: {
|
||||
color: "#146fd7",
|
||||
},
|
||||
data: [20, 25, 12, 25, 8, 62],
|
||||
data: yData3,
|
||||
},
|
||||
{
|
||||
name: "横向裂缝",
|
||||
@@ -224,7 +252,81 @@ export default {
|
||||
itemStyle: {
|
||||
color: "#994EFF",
|
||||
},
|
||||
data: [40, 45, 32, 45, 38, 82],
|
||||
data: yData4,
|
||||
},
|
||||
{
|
||||
name: "纵向裂缝",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#994EFF",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(153,78,255,0)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "#994EFF",
|
||||
},
|
||||
// 设置节点样式
|
||||
showSymbol: false,
|
||||
symbol: "circle", // 可以选择 circle, diamond, pin 等
|
||||
symbolSize: 10, // 节点大小
|
||||
itemStyle: {
|
||||
color: "#994EFF",
|
||||
},
|
||||
data: yData5,
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
// 设置滚动条的隐藏与显示
|
||||
show: false,
|
||||
// 设置滚动条类型
|
||||
type: "slider",
|
||||
// 设置背景颜色
|
||||
backgroundColor: "rgba(225,225,225,0.2)",
|
||||
// 设置选中范围的填充颜色
|
||||
fillerColor: "#ccc",
|
||||
// 设置边框颜色
|
||||
borderColor: "rgba(225,225,225,0.2)",
|
||||
// 是否显示detail，即拖拽时候显示详细数值信息
|
||||
showDetail: false,
|
||||
// 数据窗口范围的起始数值
|
||||
startValue: 0,
|
||||
// 数据窗口范围的结束数值（一页显示多少条数据）
|
||||
endValue: 6,
|
||||
// empty：当前数据窗口外的数据，被设置为空。
|
||||
// 即不会影响其他轴的数据范围
|
||||
filterMode: "empty",
|
||||
// 设置滚动条宽度，相对于盒子宽度
|
||||
width: "80%",
|
||||
// 设置滚动条高度
|
||||
height: 5,
|
||||
// 设置滚动条显示位置
|
||||
left: "center",
|
||||
// 是否锁定选择区域（或叫做数据窗口）的大小
|
||||
zoomLoxk: true,
|
||||
// 控制手柄的尺寸
|
||||
handleSize: 10,
|
||||
// dataZoom-slider组件离容器下侧的距离
|
||||
bottom: 0,
|
||||
},
|
||||
{
|
||||
// 没有下面这块的话，只能拖动滚动条，
|
||||
// 鼠标滚轮在区域内不能控制外部滚动条
|
||||
type: "inside",
|
||||
// 滚轮是否触发缩放
|
||||
zoomOnMouseWheel: false,
|
||||
// 鼠标滚轮触发滚动
|
||||
moveOnMouseMove: true,
|
||||
moveOnMouseWheel: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:31:31
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 14:22:33
|
||||
* @LastEditTime: 2024-10-24 15:35:02
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\pic-rank.vue
|
||||
* @Description: 病害巡检-pic排名
|
||||
-->
|
||||
@@ -13,6 +13,7 @@
|
||||
class="vue-scroll"
|
||||
:class-option="defaultOption"
|
||||
:data="picList"
|
||||
v-if="picList.length > 4"
|
||||
>
|
||||
<div
|
||||
class="pic-div"
|
||||
@@ -22,24 +23,48 @@
|
||||
<div class="pic-top">
|
||||
<div class="pic-top-name">
|
||||
<a>{{ index + 1 }}</a
|
||||
>{{ item.name }}
|
||||
>{{ item.roadName }}
|
||||
</div>
|
||||
<div class="pic-top-value">
|
||||
<span>{{ item.value }}</span>
|
||||
<span>{{ item.pci }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pic-bottom">
|
||||
<div
|
||||
:style="{ width: `${(item.value / 300) * 100}%` }"
|
||||
: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",
|
||||
@@ -58,15 +83,22 @@ export default {
|
||||
waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
|
||||
},
|
||||
// 排名数据
|
||||
picList: [
|
||||
{ name: "沈阳绕城高速（G1501）", value: 95 },
|
||||
{ name: "沈阳绕城高速（G1501）", value: 75 },
|
||||
{ name: "沈阳绕城高速（G1501）", value: 70 },
|
||||
{ name: "沈阳绕城高速（G1501）", value: 65 },
|
||||
{ name: "沈阳绕城高速（G1501）", value: 55 },
|
||||
],
|
||||
picList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getPicData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取数据 */
|
||||
getPicData() {
|
||||
roadPic().then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.picList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:33:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 15:05:44
|
||||
* @LastEditTime: 2024-10-25 16:19:23
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\road-rank.vue
|
||||
* @Description: 病害巡检-路面状况排名
|
||||
-->
|
||||
@@ -13,6 +13,7 @@
|
||||
class="vue-scroll"
|
||||
:class-option="defaultOption"
|
||||
:data="roadList"
|
||||
v-if="roadList.length > 4"
|
||||
>
|
||||
<div
|
||||
class="road-div"
|
||||
@@ -22,19 +23,66 @@
|
||||
<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.tip}`" class="rate">
|
||||
环比：<span>{{ item.rate }}</span>
|
||||
<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 {
|
||||
// 轮播配置
|
||||
@@ -49,15 +97,34 @@ export default {
|
||||
waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
|
||||
},
|
||||
// 路面状况排名数据
|
||||
roadList: [
|
||||
{ name: "G10152", value: 523, rate: 0.23, tip: "up" },
|
||||
{ name: "G10152", value: 523, rate: 0.23, tip: "up" },
|
||||
{ name: "G10152", value: 523, rate: 0.23, tip: "down" },
|
||||
{ name: "G10152", value: 523, rate: 0.23, tip: "down" },
|
||||
{ name: "G10152", value: 523, rate: 0.23, tip: "up" },
|
||||
],
|
||||
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),
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -70,9 +137,8 @@ export default {
|
||||
overflow: hidden;
|
||||
|
||||
.road-div {
|
||||
height: 2rem;
|
||||
min-height: 2rem;
|
||||
width: 100%;
|
||||
padding: 0 1.5rem;
|
||||
display: flex;
|
||||
|
||||
> div {
|
||||
|
||||
@@ -2,26 +2,57 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 09:42:49
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-22 09:30:05
|
||||
* @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>86</span></div>
|
||||
<div class="today-left">
|
||||
<span>{{ today }}</span>
|
||||
</div>
|
||||
<div class="today-right">
|
||||
<div class="right-sum"><span>261</span>个</div>
|
||||
<div class="right-rate"><span> 37 </span>%</div>
|
||||
<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 {};
|
||||
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>
|
||||
@@ -117,7 +148,7 @@ export default {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#E9BC5C
|
||||
#e9bc5c
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-23 16:12:45
|
||||
* @LastEditTime: 2024-10-25 16:40:29
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@@ -16,7 +16,6 @@
|
||||
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>
|
||||
@@ -46,8 +45,12 @@
|
||||
></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-button
|
||||
v-for="(item, index) in selectTypeArr"
|
||||
:label="item.value"
|
||||
:key="`left-screen-${index}`"
|
||||
>{{ item.label }}</el-radio-button
|
||||
>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
</module-block>
|
||||
@@ -61,11 +64,17 @@
|
||||
:title="item.title"
|
||||
:class="item.class"
|
||||
>
|
||||
<template><component :is="item.component"></component></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-button
|
||||
v-for="(item, index) in selectTypeArr"
|
||||
:label="item.value"
|
||||
:key="`right-screen-${index}`"
|
||||
>{{ item.label }}</el-radio-button
|
||||
>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
</module-block>
|
||||
@@ -98,6 +107,10 @@
|
||||
<!-- 图片背景 -->
|
||||
<div class="disease-content" v-if="showImgBk">
|
||||
<div class="disease-title" @click="changeMap(false)"></div>
|
||||
<div class="map-legend"></div>
|
||||
<div class="map-care">
|
||||
<div class="map-care-div"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地图 -->
|
||||
<fssm-map
|
||||
@@ -180,6 +193,8 @@ import TrafficRank from "./traffic-components/traffic-rank.vue";
|
||||
import TrafficEmergency from "./traffic-components/traffic-emergency.vue";
|
||||
import ImgDialog from "./components/img-dialog.vue";
|
||||
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
|
||||
// 接口
|
||||
import { selectTypeList } from "@/api/xj/screen/index";
|
||||
export default {
|
||||
name: "BigScreen",
|
||||
components: {
|
||||
@@ -213,6 +228,8 @@ export default {
|
||||
weekTime: "",
|
||||
// 年
|
||||
yearTime: "",
|
||||
// 数据栏右上角选择框
|
||||
selectTypeArr: [],
|
||||
// 左侧切换模块
|
||||
leftModuleList: [
|
||||
{
|
||||
@@ -237,7 +254,7 @@ export default {
|
||||
title: "病害趋势",
|
||||
component: DiseaseCurrent,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
select: "",
|
||||
class: "twe",
|
||||
},
|
||||
],
|
||||
@@ -265,7 +282,7 @@ export default {
|
||||
title: "路面状况排名",
|
||||
component: RoadRank,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
select: "",
|
||||
class: "twe",
|
||||
},
|
||||
],
|
||||
@@ -276,7 +293,7 @@ export default {
|
||||
{ name: "巡查车", click: "1" },
|
||||
{ name: "病害", click: "2" },
|
||||
{ name: "路产", click: "3" },
|
||||
{ name: "PCL", click: "4" },
|
||||
{ name: "事件", click: "4" },
|
||||
],
|
||||
/* 具体icon类别 */
|
||||
iconTypeList: [],
|
||||
@@ -310,12 +327,9 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.setTime();
|
||||
this.getSelect();
|
||||
},
|
||||
methods: {
|
||||
/* iframe加载完成回调方法 */
|
||||
loadFrame() {
|
||||
const iframe = document.getElementById("iframeId");
|
||||
},
|
||||
/* 获取当前时间 */
|
||||
setTime() {
|
||||
this.timeFlag = setInterval(() => {
|
||||
@@ -348,6 +362,14 @@ export default {
|
||||
this.dataTime = `${hours}:${minutes}:${seconds}`;
|
||||
}, 1000);
|
||||
},
|
||||
/* 获取数据栏右上角选项数据 */
|
||||
getSelect() {
|
||||
selectTypeList().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.selectTypeArr = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 点击病害筛查 */
|
||||
clickImg() {
|
||||
this.imgVisible = true;
|
||||
@@ -632,7 +654,7 @@ export default {
|
||||
title: "病害趋势",
|
||||
component: DiseaseCurrent,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
select: "",
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
@@ -659,7 +681,7 @@ export default {
|
||||
title: "路面状况排名",
|
||||
component: RoadRank,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
select: "",
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
@@ -689,7 +711,7 @@ export default {
|
||||
title: "附属设施异常统计",
|
||||
component: AnomalyFacilities,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
select: "",
|
||||
class: "one",
|
||||
},
|
||||
{
|
||||
@@ -698,7 +720,7 @@ export default {
|
||||
title: "路产统计",
|
||||
component: RoadStatistic,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
select: "",
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
@@ -717,7 +739,7 @@ export default {
|
||||
height: "14rem",
|
||||
title: "交安事件趋势",
|
||||
component: TrafficTrend,
|
||||
selectIsShow: false,
|
||||
selectIsShow: true,
|
||||
class: "twe",
|
||||
},
|
||||
{
|
||||
@@ -726,7 +748,7 @@ export default {
|
||||
title: "交安事件统计",
|
||||
component: TrafficStatistic,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
select: "",
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
@@ -737,7 +759,7 @@ export default {
|
||||
title: "交安事件排名",
|
||||
component: TrafficRank,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
select: "",
|
||||
class: "one",
|
||||
},
|
||||
{
|
||||
@@ -853,8 +875,8 @@ export default {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 29rem;
|
||||
top: 6rem;
|
||||
left: 27%;
|
||||
top: 10%;
|
||||
|
||||
.road-div {
|
||||
width: 100%;
|
||||
@@ -924,9 +946,6 @@ export default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// position: absolute;
|
||||
// left: 30rem;
|
||||
// top: 12rem;
|
||||
font-size: 0.8rem;
|
||||
color: #ffffff;
|
||||
background-color: #395569;
|
||||
@@ -945,8 +964,8 @@ export default {
|
||||
width: 8rem;
|
||||
height: 10rem;
|
||||
position: absolute;
|
||||
right: 28rem;
|
||||
top: 6rem;
|
||||
right: 26%;
|
||||
top: 10%;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.4rem;
|
||||
border: 1px solid #193dae;
|
||||
@@ -971,6 +990,7 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
// 标题
|
||||
.disease-title {
|
||||
width: 20rem;
|
||||
height: 2.8rem;
|
||||
@@ -982,9 +1002,29 @@ export default {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
// 图例
|
||||
.map-legend {
|
||||
height: 9rem;
|
||||
width: 2rem;
|
||||
position: absolute;
|
||||
top: 13%;
|
||||
left: 26%;
|
||||
background-color: #1cb6ff;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// 打点部分
|
||||
.map-care {
|
||||
width: 48%;
|
||||
height: 73%;
|
||||
position: absolute;
|
||||
left: 26%;
|
||||
top: 13%;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ol-layer:nth-child(1) {
|
||||
::v-deep .baseLayerClass {
|
||||
filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg)
|
||||
brightness(80%) saturate(550%);
|
||||
}
|
||||
@@ -1071,7 +1111,7 @@ export default {
|
||||
|
||||
.change-map-div {
|
||||
cursor: pointer;
|
||||
margin: 0 1.2rem;
|
||||
margin: 0 2rem;
|
||||
}
|
||||
|
||||
.change-map-click {
|
||||
|
||||
@@ -2,24 +2,24 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 15:18:03
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-22 09:05:30
|
||||
* @LastEditTime: 2024-10-25 16:27:10
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\road-components\ancillary-facilities.vue
|
||||
* @Description: 道路资产大屏-附属设施分布
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="ancillary-top"><span>21465</span></div>
|
||||
<div class="ancillary-top"><span>{{sum}}</span></div>
|
||||
<div class="ancillary-bottom">
|
||||
<div
|
||||
:class="`ancillary-bottom-${index}`"
|
||||
v-for="(item, index) in ancillaryList"
|
||||
:key="`ancillary-${index}`"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div>{{ item.label }}</div>
|
||||
<div>
|
||||
<span>{{ item.value }}</span
|
||||
><a>{{ item.unit }}</a>
|
||||
><a>个</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -27,24 +27,40 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ancillaryList, ancillaryCount } from "@/api/xj/screen/road-screen";
|
||||
export default {
|
||||
name: "AncillaryFacilities",
|
||||
data() {
|
||||
return {
|
||||
// 附属设施总数
|
||||
sum: 0,
|
||||
// 附属设施分布数据
|
||||
ancillaryList: [
|
||||
{ name: "里程桩", value: 123, unit: "个" },
|
||||
{ name: "禁令标志", value: 123, unit: "个" },
|
||||
{ name: "指示标志", value: 123, unit: "个" },
|
||||
{ name: "警告标志", value: 123, unit: "个" },
|
||||
{ name: "指路标志", value: 123, unit: "个" },
|
||||
{ name: "辅助标志", value: 123, unit: "个" },
|
||||
{ name: "球机", value: 123, unit: "个" },
|
||||
{ name: "枪机", value: 123, unit: "个" },
|
||||
],
|
||||
ancillaryList: [],
|
||||
};
|
||||
},
|
||||
methods: {},
|
||||
created() {
|
||||
this.getAncillaryList();
|
||||
this.getSum();
|
||||
},
|
||||
methods: {
|
||||
/* 获取附属设施分总数 */
|
||||
getSum() {
|
||||
ancillaryCount().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.sum = data.count;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取附属设施分布数据 */
|
||||
getAncillaryList() {
|
||||
ancillaryList().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.ancillaryList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 15:21:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-21 16:03:14
|
||||
* @LastEditTime: 2024-10-25 15:37:00
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\road-components\anomaly-facilities.vue
|
||||
* @Description: 附属设施异常统计
|
||||
-->
|
||||
@@ -29,49 +29,137 @@
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { getDropList } from "@/api/xj/screen/disease-screen";
|
||||
import { anomalyList } from "@/api/xj/screen/road-screen";
|
||||
export default {
|
||||
name: "AnomalyFacilities",
|
||||
props: {
|
||||
select: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 下拉框绑定
|
||||
itemSelect: "1",
|
||||
itemSelect: "",
|
||||
// 下拉框数据
|
||||
currentList: [
|
||||
{
|
||||
label: "分公司",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "分公司2",
|
||||
value: "2",
|
||||
},
|
||||
{
|
||||
label: "分公3",
|
||||
value: "3",
|
||||
},
|
||||
{
|
||||
label: "分公司4",
|
||||
value: "4",
|
||||
},
|
||||
{
|
||||
label: "分公司5",
|
||||
value: "5",
|
||||
},
|
||||
],
|
||||
currentList: [],
|
||||
// echart图数据
|
||||
anomalyData: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
select: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.getCurrentList();
|
||||
this.getChartData();
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
itemSelect: {
|
||||
handler() {
|
||||
this.getChartData();
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getChartData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取右上角下拉框数据 */
|
||||
getCurrentList() {
|
||||
getDropList({ type: this.select }).then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.currentList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 获取柱状图数据 */
|
||||
getChartData() {
|
||||
this.$nextTick(() => {
|
||||
this.drawChart();
|
||||
const data = {
|
||||
id: this.itemSelect,
|
||||
type: this.select,
|
||||
};
|
||||
anomalyList(data).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
// this.anomalyData = data;
|
||||
this.anomalyData = [
|
||||
{ label: "sss", value: 52 },
|
||||
{ label: "sss", value: 52 },
|
||||
{ label: "sss", value: 52 },
|
||||
{ label: "sss", value: 52 },
|
||||
{ label: "sss", value: 52 },
|
||||
{ label: "sss", value: 52 },
|
||||
{ label: "sss", value: 52 },
|
||||
{ label: "sss", value: 52 },
|
||||
];
|
||||
this.$nextTick(() => {
|
||||
this.drawChart();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 绘制echart */
|
||||
drawChart() {
|
||||
const xData = this.anomalyData.map((item) => {
|
||||
return item.label;
|
||||
});
|
||||
const yData = this.anomalyData.map((item, index) => {
|
||||
if (index % 2 == 0) {
|
||||
return {
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#033E43",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00FFEA",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#034299",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#35F0FF",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
});
|
||||
const chart = echarts.init(this.$refs.anomalyChart);
|
||||
chart.setOption({
|
||||
// backgroundColor: "#041139",
|
||||
@@ -95,12 +183,10 @@ export default {
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
data: ["fdfs", "frffs", "wdwe", "10-1", "asdasd", "asd", "fdfs"],
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#808C9F",
|
||||
fontSize: 12,
|
||||
},
|
||||
color: "#808C9F",
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
},
|
||||
axisLine: {
|
||||
@@ -138,10 +224,8 @@ export default {
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#808C9F",
|
||||
fontSize: 12,
|
||||
},
|
||||
color: "#808C9F",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
@@ -169,176 +253,7 @@ export default {
|
||||
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",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
data: yData,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@@ -9,18 +9,42 @@
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="maintain-left"><span>286</span>km</div>
|
||||
<div class="maintain-right"><span>86</span>条</div>
|
||||
<div class="maintain-left">
|
||||
<span>{{ mileage }}</span
|
||||
>km
|
||||
</div>
|
||||
<div class="maintain-right">
|
||||
<span>{{ count }}</span
|
||||
>条
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { roadRankStatistics } from "@/api/xj/screen/road-screen";
|
||||
export default {
|
||||
name: "ManageMaintain",
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
// 道路总里程
|
||||
mileage: "0",
|
||||
// 道路总数
|
||||
count: "0",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getRoadList();
|
||||
},
|
||||
methods: {
|
||||
getRoadList() {
|
||||
roadRankStatistics().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.mileage = data.mileage;
|
||||
this.count = data.count;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 15:22:31
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-22 09:13:22
|
||||
* @LastEditTime: 2024-10-25 16:11:56
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\road-components\road-statistic.vue
|
||||
* @Description: 道路资产大屏-路产统计
|
||||
-->
|
||||
@@ -17,7 +17,7 @@
|
||||
<div class="road-top">
|
||||
<div class="road-top-name">
|
||||
<a>{{ index + 1 < 10 ? "0" + (index + 1) : index + 1 }}</a
|
||||
>{{ item.name }}
|
||||
>{{ item.label }}
|
||||
</div>
|
||||
<div class="road-top-value">
|
||||
<span>{{ item.value }}</span
|
||||
@@ -27,40 +27,57 @@
|
||||
<div class="road-bottom">
|
||||
<div
|
||||
class="road-bottom-div"
|
||||
:style="{ width: `${item.value * 10}%` }"
|
||||
:style="{ width: `${item.rate * 100}%` }"
|
||||
:class="`bottom-${index}`"
|
||||
>
|
||||
<div
|
||||
v-for="(it, ind) in item.value"
|
||||
:key="`info-${ind}`"
|
||||
class="road-info"
|
||||
></div>
|
||||
</div>
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { roadStatisticList } from "@/api/xj/screen/road-screen";
|
||||
export default {
|
||||
name: "RoadStatistic",
|
||||
props: {
|
||||
select: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
roadList: [
|
||||
{ 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 },
|
||||
],
|
||||
roadList: [],
|
||||
};
|
||||
},
|
||||
methods: {},
|
||||
watch: {
|
||||
select: {
|
||||
handler() {
|
||||
this.getRoadList();
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
/* 获取路产统计信息 */
|
||||
getRoadList() {
|
||||
roadStatisticList({ type: this.select }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
let sum = 0;
|
||||
data.forEach((element) => {
|
||||
sum += element.value;
|
||||
});
|
||||
this.roadList = data.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
rate: item.value / sum,
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -146,13 +163,6 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.road-info {
|
||||
height: 100%;
|
||||
width: 40px;
|
||||
border-left: 2px black solid;
|
||||
margin: 0 0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-0 {
|
||||
|
||||
@@ -1,372 +0,0 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 16:23:48
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-23 11:26:47
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\road-screen.vue
|
||||
* @Description: 大屏-其他切换
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="road-content">
|
||||
<!-- 下拉框 -->
|
||||
<div class="road-select" @click="clickImg">
|
||||
<span>病害筛查</span>
|
||||
</div>
|
||||
<div class="disease-content" v-if="showImgBk">
|
||||
<div class="disease-title" @click="changeMap"></div>
|
||||
</div>
|
||||
<fssm-map
|
||||
v-if="!showImgBk"
|
||||
ref="roadMap"
|
||||
@feature-select="FeatureSelect"
|
||||
></fssm-map>
|
||||
<!-- 图片弹窗 -->
|
||||
<el-dialog
|
||||
:title="imgTitle"
|
||||
:visible.sync="imgVisible"
|
||||
width="80rem"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="imgCancel"
|
||||
>
|
||||
<img-dialog></img-dialog>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FssmMap from "@/components/map/fssm-map.vue";
|
||||
import { Feature } from "ol";
|
||||
import { Point } from "ol/geom";
|
||||
import { Style, Icon, Fill, Stroke, Circle, Text } from "ol/style";
|
||||
import logo from "@/assets/xc.png";
|
||||
import VectorSource from "ol/source/Vector";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
import * as geomExports from "ol/geom";
|
||||
import Cluster from "ol/source/Cluster";
|
||||
import ImgDialog from "./components/img-dialog.vue";
|
||||
export default {
|
||||
name: "RoadScreen",
|
||||
components: { FssmMap, ImgDialog },
|
||||
props: {},
|
||||
watch: {},
|
||||
data() {
|
||||
return {
|
||||
// 是否显示图片背景
|
||||
showImgBk: true,
|
||||
// 中心点集合
|
||||
centerPiont: [],
|
||||
// 线段点集合
|
||||
lineString: [],
|
||||
// 图片弹窗标题
|
||||
imgTitle: "查看",
|
||||
// 图片弹窗显隐控制
|
||||
imgVisible: false,
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
/* 点击病害筛查事件 */
|
||||
clickImg() {
|
||||
this.imgVisible = true;
|
||||
},
|
||||
/* 点击图片点位信息 */
|
||||
changeMap() {
|
||||
this.showImgBk = false;
|
||||
this.getCenterPiont();
|
||||
this.getLinePoint();
|
||||
},
|
||||
/* 获取地图点位信息 */
|
||||
getCenterPiont() {
|
||||
this.centerPiont = [
|
||||
[123.30297096718999, 41.87942945541742],
|
||||
[123.08770760049077, 41.99409925522211],
|
||||
[123.6210023341045, 41.94237193236056],
|
||||
];
|
||||
this.drawPoint();
|
||||
},
|
||||
/* 绘制地图点位 */
|
||||
drawPoint() {
|
||||
const features = [];
|
||||
this.centerPiont.forEach((element) => {
|
||||
// 修改坐标样式
|
||||
const point = new Point(element);
|
||||
const feature = new Feature({
|
||||
geometry: point,
|
||||
data: { data: "123", type: "icon" },
|
||||
// 自己设置一个标识
|
||||
type: "icon",
|
||||
});
|
||||
// 可以给点位设置样式
|
||||
// feature.setStyle([
|
||||
// new Style({
|
||||
// image: new Icon({
|
||||
// crossOrigin: "anonymous",
|
||||
// src: logo,
|
||||
// // 图标缩放比例
|
||||
// scale: 0.05,
|
||||
// }),
|
||||
// }),
|
||||
// ]);
|
||||
features.push(feature);
|
||||
});
|
||||
const clusterSource = new Cluster({
|
||||
distance: 200,
|
||||
minDistance: 20,
|
||||
source: new VectorSource({
|
||||
features,
|
||||
}),
|
||||
});
|
||||
const clusters = new VectorLayer({
|
||||
source: clusterSource,
|
||||
name: "clusterLayer",
|
||||
zIndex: 10,
|
||||
style: function clusterStyle(feature) {
|
||||
const count = feature.get("features").length;
|
||||
return new Style({
|
||||
image: new Icon({
|
||||
crossOrigin: "anonymous",
|
||||
src: logo,
|
||||
// 图标缩放比例
|
||||
scale: 0.05,
|
||||
// 0.3为30度
|
||||
rotation: 0.3,
|
||||
}),
|
||||
text: new Text({
|
||||
textAlign: "center", //位置
|
||||
textBaseline: "middle",
|
||||
font: "normal 14px 微软雅黑",
|
||||
offsetY: 15,
|
||||
fill: new Fill({
|
||||
color: "#ffffff",
|
||||
}),
|
||||
text: count > 1 ? count.toString() : "",
|
||||
}),
|
||||
});
|
||||
},
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.addLayer(clusters);
|
||||
});
|
||||
},
|
||||
/* 选中地图图标/线段事件 */
|
||||
FeatureSelect(e) {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
let selectedFeatures = e.selected;
|
||||
if (selectedFeatures.length > 0) {
|
||||
let feature = selectedFeatures[0];
|
||||
let features = feature.get("features");
|
||||
// 点击线段事件
|
||||
if (feature.getProperties().type === "line") {
|
||||
console.log(feature, "线段参数");
|
||||
} else {
|
||||
if (features.length === 1) {
|
||||
// 单个点位
|
||||
// 执行之前的业务逻辑
|
||||
// 获取点击的图层信息
|
||||
const selectFeature = feature.getProperties().features[0];
|
||||
console.log(selectFeature, "点位");
|
||||
// 获取点位数据
|
||||
console.log(selectFeature.get("data"));
|
||||
} else {
|
||||
// 聚合点
|
||||
// 放大地图层级
|
||||
map.getView().animate({
|
||||
center: feature.getGeometry().getCoordinates(),
|
||||
zoom: map.getView().getZoom() + 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 获取地图线段点位信息 */
|
||||
getLinePoint() {
|
||||
this.lineString = [
|
||||
[
|
||||
[123.32282646995006, 41.97498761493642],
|
||||
[123.35200891450947, 41.973156567233836],
|
||||
[123.37958916875502, 41.97956525514763],
|
||||
[123.39286432222431, 42.0021101177337],
|
||||
[123.40184182160729, 42.02952420024438],
|
||||
[123.4845914544503, 42.03583748930991],
|
||||
],
|
||||
[
|
||||
[122.5518798295274, 42.19039770874923],
|
||||
[123.7871925821671, 42.236903621119346],
|
||||
],
|
||||
];
|
||||
this.drawLine();
|
||||
},
|
||||
/* 绘制地图线段 */
|
||||
drawLine() {
|
||||
const features = [];
|
||||
this.lineString.forEach((element) => {
|
||||
const line = new Feature({
|
||||
geometry: new geomExports.LineString(element),
|
||||
type: "line",
|
||||
});
|
||||
line.setStyle([
|
||||
new Style({
|
||||
// 填充色
|
||||
fill: new Fill({
|
||||
color: "red",
|
||||
}),
|
||||
// 边线颜色
|
||||
stroke: new Stroke({
|
||||
color: "blue",
|
||||
width: 5,
|
||||
}),
|
||||
// 形状
|
||||
image: new Circle({
|
||||
radius: 17,
|
||||
fill: new Fill({
|
||||
color: "#ffffff",
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
]);
|
||||
features.push(line);
|
||||
});
|
||||
const lineSource = new VectorSource({
|
||||
features,
|
||||
});
|
||||
let markLayerLines = new VectorLayer({
|
||||
source: lineSource,
|
||||
properties: {
|
||||
type: "line",
|
||||
},
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.addLayer(markLayerLines);
|
||||
});
|
||||
},
|
||||
/* 清空地图图层的方法 */
|
||||
clearMapPoint() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.roadMap.clearMapFeature();
|
||||
});
|
||||
},
|
||||
/* 关闭图片查看弹窗 */
|
||||
imgCancel() {
|
||||
this.imgVisible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.road-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
// 病害筛查按钮样式
|
||||
.road-select {
|
||||
cursor: pointer;
|
||||
width: 4rem;
|
||||
height: 5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
position: absolute;
|
||||
left: 30rem;
|
||||
top: 6rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 图片背景样式
|
||||
.disease-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ol-layer:nth-child(1) {
|
||||
filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg)
|
||||
brightness(80%) saturate(550%);
|
||||
}
|
||||
|
||||
/* 修改弹窗样式 */
|
||||
::v-deep .el-dialog__header {
|
||||
background-color: #113463;
|
||||
|
||||
span,
|
||||
i {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
background-color: #113463;
|
||||
}
|
||||
</style>
|
||||
@@ -97,10 +97,8 @@ export default {
|
||||
{
|
||||
data: ["fdfs", "frffs", "wdwe", "10-1", "asdasd", "asd", "fdfs"],
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#808C9F",
|
||||
fontSize: 12,
|
||||
},
|
||||
color: "#808C9F",
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
},
|
||||
axisLine: {
|
||||
@@ -138,10 +136,8 @@ export default {
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#808C9F",
|
||||
fontSize: 12,
|
||||
},
|
||||
color: "#808C9F",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user