diff --git a/src/api/xj/screen/index.js b/src/api/xj/screen/index.js index 465c562..8a7c4f8 100644 --- a/src/api/xj/screen/index.js +++ b/src/api/xj/screen/index.js @@ -45,28 +45,35 @@ export function comppanyImg() { // 获取病害筛选弹窗列表数据 export function defeaseList(data) { - return request({ - url: "/bigscreen/getCurrentDefectPage", - method: "post", - data, - }); - } + return request({ + url: "/bigscreen/getCurrentDefectPage", + method: "post", + data, + }); +} // 获取病害筛选弹窗路段下拉数据 export function getSegment(data) { - return request({ - url: "/bigscreen/selectIdList", - method: "post", - data, - }); - } + return request({ + url: "/bigscreen/selectIdList", + method: "post", + data, + }); +} +// 根据选择的按钮类型查下级选项框 +export function getItemTypes(params) { + return request({ + url: "/metadata/getItemTypes", + method: "get", + params, + }); +} - // 根据选择的按钮类型查下级选项框 - export function getItemTypes(params) { - return request({ - url: "/metadata/getItemTypes", - method: "get", - params, - }); - } \ No newline at end of file +// 获取地图右上角路段下拉数据 +export function getRoadListTypes() { + return request({ + url: "/api/v2/segment/selectList", + method: "post", + }); +} diff --git a/src/views/big-screen/index.vue b/src/views/big-screen/index.vue index 836a489..40744f5 100644 --- a/src/views/big-screen/index.vue +++ b/src/views/big-screen/index.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-10-17 11:34:00 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-11-07 09:09:50 + * @LastEditTime: 2024-11-07 12:01:48 * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue * @Description: 大屏首页 --> @@ -96,7 +96,7 @@ -
+
+ +
+ + + +
@@ -178,6 +194,32 @@ > + + + +
+ Main Image +
+
+
@@ -217,6 +259,7 @@ import { mapPciList, comppanyImg, getItemTypes, + getRoadListTypes, } from "@/api/xj/screen/index"; export default { name: "BigScreen", @@ -320,10 +363,14 @@ export default { { name: "路产", click: "equipment" }, { name: "事件", click: "event" }, ], - /* 具体icon类别 */ + // 具体icon类别 iconTypeList: [], // icon类别绑定 iconType: [], + // 路段下拉绑定 + roadList: [], + // 路段选择绑定 + roadSelect: "", // 图标类别切换标识 mapClick: "", // 中间展示的动态组件绑定 @@ -354,12 +401,19 @@ export default { imgTitle: "查看", // 图片弹窗显隐控制 imgVisible: false, + // 查看点位图片数据 + screenImage: {}, + // 查看点位图片弹窗显隐控制 + showImageDialog: false, + // 查看点位图片弹窗红框数据 + screenRects: [], }; }, created() { this.setTime(); this.getSelect(); this.getMapCare(); + this.getRoadList(); }, methods: { /* 获取当前时间 */ @@ -404,6 +458,15 @@ export default { }); }, + /* 获取路段下拉数据 */ + getRoadList() { + getRoadListTypes().then(({ code, data }) => { + if (code === 200) { + this.roadList = data; + } + }); + }, + /* 获取图片背景下坐标数据 */ getMapCare() { comppanyImg().then(({ code, data }) => { @@ -423,6 +486,11 @@ export default { this.imgVisible = false; }, + /* 关闭查看点位大图弹窗 */ + screenImgCancel() { + this.showImageDialog = false; + }, + /* 切换icon类型多选框事件 */ handleChecked(value) { this.centerPiont = this.drawPointList.filter( @@ -455,8 +523,15 @@ export default { /* 获取地图点位信息 */ getCenterPiont() { // 如果当前已经有打点坐标 - if (!this.clusters) { - mapPointList({ type: this.mapClick }).then(({ code, data }) => { + if (this.clusters) { + this.$nextTick(() => { + const map = this.$refs.roadMap.instance.get("map"); + map.removeLayer(this.clusters); + this.clusters = null; + }); + } + mapPointList({ type: this.mapClick, segmentId: this.roadSelect }).then( + ({ code, data }) => { if (code === 200) { this.drawPointList = data.map((item) => { if (item.geometry) { @@ -478,8 +553,8 @@ export default { }); this.drawPoint(); } - }); - } + } + ); }, /* 绘制地图点位 */ @@ -492,7 +567,7 @@ export default { geometry: point, data: { iconType: element.iconType, - mediaUrl: element.mediaUrl, + imageUrl: element.imageUrl, rect: element.rect, }, // 自己设置一个标识 @@ -586,11 +661,7 @@ export default { getLinePoint() { mapPciList({ zoom: this.mapZoom }).then(({ code, data }) => { if (code === 200) { - this.lineString = data.map((item) => { - return item?.coordinates?.split(";").map((it) => { - return it.split(",").map(Number); - }); - }); + this.lineString = data; this.drawLine(); } }); @@ -600,8 +671,11 @@ export default { drawLine() { const features = []; this.lineString.forEach((element) => { + const lines = element?.coordinates?.split(";").map((it) => { + return it.split(",").map(Number); + }); const line = new Feature({ - geometry: new geomExports.LineString(element), + geometry: new geomExports.LineString(lines), type: "line", }); line.setStyle([ @@ -612,7 +686,7 @@ export default { }), // 边线颜色 stroke: new Stroke({ - color: "blue", + color: "#0ABE67", width: 5, }), // 形状 @@ -641,7 +715,7 @@ export default { }); }, - /* 图标类别切换点击事件 */ + /* 地图下方4图标类别切换点击事件 */ changeIconType(value) { if (this.mapClick !== value) { this.mapClick = value; @@ -656,7 +730,7 @@ export default { this.getIconType(value); // 请求地图打点/绘制线段接口 if (!this.mapZoom) { - this.getZoom("10"); + this.getZoom("11"); } else { this.getZoom(this.mapZoom); } @@ -681,23 +755,22 @@ export default { /* 传回来的地图图层 */ getZoom(zoom) { - this.mapZoom = zoom; - if (zoom * 1 >= 13) { + if (zoom === "11" && this.mapZoom !== zoom) { + this.mapZoom = zoom; this.$nextTick(() => { const map = this.$refs.roadMap.instance.get("map"); map.removeLayer(this.markLayerLines); this.markLayerLines = null; - this.getCenterPiont(); }); - } else if (zoom * 1 < 13) { + this.getLinePoint(); + } else if (zoom === "10" && this.mapZoom !== zoom) { + this.mapZoom = zoom; this.$nextTick(() => { const map = this.$refs.roadMap.instance.get("map"); - map.removeLayer(this.clusters); map.removeLayer(this.markLayerLines); - this.clusters = null; this.markLayerLines = null; - this.getLinePoint(); }); + this.getLinePoint(); } }, @@ -728,6 +801,8 @@ export default { const selectFeature = feature.getProperties().features[0]; console.log(selectFeature, "点位"); // 获取点位数据 + this.screenImage = selectFeature.get("data"); + this.showImageDialog = true; console.log(selectFeature.get("data")); } else { // 聚合点 @@ -894,6 +969,48 @@ export default { goIndex() { this.$router.push("/index"); }, + + /* 图片位置信息获取 */ + updateScreenRects() { + this.screenRects = []; + const image = this.$refs.mainImage; + const rects = this.screenImage?.rect?.split(",").map(Number) || []; + this.screenRects = [ + { + left: rects[0], + top: rects[1], + width: rects[2], + height: rects[3], + }, + ]; + }, + + /* 图片红框位置 */ + getScreenRectStyle({ left, top, width, height }) { + const image = this.$refs.mainImage; + const container = this.$refs.imageContainer; + if (!image || !container) return {}; + + const scaleX = container.clientWidth / image.naturalWidth; + const scaleY = container.clientHeight / image.naturalHeight; + const scale = Math.min(scaleX, scaleY); + + const renderedWidth = image.naturalWidth * scale; + const renderedHeight = image.naturalHeight * scale; + + const offsetX = (container.clientWidth - renderedWidth) / 2; + const offsetY = (container.clientHeight - renderedHeight) / 2; + + return { + position: "absolute", + left: `${left * scale + offsetX}px`, + top: `${top * scale + offsetY}px`, + width: `${width * scale}px`, + height: `${height * scale}px`, + border: "2px solid #FF0000", + boxSizing: "border-box", + }; + }, }, beforeDestroy() { clearInterval(this.timeFlag); @@ -1080,6 +1197,57 @@ export default { } } + // 切换线路段 + .road-checkBox-twe { + position: absolute; + left: 31.5%; + top: 10%; + padding: 0.4rem; + border-radius: 0.4rem; + z-index: 1; + + ::v-deep .el-select { + width: 15rem; + + .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%; @@ -1339,5 +1507,28 @@ export default { ::v-deep .el-dialog__body { background-color: #113463; + + /* 查看点位大图弹窗 */ + .image-container { + position: relative; + width: 100%; + height: 80%; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + } + + .image-container img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + } + + .rect-overlay { + position: absolute; + pointer-events: none; + border: 2px solid red; + } } \ No newline at end of file diff --git a/src/views/index-components/daily-index.vue b/src/views/index-components/daily-index.vue index d9c1289..8191ed7 100644 --- a/src/views/index-components/daily-index.vue +++ b/src/views/index-components/daily-index.vue @@ -216,13 +216,13 @@ export default { { type: "bar", barWidth: 10, - name: "架梁完成量", + name: "累计病害", data: [400, 600, 1400, 1700], }, { type: "line", symbolSize: 5, - name: "墩身完成率", + name: "巡查里程", smooth: 1, data: [10, 40, 50, 90], yAxisIndex: 1, @@ -237,30 +237,24 @@ export default { /* 绘制病害分布柱状图 */ drawDistributionChart() { const xData = [ - { name: "1月", value: 10 }, - { name: "2月", value: 12 }, - { name: "3月", value: 10 }, - { name: "4月", value: 30 }, - { name: "5月", value: 20 }, - { name: "6月", value: 50 }, - { name: "7月", value: 30 }, - { name: "8月", value: 40 }, - { name: "9月", value: 40 }, - { name: "10月", value: 15 }, + { name: "G1", value: 10 }, + { name: "G11", value: 12 }, + { name: "G25", value: 10 }, + { name: "G91", value: 30 }, + { name: "G1113", value: 20 }, + { name: "S2", value: 50 }, + { name: "S20", value: 30 }, ].map((item) => { return item.name; }); const yData = [ - { name: "1月", value: 10 }, - { name: "2月", value: 12 }, - { name: "3月", value: 10 }, - { name: "4月", value: 30 }, - { name: "5月", value: 20 }, - { name: "6月", value: 50 }, - { name: "7月", value: 30 }, - { name: "8月", value: 40 }, - { name: "9月", value: 40 }, - { name: "10月", value: 15 }, + { name: "G1", value: 10 }, + { name: "G11", value: 12 }, + { name: "G25", value: 10 }, + { name: "G91", value: 30 }, + { name: "G1113", value: 20 }, + { name: "S2", value: 50 }, + { name: "S20", value: 30 }, ].map((item, index) => { if (index % 2 == 0) { return { diff --git a/src/views/index-components/disease-index.vue b/src/views/index-components/disease-index.vue index b9aacb8..aaffc2a 100644 --- a/src/views/index-components/disease-index.vue +++ b/src/views/index-components/disease-index.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-10-29 15:17:58 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-11-05 11:51:10 + * @LastEditTime: 2024-11-07 11:35:42 * @FilePath: \znxjxt-ui\src\views\index-components\disease-index.vue * @Description: 首页-病害识别 --> @@ -24,20 +24,6 @@
- - - -
@@ -95,81 +81,40 @@ export default { }; }, created() { - this.getOptions(); this.getChartData(); }, methods: { - /* 获取病害类别下拉 */ - getOptions() { - this.diseaseOptions = [ - { - value: "选项1", - label: "黄金糕", - }, - { - value: "选项2", - label: "双皮奶", - }, - { - value: "选项3", - label: "蚵仔煎", - }, - { - value: "选项4", - label: "龙须面", - }, - { - value: "选项5", - label: "北京烤鸭", - }, - ]; - }, /* 获取echart图数据 */ getChartData() { this.distributionList = [ { value: 15461, - name: "一类", + name: "纵向裂缝", rate: "10%", }, { value: 1, - name: "二类", + name: "块状裂缝", rate: "10%", }, { value: 6546, - name: "三类", + name: "龟裂", rate: "10%", }, { value: 2718, - name: "四类", + name: "坑槽", rate: "10%", }, { value: 1704, - name: "五类", + name: "车辙", rate: "10%", }, { value: 1, - name: "二类", - rate: "10%", - }, - { - value: 6546, - name: "三类", - rate: "10%", - }, - { - value: 2718, - name: "四类", - rate: "10%", - }, - { - value: 1704, - name: "五类", + name: "沉陷", rate: "10%", }, ]; diff --git a/src/views/index-components/traffic-index.vue b/src/views/index-components/traffic-index.vue index 2b84176..375c16d 100644 --- a/src/views/index-components/traffic-index.vue +++ b/src/views/index-components/traffic-index.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-10-29 15:30:35 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-11-05 11:46:15 + * @LastEditTime: 2024-11-07 11:29:32 * @FilePath: \znxjxt-ui\src\views\index-components\traffic-index.vue * @Description: 首页-路况评定 --> @@ -13,11 +13,11 @@
- + - + + -
@@ -42,64 +42,19 @@ export default { getTableData() { this.trafficTableData = [ { - date: "2016-05-02", - name: "王小虎", - address: "上海市普陀区金沙江路 1518 弄", + date: "S225", + name: "99.52", + pci: "优", }, { - date: "2016-05-04", - name: "王小虎", - address: "上海市普陀区金沙江路 1517 弄", + date: "G107", + name: "98.6", + pci: "优", }, { - date: "2016-05-01", - name: "王小虎", - address: "上海市普陀区金沙江路 1519 弄", - }, - { - date: "2016-05-03", - name: "王小虎", - address: "上海市普陀区金沙江路 1516 弄", - }, - { - date: "2016-05-02", - name: "王小虎", - address: "上海市普陀区金沙江路 1518 弄", - }, - { - date: "2016-05-04", - name: "王小虎", - address: "上海市普陀区金沙江路 1517 弄", - }, - { - date: "2016-05-01", - name: "王小虎", - address: "上海市普陀区金沙江路 1519 弄", - }, - { - date: "2016-05-03", - name: "王小虎", - address: "上海市普陀区金沙江路 1516 弄", - }, - { - date: "2016-05-02", - name: "王小虎", - address: "上海市普陀区金沙江路 1518 弄", - }, - { - date: "2016-05-04", - name: "王小虎", - address: "上海市普陀区金沙江路 1517 弄", - }, - { - date: "2016-05-01", - name: "王小虎", - address: "上海市普陀区金沙江路 1519 弄", - }, - { - date: "2016-05-03", - name: "王小虎", - address: "上海市普陀区金沙江路 1516 弄", + date: "G105", + name: "100", + pci: "优", }, ]; this.$nextTick(() => { @@ -121,7 +76,7 @@ export default { title: [ // 中心比例 { - text: "道路新增病害分布", + text: "路产趋势", x: "1%", y: "1%", textStyle: { @@ -131,7 +86,7 @@ export default { ], legend: { show: true, - right:"3%" + right: "3%", }, tooltip: { trigger: "axis", @@ -145,7 +100,7 @@ export default { }, xAxis: [ { - data: ["1月", "二月", "3", "4", "5", "6", "7", "8", "9", "10"], + data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月"], type: "category", axisTick: { show: false, //隐藏X轴刻度