fix：道路资产
This commit is contained in:
@@ -0,0 +1,349 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:19:56
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 13:15:47
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-current.vue
|
||||
* @Description: 病害巡检-病害三维饼图
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="content-select">下拉框</div>
|
||||
<div class="echart" ref="currentChart"></div>
|
||||
<div class="food-legend">
|
||||
<div
|
||||
class="legend-div"
|
||||
v-for="(item, index) in dataList"
|
||||
: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="value">{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import "echarts-gl";
|
||||
export default {
|
||||
name: "DiseaseCurrent",
|
||||
data() {
|
||||
return {
|
||||
// 配置项数据
|
||||
options: {},
|
||||
colorList: [
|
||||
"#F29C1F",
|
||||
"#E163EF",
|
||||
"#F81F1C",
|
||||
"#1D2AF9",
|
||||
"#03F0EA",
|
||||
"#FFADAF",
|
||||
"#129CFE",
|
||||
"#106B6C",
|
||||
"#96E619",
|
||||
],
|
||||
// echart数据
|
||||
dataList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getChartList();
|
||||
},
|
||||
methods: {
|
||||
/* 获取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();
|
||||
});
|
||||
},
|
||||
/* 绘制echart图 */
|
||||
drawChart() {
|
||||
const data = this.dataList;
|
||||
if (this.$refs.currentChart) {
|
||||
const chart = echarts.init(this.$refs.currentChart);
|
||||
chart.setOption({
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
animation: false,
|
||||
tooltip: {
|
||||
show: true,
|
||||
confine: false,
|
||||
backgroundColor: "rgba(9, 24, 48, 0.5)",
|
||||
borderColor: "rgba(75, 253, 238, 0.4)",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#ffffff",
|
||||
},
|
||||
formatter: (params) => {
|
||||
return `${params.marker}${params.seriesName}：${
|
||||
data[params.seriesIndex].value
|
||||
}张`;
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
width: "250%",
|
||||
height: "250%",
|
||||
// boxWidth: 100,
|
||||
boxHeight: 2,
|
||||
top: "-75%",
|
||||
left: "-75%",
|
||||
viewControl: {
|
||||
// 是否自动旋转
|
||||
autoRotate: false,
|
||||
// 调节角度
|
||||
alpha: 25,
|
||||
rotateSensitivity: 0, //设置旋转灵敏度，为0无法旋转
|
||||
zoomSensitivity: 0, //设置缩放灵敏度，为0无法缩放
|
||||
panSensitivity: 0, //设置平移灵敏度，0无法平移
|
||||
},
|
||||
},
|
||||
//最上方的series
|
||||
series: this.getPie3D(this.dataList, 0.8),
|
||||
});
|
||||
window.addEventListener("resize", chart.resize());
|
||||
}
|
||||
},
|
||||
/* 绘制3d饼图配置项 */
|
||||
getPie3D(pieData, internalDiameterRatio) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio * 1)
|
||||
: 1 / 3;
|
||||
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i++) {
|
||||
sumValue += pieData[i].value;
|
||||
|
||||
const seriesItem = {
|
||||
name:
|
||||
typeof pieData[i].name === "undefined"
|
||||
? `series${i}`
|
||||
: pieData[i].name,
|
||||
type: "surface",
|
||||
parametric: true,
|
||||
wireframe: {
|
||||
show: false,
|
||||
},
|
||||
pieData: pieData[i],
|
||||
pieStatus: {
|
||||
selected: false,
|
||||
hovered: false,
|
||||
k: 1 / 10,
|
||||
},
|
||||
};
|
||||
|
||||
seriesItem.itemStyle = { color: this.colorList[i] };
|
||||
series.push(seriesItem);
|
||||
}
|
||||
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i++) {
|
||||
endValue = startValue + series[i].pieData.value * 1;
|
||||
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
|
||||
//绘制3d饼图
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value / 100
|
||||
);
|
||||
|
||||
startValue = endValue;
|
||||
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
/* 配置项参数 */
|
||||
getParametricEquation(
|
||||
startRatio,
|
||||
endRatio,
|
||||
isSelectedValue,
|
||||
isHovered,
|
||||
kk,
|
||||
height
|
||||
) {
|
||||
// 计算
|
||||
const midRatio = (startRatio + endRatio) / 2;
|
||||
|
||||
const startRadian = startRatio * Math.PI * 2;
|
||||
const endRadian = endRatio * Math.PI * 2;
|
||||
const midRadian = midRatio * Math.PI * 2;
|
||||
let isSelected = isSelectedValue;
|
||||
|
||||
// 如果只有一个扇形，则不实现选中效果。
|
||||
if (startRatio === 0 && endRatio === 1) {
|
||||
isSelected = false;
|
||||
}
|
||||
|
||||
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
||||
const k = typeof kk !== "undefined" ? kk : 1 / 3;
|
||||
|
||||
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
||||
const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
||||
const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
||||
// const offsetZ = i == 1 ? 2 : 0;
|
||||
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
||||
const hoverRate = isHovered ? 1.05 : 1;
|
||||
|
||||
// 返回曲面参数方程
|
||||
return {
|
||||
u: {
|
||||
min: -Math.PI,
|
||||
max: Math.PI * 3,
|
||||
step: Math.PI / 32,
|
||||
},
|
||||
|
||||
v: {
|
||||
min: 0,
|
||||
max: Math.PI * 2,
|
||||
step: Math.PI / 20,
|
||||
},
|
||||
|
||||
x: (u, v) => {
|
||||
if (u < startRadian) {
|
||||
return (
|
||||
offsetX +
|
||||
Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||
);
|
||||
}
|
||||
if (u > endRadian) {
|
||||
return (
|
||||
offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||
);
|
||||
}
|
||||
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
},
|
||||
|
||||
y: (u, v) => {
|
||||
if (u < startRadian) {
|
||||
return (
|
||||
offsetY +
|
||||
Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||
);
|
||||
}
|
||||
if (u > endRadian) {
|
||||
return (
|
||||
offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||||
);
|
||||
}
|
||||
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
},
|
||||
|
||||
z: (u, v) => {
|
||||
if (u < -Math.PI * 0.5) {
|
||||
return Math.sin(u);
|
||||
}
|
||||
if (u > Math.PI * 2.5) {
|
||||
return Math.sin(u);
|
||||
}
|
||||
return Math.sin(v) > 0 ? 1 * height : -1;
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.content-select {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.echart {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.food-legend {
|
||||
height: 30%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.legend-div {
|
||||
width: 32%;
|
||||
height: 30%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.index {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 3.5rem;
|
||||
padding-left: 0.3rem;
|
||||
color: #AAC6C7;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.rate {
|
||||
width: 1.5rem;
|
||||
color: #808C9F;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 2rem;
|
||||
color: #808C9F;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,244 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:16:30
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 11:32:35
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-trends.vue
|
||||
* @Description: 病害巡检-病害趋势
|
||||
-->
|
||||
<template>
|
||||
<div class="content" ref="trendsChart"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "DiseaseTrends",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.geteEhartList();
|
||||
},
|
||||
methods: {
|
||||
/* 获取折线图数据 */
|
||||
geteEhartList() {
|
||||
this.$nextTick(() => {
|
||||
this.drawChart();
|
||||
});
|
||||
},
|
||||
/* 绘制折线图 */
|
||||
drawChart() {
|
||||
const chart = echarts.init(this.$refs.trendsChart);
|
||||
chart.setOption({
|
||||
//你的代码
|
||||
title: {
|
||||
text: "",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
top: "top",
|
||||
icon: "roundRect",
|
||||
itemWidth: 15,
|
||||
itemHeight: 10,
|
||||
textStyle: {
|
||||
color: "#808C9F",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "15%",
|
||||
left: 0,
|
||||
right: "10%",
|
||||
bottom: "10%",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "line",
|
||||
},
|
||||
backgroundColor: "rgba(9, 24, 48, 0.5)",
|
||||
borderColor: "rgba(75, 253, 238, 0.4)",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#808C9F",
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["8:00", "9:00", "10:00", "11:00", "12:00", "13:00"],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(60,132,163,0.4)", // x轴线颜色
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false, // 是否显示x轴的刻度
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: "#808C9F",
|
||||
fontSize: 12,
|
||||
},
|
||||
boundaryGap: false, // true折线图以x轴刻度为中心点 false折线图折线从头开始
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#808C9F",
|
||||
fontSize: 12,
|
||||
formatter: function (value) {
|
||||
return value + "";
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(60,132,163,0.2)",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "龟裂",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#FFC100",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(98,74,0,0)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "#FFC100",
|
||||
},
|
||||
// 设置节点样式
|
||||
showSymbol: false,
|
||||
symbol: "circle", // 可以选择 circle, diamond, pin 等
|
||||
symbolSize: 10, // 节点大小
|
||||
itemStyle: {
|
||||
color: "#FFC100", // 节点颜色
|
||||
},
|
||||
data: [15, 29, 32, 5, 14, 42],
|
||||
},
|
||||
{
|
||||
name: "车辙",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#08B4A6",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(8,180,166,0)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "#08B4A6",
|
||||
},
|
||||
// 设置节点样式
|
||||
showSymbol: false,
|
||||
symbol: "circle", // 可以选择 circle, diamond, pin 等
|
||||
symbolSize: 10, // 节点大小
|
||||
itemStyle: {
|
||||
color: "#08B4A6",
|
||||
},
|
||||
data: [30, 35, 32, 35, 18, 72],
|
||||
},
|
||||
{
|
||||
name: "坑槽",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#146fd7",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(20, 111, 215,0)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "#146fd7",
|
||||
},
|
||||
// 设置节点样式
|
||||
showSymbol: false,
|
||||
symbol: "circle", // 可以选择 circle, diamond, pin 等
|
||||
symbolSize: 10, // 节点大小
|
||||
itemStyle: {
|
||||
color: "#146fd7",
|
||||
},
|
||||
data: [20, 25, 12, 25, 8, 62],
|
||||
},
|
||||
{
|
||||
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: [40, 45, 32, 45, 38, 82],
|
||||
},
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
chart.resize();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,145 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:31:31
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 14:22:33
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\pic-rank.vue
|
||||
* @Description: 病害巡检-pic排名
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<vue-seamless-scroll
|
||||
class="vue-scroll"
|
||||
:class-option="defaultOption"
|
||||
:data="picList"
|
||||
>
|
||||
<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.name }}
|
||||
</div>
|
||||
<div class="pic-top-value">{{ item.value }}</div>
|
||||
</div>
|
||||
<div class="pic-bottom">
|
||||
<div
|
||||
:style="{ width: `${(item.value / 300) * 100}%` }"
|
||||
:class="`pic-bottom-${index}`"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
export default {
|
||||
name: "PicRank",
|
||||
components: { vueSeamlessScroll },
|
||||
data() {
|
||||
return {
|
||||
// 轮播配置
|
||||
defaultOption: {
|
||||
step: 0.2, // 数值越大速度滚动越快
|
||||
limitMoveNum: 1,
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
|
||||
},
|
||||
// 排名数据
|
||||
picList: [
|
||||
{ name: "沈阳绕城高速（G1501）", value: 95 },
|
||||
{ name: "沈阳绕城高速（G1501）", value: 75 },
|
||||
{ name: "沈阳绕城高速（G1501）", value: 70 },
|
||||
{ name: "沈阳绕城高速（G1501）", value: 65 },
|
||||
{ name: "沈阳绕城高速（G1501）", value: 55 },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #c7daf2;
|
||||
overflow: hidden;
|
||||
|
||||
.pic-div {
|
||||
width: calc(100% - 1rem);
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #2f78aa;
|
||||
|
||||
.pic-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.pic-top-name {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: 0.8rem;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: 0.5rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid #2f78aa;
|
||||
}
|
||||
}
|
||||
|
||||
.pic-top-value {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pic-bottom {
|
||||
width: 100%;
|
||||
height: 0.3rem;
|
||||
|
||||
.pic-bottom-0 {
|
||||
height: 0.3rem;
|
||||
background: linear-gradient(90deg, #322707 0%, #ffc000 100%);
|
||||
}
|
||||
|
||||
.pic-bottom-1 {
|
||||
height: 0.3rem;
|
||||
background: linear-gradient(90deg, #322707 0%, #00fcff 100%);
|
||||
}
|
||||
|
||||
.pic-bottom-2 {
|
||||
height: 0.3rem;
|
||||
background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
|
||||
}
|
||||
|
||||
.pic-bottom-3 {
|
||||
height: 0.3rem;
|
||||
background: linear-gradient(90deg, #322707 0%, #00fcff 100%);
|
||||
}
|
||||
|
||||
.pic-bottom-4 {
|
||||
height: 0.3rem;
|
||||
background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:33:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 15:05:44
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\road-rank.vue
|
||||
* @Description: 病害巡检-路面状况排名
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<vue-seamless-scroll
|
||||
class="vue-scroll"
|
||||
:class-option="defaultOption"
|
||||
:data="roadList"
|
||||
>
|
||||
<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.tip}`" class="rate">
|
||||
环比：<span>{{ item.rate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
export default {
|
||||
name: "RoadRank",
|
||||
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)
|
||||
},
|
||||
// 路面状况排名数据
|
||||
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" },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 0.8rem;
|
||||
color: #aac6c7;
|
||||
overflow: hidden;
|
||||
|
||||
.road-div {
|
||||
height: 2rem;
|
||||
width: 100%;
|
||||
padding: 0 1.5rem;
|
||||
display: flex;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
background-color: #0c203f;
|
||||
}
|
||||
|
||||
.index {
|
||||
width: 4.5rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 6.5rem;
|
||||
}
|
||||
|
||||
.rate {
|
||||
width: 7rem;
|
||||
}
|
||||
|
||||
.rate-up {
|
||||
span {
|
||||
color: #fd9604;
|
||||
}
|
||||
background-image: url("../../../assets/screen/disease/rate-up.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20%;
|
||||
background-position: 85% 50%;
|
||||
}
|
||||
|
||||
.rate-down {
|
||||
span {
|
||||
color: #1fa318;
|
||||
}
|
||||
background-image: url("../../../assets/screen/disease/rate-down.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20%;
|
||||
background-position: 85% 50%;
|
||||
}
|
||||
|
||||
.road-index-0 {
|
||||
background-image: url("../../../assets/screen/disease/road-index-0.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 30%;
|
||||
background-position: 60% 50%;
|
||||
}
|
||||
|
||||
.road-index-1 {
|
||||
background-image: url("../../../assets/screen/disease/road-index-1.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 30%;
|
||||
background-position: 60% 50%;
|
||||
}
|
||||
|
||||
.road-index-2 {
|
||||
background-image: url("../../../assets/screen/disease/road-index-2.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 30%;
|
||||
background-position: 60% 50%;
|
||||
}
|
||||
|
||||
.road-index-3 {
|
||||
background-image: url("../../../assets/screen/disease/road-index-3.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 30%;
|
||||
background-position: 60% 50%;
|
||||
}
|
||||
|
||||
.road-index-4 {
|
||||
background-image: url("../../../assets/screen/disease/road-index-4.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 30%;
|
||||
background-position: 60% 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 09:42:49
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 11:04:18
|
||||
* @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-right">
|
||||
<div class="right-sum"><span>261</span>个</div>
|
||||
<div class="right-rate"><span> 37 </span>%</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TodayInspection",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.today-left {
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 1.5rem;
|
||||
font-size: 3rem;
|
||||
background-image: url("../../../assets/screen/disease/today-left.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 85%;
|
||||
background-position: 100% 60%;
|
||||
}
|
||||
|
||||
.today-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;
|
||||
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%;
|
||||
}
|
||||
|
||||
.right-rate {
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
line-height: 3rem;
|
||||
background-image: url("../../../assets/screen/disease/right-rate.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:25:29
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 13:34:00
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\work-order.vue
|
||||
* @Description: 病害巡检-工单统计
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div
|
||||
:class="`work-div-${index}`"
|
||||
v-for="(item, index) in workList"
|
||||
:key="`work-${index}`"
|
||||
>
|
||||
{{ item.value }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "WorkOrder",
|
||||
data() {
|
||||
return {
|
||||
// 工单数据
|
||||
workList: [
|
||||
{
|
||||
value: 2565,
|
||||
},
|
||||
{
|
||||
value: 12,
|
||||
},
|
||||
{
|
||||
value: "22%",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
|
||||
> div {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
font-size: 1.5rem;
|
||||
line-height: 8rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.work-div-0 {
|
||||
background-image: url("../../../assets/screen/disease/work-div-0.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 95%;
|
||||
background-position: 0 50%;
|
||||
}
|
||||
|
||||
.work-div-1 {
|
||||
background-image: url("../../../assets/screen/disease/work-div-1.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 95%;
|
||||
background-position: 0 50%;
|
||||
}
|
||||
|
||||
.work-div-2 {
|
||||
background-image: url("../../../assets/screen/disease/work-div-2.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 95%;
|
||||
background-position: 0 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user