fix：首页背景调整，路面病害对比修改
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
* @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
|
||||
* @Date: 2024-10-08 10:58:25
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-05 09:21:16
|
||||
* @LastEditTime: 2024-11-05 15:05:42
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management .vue
|
||||
* @Description: 巡检信息管理-病害管理
|
||||
-->
|
||||
@@ -521,30 +521,48 @@
|
||||
>
|
||||
<div>
|
||||
<!-- 上半部分 -->
|
||||
<div style="display: flex; height: 50%">
|
||||
<!-- 左侧病害信息 -->
|
||||
<div style="flex: 1; padding: 10px">
|
||||
<p>
|
||||
上报日期：{{ new Date(viewForm.createdTime).toLocaleString() }}
|
||||
</p>
|
||||
<p>路段名称：{{ viewForm.segmentName }}</p>
|
||||
<!-- <p>病害坐标：{{ viewForm.geometry.coordinates }}</p> -->
|
||||
<p>病害类型：{{ filterDefect(viewForm.defectType) }}</p>
|
||||
<p>病害长度：{{ viewForm.targetLen }} 米</p>
|
||||
<p>病害id：{{ viewForm.id }}</p>
|
||||
<p>快照id：{{ viewForm.snapshotId }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 右侧图片展示 -->
|
||||
<div style="width: 27rem; padding: 10px">
|
||||
<el-carousel class="view-carousel" height="15rem">
|
||||
<el-carousel-item
|
||||
v-for="(img, index) in viewForm.media"
|
||||
:key="index"
|
||||
<div style="display: flex; flex-direction: column; height: 50%">
|
||||
<!-- 下拉选择框 -->
|
||||
<div>
|
||||
<el-select
|
||||
v-model="viewCheck"
|
||||
@change="changeView"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in viewOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<img :src="img.img" alt="病害图片" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<!-- 左侧病害信息 -->
|
||||
<div style="width: 50%; padding: 10px">
|
||||
<p>
|
||||
上报日期：{{ new Date(viewForm.createdTime).toLocaleString() }}
|
||||
</p>
|
||||
<p>路段名称：{{ viewForm.segmentName }}</p>
|
||||
<!-- <p>病害坐标：{{ viewForm.geometry.coordinates }}</p> -->
|
||||
<p>病害类型：{{ filterDefect(viewForm.defectType) }}</p>
|
||||
<p>病害长度：{{ viewForm.targetLen }} 米</p>
|
||||
<p>病害id：{{ viewForm.id }}</p>
|
||||
<p>快照id：{{ viewForm.snapshotId }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 右侧图片展示 -->
|
||||
<div style="width: 50%; padding: 10px">
|
||||
<el-carousel class="view-carousel" height="15rem">
|
||||
<el-carousel-item
|
||||
v-for="(img, index) in viewForm.media"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="img.img" alt="病害图片" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -615,6 +633,8 @@ import {
|
||||
getDefectStatus,
|
||||
changeDefectStatus,
|
||||
splitDefect,
|
||||
getDefectById,
|
||||
getDetailsBySnapShotId,
|
||||
} from "@/api/xj/disease";
|
||||
import { getToken } from "@/utils/auth";
|
||||
import MergeDialog from "./components/merge-dialog.vue";
|
||||
@@ -755,6 +775,10 @@ export default {
|
||||
defectStatus: [],
|
||||
// 新增/编辑打点数组
|
||||
markers: [],
|
||||
// 查看弹窗选择绑定
|
||||
viewCheck: "",
|
||||
// 查看弹窗下拉数据绑定
|
||||
viewOptions: [],
|
||||
// 查看弹窗信息绑定
|
||||
viewForm: {},
|
||||
// 地图中心点
|
||||
@@ -1157,6 +1181,8 @@ export default {
|
||||
/* 点击行列表查看事件 */
|
||||
viewDefect(defect) {
|
||||
// this.loadDefect(defect.id);
|
||||
this.getSnapShotIdList(defect.id);
|
||||
this.viewCheck = defect.snapshotId;
|
||||
this.openViewDialog = true;
|
||||
this.viewForm = defect;
|
||||
this.$nextTick(() => {
|
||||
@@ -1177,6 +1203,24 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 根据病害id获取所有下拉快照数据 */
|
||||
getSnapShotIdList(id) {
|
||||
getDefectById(id).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.viewOptions = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 查看弹窗选择改变触发事件 */
|
||||
changeView(val) {
|
||||
getDetailsBySnapShotId(val).then(({code,data})=>{
|
||||
if(code===200){
|
||||
console.log(data, "fff");
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/* 初始化天地图 */
|
||||
initMap(ele) {
|
||||
// if (this.map) {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-11 16:52:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-25 11:17:56
|
||||
* @LastEditTime: 2024-11-05 15:18:59
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\road-management\components\road-add.vue
|
||||
* @Description: 路产管理-新增/编辑弹窗
|
||||
-->
|
||||
@@ -182,8 +182,6 @@ export default {
|
||||
return {
|
||||
// 表单绑定
|
||||
roadForm: {},
|
||||
// 验证规则
|
||||
rules: {},
|
||||
// 校验状态下拉数据
|
||||
states: [
|
||||
{
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-14 14:49:21
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-15 11:50:48
|
||||
* @LastEditTime: 2024-11-06 10:24:29
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\surface-management\components\surface-map.vue
|
||||
* @Description: 路面病害管理-地图组件
|
||||
-->
|
||||
@@ -12,7 +12,7 @@
|
||||
<div class="div-map">
|
||||
<fssm-map
|
||||
ref="contentMap"
|
||||
:mapId="mapObject.id"
|
||||
:mapId="id"
|
||||
@feature-click="featureClick"
|
||||
:showZoom="false"
|
||||
></fssm-map>
|
||||
@@ -21,11 +21,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-form">
|
||||
<div
|
||||
v-if="mapObject.centerList.length > 0"
|
||||
ref="echart"
|
||||
class="echart-div"
|
||||
></div>
|
||||
<div v-if="mapObject.scale" ref="echart" class="echart-div"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -45,10 +41,18 @@ export default {
|
||||
components: { FssmScroll, FssmMap },
|
||||
name: "SurfaceMap",
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
mapObject: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
mapLogeList: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -57,6 +61,17 @@ export default {
|
||||
//
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
mapObject: {
|
||||
handler(val) {
|
||||
if (this.$refs.contentMap && Object.keys(val).length > 0) {
|
||||
this.drawMapPoints();
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
created() {},
|
||||
methods: {
|
||||
@@ -64,20 +79,30 @@ export default {
|
||||
drawMapPoints() {
|
||||
this.$refs.contentMap.clearMapFeature();
|
||||
const features = [];
|
||||
this.mapObject.centerList.forEach((element) => {
|
||||
const point = new Point(element); // 修改坐标格式
|
||||
this.mapObject.data.forEach((element) => {
|
||||
const point = new Point([
|
||||
element.coordinates[0],
|
||||
element.coordinates[1],
|
||||
]); // 修改坐标格式
|
||||
const feature = new Feature({
|
||||
geometry: point,
|
||||
custom: { data: "123", type: "icon", id: this.mapObject.id }, // 可以放一些自己的数据
|
||||
custom: {
|
||||
mediaUrl: element.mediaUrl,
|
||||
rect: element.rect,
|
||||
id: element.id,
|
||||
}, // 可以放一些自己的数据
|
||||
type: "icon", // 自己设置一个标识
|
||||
});
|
||||
feature.setStyle([
|
||||
new Style({
|
||||
image: new Icon({
|
||||
crossOrigin: "anonymous",
|
||||
src: logo,
|
||||
src: require(`@/assets/screen/index/${
|
||||
this.mapLogeList[element.defectType]
|
||||
}.png`),
|
||||
// size: [40, 40],
|
||||
scale: 0.05, // 图标缩放比例
|
||||
scale: 0.5, // 图标缩放比例
|
||||
displacement: [0, 30],
|
||||
}),
|
||||
}),
|
||||
]);
|
||||
@@ -96,11 +121,12 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.contentMap.instance.get("map");
|
||||
map.addLayer(markLayerPoints);
|
||||
this.initEchart();
|
||||
});
|
||||
},
|
||||
/* 清除地图图层 */
|
||||
cleanLayer() {
|
||||
this.$emit("clearId", this.mapObject.id);
|
||||
this.$emit("clearMap");
|
||||
this.$refs.contentMap.clearMapFeature();
|
||||
},
|
||||
/* 图层点击事件 */
|
||||
@@ -108,12 +134,19 @@ export default {
|
||||
if (feature && feature.get("type")) {
|
||||
this.$emit("send-img", {
|
||||
data: feature.get("custom"),
|
||||
id: this.mapObject.id,
|
||||
// id: this.mapObject.id,
|
||||
});
|
||||
}
|
||||
},
|
||||
/* 绘制柱状图 */
|
||||
initEchart() {
|
||||
console.log(this.mapObject, "this.mapObject.data");
|
||||
const xData = this.mapObject.scale.map((item) => {
|
||||
return item.label;
|
||||
});
|
||||
const yData = this.mapObject.scale.map((item) => {
|
||||
return item.value;
|
||||
});
|
||||
if (this.$refs.echart) {
|
||||
const chart = echarts.init(this.$refs.echart);
|
||||
chart.setOption({
|
||||
@@ -123,7 +156,6 @@ export default {
|
||||
bottom: "0%",
|
||||
left: "center",
|
||||
itemHeight: 10,
|
||||
data: ["1111", "2222", "3333", "4444"],
|
||||
},
|
||||
//图表位置
|
||||
grid: {
|
||||
@@ -141,21 +173,7 @@ export default {
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri",
|
||||
"Sat",
|
||||
"Sun",
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
],
|
||||
data: xData,
|
||||
//坐标轴刻度
|
||||
axisTick: {
|
||||
show: false,
|
||||
@@ -176,7 +194,7 @@ export default {
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "单位：家",
|
||||
name: "单位：个",
|
||||
nameTextStyle: {
|
||||
color: "#616367",
|
||||
},
|
||||
@@ -211,40 +229,11 @@ export default {
|
||||
{
|
||||
//该柱状图颜色
|
||||
// color:"",
|
||||
name: "1111",
|
||||
// name: "1111",
|
||||
//柱状图的粗细--可以”20%“
|
||||
barWidth: 6,
|
||||
barWidth: "20%",
|
||||
color: "#72A1FF",
|
||||
data: [
|
||||
120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110,
|
||||
],
|
||||
type: "bar",
|
||||
},
|
||||
{
|
||||
name: "2222",
|
||||
barWidth: 6,
|
||||
color: "#73ECAF",
|
||||
data: [
|
||||
120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110,
|
||||
],
|
||||
type: "bar",
|
||||
},
|
||||
{
|
||||
name: "3333",
|
||||
barWidth: 6,
|
||||
color: "#FF7D74",
|
||||
data: [
|
||||
120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110,
|
||||
],
|
||||
type: "bar",
|
||||
},
|
||||
{
|
||||
name: "4444",
|
||||
barWidth: 6,
|
||||
color: "#FCD678",
|
||||
data: [
|
||||
120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110,
|
||||
],
|
||||
data: yData,
|
||||
type: "bar",
|
||||
},
|
||||
],
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user