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; /*给文字设置成透明*/
|
||||
|
||||
Reference in New Issue
Block a user