fix：联调接口，差交安事件
This commit is contained in:
parent
e52a22edb7
commit
0bf0db3ff8
153
src/api/xj/map.js
Normal file
153
src/api/xj/map.js
Normal file
@ -0,0 +1,153 @@
|
||||
// 02转84坐标
|
||||
export function gcj02ToWgs84([lng, lat]) {
|
||||
const a = 6378245.0;
|
||||
const ee = 0.00669342162296594323;
|
||||
const pi = Math.PI;
|
||||
|
||||
if (outOfChina02(lng, lat)) {
|
||||
return [lng, lat];
|
||||
} else {
|
||||
let dlat = transformLat02(lng - 105.0, lat - 35.0);
|
||||
let dlng = transformLng02(lng - 105.0, lat - 35.0);
|
||||
const radLat = (lat / 180.0) * pi;
|
||||
let magic = Math.sin(radLat);
|
||||
magic = 1 - ee * magic * magic;
|
||||
const sqrtMagic = Math.sqrt(magic);
|
||||
dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtMagic)) * pi);
|
||||
dlng = (dlng * 180.0) / ((a / sqrtMagic) * Math.cos(radLat) * pi);
|
||||
const mgLat = lat + dlat;
|
||||
const mgLng = lng + dlng;
|
||||
return [lng * 2 - mgLng, lat * 2 - mgLat];
|
||||
}
|
||||
}
|
||||
|
||||
function outOfChina02(lng, lat) {
|
||||
return lng < 72.004 || lng > 137.8347 || lat < 0.8293 || lat > 55.8271;
|
||||
}
|
||||
|
||||
// 经纬度转换
|
||||
function transformLat02(lng, lat) {
|
||||
let ret =
|
||||
-100.0 +
|
||||
2.0 * lng +
|
||||
3.0 * lat +
|
||||
0.2 * lat * lat +
|
||||
0.1 * lng * lat +
|
||||
0.2 * Math.sqrt(Math.abs(lng));
|
||||
ret +=
|
||||
((20.0 * Math.sin(6.0 * lng * Math.PI) +
|
||||
20.0 * Math.sin(2.0 * lng * Math.PI)) *
|
||||
2.0) /
|
||||
3.0;
|
||||
ret +=
|
||||
((20.0 * Math.sin(lat * Math.PI) + 40.0 * Math.sin((lat / 3.0) * Math.PI)) *
|
||||
2.0) /
|
||||
3.0;
|
||||
ret +=
|
||||
((160.0 * Math.sin((lat / 12.0) * Math.PI) +
|
||||
320 * Math.sin((lat * Math.PI) / 30.0)) *
|
||||
2.0) /
|
||||
3.0;
|
||||
return ret;
|
||||
}
|
||||
|
||||
function transformLng02(lng, lat) {
|
||||
let ret =
|
||||
300.0 +
|
||||
lng +
|
||||
2.0 * lat +
|
||||
0.1 * lng * lng +
|
||||
0.1 * lng * lat +
|
||||
0.1 * Math.sqrt(Math.abs(lng));
|
||||
ret +=
|
||||
((20.0 * Math.sin(6.0 * lng * Math.PI) +
|
||||
20.0 * Math.sin(2.0 * lng * Math.PI)) *
|
||||
2.0) /
|
||||
3.0;
|
||||
ret +=
|
||||
((20.0 * Math.sin(lng * Math.PI) + 40.0 * Math.sin((lng / 3.0) * Math.PI)) *
|
||||
2.0) /
|
||||
3.0;
|
||||
ret +=
|
||||
((150.0 * Math.sin((lng / 12.0) * Math.PI) +
|
||||
300.0 * Math.sin((lng / 30.0) * Math.PI)) *
|
||||
2.0) /
|
||||
3.0;
|
||||
return ret;
|
||||
}
|
||||
|
||||
// 84转02坐标
|
||||
export function wgs84ToGcj02([lng, lat]) {
|
||||
if (outOfChina84(lng, lat)) {
|
||||
return { lng, lat };
|
||||
}
|
||||
let dlat = transformLat84(lng - 105.0, lat - 35.0);
|
||||
let dlng = transformLng84(lng - 105.0, lat - 35.0);
|
||||
const radLat = (lat / 180.0) * Math.PI;
|
||||
let magic = Math.sin(radLat);
|
||||
magic = 1 - 0.00669342162296594323 * magic * magic;
|
||||
const sqrtMagic = Math.sqrt(magic);
|
||||
dlat =
|
||||
(dlat * 180.0) /
|
||||
(((6378245.0 * (1 - 0.00669342162296594323)) / (magic * sqrtMagic)) *
|
||||
Math.PI);
|
||||
dlng =
|
||||
(dlng * 180.0) / ((6378245.0 / sqrtMagic) * Math.cos(radLat) * Math.PI);
|
||||
const gcjLng = lng + dlng;
|
||||
const gcjLat = lat + dlat;
|
||||
return [gcjLng, gcjLat];
|
||||
}
|
||||
|
||||
// 判断是否在中国境内
|
||||
function outOfChina84(lng, lat) {
|
||||
return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55);
|
||||
}
|
||||
|
||||
// 转换公式所需的常量
|
||||
function transformLat84(x, y) {
|
||||
let ret =
|
||||
-100.0 +
|
||||
2.0 * x +
|
||||
3.0 * y +
|
||||
0.2 * y * y +
|
||||
0.1 * x * y +
|
||||
0.2 * Math.sqrt(Math.abs(x));
|
||||
ret +=
|
||||
((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) *
|
||||
2.0) /
|
||||
3.0;
|
||||
ret +=
|
||||
((20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin((y / 3.0) * Math.PI)) *
|
||||
2.0) /
|
||||
3.0;
|
||||
ret +=
|
||||
((160.0 * Math.sin((y / 12.0) * Math.PI) +
|
||||
320 * Math.sin((y * Math.PI) / 30.0)) *
|
||||
2.0) /
|
||||
3.0;
|
||||
return ret;
|
||||
}
|
||||
|
||||
function transformLng84(x, y) {
|
||||
let ret =
|
||||
300.0 +
|
||||
x +
|
||||
2.0 * y +
|
||||
0.1 * x * x +
|
||||
0.1 * x * y +
|
||||
0.1 * Math.sqrt(Math.abs(x));
|
||||
ret +=
|
||||
((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) *
|
||||
2.0) /
|
||||
3.0;
|
||||
ret +=
|
||||
((20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin((x / 3.0) * Math.PI)) *
|
||||
2.0) /
|
||||
3.0;
|
||||
ret +=
|
||||
((150.0 * Math.sin((x / 12.0) * Math.PI) +
|
||||
300.0 * Math.sin((x / 30.0) * Math.PI)) *
|
||||
2.0) /
|
||||
3.0;
|
||||
return ret;
|
||||
}
|
||||
59
src/api/xj/screen/disease-screen.js
Normal file
59
src/api/xj/screen/disease-screen.js
Normal file
@ -0,0 +1,59 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
// 路面状况排名接口
|
||||
export function roadRankList(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getDefectCountRanking",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 病害趋势柱状图接口
|
||||
export function roadTrends(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getHistoryDefect",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 今日巡查数据
|
||||
export function roadToday(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getInspectionInfo",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// pci排名数据
|
||||
export function roadPic(query) {
|
||||
return request({
|
||||
url: "/bigscreen/pciRanking",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 病害趋势3维饼图
|
||||
export function roadCurrent(query) {
|
||||
return request({
|
||||
url: "/bigscreen/roadStatus",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 数据栏内右上角下拉框
|
||||
export function getDropList(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getDropdownList",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
12
src/api/xj/screen/index.js
Normal file
12
src/api/xj/screen/index.js
Normal file
@ -0,0 +1,12 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
// 获取数据栏右上角选择数据接口
|
||||
export function selectTypeList(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getSwitch",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
56
src/api/xj/screen/road-screen.js
Normal file
56
src/api/xj/screen/road-screen.js
Normal file
@ -0,0 +1,56 @@
|
||||
/*
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-25 14:44:22
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-25 16:25:39
|
||||
* @FilePath: \znxjxt-ui\src\api\xj\screen\road-screen.js
|
||||
* @Description: 道路资产大屏接口
|
||||
*/
|
||||
import request from "@/utils/request";
|
||||
|
||||
// 路面状况排名接口
|
||||
export function roadRankStatistics(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getRoadStatistics",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 附属设施分布接口
|
||||
export function ancillaryList(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getEquipmentScale",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 附属设施分布累计路产数
|
||||
export function ancillaryCount(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getEquipmentCount",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 附属设施异常统计接口
|
||||
export function anomalyList(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getEquipmentAnomalyLog",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 路产统计信息接口
|
||||
export function roadStatisticList(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getEquipmentStatistics",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
@ -9,6 +9,14 @@ export function getSectionList(query) {
|
||||
});
|
||||
}
|
||||
|
||||
// 查询路线下拉列表
|
||||
export function getSegmentList() {
|
||||
return request({
|
||||
url: "/xj/route/listDropDown",
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
// 新增路段
|
||||
export function addSection(query) {
|
||||
return request({
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-14 10:04:12
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-14 10:27:49
|
||||
* @LastEditTime: 2024-10-25 13:55:51
|
||||
* @FilePath: \znxjxt-ui\src\api\xj\task.js
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
* @Description: 巡检任务管理接口
|
||||
*/
|
||||
import request from "@/utils/request";
|
||||
|
||||
@ -17,6 +17,15 @@ export function getTaskTable(params) {
|
||||
});
|
||||
}
|
||||
|
||||
// 任务id模糊查询接口
|
||||
export function getTaskIdList(params) {
|
||||
return request({
|
||||
url: "/xj/xjtask/taskDropDown",
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 巡检路段下拉数据
|
||||
export function getSegment() {
|
||||
return request({
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-14 10:46:23
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-23 15:33:10
|
||||
* @LastEditTime: 2024-10-24 17:17:45
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\fssm-map.vue
|
||||
* @Description: 公共地图
|
||||
-->
|
||||
@ -164,6 +164,7 @@ export default {
|
||||
/* 初始化openlayer地图 */
|
||||
initMap() {
|
||||
const tianditu_vec_c = new TileLayer({
|
||||
className: "baseLayerClass",
|
||||
title: "矢量底图",
|
||||
id: "vec_c",
|
||||
source: new XYZ({
|
||||
@ -173,6 +174,7 @@ export default {
|
||||
visible: true,
|
||||
});
|
||||
const tianditu_cva_c = new TileLayer({
|
||||
className: "baseLayerClass",
|
||||
title: "矢量地图",
|
||||
id: "cva_c",
|
||||
source: new XYZ({
|
||||
|
||||
@ -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,25 +75,58 @@ 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: "回家" },
|
||||
];
|
||||
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图 */
|
||||
drawChart() {
|
||||
@ -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() {
|
||||
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,
|
||||
@ -85,6 +112,7 @@ export default {
|
||||
fontSize: 12,
|
||||
},
|
||||
boundaryGap: false, // true折线图以x轴刻度为中心点 false折线图折线从头开始
|
||||
data: xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
@ -111,7 +139,7 @@ export default {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "龟裂",
|
||||
name: "坑槽",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
@ -137,10 +165,10 @@ export default {
|
||||
itemStyle: {
|
||||
color: "#FFC100", // 节点颜色
|
||||
},
|
||||
data: [15, 29, 32, 5, 14, 42],
|
||||
data: yData1,
|
||||
},
|
||||
{
|
||||
name: "车辙",
|
||||
name: "块状修补(沥青)",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
@ -166,10 +194,10 @@ export default {
|
||||
itemStyle: {
|
||||
color: "#08B4A6",
|
||||
},
|
||||
data: [30, 35, 32, 35, 18, 72],
|
||||
data: yData2,
|
||||
},
|
||||
{
|
||||
name: "坑槽",
|
||||
name: "条状修补(沥青)",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
@ -195,7 +223,7 @@ export default {
|
||||
itemStyle: {
|
||||
color: "#146fd7",
|
||||
},
|
||||
data: [20, 25, 12, 25, 8, 62],
|
||||
data: yData3,
|
||||
},
|
||||
{
|
||||
name: "横向裂缝",
|
||||
@ -224,7 +252,81 @@ export default {
|
||||
itemStyle: {
|
||||
color: "#994EFF",
|
||||
},
|
||||
data: [40, 45, 32, 45, 38, 82],
|
||||
data: yData4,
|
||||
},
|
||||
{
|
||||
name: "纵向裂缝",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#994EFF",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(153,78,255,0)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "#994EFF",
|
||||
},
|
||||
// 设置节点样式
|
||||
showSymbol: false,
|
||||
symbol: "circle", // 可以选择 circle, diamond, pin 等
|
||||
symbolSize: 10, // 节点大小
|
||||
itemStyle: {
|
||||
color: "#994EFF",
|
||||
},
|
||||
data: yData5,
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
// 设置滚动条的隐藏与显示
|
||||
show: false,
|
||||
// 设置滚动条类型
|
||||
type: "slider",
|
||||
// 设置背景颜色
|
||||
backgroundColor: "rgba(225,225,225,0.2)",
|
||||
// 设置选中范围的填充颜色
|
||||
fillerColor: "#ccc",
|
||||
// 设置边框颜色
|
||||
borderColor: "rgba(225,225,225,0.2)",
|
||||
// 是否显示detail，即拖拽时候显示详细数值信息
|
||||
showDetail: false,
|
||||
// 数据窗口范围的起始数值
|
||||
startValue: 0,
|
||||
// 数据窗口范围的结束数值（一页显示多少条数据）
|
||||
endValue: 6,
|
||||
// empty：当前数据窗口外的数据，被设置为空。
|
||||
// 即不会影响其他轴的数据范围
|
||||
filterMode: "empty",
|
||||
// 设置滚动条宽度，相对于盒子宽度
|
||||
width: "80%",
|
||||
// 设置滚动条高度
|
||||
height: 5,
|
||||
// 设置滚动条显示位置
|
||||
left: "center",
|
||||
// 是否锁定选择区域（或叫做数据窗口）的大小
|
||||
zoomLoxk: true,
|
||||
// 控制手柄的尺寸
|
||||
handleSize: 10,
|
||||
// dataZoom-slider组件离容器下侧的距离
|
||||
bottom: 0,
|
||||
},
|
||||
{
|
||||
// 没有下面这块的话，只能拖动滚动条，
|
||||
// 鼠标滚轮在区域内不能控制外部滚动条
|
||||
type: "inside",
|
||||
// 滚轮是否触发缩放
|
||||
zoomOnMouseWheel: false,
|
||||
// 鼠标滚轮触发滚动
|
||||
moveOnMouseMove: true,
|
||||
moveOnMouseWheel: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:31:31
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 14:22:33
|
||||
* @LastEditTime: 2024-10-24 15:35:02
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\pic-rank.vue
|
||||
* @Description: 病害巡检-pic排名
|
||||
-->
|
||||
@ -13,6 +13,7 @@
|
||||
class="vue-scroll"
|
||||
:class-option="defaultOption"
|
||||
:data="picList"
|
||||
v-if="picList.length > 4"
|
||||
>
|
||||
<div
|
||||
class="pic-div"
|
||||
@ -22,24 +23,48 @@
|
||||
<div class="pic-top">
|
||||
<div class="pic-top-name">
|
||||
<a>{{ index + 1 }}</a
|
||||
>{{ item.name }}
|
||||
>{{ item.roadName }}
|
||||
</div>
|
||||
<div class="pic-top-value">
|
||||
<span>{{ item.value }}</span>
|
||||
<span>{{ item.pci }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pic-bottom">
|
||||
<div
|
||||
:style="{ width: `${(item.value / 300) * 100}%` }"
|
||||
:style="{ width: `${item.pci}%` }"
|
||||
:class="`pic-bottom-${index}`"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
<template v-else>
|
||||
<div
|
||||
class="pic-div"
|
||||
v-for="(item, index) in picList"
|
||||
:key="`pic-${index}`"
|
||||
>
|
||||
<div class="pic-top">
|
||||
<div class="pic-top-name">
|
||||
<a>{{ index + 1 }}</a
|
||||
>{{ item.roadName }}
|
||||
</div>
|
||||
<div class="pic-top-value">
|
||||
<span>{{ item.pci }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pic-bottom">
|
||||
<div
|
||||
:style="{ width: `${item.pci}%` }"
|
||||
:class="`pic-bottom-${index}`"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { roadPic } from "@/api/xj/screen/disease-screen";
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
export default {
|
||||
name: "PicRank",
|
||||
@ -58,15 +83,22 @@ export default {
|
||||
waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
|
||||
},
|
||||
// 排名数据
|
||||
picList: [
|
||||
{ name: "沈阳绕城高速（G1501）", value: 95 },
|
||||
{ name: "沈阳绕城高速（G1501）", value: 75 },
|
||||
{ name: "沈阳绕城高速（G1501）", value: 70 },
|
||||
{ name: "沈阳绕城高速（G1501）", value: 65 },
|
||||
{ name: "沈阳绕城高速（G1501）", value: 55 },
|
||||
],
|
||||
picList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getPicData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取数据 */
|
||||
getPicData() {
|
||||
roadPic().then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.picList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:33:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-18 15:05:44
|
||||
* @LastEditTime: 2024-10-25 16:19:23
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\road-rank.vue
|
||||
* @Description: 病害巡检-路面状况排名
|
||||
-->
|
||||
@ -13,6 +13,7 @@
|
||||
class="vue-scroll"
|
||||
:class-option="defaultOption"
|
||||
:data="roadList"
|
||||
v-if="roadList.length > 4"
|
||||
>
|
||||
<div
|
||||
class="road-div"
|
||||
@ -22,19 +23,66 @@
|
||||
<div class="index" :class="`road-index-${index}`">TOP</div>
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="value">病害数：{{ item.value }}</div>
|
||||
<div :class="`rate-${item.tip}`" class="rate">
|
||||
环比：<span>{{ item.rate }}</span>
|
||||
<div
|
||||
:class="`rate-${
|
||||
item.huanbi > 0 ? 'up' : item.huanbi === 0 ? '' : 'down'
|
||||
}`"
|
||||
class="rate"
|
||||
>
|
||||
环比：<span>{{ item.huanbi }}</span>
|
||||
</div>
|
||||
<div
|
||||
:class="`rate-${
|
||||
item.tongbi > 0 ? 'up' : item.tongbi === 0 ? '' : 'down'
|
||||
}`"
|
||||
class="rate"
|
||||
>
|
||||
同比：<span>{{ item.tongbi }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
<template v-else>
|
||||
<div
|
||||
class="road-div"
|
||||
v-for="(item, index) in roadList"
|
||||
:key="`road-${index}`"
|
||||
>
|
||||
<div class="index" :class="`road-index-${index}`">TOP</div>
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="value">病害数：{{ item.value }}</div>
|
||||
<div
|
||||
:class="`rate-${
|
||||
item.huanbi > 0 ? 'up' : item.huanbi === 0 ? '' : 'down'
|
||||
}`"
|
||||
class="rate"
|
||||
>
|
||||
环比：<span>{{ item.huanbi }}</span>
|
||||
</div>
|
||||
<div
|
||||
:class="`rate-${
|
||||
item.tongbi > 0 ? 'up' : item.tongbi === 0 ? '' : 'down'
|
||||
}`"
|
||||
class="rate"
|
||||
>
|
||||
同比：<span>{{ item.tongbi }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
import { roadRankList } from "@/api/xj/screen/disease-screen";
|
||||
export default {
|
||||
name: "RoadRank",
|
||||
components: { vueSeamlessScroll },
|
||||
props: {
|
||||
select: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 轮播配置
|
||||
@ -49,15 +97,34 @@ export default {
|
||||
waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
|
||||
},
|
||||
// 路面状况排名数据
|
||||
roadList: [
|
||||
{ name: "G10152", value: 523, rate: 0.23, tip: "up" },
|
||||
{ name: "G10152", value: 523, rate: 0.23, tip: "up" },
|
||||
{ name: "G10152", value: 523, rate: 0.23, tip: "down" },
|
||||
{ name: "G10152", value: 523, rate: 0.23, tip: "down" },
|
||||
{ name: "G10152", value: 523, rate: 0.23, tip: "up" },
|
||||
],
|
||||
roadList: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
select: {
|
||||
handler() {
|
||||
this.getRoadList();
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
/* 获取路面状况排名数据 */
|
||||
getRoadList() {
|
||||
roadRankList({ type: this.select }).then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.roadList = data.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
tongbi: item.tongbi.slice(0, 3),
|
||||
huanbi: item.huanbi.slice(0, 3),
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -70,9 +137,8 @@ export default {
|
||||
overflow: hidden;
|
||||
|
||||
.road-div {
|
||||
height: 2rem;
|
||||
min-height: 2rem;
|
||||
width: 100%;
|
||||
padding: 0 1.5rem;
|
||||
display: flex;
|
||||
|
||||
> div {
|
||||
|
||||
@ -2,26 +2,57 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 09:42:49
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-22 09:30:05
|
||||
* @LastEditTime: 2024-10-24 14:10:06
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\today-inspection.vue
|
||||
* @Description: 病害巡检-今日巡查
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="today-left"><span>86</span></div>
|
||||
<div class="today-left">
|
||||
<span>{{ today }}</span>
|
||||
</div>
|
||||
<div class="today-right">
|
||||
<div class="right-sum"><span>261</span>个</div>
|
||||
<div class="right-rate"><span> 37 </span>%</div>
|
||||
<div class="right-sum">
|
||||
<span>{{ all }}</span
|
||||
>个
|
||||
</div>
|
||||
<div class="right-rate">
|
||||
<span> {{ scale }}</span
|
||||
>%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { roadToday } from "@/api/xj/screen/disease-screen";
|
||||
export default {
|
||||
name: "TodayInspection",
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
// 新增病害总数
|
||||
today: "0",
|
||||
// 病害总数
|
||||
all: "0",
|
||||
// 增长率
|
||||
scale: "0",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取数据 */
|
||||
getData() {
|
||||
roadToday().then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.today = data.today;
|
||||
this.all = data.all;
|
||||
this.scale = (data.scale * 1).toFixed(2);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -117,7 +148,7 @@ export default {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff,
|
||||
#E9BC5C
|
||||
#e9bc5c
|
||||
); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
|
||||
background-clip: text; /*将设置的背景颜色限制在文字中*/
|
||||
-webkit-text-fill-color: transparent; /*给文字设置成透明*/
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-23 16:12:45
|
||||
* @LastEditTime: 2024-10-25 16:40:29
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@ -16,7 +16,6 @@
|
||||
height="45"
|
||||
frameborder="0"
|
||||
allowtransparency="true"
|
||||
@load="loadFrame"
|
||||
src="https://i.tianqi.com?c=code&id=12&icon=1&color=%2389C5E8&py=shenyang&num=1&site=12"
|
||||
></iframe>
|
||||
</div>
|
||||
@ -46,8 +45,12 @@
|
||||
></template>
|
||||
<template slot="operation" v-if="item.selectIsShow">
|
||||
<el-radio-group class="screen-checkBox" v-model="item.select">
|
||||
<el-radio-button label="1">公司</el-radio-button>
|
||||
<el-radio-button label="2">线路</el-radio-button>
|
||||
<el-radio-button
|
||||
v-for="(item, index) in selectTypeArr"
|
||||
:label="item.value"
|
||||
:key="`left-screen-${index}`"
|
||||
>{{ item.label }}</el-radio-button
|
||||
>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
</module-block>
|
||||
@ -61,11 +64,17 @@
|
||||
:title="item.title"
|
||||
:class="item.class"
|
||||
>
|
||||
<template><component :is="item.component"></component></template>
|
||||
<template
|
||||
><component :select="item.select" :is="item.component"></component
|
||||
></template>
|
||||
<template slot="operation" v-if="item.selectIsShow">
|
||||
<el-radio-group class="screen-checkBox" v-model="item.select">
|
||||
<el-radio-button label="1">公司</el-radio-button>
|
||||
<el-radio-button label="2">线路</el-radio-button>
|
||||
<el-radio-button
|
||||
v-for="(item, index) in selectTypeArr"
|
||||
:label="item.value"
|
||||
:key="`right-screen-${index}`"
|
||||
>{{ item.label }}</el-radio-button
|
||||
>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
</module-block>
|
||||
@ -98,6 +107,10 @@
|
||||
<!-- 图片背景 -->
|
||||
<div class="disease-content" v-if="showImgBk">
|
||||
<div class="disease-title" @click="changeMap(false)"></div>
|
||||
<div class="map-legend"></div>
|
||||
<div class="map-care">
|
||||
<div class="map-care-div"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地图 -->
|
||||
<fssm-map
|
||||
@ -180,6 +193,8 @@ import TrafficRank from "./traffic-components/traffic-rank.vue";
|
||||
import TrafficEmergency from "./traffic-components/traffic-emergency.vue";
|
||||
import ImgDialog from "./components/img-dialog.vue";
|
||||
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
|
||||
// 接口
|
||||
import { selectTypeList } from "@/api/xj/screen/index";
|
||||
export default {
|
||||
name: "BigScreen",
|
||||
components: {
|
||||
@ -213,6 +228,8 @@ export default {
|
||||
weekTime: "",
|
||||
// 年
|
||||
yearTime: "",
|
||||
// 数据栏右上角选择框
|
||||
selectTypeArr: [],
|
||||
// 左侧切换模块
|
||||
leftModuleList: [
|
||||
{
|
||||
@ -237,7 +254,7 @@ export default {
|
||||
title: "病害趋势",
|
||||
component: DiseaseCurrent,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
select: "",
|
||||
class: "twe",
|
||||
},
|
||||
],
|
||||
@ -265,7 +282,7 @@ export default {
|
||||
title: "路面状况排名",
|
||||
component: RoadRank,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
select: "",
|
||||
class: "twe",
|
||||
},
|
||||
],
|
||||
@ -276,7 +293,7 @@ export default {
|
||||
{ name: "巡查车", click: "1" },
|
||||
{ name: "病害", click: "2" },
|
||||
{ name: "路产", click: "3" },
|
||||
{ name: "PCL", click: "4" },
|
||||
{ name: "事件", click: "4" },
|
||||
],
|
||||
/* 具体icon类别 */
|
||||
iconTypeList: [],
|
||||
@ -310,12 +327,9 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.setTime();
|
||||
this.getSelect();
|
||||
},
|
||||
methods: {
|
||||
/* iframe加载完成回调方法 */
|
||||
loadFrame() {
|
||||
const iframe = document.getElementById("iframeId");
|
||||
},
|
||||
/* 获取当前时间 */
|
||||
setTime() {
|
||||
this.timeFlag = setInterval(() => {
|
||||
@ -348,6 +362,14 @@ export default {
|
||||
this.dataTime = `${hours}:${minutes}:${seconds}`;
|
||||
}, 1000);
|
||||
},
|
||||
/* 获取数据栏右上角选项数据 */
|
||||
getSelect() {
|
||||
selectTypeList().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.selectTypeArr = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 点击病害筛查 */
|
||||
clickImg() {
|
||||
this.imgVisible = true;
|
||||
@ -632,7 +654,7 @@ export default {
|
||||
title: "病害趋势",
|
||||
component: DiseaseCurrent,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
select: "",
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
@ -659,7 +681,7 @@ export default {
|
||||
title: "路面状况排名",
|
||||
component: RoadRank,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
select: "",
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
@ -689,7 +711,7 @@ export default {
|
||||
title: "附属设施异常统计",
|
||||
component: AnomalyFacilities,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
select: "",
|
||||
class: "one",
|
||||
},
|
||||
{
|
||||
@ -698,7 +720,7 @@ export default {
|
||||
title: "路产统计",
|
||||
component: RoadStatistic,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
select: "",
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
@ -717,7 +739,7 @@ export default {
|
||||
height: "14rem",
|
||||
title: "交安事件趋势",
|
||||
component: TrafficTrend,
|
||||
selectIsShow: false,
|
||||
selectIsShow: true,
|
||||
class: "twe",
|
||||
},
|
||||
{
|
||||
@ -726,7 +748,7 @@ export default {
|
||||
title: "交安事件统计",
|
||||
component: TrafficStatistic,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
select: "",
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
@ -737,7 +759,7 @@ export default {
|
||||
title: "交安事件排名",
|
||||
component: TrafficRank,
|
||||
selectIsShow: true,
|
||||
select: "1",
|
||||
select: "",
|
||||
class: "one",
|
||||
},
|
||||
{
|
||||
@ -853,8 +875,8 @@ export default {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 29rem;
|
||||
top: 6rem;
|
||||
left: 27%;
|
||||
top: 10%;
|
||||
|
||||
.road-div {
|
||||
width: 100%;
|
||||
@ -924,9 +946,6 @@ export default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// position: absolute;
|
||||
// left: 30rem;
|
||||
// top: 12rem;
|
||||
font-size: 0.8rem;
|
||||
color: #ffffff;
|
||||
background-color: #395569;
|
||||
@ -945,8 +964,8 @@ export default {
|
||||
width: 8rem;
|
||||
height: 10rem;
|
||||
position: absolute;
|
||||
right: 28rem;
|
||||
top: 6rem;
|
||||
right: 26%;
|
||||
top: 10%;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.4rem;
|
||||
border: 1px solid #193dae;
|
||||
@ -971,6 +990,7 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
// 标题
|
||||
.disease-title {
|
||||
width: 20rem;
|
||||
height: 2.8rem;
|
||||
@ -982,9 +1002,29 @@ export default {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
// 图例
|
||||
.map-legend {
|
||||
height: 9rem;
|
||||
width: 2rem;
|
||||
position: absolute;
|
||||
top: 13%;
|
||||
left: 26%;
|
||||
background-color: #1cb6ff;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
::v-deep .ol-layer:nth-child(1) {
|
||||
// 打点部分
|
||||
.map-care {
|
||||
width: 48%;
|
||||
height: 73%;
|
||||
position: absolute;
|
||||
left: 26%;
|
||||
top: 13%;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .baseLayerClass {
|
||||
filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg)
|
||||
brightness(80%) saturate(550%);
|
||||
}
|
||||
@ -1071,7 +1111,7 @@ export default {
|
||||
|
||||
.change-map-div {
|
||||
cursor: pointer;
|
||||
margin: 0 1.2rem;
|
||||
margin: 0 2rem;
|
||||
}
|
||||
|
||||
.change-map-click {
|
||||
|
||||
@ -2,24 +2,24 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 15:18:03
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-22 09:05:30
|
||||
* @LastEditTime: 2024-10-25 16:27:10
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\road-components\ancillary-facilities.vue
|
||||
* @Description: 道路资产大屏-附属设施分布
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="ancillary-top"><span>21465</span></div>
|
||||
<div class="ancillary-top"><span>{{sum}}</span></div>
|
||||
<div class="ancillary-bottom">
|
||||
<div
|
||||
:class="`ancillary-bottom-${index}`"
|
||||
v-for="(item, index) in ancillaryList"
|
||||
:key="`ancillary-${index}`"
|
||||
>
|
||||
<div>{{ item.name }}</div>
|
||||
<div>{{ item.label }}</div>
|
||||
<div>
|
||||
<span>{{ item.value }}</span
|
||||
><a>{{ item.unit }}</a>
|
||||
><a>个</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -27,24 +27,40 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ancillaryList, ancillaryCount } from "@/api/xj/screen/road-screen";
|
||||
export default {
|
||||
name: "AncillaryFacilities",
|
||||
data() {
|
||||
return {
|
||||
// 附属设施总数
|
||||
sum: 0,
|
||||
// 附属设施分布数据
|
||||
ancillaryList: [
|
||||
{ name: "里程桩", value: 123, unit: "个" },
|
||||
{ name: "禁令标志", value: 123, unit: "个" },
|
||||
{ name: "指示标志", value: 123, unit: "个" },
|
||||
{ name: "警告标志", value: 123, unit: "个" },
|
||||
{ name: "指路标志", value: 123, unit: "个" },
|
||||
{ name: "辅助标志", value: 123, unit: "个" },
|
||||
{ name: "球机", value: 123, unit: "个" },
|
||||
{ name: "枪机", value: 123, unit: "个" },
|
||||
],
|
||||
ancillaryList: [],
|
||||
};
|
||||
},
|
||||
methods: {},
|
||||
created() {
|
||||
this.getAncillaryList();
|
||||
this.getSum();
|
||||
},
|
||||
methods: {
|
||||
/* 获取附属设施分总数 */
|
||||
getSum() {
|
||||
ancillaryCount().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.sum = data.count;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取附属设施分布数据 */
|
||||
getAncillaryList() {
|
||||
ancillaryList().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.ancillaryList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 15:21:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-21 16:03:14
|
||||
* @LastEditTime: 2024-10-25 15:37:00
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\road-components\anomaly-facilities.vue
|
||||
* @Description: 附属设施异常统计
|
||||
-->
|
||||
@ -29,49 +29,137 @@
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { getDropList } from "@/api/xj/screen/disease-screen";
|
||||
import { anomalyList } from "@/api/xj/screen/road-screen";
|
||||
export default {
|
||||
name: "AnomalyFacilities",
|
||||
props: {
|
||||
select: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 下拉框绑定
|
||||
itemSelect: "1",
|
||||
itemSelect: "",
|
||||
// 下拉框数据
|
||||
currentList: [
|
||||
{
|
||||
label: "分公司",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "分公司2",
|
||||
value: "2",
|
||||
},
|
||||
{
|
||||
label: "分公3",
|
||||
value: "3",
|
||||
},
|
||||
{
|
||||
label: "分公司4",
|
||||
value: "4",
|
||||
},
|
||||
{
|
||||
label: "分公司5",
|
||||
value: "5",
|
||||
},
|
||||
],
|
||||
currentList: [],
|
||||
// echart图数据
|
||||
anomalyData: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
select: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.getCurrentList();
|
||||
this.getChartData();
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
itemSelect: {
|
||||
handler() {
|
||||
this.getChartData();
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getChartData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取右上角下拉框数据 */
|
||||
getCurrentList() {
|
||||
getDropList({ type: this.select }).then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.currentList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 获取柱状图数据 */
|
||||
getChartData() {
|
||||
const data = {
|
||||
id: this.itemSelect,
|
||||
type: this.select,
|
||||
};
|
||||
anomalyList(data).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
// this.anomalyData = data;
|
||||
this.anomalyData = [
|
||||
{ label: "sss", value: 52 },
|
||||
{ label: "sss", value: 52 },
|
||||
{ label: "sss", value: 52 },
|
||||
{ label: "sss", value: 52 },
|
||||
{ label: "sss", value: 52 },
|
||||
{ label: "sss", value: 52 },
|
||||
{ label: "sss", value: 52 },
|
||||
{ label: "sss", value: 52 },
|
||||
];
|
||||
this.$nextTick(() => {
|
||||
this.drawChart();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 绘制echart */
|
||||
drawChart() {
|
||||
const xData = this.anomalyData.map((item) => {
|
||||
return item.label;
|
||||
});
|
||||
const yData = this.anomalyData.map((item, index) => {
|
||||
if (index % 2 == 0) {
|
||||
return {
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#033E43",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00FFEA",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#034299",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#35F0FF",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
});
|
||||
const chart = echarts.init(this.$refs.anomalyChart);
|
||||
chart.setOption({
|
||||
// backgroundColor: "#041139",
|
||||
@ -95,12 +183,10 @@ export default {
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
data: ["fdfs", "frffs", "wdwe", "10-1", "asdasd", "asd", "fdfs"],
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#808C9F",
|
||||
fontSize: 12,
|
||||
},
|
||||
interval: 0,
|
||||
},
|
||||
axisLine: {
|
||||
@ -138,12 +224,10 @@ export default {
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#808C9F",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
// 柱体
|
||||
@ -169,176 +253,7 @@ export default {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 15,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#034299",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#35F0FF",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 25,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#033E43",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00FFEA",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 35,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#034299",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#35F0FF",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 45,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#033E43",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00FFEA",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 55,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#034299",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#35F0FF",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 65,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#033E43",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00FFEA",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 75,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#034299",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#35F0FF",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
data: yData,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@ -9,18 +9,42 @@
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="maintain-left"><span>286</span>km</div>
|
||||
<div class="maintain-right"><span>86</span>条</div>
|
||||
<div class="maintain-left">
|
||||
<span>{{ mileage }}</span
|
||||
>km
|
||||
</div>
|
||||
<div class="maintain-right">
|
||||
<span>{{ count }}</span
|
||||
>条
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { roadRankStatistics } from "@/api/xj/screen/road-screen";
|
||||
export default {
|
||||
name: "ManageMaintain",
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
// 道路总里程
|
||||
mileage: "0",
|
||||
// 道路总数
|
||||
count: "0",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getRoadList();
|
||||
},
|
||||
methods: {
|
||||
getRoadList() {
|
||||
roadRankStatistics().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.mileage = data.mileage;
|
||||
this.count = data.count;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 15:22:31
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-22 09:13:22
|
||||
* @LastEditTime: 2024-10-25 16:11:56
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\road-components\road-statistic.vue
|
||||
* @Description: 道路资产大屏-路产统计
|
||||
-->
|
||||
@ -17,7 +17,7 @@
|
||||
<div class="road-top">
|
||||
<div class="road-top-name">
|
||||
<a>{{ index + 1 < 10 ? "0" + (index + 1) : index + 1 }}</a
|
||||
>{{ item.name }}
|
||||
>{{ item.label }}
|
||||
</div>
|
||||
<div class="road-top-value">
|
||||
<span>{{ item.value }}</span
|
||||
@ -27,40 +27,57 @@
|
||||
<div class="road-bottom">
|
||||
<div
|
||||
class="road-bottom-div"
|
||||
:style="{ width: `${item.value * 10}%` }"
|
||||
:style="{ width: `${item.rate * 100}%` }"
|
||||
:class="`bottom-${index}`"
|
||||
>
|
||||
<div
|
||||
v-for="(it, ind) in item.value"
|
||||
:key="`info-${ind}`"
|
||||
class="road-info"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { roadStatisticList } from "@/api/xj/screen/road-screen";
|
||||
export default {
|
||||
name: "RoadStatistic",
|
||||
props: {
|
||||
select: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
roadList: [
|
||||
{ name: "G10152", value: 7 },
|
||||
{ name: "G10152", value: 6 },
|
||||
{ name: "G10152", value: 5 },
|
||||
{ name: "G10152", value: 5 },
|
||||
{ name: "G10152", value: 1 },
|
||||
{ name: "G10152", value: 5 },
|
||||
{ name: "G10152", value: 3 },
|
||||
{ name: "G10152", value: 8 },
|
||||
{ name: "G10152", value: 3 },
|
||||
{ name: "G10152", value: 6 },
|
||||
],
|
||||
roadList: [],
|
||||
};
|
||||
},
|
||||
methods: {},
|
||||
watch: {
|
||||
select: {
|
||||
handler() {
|
||||
this.getRoadList();
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
/* 获取路产统计信息 */
|
||||
getRoadList() {
|
||||
roadStatisticList({ type: this.select }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
let sum = 0;
|
||||
data.forEach((element) => {
|
||||
sum += element.value;
|
||||
});
|
||||
this.roadList = data.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
rate: item.value / sum,
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -146,13 +163,6 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.road-info {
|
||||
height: 100%;
|
||||
width: 40px;
|
||||
border-left: 2px black solid;
|
||||
margin: 0 0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-0 {
|
||||
|
||||
@ -1,372 +0,0 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 16:23:48
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-23 11:26:47
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\road-screen.vue
|
||||
* @Description: 大屏-其他切换
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="road-content">
|
||||
<!-- 下拉框 -->
|
||||
<div class="road-select" @click="clickImg">
|
||||
<span>病害筛查</span>
|
||||
</div>
|
||||
<div class="disease-content" v-if="showImgBk">
|
||||
<div class="disease-title" @click="changeMap"></div>
|
||||
</div>
|
||||
<fssm-map
|
||||
v-if="!showImgBk"
|
||||
ref="roadMap"
|
||||
@feature-select="FeatureSelect"
|
||||
></fssm-map>
|
||||
<!-- 图片弹窗 -->
|
||||
<el-dialog
|
||||
:title="imgTitle"
|
||||
:visible.sync="imgVisible"
|
||||
width="80rem"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="imgCancel"
|
||||
>
|
||||
<img-dialog></img-dialog>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FssmMap from "@/components/map/fssm-map.vue";
|
||||
import { Feature } from "ol";
|
||||
import { Point } from "ol/geom";
|
||||
import { Style, Icon, Fill, Stroke, Circle, Text } from "ol/style";
|
||||
import logo from "@/assets/xc.png";
|
||||
import VectorSource from "ol/source/Vector";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
import * as geomExports from "ol/geom";
|
||||
import Cluster from "ol/source/Cluster";
|
||||
import ImgDialog from "./components/img-dialog.vue";
|
||||
export default {
|
||||
name: "RoadScreen",
|
||||
components: { FssmMap, ImgDialog },
|
||||
props: {},
|
||||
watch: {},
|
||||
data() {
|
||||
return {
|
||||
// 是否显示图片背景
|
||||
showImgBk: true,
|
||||
// 中心点集合
|
||||
centerPiont: [],
|
||||
// 线段点集合
|
||||
lineString: [],
|
||||
// 图片弹窗标题
|
||||
imgTitle: "查看",
|
||||
// 图片弹窗显隐控制
|
||||
imgVisible: false,
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
/* 点击病害筛查事件 */
|
||||
clickImg() {
|
||||
this.imgVisible = true;
|
||||
},
|
||||
/* 点击图片点位信息 */
|
||||
changeMap() {
|
||||
this.showImgBk = false;
|
||||
this.getCenterPiont();
|
||||
this.getLinePoint();
|
||||
},
|
||||
/* 获取地图点位信息 */
|
||||
getCenterPiont() {
|
||||
this.centerPiont = [
|
||||
[123.30297096718999, 41.87942945541742],
|
||||
[123.08770760049077, 41.99409925522211],
|
||||
[123.6210023341045, 41.94237193236056],
|
||||
];
|
||||
this.drawPoint();
|
||||
},
|
||||
/* 绘制地图点位 */
|
||||
drawPoint() {
|
||||
const features = [];
|
||||
this.centerPiont.forEach((element) => {
|
||||
// 修改坐标样式
|
||||
const point = new Point(element);
|
||||
const feature = new Feature({
|
||||
geometry: point,
|
||||
data: { data: "123", type: "icon" },
|
||||
// 自己设置一个标识
|
||||
type: "icon",
|
||||
});
|
||||
// 可以给点位设置样式
|
||||
// feature.setStyle([
|
||||
// new Style({
|
||||
// image: new Icon({
|
||||
// crossOrigin: "anonymous",
|
||||
// src: logo,
|
||||
// // 图标缩放比例
|
||||
// scale: 0.05,
|
||||
// }),
|
||||
// }),
|
||||
// ]);
|
||||
features.push(feature);
|
||||
});
|
||||
const clusterSource = new Cluster({
|
||||
distance: 200,
|
||||
minDistance: 20,
|
||||
source: new VectorSource({
|
||||
features,
|
||||
}),
|
||||
});
|
||||
const clusters = new VectorLayer({
|
||||
source: clusterSource,
|
||||
name: "clusterLayer",
|
||||
zIndex: 10,
|
||||
style: function clusterStyle(feature) {
|
||||
const count = feature.get("features").length;
|
||||
return new Style({
|
||||
image: new Icon({
|
||||
crossOrigin: "anonymous",
|
||||
src: logo,
|
||||
// 图标缩放比例
|
||||
scale: 0.05,
|
||||
// 0.3为30度
|
||||
rotation: 0.3,
|
||||
}),
|
||||
text: new Text({
|
||||
textAlign: "center", //位置
|
||||
textBaseline: "middle",
|
||||
font: "normal 14px 微软雅黑",
|
||||
offsetY: 15,
|
||||
fill: new Fill({
|
||||
color: "#ffffff",
|
||||
}),
|
||||
text: count > 1 ? count.toString() : "",
|
||||
}),
|
||||
});
|
||||
},
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.addLayer(clusters);
|
||||
});
|
||||
},
|
||||
/* 选中地图图标/线段事件 */
|
||||
FeatureSelect(e) {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
let selectedFeatures = e.selected;
|
||||
if (selectedFeatures.length > 0) {
|
||||
let feature = selectedFeatures[0];
|
||||
let features = feature.get("features");
|
||||
// 点击线段事件
|
||||
if (feature.getProperties().type === "line") {
|
||||
console.log(feature, "线段参数");
|
||||
} else {
|
||||
if (features.length === 1) {
|
||||
// 单个点位
|
||||
// 执行之前的业务逻辑
|
||||
// 获取点击的图层信息
|
||||
const selectFeature = feature.getProperties().features[0];
|
||||
console.log(selectFeature, "点位");
|
||||
// 获取点位数据
|
||||
console.log(selectFeature.get("data"));
|
||||
} else {
|
||||
// 聚合点
|
||||
// 放大地图层级
|
||||
map.getView().animate({
|
||||
center: feature.getGeometry().getCoordinates(),
|
||||
zoom: map.getView().getZoom() + 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 获取地图线段点位信息 */
|
||||
getLinePoint() {
|
||||
this.lineString = [
|
||||
[
|
||||
[123.32282646995006, 41.97498761493642],
|
||||
[123.35200891450947, 41.973156567233836],
|
||||
[123.37958916875502, 41.97956525514763],
|
||||
[123.39286432222431, 42.0021101177337],
|
||||
[123.40184182160729, 42.02952420024438],
|
||||
[123.4845914544503, 42.03583748930991],
|
||||
],
|
||||
[
|
||||
[122.5518798295274, 42.19039770874923],
|
||||
[123.7871925821671, 42.236903621119346],
|
||||
],
|
||||
];
|
||||
this.drawLine();
|
||||
},
|
||||
/* 绘制地图线段 */
|
||||
drawLine() {
|
||||
const features = [];
|
||||
this.lineString.forEach((element) => {
|
||||
const line = new Feature({
|
||||
geometry: new geomExports.LineString(element),
|
||||
type: "line",
|
||||
});
|
||||
line.setStyle([
|
||||
new Style({
|
||||
// 填充色
|
||||
fill: new Fill({
|
||||
color: "red",
|
||||
}),
|
||||
// 边线颜色
|
||||
stroke: new Stroke({
|
||||
color: "blue",
|
||||
width: 5,
|
||||
}),
|
||||
// 形状
|
||||
image: new Circle({
|
||||
radius: 17,
|
||||
fill: new Fill({
|
||||
color: "#ffffff",
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
]);
|
||||
features.push(line);
|
||||
});
|
||||
const lineSource = new VectorSource({
|
||||
features,
|
||||
});
|
||||
let markLayerLines = new VectorLayer({
|
||||
source: lineSource,
|
||||
properties: {
|
||||
type: "line",
|
||||
},
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.addLayer(markLayerLines);
|
||||
});
|
||||
},
|
||||
/* 清空地图图层的方法 */
|
||||
clearMapPoint() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.roadMap.clearMapFeature();
|
||||
});
|
||||
},
|
||||
/* 关闭图片查看弹窗 */
|
||||
imgCancel() {
|
||||
this.imgVisible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.road-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
// 病害筛查按钮样式
|
||||
.road-select {
|
||||
cursor: pointer;
|
||||
width: 4rem;
|
||||
height: 5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
position: absolute;
|
||||
left: 30rem;
|
||||
top: 6rem;
|
||||
color: #8deeff;
|
||||
background-image: url("../../assets/screen/road/road-select.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 80%;
|
||||
background-position: 50% 0;
|
||||
z-index: 1;
|
||||
|
||||
span {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 8rem;
|
||||
|
||||
.el-input .el-select__caret {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.el-input--medium .el-input__inner {
|
||||
height: 1.5rem;
|
||||
background-color: transparent;
|
||||
color: #89c5e8;
|
||||
border-color: #6991cd;
|
||||
}
|
||||
|
||||
.el-select-dropdown {
|
||||
background-color: #102649;
|
||||
border-color: #08204f;
|
||||
.el-scrollbar {
|
||||
.el-select-dropdown__wrap {
|
||||
.el-scrollbar__view {
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.selected {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.hover {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select-dropdown__list {
|
||||
background-color: #102649;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 图片背景样式
|
||||
.disease-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../../assets/screen/index/map-liaoning.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.disease-title {
|
||||
width: 20rem;
|
||||
height: 2.8rem;
|
||||
position: absolute;
|
||||
// top: 5rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 5rem);
|
||||
background-image: url("../../assets/screen/index/disease-title.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ol-layer:nth-child(1) {
|
||||
filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg)
|
||||
brightness(80%) saturate(550%);
|
||||
}
|
||||
|
||||
/* 修改弹窗样式 */
|
||||
::v-deep .el-dialog__header {
|
||||
background-color: #113463;
|
||||
|
||||
span,
|
||||
i {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body {
|
||||
background-color: #113463;
|
||||
}
|
||||
</style>
|
||||
@ -97,10 +97,8 @@ export default {
|
||||
{
|
||||
data: ["fdfs", "frffs", "wdwe", "10-1", "asdasd", "asd", "fdfs"],
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#808C9F",
|
||||
fontSize: 12,
|
||||
},
|
||||
interval: 0,
|
||||
},
|
||||
axisLine: {
|
||||
@ -138,12 +136,10 @@ export default {
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#808C9F",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
// 柱体
|
||||
|
||||
@ -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-10-12 15:22:08
|
||||
* @LastEditTime: 2024-10-25 11:29:20
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management .vue
|
||||
* @Description: 巡检信息管理-病害管理
|
||||
-->
|
||||
@ -40,7 +40,6 @@
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
clearable
|
||||
@change="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="病害类型" prop="defectType">
|
||||
@ -178,7 +177,7 @@
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
@click="handleDelete('')"
|
||||
v-hasPermi="['system:defect:remove']"
|
||||
>删除
|
||||
</el-button>
|
||||
@ -194,18 +193,18 @@
|
||||
>导出
|
||||
</el-button>
|
||||
</el-col> -->
|
||||
<el-col :span="1.5">
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit-outline"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
:disabled="multiple"
|
||||
@click="handleUpdateBatch"
|
||||
v-hasPermi="['system:defect:edit']"
|
||||
>批量确认
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
@ -248,7 +247,11 @@
|
||||
<el-table-column label="结束桩号" align="center" prop="stakeEnd" />
|
||||
<el-table-column label="病害图片" align="center" prop="media">
|
||||
<template slot-scope="scope">
|
||||
<img style="height: 3rem" :src="scope.row.media[0].img" />
|
||||
<el-image
|
||||
style="height: 3rem"
|
||||
:src="scope.row.media[0].img"
|
||||
:preview-src-list="[scope.row.media[0].img]"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="病害长度" align="center" prop="targetLen" />
|
||||
@ -354,7 +357,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-col :span="12" v-if="dialogTitle != '添加缺陷'">
|
||||
<el-form-item label="校验状态" prop="dataStatus">
|
||||
<el-select
|
||||
v-model="form.dataStatus"
|
||||
@ -370,7 +373,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-col :span="dialogTitle === '添加缺陷' ? 24 : 12">
|
||||
<el-form-item label="病害状态" prop="state">
|
||||
<el-select
|
||||
v-model="form.state"
|
||||
@ -537,6 +540,7 @@ import {
|
||||
changeDefectStatus,
|
||||
} from "@/api/xj/disease";
|
||||
import { getToken } from "@/utils/auth";
|
||||
import { gcj02ToWgs84, wgs84ToGcj02 } from "@/api/xj/map";
|
||||
|
||||
export default {
|
||||
name: "Defect",
|
||||
@ -597,8 +601,6 @@ export default {
|
||||
inspectDirection: "",
|
||||
media: [],
|
||||
},
|
||||
// 上传图片数组
|
||||
fileList: [],
|
||||
// 上传参数设置
|
||||
upload: {
|
||||
// 是否禁用上传
|
||||
@ -826,7 +828,9 @@ export default {
|
||||
inspectDirection: "",
|
||||
media: [],
|
||||
};
|
||||
if (this.$refs.addForm) {
|
||||
this.$refs["addForm"].resetFields();
|
||||
}
|
||||
// this.resetFormData();
|
||||
},
|
||||
/* 重置表单方法 */
|
||||
@ -894,21 +898,27 @@ export default {
|
||||
handleUpdate(row) {
|
||||
this.dialogVisible = true;
|
||||
this.dialogTitle = "修改缺陷";
|
||||
this.centerPoint = [
|
||||
this.centerPoint = gcj02ToWgs84([
|
||||
row.geometry.coordinates[0],
|
||||
row.geometry.coordinates[1],
|
||||
];
|
||||
]);
|
||||
this.$nextTick(() => {
|
||||
this.initMap("addMap");
|
||||
const e = {
|
||||
lnglat: {
|
||||
lat: row.geometry.coordinates[1],
|
||||
lng: row.geometry.coordinates[0],
|
||||
lng: gcj02ToWgs84([
|
||||
row.geometry.coordinates[0],
|
||||
row.geometry.coordinates[1],
|
||||
])[0],
|
||||
lat: gcj02ToWgs84([
|
||||
row.geometry.coordinates[0],
|
||||
row.geometry.coordinates[1],
|
||||
])[1],
|
||||
},
|
||||
};
|
||||
this.onMapClick(e);
|
||||
});
|
||||
this.form = row;
|
||||
this.form = { ...row, dataStatus: row.dataStatus.toString() };
|
||||
this.upload.fileList = row.media.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
@ -940,9 +950,9 @@ export default {
|
||||
},
|
||||
/* 文件上传成功处理 */
|
||||
handleFileSuccess(response, file, fileList) {
|
||||
this.fileList = fileList.map((item) => {
|
||||
this.upload.fileList = fileList.map((item) => {
|
||||
if (item.response) {
|
||||
return { img: item.response.url };
|
||||
return { ...item, img: item.response.url };
|
||||
}
|
||||
return item;
|
||||
});
|
||||
@ -958,16 +968,22 @@ export default {
|
||||
return false;
|
||||
}
|
||||
// 验证文件上传列表
|
||||
if (this.fileList.length < 1) {
|
||||
if (this.upload.fileList.length < 1) {
|
||||
this.$modal.msgWarning("请上传图片");
|
||||
return false;
|
||||
}
|
||||
const data = {
|
||||
...this.form,
|
||||
media: this.fileList,
|
||||
media: this.upload.fileList.map((item) => {
|
||||
return { ...item, img: item.img };
|
||||
}),
|
||||
geometry: {
|
||||
type: "Point",
|
||||
coordinates: [this.markers[0].lng, this.markers[0].lat],
|
||||
coordinates: wgs84ToGcj02([
|
||||
this.markers[0].lng,
|
||||
this.markers[0].lat,
|
||||
]),
|
||||
id: this.form?.geometry?.id,
|
||||
},
|
||||
};
|
||||
if (this.form.id) {
|
||||
@ -1053,11 +1069,27 @@ export default {
|
||||
this.openViewDialog = true;
|
||||
this.viewForm = defect;
|
||||
this.$nextTick(() => {
|
||||
this.centerPoint = [
|
||||
gcj02ToWgs84([
|
||||
defect.geometry.coordinates[0],
|
||||
defect.geometry.coordinates[1],
|
||||
])[0],
|
||||
gcj02ToWgs84([
|
||||
defect.geometry.coordinates[0],
|
||||
defect.geometry.coordinates[1],
|
||||
])[1],
|
||||
];
|
||||
this.initMap("viewMap");
|
||||
const e = {
|
||||
lnglat: {
|
||||
lat: defect.geometry.coordinates[1],
|
||||
lng: defect.geometry.coordinates[0],
|
||||
lng: gcj02ToWgs84([
|
||||
defect.geometry.coordinates[0],
|
||||
defect.geometry.coordinates[1],
|
||||
])[0],
|
||||
lat: gcj02ToWgs84([
|
||||
defect.geometry.coordinates[0],
|
||||
defect.geometry.coordinates[1],
|
||||
])[1],
|
||||
},
|
||||
};
|
||||
this.onMapClick(e);
|
||||
@ -1095,6 +1127,7 @@ export default {
|
||||
},
|
||||
/* 关闭查看对话框 */
|
||||
closeDialog() {
|
||||
this.centerPoint = [123.30297096718999, 41.87942945541742];
|
||||
this.openViewDialog = false;
|
||||
},
|
||||
},
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-11 16:52:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-12 14:13:23
|
||||
* @LastEditTime: 2024-10-25 11:17:56
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\road-management\components\road-add.vue
|
||||
* @Description: 路产管理-新增/编辑弹窗
|
||||
-->
|
||||
@ -156,15 +156,10 @@
|
||||
<script>
|
||||
import { addRoad, uploadRoad } from "@/api/xj/road";
|
||||
import { getToken } from "@/utils/auth";
|
||||
import { gcj02ToWgs84, wgs84ToGcj02 } from "@/api/xj/map";
|
||||
|
||||
export default {
|
||||
name: "RoadAdd",
|
||||
// props: [
|
||||
// "dialogItem",
|
||||
// "segmentList",
|
||||
// "defectStatus",
|
||||
// "roadType",
|
||||
// ],
|
||||
props: {
|
||||
dialogItem: {
|
||||
type: Object,
|
||||
@ -283,8 +278,14 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
const e = {
|
||||
lnglat: {
|
||||
lat: val.geometry.coordinates[1],
|
||||
lng: val.geometry.coordinates[0],
|
||||
lng: gcj02ToWgs84([
|
||||
val.geometry.coordinates[0],
|
||||
val.geometry.coordinates[1],
|
||||
])[0],
|
||||
lat: gcj02ToWgs84([
|
||||
val.geometry.coordinates[0],
|
||||
val.geometry.coordinates[1],
|
||||
])[1],
|
||||
},
|
||||
};
|
||||
this.onMapClick(e);
|
||||
@ -339,7 +340,11 @@ export default {
|
||||
}),
|
||||
geometry: {
|
||||
type: "Point",
|
||||
coordinates: [this.markers[0].lng, this.markers[0].lat],
|
||||
coordinates: wgs84ToGcj02([
|
||||
this.markers[0].lng,
|
||||
this.markers[0].lat,
|
||||
]),
|
||||
id: this.roadForm?.geometry?.id,
|
||||
},
|
||||
};
|
||||
if (this.roadForm.id) {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-12 13:11:05
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-14 09:11:45
|
||||
* @LastEditTime: 2024-10-25 11:24:51
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\road-management\components\road-view.vue
|
||||
* @Description: 交安事件-查看弹窗
|
||||
-->
|
||||
@ -43,6 +43,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { gcj02ToWgs84 } from "@/api/xj/map";
|
||||
export default {
|
||||
name: "RoadView",
|
||||
props: {
|
||||
@ -68,25 +69,44 @@ export default {
|
||||
watch: {
|
||||
dialogItem: {
|
||||
handler(val) {
|
||||
if (val.title === "查看路产") {
|
||||
this.viewForm = JSON.parse(JSON.stringify(val));
|
||||
this.$nextTick(() => {
|
||||
this.centerPoint = [
|
||||
gcj02ToWgs84([
|
||||
val.geometry.coordinates[0],
|
||||
val.geometry.coordinates[1],
|
||||
])[0],
|
||||
gcj02ToWgs84([
|
||||
val.geometry.coordinates[0],
|
||||
val.geometry.coordinates[1],
|
||||
])[1],
|
||||
];
|
||||
this.initMap("viewMap");
|
||||
const e = {
|
||||
lnglat: {
|
||||
lat: val.geometry.coordinates[1],
|
||||
lng: val.geometry.coordinates[0],
|
||||
lng: gcj02ToWgs84([
|
||||
val.geometry.coordinates[0],
|
||||
val.geometry.coordinates[1],
|
||||
])[0],
|
||||
lat: gcj02ToWgs84([
|
||||
val.geometry.coordinates[0],
|
||||
val.geometry.coordinates[1],
|
||||
])[1],
|
||||
},
|
||||
};
|
||||
this.onMapClick(e);
|
||||
// 移除点击事件
|
||||
this.map.removeEventListener("click", this.onMapClick);
|
||||
});
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initMap("viewMap");
|
||||
// this.initMap("viewMap");
|
||||
},
|
||||
methods: {
|
||||
/* 过滤列表路产类型 */
|
||||
@ -108,7 +128,6 @@ export default {
|
||||
// if (this.map) {
|
||||
// this.map.remove(); // 如果已经有地图实例，先移除再重新加载
|
||||
// }
|
||||
|
||||
// 初始化天地图
|
||||
this.map = new T.Map(ele);
|
||||
this.map.centerAndZoom(
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-11 15:14:16
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-12 16:08:23
|
||||
* @LastEditTime: 2024-10-25 09:28:22
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\road-management\index.vue
|
||||
* @Description: 巡检信息-路产管理
|
||||
-->
|
||||
@ -187,18 +187,18 @@
|
||||
>导出
|
||||
</el-button>
|
||||
</el-col> -->
|
||||
<el-col :span="1.5">
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit-outline"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
:disabled="multiple"
|
||||
@click="handleUpdateBatch"
|
||||
v-hasPermi="['system:defect:edit']"
|
||||
>批量确认
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- 列表 -->
|
||||
<el-table
|
||||
@ -240,7 +240,11 @@
|
||||
<el-table-column label="结束桩号" align="center" prop="stakeEnd" />
|
||||
<el-table-column label="路产图片" align="center" prop="media">
|
||||
<template slot-scope="scope">
|
||||
<img style="height: 3rem" :src="scope.row.media[0].img" />
|
||||
<el-image
|
||||
style="height: 3rem"
|
||||
:src="scope.row.media[0].img"
|
||||
:preview-src-list="[scope.row.media[0].img]"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="巡检任务" align="center" prop="stakeEnd" />
|
||||
@ -532,7 +536,7 @@ export default {
|
||||
/* 点击新增事件 */
|
||||
handleAdd() {
|
||||
this.addVisible = true;
|
||||
this.addTitle = "修改路产";
|
||||
this.addTitle = "添加路产";
|
||||
this.dialogItem = {
|
||||
title: "添加路产",
|
||||
};
|
||||
@ -608,14 +612,14 @@ export default {
|
||||
/* 关闭新增/编辑弹窗 */
|
||||
addCancel() {
|
||||
this.addVisible = false;
|
||||
this.dialogItem = {};
|
||||
this.dialogItem = { title: "添加路产" };
|
||||
this.addTitle = "";
|
||||
this.getRoadList();
|
||||
},
|
||||
/* 关闭查看弹窗 */
|
||||
viewCancel() {
|
||||
this.viewVisible = false;
|
||||
this.dialogItem = {};
|
||||
this.dialogItem = { title: "添加路产" };
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-14 10:36:09
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-14 11:10:42
|
||||
* @LastEditTime: 2024-10-25 14:25:31
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\task-view.vue
|
||||
* @Description: 巡检任务-查看路径
|
||||
-->
|
||||
@ -16,7 +16,9 @@
|
||||
@feature-dblclick="mapDbclick"
|
||||
></fssm-map>
|
||||
</div>
|
||||
<div class="footer"></div>
|
||||
<div class="footer">
|
||||
<el-slider v-model="timeTip" :show-tooltip="false"></el-slider>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -33,7 +35,10 @@ export default {
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
// 进度条位置绑定值
|
||||
timeTip: 26,
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-14 09:48:43
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-14 10:54:23
|
||||
* @LastEditTime: 2024-10-25 13:59:25
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\index.vue
|
||||
* @Description: 巡检管理-巡检任务
|
||||
-->
|
||||
@ -17,31 +17,24 @@
|
||||
:inline="true"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="任务id" prop="id">
|
||||
<el-form-item label="任务id" prop="taskId">
|
||||
<el-autocomplete
|
||||
v-model="queryParams.id"
|
||||
v-model="queryParams.taskId"
|
||||
:fetch-suggestions="querySearchAsync"
|
||||
placeholder="请输入任务id"
|
||||
@select="handleSelect"
|
||||
></el-autocomplete>
|
||||
</el-form-item>
|
||||
<el-form-item label="车牌号码" prop="carName">
|
||||
<el-select
|
||||
v-model="queryParams.carName"
|
||||
placeholder="请选择车牌号码"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in carNameList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-form-item label="车牌号码" prop="plateNo">
|
||||
<el-input
|
||||
v-model="queryParams.plateNo"
|
||||
placeholder="请输入车牌号码"
|
||||
clearable=""
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡检路段" prop="segmentName">
|
||||
<el-form-item label="巡检路段" prop="segmentId">
|
||||
<el-select
|
||||
v-model="queryParams.segmentName"
|
||||
v-model="queryParams.segmentId"
|
||||
placeholder="请选择巡检路段"
|
||||
clearable
|
||||
>
|
||||
@ -87,7 +80,7 @@
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="巡检路段" align="center" prop="segmentName" />
|
||||
<el-table-column label="巡检路段编码" align="center" prop="segmentId">
|
||||
<el-table-column label="巡检路段编码" align="center" prop="segmentCode">
|
||||
</el-table-column>
|
||||
<el-table-column label="巡检开始时间" align="center" prop="startTime">
|
||||
<template slot-scope="scope">
|
||||
@ -100,10 +93,9 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="巡检起点" align="center" prop="stakeStart" />
|
||||
<el-table-column label="巡检终点" align="center" prop="stakeEnd" />
|
||||
<el-table-column label="车牌号码" align="center" prop="media">
|
||||
<el-table-column label="车牌号码" align="center" prop="plateNo">
|
||||
</el-table-column>
|
||||
<el-table-column label="任务id" align="center" prop="id" />
|
||||
|
||||
<el-table-column label="任务id" align="center" prop="extId" />
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
@ -151,7 +143,12 @@
|
||||
|
||||
<script>
|
||||
import TaskView from "./components/task-view.vue";
|
||||
import { getTaskTable, getSegment, getRoadType } from "@/api/xj/task";
|
||||
import {
|
||||
getTaskTable,
|
||||
getSegment,
|
||||
getRoadType,
|
||||
getTaskIdList,
|
||||
} from "@/api/xj/task";
|
||||
|
||||
export default {
|
||||
components: { TaskView },
|
||||
@ -160,11 +157,11 @@ export default {
|
||||
// 查询表单
|
||||
queryParams: {
|
||||
// 任务id
|
||||
id: "",
|
||||
taskId: "",
|
||||
// 车牌号码
|
||||
carName: "",
|
||||
plateNo: "",
|
||||
// 巡检路段
|
||||
segmentName: "",
|
||||
segmentId: "",
|
||||
},
|
||||
// 巡检时间
|
||||
dateTime: [],
|
||||
@ -172,8 +169,6 @@ export default {
|
||||
searchForm: {},
|
||||
// 巡检路段下拉
|
||||
segmentList: [],
|
||||
// 车牌号码下拉
|
||||
carNameList: [],
|
||||
// 路产类型下拉
|
||||
roadType: [],
|
||||
// 列表数据绑定
|
||||
@ -206,7 +201,20 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
/* 任务id远程搜索 结果 */
|
||||
querySearchAsync(item, cb) {},
|
||||
querySearchAsync(item, cb) {
|
||||
getTaskIdList({ name: item }).then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
let list = [];
|
||||
data.map((item) => {
|
||||
list.push({
|
||||
value: item.label,
|
||||
id: item.value,
|
||||
});
|
||||
});
|
||||
cb(list);
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 任务id选择事件 */
|
||||
handleSelect() {},
|
||||
/* 获取巡检路段下拉数据 */
|
||||
@ -227,44 +235,17 @@ export default {
|
||||
},
|
||||
/* 点击搜索事件 */
|
||||
handleQuery() {
|
||||
const phonereg = /^K\d{4}\+\d{3}$/;
|
||||
if (this.queryParams.stakeStart) {
|
||||
if (phonereg.test(this.queryParams.stakeStart)) {
|
||||
this.pagination.page = 1;
|
||||
this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
|
||||
this.getTaskList();
|
||||
} else {
|
||||
this.$modal.msgWarning("请按照格式填写公里桩进行修改");
|
||||
}
|
||||
} else if (this.queryParams.stakeEnd) {
|
||||
if (phonereg.test(this.queryParams.stakeEnd)) {
|
||||
this.pagination.page = 1;
|
||||
|
||||
this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
|
||||
this.getTaskList();
|
||||
} else {
|
||||
this.$modal.msgWarning("请按照格式填写公里桩进行修改");
|
||||
}
|
||||
} else {
|
||||
this.pagination.page = 1;
|
||||
|
||||
this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
|
||||
this.getTaskList();
|
||||
}
|
||||
},
|
||||
/* 点击重置事件 */
|
||||
resetQuery() {
|
||||
this.searchForm = {};
|
||||
this.queryParams = {
|
||||
segmentName: "",
|
||||
defectType: "",
|
||||
dataStatus: "",
|
||||
inspectDirection: "",
|
||||
defectType3: "",
|
||||
stakeStart: "",
|
||||
stakeEnd: "",
|
||||
state: "",
|
||||
id: "",
|
||||
taskId: "",
|
||||
plateNo: "",
|
||||
segmentId: "",
|
||||
};
|
||||
this.dateTime = [];
|
||||
this.getTaskList();
|
||||
@ -286,7 +267,7 @@ export default {
|
||||
},
|
||||
/* 列表选择改变事件 */
|
||||
handleSelectionChange(selection) {
|
||||
this.checkIds = selection.map((item) => item.id);
|
||||
this.checkIds = selection.map((item) => item.taskId);
|
||||
this.single = selection.length !== 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-11 16:52:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-12 17:15:38
|
||||
* @LastEditTime: 2024-10-25 11:57:40
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\road-management\components\road-add.vue
|
||||
* @Description: 交安事件-新增/编辑弹窗
|
||||
-->
|
||||
@ -183,6 +183,7 @@
|
||||
<script>
|
||||
import { addEvent, uploadEvent } from "@/api/xj/traffic";
|
||||
import { getToken } from "@/utils/auth";
|
||||
import { gcj02ToWgs84, wgs84ToGcj02 } from "@/api/xj/map";
|
||||
|
||||
export default {
|
||||
name: "EventAdd",
|
||||
@ -220,7 +221,7 @@ export default {
|
||||
equipmentType: "",
|
||||
stakeStart: "",
|
||||
stakeEnd: "",
|
||||
equipmentId:""
|
||||
equipmentId: "",
|
||||
},
|
||||
// 校验状态下拉数据
|
||||
states: [
|
||||
@ -321,8 +322,14 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
const e = {
|
||||
lnglat: {
|
||||
lat: val.geometry.coordinates[1],
|
||||
lng: val.geometry.coordinates[0],
|
||||
lng: gcj02ToWgs84([
|
||||
val.geometry.coordinates[0],
|
||||
val.geometry.coordinates[1],
|
||||
])[0],
|
||||
lat: gcj02ToWgs84([
|
||||
val.geometry.coordinates[0],
|
||||
val.geometry.coordinates[1],
|
||||
])[1],
|
||||
},
|
||||
};
|
||||
this.onMapClick(e);
|
||||
@ -377,7 +384,11 @@ export default {
|
||||
}),
|
||||
geometry: {
|
||||
type: "Point",
|
||||
coordinates: [this.markers[0].lng, this.markers[0].lat],
|
||||
coordinates: wgs84ToGcj02([
|
||||
this.markers[0].lng,
|
||||
this.markers[0].lat,
|
||||
]),
|
||||
id: this.roadForm?.geometry?.id,
|
||||
},
|
||||
};
|
||||
if (this.roadForm.id) {
|
||||
|
||||
@ -1,3 +1,12 @@
|
||||
<!--
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-12 15:49:46
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-25 11:44:59
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\traffic-management\components\event-view.vue
|
||||
* @Description: 交安事件-查看弹窗
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="view-content">
|
||||
<div>
|
||||
@ -10,7 +19,6 @@
|
||||
<!-- <p>病害坐标：{{ viewForm.geometry.coordinates }}</p> -->
|
||||
<p>事件类型：{{ filterDefect(viewForm.defectType) }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 右侧图片展示 -->
|
||||
<div style="width: 27rem; padding: 10px">
|
||||
<el-carousel class="view-carousel" height="15rem">
|
||||
@ -34,6 +42,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { gcj02ToWgs84 } from "@/api/xj/map";
|
||||
export default {
|
||||
name: "EventView",
|
||||
props: {
|
||||
@ -59,25 +68,46 @@ export default {
|
||||
watch: {
|
||||
dialogItem: {
|
||||
handler(val) {
|
||||
console.log(val, "dddd");
|
||||
|
||||
if (val.title === "查看事件") {
|
||||
this.viewForm = JSON.parse(JSON.stringify(val));
|
||||
this.$nextTick(() => {
|
||||
this.centerPoint = [
|
||||
gcj02ToWgs84([
|
||||
val.geometry.coordinates[0],
|
||||
val.geometry.coordinates[1],
|
||||
])[0],
|
||||
gcj02ToWgs84([
|
||||
val.geometry.coordinates[0],
|
||||
val.geometry.coordinates[1],
|
||||
])[1],
|
||||
];
|
||||
this.initMap("viewMap");
|
||||
const e = {
|
||||
lnglat: {
|
||||
lat: val.geometry.coordinates[1],
|
||||
lng: val.geometry.coordinates[0],
|
||||
lng: gcj02ToWgs84([
|
||||
val.geometry.coordinates[0],
|
||||
val.geometry.coordinates[1],
|
||||
])[0],
|
||||
lat: gcj02ToWgs84([
|
||||
val.geometry.coordinates[0],
|
||||
val.geometry.coordinates[1],
|
||||
])[1],
|
||||
},
|
||||
};
|
||||
this.onMapClick(e);
|
||||
// 移除点击事件
|
||||
this.map.removeEventListener("click", this.onMapClick);
|
||||
});
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initMap("viewMap");
|
||||
// this.initMap("viewMap");
|
||||
},
|
||||
methods: {
|
||||
/* 过滤列表事件类型 */
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-12 14:52:23
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-23 10:24:00
|
||||
* @LastEditTime: 2024-10-25 13:02:28
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\traffic-management\index.vue
|
||||
* @Description: 巡检管理-交安事件
|
||||
-->
|
||||
@ -187,7 +187,7 @@
|
||||
>导出
|
||||
</el-button>
|
||||
</el-col> -->
|
||||
<el-col :span="1.5">
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@ -198,7 +198,7 @@
|
||||
v-hasPermi="['system:defect:edit']"
|
||||
>批量确认
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<!-- 列表 -->
|
||||
<el-table
|
||||
@ -225,30 +225,18 @@
|
||||
<span>{{ filterState(scope.row.state) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="校验状态" align="center" prop="dataStatus">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
scope.row.dataStatus
|
||||
? scope.row.dataStatus === 1
|
||||
? "未校验"
|
||||
: "已校验"
|
||||
: ""
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="开始桩号" align="center" prop="stakeStart" />
|
||||
<el-table-column label="结束桩号" align="center" prop="stakeEnd" />
|
||||
<el-table-column label="事件图片" align="center" prop="media">
|
||||
<template slot-scope="scope">
|
||||
<img style="height: 3rem" :src="scope.row.media[0].img" />
|
||||
<el-image
|
||||
style="height: 3rem"
|
||||
:src="scope.row.media[0].img"
|
||||
:preview-src-list="[scope.row.media[0].img]"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="巡检任务" align="center" prop="stakeEnd" />
|
||||
<!-- <el-table-column label="校验状态" align="center" prop="datastatus">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.datastatus === "1" ? "未校验" : "已校验" }}</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="道路方向" align="center" prop="inspectDirection">
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
@ -545,7 +533,7 @@ export default {
|
||||
/* 点击新增事件 */
|
||||
handleAdd() {
|
||||
this.addVisible = true;
|
||||
this.addTitle = "修改事件";
|
||||
this.addTitle = "添加事件";
|
||||
this.dialogItem = {
|
||||
title: "添加事件",
|
||||
};
|
||||
@ -621,14 +609,14 @@ export default {
|
||||
/* 关闭新增/编辑弹窗 */
|
||||
addCancel() {
|
||||
this.addVisible = false;
|
||||
this.dialogItem = {};
|
||||
this.dialogItem = { title: "添加事件" };
|
||||
this.addTitle = "";
|
||||
this.getRoadList();
|
||||
},
|
||||
/* 关闭查看弹窗 */
|
||||
viewCancel() {
|
||||
this.viewVisible = false;
|
||||
this.dialogItem = {};
|
||||
this.dialogItem = { title: "添加事件" };
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-09 13:11:56
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-22 16:38:50
|
||||
* @LastEditTime: 2024-10-24 09:16:47
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\parameter\index.vue
|
||||
* @Description: 系统工具-系统参数
|
||||
-->
|
||||
@ -141,7 +141,6 @@ export default {
|
||||
/* 地图打点 */
|
||||
drawPoint(value) {
|
||||
const features = [];
|
||||
|
||||
const point = new Point(value); // 修改坐标格式
|
||||
const feature = new Feature({
|
||||
geometry: point,
|
||||
|
||||
@ -155,7 +155,7 @@
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dict.type.bas_road_type"
|
||||
v-for="item in routeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
@ -207,6 +207,10 @@ export default {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
routeList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -273,8 +277,6 @@ export default {
|
||||
},
|
||||
// 养护单位下拉数据
|
||||
deptOptions: [],
|
||||
// 路线下拉
|
||||
routeList: [],
|
||||
// 上一点位
|
||||
previousPoint: null,
|
||||
// 保存所有添加的连线
|
||||
|
||||
@ -144,6 +144,7 @@
|
||||
>
|
||||
<section-add
|
||||
:dialogItem="dialogItem"
|
||||
:routeList="routeList"
|
||||
@addCancel="addCancel"
|
||||
></section-add>
|
||||
</el-dialog>
|
||||
@ -151,7 +152,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSectionList, deleteSection } from "@/api/xj/section";
|
||||
import {
|
||||
getSectionList,
|
||||
deleteSection,
|
||||
getSegmentList,
|
||||
} from "@/api/xj/section";
|
||||
import SectionAdd from "./components/section-add.vue";
|
||||
|
||||
export default {
|
||||
@ -187,13 +192,24 @@ export default {
|
||||
addVisible: false,
|
||||
// 传弹窗数据
|
||||
dialogItem: {},
|
||||
// 路线下拉数据
|
||||
routeList: [],
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
created() {
|
||||
this.getTableList();
|
||||
this.getRoadList();
|
||||
},
|
||||
methods: {
|
||||
/* 获取路线下拉数据 */
|
||||
getRoadList() {
|
||||
getSegmentList().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.routeList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 点击搜索事件 */
|
||||
handleQuery() {
|
||||
this.searchForm = JSON.parse(JSON.stringify(this.sectionForm));
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user