fix:首页联调,更换logo
This commit is contained in:
parent
1590e2acc6
commit
52ffc09a42
@ -7,7 +7,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<link rel="icon" href="<%= BASE_URL %>logo.png">
|
||||
<title><%= webpackConfig.name %></title>
|
||||
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
|
||||
<style>
|
||||
|
||||
BIN
public/logo.png
Normal file
BIN
public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-15 11:05:34
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-15 11:18:36
|
||||
* @LastEditTime: 2024-11-18 17:36:08
|
||||
* @FilePath: \znxjxt-ui\src\api\xj\index\index.js
|
||||
* @Description: 内部首页接口
|
||||
*/
|
||||
@ -26,3 +26,50 @@ export function getTaskToday(query) {
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取病害识别数据
|
||||
export function getDefectLog(query) {
|
||||
return request({
|
||||
url: "/xj/home/getDefectLog",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 获取公路资产数据
|
||||
export function getEquipment(query) {
|
||||
return request({
|
||||
url: "/xj/home/getEquipment",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取公路资产常数统计数据
|
||||
export function getEquipmentLog(query) {
|
||||
return request({
|
||||
url: "/xj/home/getEquipmentAnomalyLog",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取路况评定数据
|
||||
export function getRoadCondition(query) {
|
||||
return request({
|
||||
url: "/xj/home/getRoadConditionAssessment",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 获取数据栏右上角选择数据接口
|
||||
export function selectTypeList(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getSwitch",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
BIN
src/assets/logo/logo(1).png
Normal file
BIN
src/assets/logo/logo(1).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 3.2 KiB |
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-29 15:12:20
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-15 11:37:11
|
||||
* @LastEditTime: 2024-11-18 16:53:33
|
||||
* @FilePath: \znxjxt-ui\src\views\index-components\daily-index.vue
|
||||
* @Description: 首页-日常巡查
|
||||
-->
|
||||
@ -30,7 +30,7 @@
|
||||
</div>
|
||||
<div class="right">
|
||||
<div ref="trendChart"></div>
|
||||
<div ref="distributionChart">图表2</div>
|
||||
<div ref="distributionChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -76,6 +76,7 @@ export default {
|
||||
this.mileage = data.xclc;
|
||||
this.roadNum = data.fgdlts;
|
||||
this.diseaseChart = data.xclcbhqs;
|
||||
this.roadChart = data.dlxzbhfb;
|
||||
this.$nextTick(() => {
|
||||
// this.drawLeftChart();
|
||||
this.drawTrendChart();
|
||||
@ -90,9 +91,12 @@ export default {
|
||||
const xData = this.diseaseChart.map((item) => {
|
||||
return item.label;
|
||||
});
|
||||
const yData = this.diseaseChart.map((item) => {
|
||||
const y1Data = this.diseaseChart.map((item) => {
|
||||
return item.value;
|
||||
});
|
||||
const y2Data = this.diseaseChart.map((item) => {
|
||||
return item.long;
|
||||
});
|
||||
if (this.$refs.trendChart) {
|
||||
const chart = echarts.init(this.$refs.trendChart);
|
||||
chart.setOption({
|
||||
@ -179,14 +183,14 @@ export default {
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
name: "累计病害",
|
||||
data: yData,
|
||||
data: y1Data,
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
symbolSize: 5,
|
||||
name: "巡查里程",
|
||||
smooth: 1,
|
||||
data: [10, 40, 50, 90, 10, 20, 23, 54, 65, 86, 54, 48, 95],
|
||||
data: y2Data,
|
||||
yAxisIndex: 1,
|
||||
},
|
||||
],
|
||||
@ -244,26 +248,10 @@ export default {
|
||||
|
||||
/* 绘制病害分布柱状图 */
|
||||
drawDistributionChart() {
|
||||
const xData = [
|
||||
{ name: "G1", value: 10 },
|
||||
{ name: "G11", value: 12 },
|
||||
{ name: "G25", value: 10 },
|
||||
{ name: "G91", value: 30 },
|
||||
{ name: "G1113", value: 20 },
|
||||
{ name: "S2", value: 50 },
|
||||
{ name: "S20", value: 30 },
|
||||
].map((item) => {
|
||||
return item.name;
|
||||
const xData = this.roadChart.map((item) => {
|
||||
return item.label;
|
||||
});
|
||||
const yData = [
|
||||
{ name: "G1", value: 10 },
|
||||
{ name: "G11", value: 12 },
|
||||
{ name: "G25", value: 10 },
|
||||
{ name: "G91", value: 30 },
|
||||
{ name: "G1113", value: 20 },
|
||||
{ name: "S2", value: 50 },
|
||||
{ name: "S20", value: 30 },
|
||||
].map((item, index) => {
|
||||
const yData = this.roadChart.map((item, index) => {
|
||||
if (index % 2 == 0) {
|
||||
return {
|
||||
...item,
|
||||
@ -286,13 +274,6 @@ export default {
|
||||
if (this.$refs.distributionChart) {
|
||||
const chart = echarts.init(this.$refs.distributionChart);
|
||||
chart.setOption({
|
||||
dataZoom: [
|
||||
{
|
||||
type: "inside",
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
title: [
|
||||
// 中心比例
|
||||
{
|
||||
@ -321,7 +302,16 @@ export default {
|
||||
axisTick: {
|
||||
show: false, //隐藏X轴刻度
|
||||
},
|
||||
axisLabel: { color: "#A2B0B8" },
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: "#A2B0B8",
|
||||
formatter: (params) => {
|
||||
if (params.length > 5) {
|
||||
return `${params.slice(0, 5)}...`;
|
||||
}
|
||||
return params;
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#3C6579",
|
||||
@ -361,6 +351,51 @@ export default {
|
||||
data: yData,
|
||||
},
|
||||
],
|
||||
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,
|
||||
},
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
chart.resize();
|
||||
@ -491,7 +526,10 @@ export default {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:nth-child(1) {
|
||||
border-bottom: 1px #adc6e5 solid;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 0.8rem;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-29 15:17:58
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-07 11:35:42
|
||||
* @LastEditTime: 2024-11-18 17:04:51
|
||||
* @FilePath: \znxjxt-ui\src\views\index-components\disease-index.vue
|
||||
* @Description: 首页-病害识别
|
||||
-->
|
||||
@ -52,6 +52,8 @@
|
||||
<script>
|
||||
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
|
||||
import * as echarts from "echarts";
|
||||
// 接口
|
||||
import { getDefectLog } from "@/api/xj/index/index";
|
||||
export default {
|
||||
name: "DiseaseIndex",
|
||||
components: {
|
||||
@ -63,6 +65,8 @@ export default {
|
||||
diseaseType: "",
|
||||
// 下拉框数据
|
||||
diseaseOptions: [],
|
||||
// 新增病害统计数据
|
||||
statisticsData: [],
|
||||
// 病害类型颜色盘
|
||||
distributionColor: [
|
||||
"#3678FF",
|
||||
@ -86,6 +90,15 @@ export default {
|
||||
methods: {
|
||||
/* 获取echart图数据 */
|
||||
getChartData() {
|
||||
getDefectLog().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.statisticsData = data;
|
||||
this.$nextTick(() => {
|
||||
this.drawStatisticsChart();
|
||||
this.drawDistributionChart();
|
||||
});
|
||||
}
|
||||
});
|
||||
this.distributionList = [
|
||||
{
|
||||
value: 15461,
|
||||
@ -118,14 +131,16 @@ export default {
|
||||
rate: "10%",
|
||||
},
|
||||
];
|
||||
this.$nextTick(() => {
|
||||
this.drawStatisticsChart();
|
||||
this.drawDistributionChart();
|
||||
});
|
||||
},
|
||||
/* 绘制新增病害统计echart图 */
|
||||
drawStatisticsChart() {
|
||||
if (this.$refs.statisticsChart) {
|
||||
const xData = this.statisticsData.map((item) => {
|
||||
return item.label;
|
||||
});
|
||||
const yData = this.statisticsData.map((item) => {
|
||||
return item.value;
|
||||
});
|
||||
const chart = echarts.init(this.$refs.statisticsChart);
|
||||
chart.setOption({
|
||||
color: ["#388BD8", "#FFC400"],
|
||||
@ -156,7 +171,7 @@ export default {
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: ["2024/2/9", "2024/2/10", "2024/2/11", "2024/2/12"],
|
||||
data: xData,
|
||||
axisTick: {
|
||||
show: false, //隐藏X轴刻度
|
||||
},
|
||||
@ -196,7 +211,52 @@ export default {
|
||||
type: "line",
|
||||
symbolSize: 5,
|
||||
smooth: 1,
|
||||
data: [400, 600, 1400, 1700],
|
||||
data: yData,
|
||||
},
|
||||
],
|
||||
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-29 15:23:44
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-06 10:48:26
|
||||
* @LastEditTime: 2024-11-18 17:45:39
|
||||
* @FilePath: \znxjxt-ui\src\views\index-components\road-index.vue
|
||||
* @Description: 首页-公路资产
|
||||
-->
|
||||
@ -19,15 +19,17 @@
|
||||
>个
|
||||
</div>
|
||||
<div class="middle-div">
|
||||
<fssm-scroll class="scroll-div">
|
||||
<div
|
||||
class="middle-item"
|
||||
:class="`middle-item-${index}`"
|
||||
v-for="(item, index) in middleList"
|
||||
:key="`middle-item-${index}`"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
<span>{{ item.label }}</span>
|
||||
<span>{{ item.value }}</span>
|
||||
</div>
|
||||
</fssm-scroll>
|
||||
</div>
|
||||
<div class="road-chart" ref="roadChart"></div>
|
||||
</div>
|
||||
@ -35,7 +37,11 @@
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
// 接口
|
||||
import { getEquipment, getEquipmentLog } from "@/api/xj/index/index";
|
||||
import fssmScroll from "../../components/scroll/fssm-scroll.vue";
|
||||
export default {
|
||||
components: { fssmScroll },
|
||||
name: "RoadIndex",
|
||||
data() {
|
||||
return {
|
||||
@ -43,39 +49,53 @@ export default {
|
||||
roadNum: [],
|
||||
// 中间循环数据
|
||||
middleList: [],
|
||||
// 下方echart图数据
|
||||
roadChartData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
this.getTopData();
|
||||
this.getBottomData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取数据 */
|
||||
getData() {
|
||||
this.roadNum = ["0", "0", "6", "7"];
|
||||
this.middleList = [
|
||||
// { name: "信号灯", value: 5002 },
|
||||
{ name: "路锥", value: 5002 },
|
||||
{ name: "警示杆", value: 5002 },
|
||||
{ name: "防撞桶", value: 5002 },
|
||||
// { name: "斑马线", value: 5002 },
|
||||
{ name: "里程碑", value: 5002 },
|
||||
{ name: "交通杆件", value: 5002 },
|
||||
{ name: "龙门架", value: 5002 },
|
||||
];
|
||||
/* 获取顶端数据 */
|
||||
getTopData() {
|
||||
getEquipment().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.roadNum = String(data.count).split("");
|
||||
this.middleList = data.sacle;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取底部echart数据 */
|
||||
getBottomData() {
|
||||
getEquipmentLog().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.roadChartData = data;
|
||||
this.$nextTick(() => {
|
||||
this.drawRoadChart();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 绘制echart图 */
|
||||
drawRoadChart() {
|
||||
if (this.$refs.roadChart) {
|
||||
const xData = this.roadChartData.map((item) => {
|
||||
return item.label;
|
||||
});
|
||||
const y1Data = this.roadChartData.map((item) => {
|
||||
return item.value;
|
||||
});
|
||||
const chart = echarts.init(this.$refs.roadChart);
|
||||
chart.setOption({
|
||||
color: ["#388BD8", "#04DAD7"],
|
||||
title: [
|
||||
// 中心比例
|
||||
{
|
||||
text: "常数统计",
|
||||
text: "路产趋势",
|
||||
x: "1%",
|
||||
y: "1%",
|
||||
textStyle: {
|
||||
@ -99,7 +119,7 @@ export default {
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: ["2024/2/9", "2024/2/10", "2024/2/11", "2024/2/12"],
|
||||
data: xData,
|
||||
axisTick: {
|
||||
show: false, //隐藏X轴刻度
|
||||
},
|
||||
@ -113,7 +133,6 @@ export default {
|
||||
splitLine: {
|
||||
show: true,
|
||||
},
|
||||
boundaryGap: false,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
@ -137,41 +156,70 @@ export default {
|
||||
series: [
|
||||
{
|
||||
name: "路产总数",
|
||||
type: "line",
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderRadius: [3, 3, 0, 0],
|
||||
color: "#388BD8",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#ffffff",
|
||||
},
|
||||
]),
|
||||
},
|
||||
data: [400, 600, 1400, 1700],
|
||||
data: y1Data,
|
||||
},
|
||||
{
|
||||
name: "异常设施数量",
|
||||
type: "line",
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderRadius: [3, 3, 0, 0],
|
||||
color: "#38C8D8",
|
||||
},
|
||||
data: [20, 30, 35, 45, 55, 65, 75, 85, 95],
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#04DAD7",
|
||||
// 设置滚动条的隐藏与显示
|
||||
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,
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#ffffff",
|
||||
},
|
||||
]),
|
||||
},
|
||||
data: [40, 500, 1500, 700],
|
||||
// 没有下面这块的话,只能拖动滚动条,
|
||||
// 鼠标滚轮在区域内不能控制外部滚动条
|
||||
type: "inside",
|
||||
// 滚轮是否触发缩放
|
||||
zoomOnMouseWheel: false,
|
||||
// 鼠标滚轮触发滚动
|
||||
moveOnMouseMove: true,
|
||||
moveOnMouseWheel: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
@ -230,17 +278,21 @@ export default {
|
||||
.middle-div {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
|
||||
.scroll-div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.middle-item {
|
||||
// width: 24%;
|
||||
width: 28%;
|
||||
height: 40%;
|
||||
padding: 0 0.5rem 0 3.5rem;
|
||||
margin: 0.4rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -2,22 +2,39 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-29 15:30:35
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-07 11:29:32
|
||||
* @LastEditTime: 2024-11-18 17:16:45
|
||||
* @FilePath: \znxjxt-ui\src\views\index-components\traffic-index.vue
|
||||
* @Description: 首页-路况评定
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="title">路况评定</div>
|
||||
<div class="title">
|
||||
<span>路况评定</span>
|
||||
<div class="title-select">
|
||||
<el-radio-group v-model="itemSelect" size="mini" @change="changeRadio">
|
||||
<el-radio-button
|
||||
v-for="(item, index) in selectTypeArr"
|
||||
:label="item.value"
|
||||
:key="`left-screen-${index}`"
|
||||
>{{ item.label }}</el-radio-button
|
||||
>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="traffic-table">
|
||||
<el-table :data="trafficTableData" style="width: 100%" height="180">
|
||||
<el-table-column type="index" label="序号"></el-table-column>
|
||||
<el-table-column prop="date" label="路线名称"> </el-table-column>
|
||||
<el-table-column prop="name" label="路面病害数"> </el-table-column>
|
||||
<el-table-column prop="pci" label="交安病害数"> </el-table-column>
|
||||
<el-table-column prop="name" label="桥隧病害数"> </el-table-column>
|
||||
<el-table-column prop="name" label="绿化病害数" > </el-table-column>
|
||||
<el-table-column prop="name" show-overflow-tooltip label="名称">
|
||||
</el-table-column>
|
||||
<el-table-column prop="roadPerKm" label="路面病害数(个/km)">
|
||||
</el-table-column>
|
||||
<el-table-column prop="eventPerKm" label="交安病害数(个/km)">
|
||||
</el-table-column>
|
||||
<el-table-column prop="bridgePerKm" label="桥隧病害数(个/km)">
|
||||
</el-table-column>
|
||||
<el-table-column prop="greenPerKm" label="绿化病害数(个/km)">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="traffic-chart" ref="trafficChart"></div>
|
||||
@ -26,46 +43,57 @@
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
// 接口
|
||||
import { getRoadCondition, selectTypeList } from "@/api/xj/index/index";
|
||||
export default {
|
||||
name: "TrafficIndex",
|
||||
data() {
|
||||
return {
|
||||
// 右上角单选择框
|
||||
selectTypeArr: [],
|
||||
// 右上角选择框绑定
|
||||
itemSelect: "",
|
||||
// 路况表格数据
|
||||
trafficTableData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getTableData();
|
||||
this.getSelect();
|
||||
},
|
||||
methods: {
|
||||
/* 获取数据栏右上角选项数据 */
|
||||
getSelect() {
|
||||
selectTypeList().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.selectTypeArr = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 右上角单选改变事件 */
|
||||
changeRadio(){
|
||||
this.getTableData()
|
||||
},
|
||||
|
||||
/* 获取表格数据 */
|
||||
getTableData() {
|
||||
this.trafficTableData = [
|
||||
{
|
||||
date: "S225",
|
||||
name: "99.52",
|
||||
pci: "优",
|
||||
},
|
||||
{
|
||||
date: "G107",
|
||||
name: "98.6",
|
||||
pci: "优",
|
||||
},
|
||||
{
|
||||
date: "G105",
|
||||
name: "100",
|
||||
pci: "优",
|
||||
},
|
||||
];
|
||||
getRoadCondition({ type: this.itemSelect }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
console.log(data, "ggg");
|
||||
this.trafficTableData = data;
|
||||
this.$nextTick(() => {
|
||||
this.drawTrafficChart();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 绘制柱状图 */
|
||||
drawTrafficChart() {
|
||||
if (this.$refs.trafficChart) {
|
||||
const chart = echarts.init(this.$refs.trafficChart);
|
||||
chart.setOption({
|
||||
color: ["#388BD8", "#04DAD7"],
|
||||
dataZoom: [
|
||||
{
|
||||
type: "inside",
|
||||
@ -76,7 +104,7 @@ export default {
|
||||
title: [
|
||||
// 中心比例
|
||||
{
|
||||
text: "路产趋势",
|
||||
text: "病害趋势",
|
||||
x: "1%",
|
||||
y: "1%",
|
||||
textStyle: {
|
||||
@ -126,6 +154,7 @@ export default {
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
boundaryGap: false,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
@ -147,25 +176,41 @@ export default {
|
||||
series: [
|
||||
{
|
||||
name: "路产总数",
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderRadius: [3, 3, 0, 0],
|
||||
type: "line",
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#388BD8",
|
||||
},
|
||||
data: [10, 20, 30, 40, 50, 60, 70, 80, 90],
|
||||
{
|
||||
offset: 1,
|
||||
color: "#ffffff",
|
||||
},
|
||||
]),
|
||||
},
|
||||
data: [400, 600, 1400, 1700, 400, 600, 400, 600, 1400, 1700],
|
||||
},
|
||||
{
|
||||
name: "异常设施数量",
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderRadius: [3, 3, 0, 0],
|
||||
color: "#38C8D8",
|
||||
type: "line",
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#04DAD7",
|
||||
},
|
||||
data: [20, 30, 35, 45, 55, 65, 75, 85, 95],
|
||||
{
|
||||
offset: 1,
|
||||
color: "#ffffff",
|
||||
},
|
||||
]),
|
||||
},
|
||||
data: [40, 500, 1500, 700, 40, 500, 40, 500, 1500, 700],
|
||||
},
|
||||
],
|
||||
});
|
||||
@ -189,11 +234,15 @@ export default {
|
||||
height: 10%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 3rem;
|
||||
font-family: "DouYu";
|
||||
background: url("../../assets/index/div-title.png") no-repeat;
|
||||
background-size: 5%;
|
||||
background-position: 0 30%;
|
||||
|
||||
> span {
|
||||
font-family: "DouYu";
|
||||
}
|
||||
}
|
||||
|
||||
.traffic-table {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-08 09:26:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-15 17:06:46
|
||||
* @LastEditTime: 2024-11-18 15:06:35
|
||||
* @FilePath: \znxjxt-ui\src\views\index.vue
|
||||
* @Description: 系统首页
|
||||
-->
|
||||
@ -43,11 +43,13 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 组件
|
||||
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
|
||||
import DailyIndex from "./index-components/daily-index.vue";
|
||||
import DiseaseIndex from "./index-components/disease-index.vue";
|
||||
import RoadIndex from "./index-components/road-index.vue";
|
||||
import TrafficIndex from "./index-components/traffic-index.vue";
|
||||
// 接口
|
||||
import { getTotalCount } from "@/api/xj/index/index";
|
||||
export default {
|
||||
name: "Index",
|
||||
@ -98,7 +100,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
background: url("../assets/index/top-content.png") no-repeat;
|
||||
background-size: 100%;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.top-div {
|
||||
width: 22%;
|
||||
@ -154,12 +156,12 @@ export default {
|
||||
|
||||
.daily-content {
|
||||
background: url("../assets/index/daily-content.png") no-repeat;
|
||||
background-size: 100%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.disease-content {
|
||||
background: url("../assets/index/disease-content.png") no-repeat;
|
||||
background-size: 107% 100%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -175,7 +177,7 @@ export default {
|
||||
height: calc(100% - 1rem);
|
||||
margin-top: 1rem;
|
||||
background: url("../assets/index/road-content.png") no-repeat;
|
||||
background-size: 112% 100%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
|
||||
* @Date: 2024-10-08 10:58:25
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-05 15:05:42
|
||||
* @LastEditTime: 2024-11-18 16:36:05
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management .vue
|
||||
* @Description: 巡检信息管理-病害管理
|
||||
-->
|
||||
@ -197,7 +197,7 @@
|
||||
>删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
@ -205,9 +205,31 @@
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:defect:export']"
|
||||
>导出
|
||||
>导出日常监测报告
|
||||
</el-button>
|
||||
</el-col> -->
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:defect:export']"
|
||||
>导出特殊事件报告
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:defect:export']"
|
||||
>导出养护评估报告
|
||||
</el-button>
|
||||
</el-col>
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
@ -1214,11 +1236,11 @@ export default {
|
||||
|
||||
/* 查看弹窗选择改变触发事件 */
|
||||
changeView(val) {
|
||||
getDetailsBySnapShotId(val).then(({code,data})=>{
|
||||
if(code===200){
|
||||
getDetailsBySnapShotId(val).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
console.log(data, "fff");
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
/* 初始化天地图 */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user