fix：大屏首页逻辑增加
This commit is contained in:
parent
d2a445b36c
commit
c9156a2813
28
src/api/xj/index/index.js
Normal file
28
src/api/xj/index/index.js
Normal file
@ -0,0 +1,28 @@
|
||||
/*
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-15 11:05:34
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-15 11:18:36
|
||||
* @FilePath: \znxjxt-ui\src\api\xj\index\index.js
|
||||
* @Description: 内部首页接口
|
||||
*/
|
||||
|
||||
import request from "@/utils/request";
|
||||
|
||||
// 获取首页最顶端数据
|
||||
export function getTotalCount(query) {
|
||||
return request({
|
||||
url: "/xj/home/getTotalCount",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取日常巡查数据
|
||||
export function getTaskToday(query) {
|
||||
return request({
|
||||
url: "/xj/home/getTaskToday",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
@ -98,3 +98,24 @@ export function getCarList(query) {
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 获取设备直播的url地址
|
||||
export function getVideoUrl(params) {
|
||||
return request({
|
||||
url: "/bigscreen/v2/getAiotVideoUrl",
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 关闭设备的上传视频流
|
||||
export function closeVideoUrl(params) {
|
||||
return request({
|
||||
url: "/bigscreen/v2/colseAiotVideo",
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-24 15:03:28
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-14 09:16:02
|
||||
* @LastEditTime: 2024-11-15 14:57:02
|
||||
* @FilePath: \znxjxt-ui\src\api\xj\screen\index.js
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
* @Description: 大屏首页接口
|
||||
*/
|
||||
import request from "@/utils/request";
|
||||
|
||||
|
||||
@ -0,0 +1,127 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-15 13:14:03
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-15 14:06:48
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-follow.vue
|
||||
* @Description: 总览大屏-巡检车辆-跟车弹窗
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="inspection-content">
|
||||
<fssm-map ref="carMap" :baseMap="'img_c'"></fssm-map>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// websocket
|
||||
import {
|
||||
connectWebsocket,
|
||||
closeWebsocket,
|
||||
sendMsg,
|
||||
} from "@/plugins/websocket.js";
|
||||
import { getToken } from "@/utils/auth.js";
|
||||
import logo from "@/assets/xc.png";
|
||||
import FssmMap from "@/components/map/fssm-map.vue";
|
||||
import { Point } from "ol/geom";
|
||||
import { Feature } from "ol";
|
||||
import { Style, Icon } from "ol/style";
|
||||
import VectorSource from "ol/source/Vector";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
|
||||
export default {
|
||||
name: "InspectionFollow",
|
||||
components: {
|
||||
FssmMap,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.initWebSocket();
|
||||
},
|
||||
methods: {
|
||||
/* 初始化websocket */
|
||||
initWebSocket() {
|
||||
const url = `ws://192.168.1.188:8080/websocket?token=${getToken()}`;
|
||||
const data = { type: "carLocation", status: true };
|
||||
connectWebsocket(
|
||||
url,
|
||||
data,
|
||||
(res) => {
|
||||
// console.log("onWsMessage接收到服务器的数据: ", res);
|
||||
console.log(JSON.parse(res));
|
||||
},
|
||||
(err) => {
|
||||
console.log("断开重连");
|
||||
this.drawPoint();
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
/* 发送消息 */
|
||||
sendMsg() {
|
||||
sendMsg(5555); //value是发送的值
|
||||
// this.value = "";
|
||||
},
|
||||
|
||||
/* 绘制地图车点位 */
|
||||
drawPoint() {
|
||||
const features = [];
|
||||
// 修改坐标样式
|
||||
const point = new Point([123.30297096718999,41.87942945541742]);
|
||||
const feature = new Feature({
|
||||
geometry: point,
|
||||
data: {
|
||||
iconType: "1",
|
||||
// imageUrl: element.imageUrl,
|
||||
// rect: element.rect,
|
||||
},
|
||||
// 自己设置一个标识
|
||||
type: "icon",
|
||||
});
|
||||
// 可以给点位设置样式
|
||||
feature.setStyle([
|
||||
new Style({
|
||||
image: new Icon({
|
||||
crossOrigin: "anonymous",
|
||||
src: logo,
|
||||
// 图标缩放比例
|
||||
scale: 0.05,
|
||||
}),
|
||||
}),
|
||||
]);
|
||||
features.push(feature);
|
||||
//设置地图的数据源
|
||||
const pointSource = new VectorSource({
|
||||
features,
|
||||
});
|
||||
let markLayerPoints = new VectorLayer({
|
||||
source: pointSource,
|
||||
properties: {
|
||||
type: "point",
|
||||
},
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.carMap.instance.get("map");
|
||||
map.addLayer(markLayerPoints);
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
closeWebsocket();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.inspection-content {
|
||||
width: 100%;
|
||||
height: 45rem;
|
||||
|
||||
::v-deep .baseLayerClass {
|
||||
filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg)
|
||||
brightness(80%) saturate(550%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,52 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-15 14:23:21
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-15 15:06:55
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-view.vue
|
||||
* @Description: 总览大屏-巡检车辆-视频查看弹窗
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="view-content"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getVideoUrl } from "@/api/xj/screen/disease-screen";
|
||||
export default {
|
||||
name: "InspectionView",
|
||||
props: {
|
||||
dialogItem: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 视频播放地址
|
||||
vedioUrl: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getVideo();
|
||||
},
|
||||
methods: {
|
||||
/* 获取视频url地址 */
|
||||
getVideo() {
|
||||
console.log(this.dialogItem);
|
||||
getVideoUrl({ id: this.dialogItem.clientId }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.view-content {
|
||||
width: 100%;
|
||||
height: 40rem;
|
||||
}
|
||||
</style>
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-08 09:40:18
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-14 15:54:12
|
||||
* @LastEditTime: 2024-11-15 15:29:10
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\inspection-vehicles.vue
|
||||
* @Description: 总览大屏-巡检车辆
|
||||
-->
|
||||
@ -85,7 +85,6 @@
|
||||
</el-popover>
|
||||
|
||||
<el-button
|
||||
disabled
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="followCar(scope.row)"
|
||||
@ -93,7 +92,6 @@
|
||||
>跟车
|
||||
</el-button>
|
||||
<el-button
|
||||
disabled
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="videoDelete(scope.row)"
|
||||
@ -118,13 +116,48 @@
|
||||
</el-pagination>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- 跟车弹窗 -->
|
||||
<el-dialog
|
||||
:title="followTitle"
|
||||
:visible.sync="showCarVisible"
|
||||
width="85rem"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="followCancel"
|
||||
>
|
||||
<inspection-follow v-if="followTitle === '跟车详情'"></inspection-follow>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 视频弹窗 -->
|
||||
<el-dialog
|
||||
:title="viewTitle"
|
||||
:visible.sync="showViewVisible"
|
||||
width="60rem"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="viewCancel"
|
||||
>
|
||||
<inspection-view
|
||||
v-if="viewTitle === '视频查看'"
|
||||
:dialogItem="dialogItem"
|
||||
></inspection-view>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCarList } from "@/api/xj/screen/disease-screen";
|
||||
import { getCarList, closeVideoUrl } from "@/api/xj/screen/disease-screen";
|
||||
import InspectionFollow from "./components/inspection-follow.vue";
|
||||
import InspectionView from "./components/inspection-view.vue";
|
||||
import { closeWebsocket } from "@/plugins/websocket.js";
|
||||
export default {
|
||||
name: "InspectionVehicles",
|
||||
components: {
|
||||
InspectionFollow,
|
||||
InspectionView,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 车辆总数
|
||||
@ -142,6 +175,16 @@ export default {
|
||||
// },
|
||||
// 分页总数
|
||||
tableTotal: 0,
|
||||
// 传弹窗数据
|
||||
dialogItem: {},
|
||||
// 跟车弹窗显隐控制
|
||||
showCarVisible: false,
|
||||
// 跟车弹窗标题
|
||||
followTitle: "",
|
||||
// 视频弹窗显隐控制
|
||||
showViewVisible: false,
|
||||
// 视频弹窗标题
|
||||
viewTitle: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -164,16 +207,44 @@ export default {
|
||||
detailDefect(val) {},
|
||||
|
||||
/* 表格跟车事件 */
|
||||
followCar(val) {},
|
||||
followCar(val) {
|
||||
this.followTitle = "跟车详情";
|
||||
this.showCarVisible = true;
|
||||
},
|
||||
|
||||
/* 表格视频事件 */
|
||||
videoDelete(val) {},
|
||||
videoDelete(val) {
|
||||
this.dialogItem = val;
|
||||
this.viewTitle = "视频查看";
|
||||
this.showViewVisible = true;
|
||||
},
|
||||
|
||||
/* 页码修改事件 */
|
||||
// handleCurrentChange(arg) {
|
||||
// this.pagination.page = arg;
|
||||
// this.getTableData();
|
||||
// },
|
||||
|
||||
/* 关闭跟车弹窗事件 */
|
||||
followCancel() {
|
||||
this.followTitle = "";
|
||||
this.showCarVisible = false;
|
||||
this.dialogItem = {};
|
||||
closeWebsocket();
|
||||
},
|
||||
|
||||
/* 关闭视频弹窗事件 */
|
||||
viewCancel() {
|
||||
this.viewTitle = "";
|
||||
this.showViewVisible = false;
|
||||
closeVideoUrl({ id: this.dialogItem.clientId })
|
||||
.then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
console.log(data);
|
||||
this.dialogItem = {};
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -313,6 +384,22 @@ export default {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* 修改弹窗样式 */
|
||||
::v-deep .el-dialog__header {
|
||||
padding: 10px;
|
||||
background-color: #113463;
|
||||
|
||||
span,
|
||||
i {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 0;
|
||||
background-color: #113463;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
/* 弹出层样式 */
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-29 15:12:20
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-05 11:47:03
|
||||
* @LastEditTime: 2024-11-15 11:37:11
|
||||
* @FilePath: \znxjxt-ui\src\views\index-components\daily-index.vue
|
||||
* @Description: 首页-日常巡查
|
||||
-->
|
||||
@ -14,13 +14,19 @@
|
||||
<div class="left">
|
||||
<div class="left-div">
|
||||
<div class="name">巡查里程</div>
|
||||
<div class="value"><span>15.16</span>km</div>
|
||||
<div class="value">
|
||||
<span>{{ formatNumber(mileage) }}</span
|
||||
>km
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-div">
|
||||
<div class="name">覆盖道路数</div>
|
||||
<div class="value"><span>352</span>条</div>
|
||||
<div class="value">
|
||||
<span>{{ roadNum }}</span
|
||||
>条
|
||||
</div>
|
||||
<div class="left-chart" ref="rateChart"></div>
|
||||
</div>
|
||||
<!-- <div class="left-chart" ref="rateChart"></div> -->
|
||||
</div>
|
||||
<div class="right">
|
||||
<div ref="trendChart"></div>
|
||||
@ -31,106 +37,62 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getTaskToday } from "@/api/xj/index/index";
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "DailyIndex",
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
// 巡查里程
|
||||
mileage: 0,
|
||||
// 覆盖道路数
|
||||
roadNum: 0,
|
||||
// 病害趋势echart数据
|
||||
diseaseChart: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/* 处理数据 */
|
||||
formatNumber(num) {
|
||||
if (num >= 100000000) {
|
||||
// 超过1亿显示 x.xx亿
|
||||
return (num / 100000000).toFixed(2) + "亿";
|
||||
} else if (num >= 10000) {
|
||||
// 超过1万显示 x.xx万
|
||||
return (num / 10000).toFixed(2) + "万";
|
||||
} else {
|
||||
// 小于1万直接返回原数字
|
||||
return num;
|
||||
}
|
||||
},
|
||||
|
||||
/* 获取数据 */
|
||||
getData() {
|
||||
getTaskToday().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.mileage = data.xclc;
|
||||
this.roadNum = data.fgdlts;
|
||||
this.diseaseChart = data.xclcbhqs;
|
||||
this.$nextTick(() => {
|
||||
this.drawLeftChart();
|
||||
// this.drawLeftChart();
|
||||
this.drawTrendChart();
|
||||
this.drawDistributionChart();
|
||||
});
|
||||
},
|
||||
/* 绘制覆盖率饼图 */
|
||||
drawLeftChart() {
|
||||
if (this.$refs.rateChart) {
|
||||
const chart = echarts.init(this.$refs.rateChart);
|
||||
const current = 45;
|
||||
chart.setOption({
|
||||
// color: ['rgba(61, 137, 247, 1)', '#f07b3f'],
|
||||
title: [
|
||||
// 中心比例
|
||||
{
|
||||
text: "80%",
|
||||
x: "center",
|
||||
y: "52%",
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: "#444",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "覆盖率",
|
||||
x: "center",
|
||||
y: "10%",
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
],
|
||||
polar: {
|
||||
center: ["50%", "60%"],
|
||||
radius: ["40%", "58%"],
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100,
|
||||
show: false,
|
||||
},
|
||||
radiusAxis: {
|
||||
type: "category",
|
||||
show: true,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [80],
|
||||
name: "",
|
||||
type: "bar",
|
||||
roundCap: true,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "#BDD5F4",
|
||||
},
|
||||
coordinateSystem: "polar",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#005DCF",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00CCFF",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
chart.resize();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 绘制病害趋势柱状图 */
|
||||
drawTrendChart() {
|
||||
const xData = this.diseaseChart.map((item) => {
|
||||
return item.label;
|
||||
});
|
||||
const yData = this.diseaseChart.map((item) => {
|
||||
return item.value;
|
||||
});
|
||||
if (this.$refs.trendChart) {
|
||||
const chart = echarts.init(this.$refs.trendChart);
|
||||
chart.setOption({
|
||||
@ -162,7 +124,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轴刻度
|
||||
},
|
||||
@ -217,23 +179,69 @@ export default {
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
name: "累计病害",
|
||||
data: [400, 600, 1400, 1700],
|
||||
data: yData,
|
||||
},
|
||||
{
|
||||
type: "line",
|
||||
symbolSize: 5,
|
||||
name: "巡查里程",
|
||||
smooth: 1,
|
||||
data: [10, 40, 50, 90],
|
||||
data: [10, 40, 50, 90, 10, 20, 23, 54, 65, 86, 54, 48, 95],
|
||||
yAxisIndex: 1,
|
||||
},
|
||||
],
|
||||
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();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/* 绘制病害分布柱状图 */
|
||||
drawDistributionChart() {
|
||||
const xData = [
|
||||
@ -359,6 +367,87 @@ export default {
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/* 绘制覆盖率饼图 */
|
||||
drawLeftChart() {
|
||||
if (this.$refs.rateChart) {
|
||||
const chart = echarts.init(this.$refs.rateChart);
|
||||
const current = 45;
|
||||
chart.setOption({
|
||||
// color: ['rgba(61, 137, 247, 1)', '#f07b3f'],
|
||||
title: [
|
||||
// 中心比例
|
||||
{
|
||||
text: "80%",
|
||||
x: "center",
|
||||
y: "52%",
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: "#444",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "覆盖率",
|
||||
x: "center",
|
||||
y: "10%",
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
],
|
||||
polar: {
|
||||
center: ["50%", "60%"],
|
||||
radius: ["40%", "58%"],
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100,
|
||||
show: false,
|
||||
},
|
||||
radiusAxis: {
|
||||
type: "category",
|
||||
show: true,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [80],
|
||||
name: "",
|
||||
type: "bar",
|
||||
roundCap: true,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "#BDD5F4",
|
||||
},
|
||||
coordinateSystem: "polar",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#005DCF",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00CCFF",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
window.addEventListener("resize", () => {
|
||||
chart.resize();
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -394,7 +483,8 @@ export default {
|
||||
background-size: 100%;
|
||||
|
||||
.left-div {
|
||||
height: 27.5%;
|
||||
// height: 27.5%;
|
||||
height: 50%;
|
||||
width: calc(100% - 2rem);
|
||||
margin: 0 1rem;
|
||||
display: flex;
|
||||
|
||||
@ -13,11 +13,11 @@
|
||||
<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="PCI" > </el-table-column>
|
||||
<el-table-column prop="pci" label="PCI等级" >
|
||||
</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>
|
||||
</div>
|
||||
<div class="traffic-chart" ref="trafficChart"></div>
|
||||
@ -100,7 +100,18 @@ export default {
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月"],
|
||||
data: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
],
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false, //隐藏X轴刻度
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-08 09:26:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-06 10:50:32
|
||||
* @LastEditTime: 2024-11-15 11:16:08
|
||||
* @FilePath: \znxjxt-ui\src\views\index.vue
|
||||
* @Description: 系统首页
|
||||
-->
|
||||
@ -48,6 +48,7 @@ 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",
|
||||
components: {
|
||||
@ -69,12 +70,16 @@ export default {
|
||||
methods: {
|
||||
/* 获取顶栏数据 */
|
||||
getTopData() {
|
||||
getTotalCount().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.topList = [
|
||||
{ name: "巡查总里程", value: 54, unit: "个" },
|
||||
{ name: "现存病害总数", value: 54, unit: "个" },
|
||||
{ name: "公路资产总数", value: 54, unit: "个" },
|
||||
{ name: "交安事件总数", value: 54, unit: "个" },
|
||||
{ name: "路面病害总数", value: data.road, unit: "个" },
|
||||
{ name: "交安事件病害总数 ", value: data.event, unit: "个" },
|
||||
{ name: "桥隧病害总数", value: data.bridge, unit: "个" },
|
||||
{ name: "绿化病害总数", value: data.green, unit: "个" },
|
||||
];
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user