diff --git a/src/api/xj/screen/index.js b/src/api/xj/screen/index.js index 0c12d6e..6ef359e 100644 --- a/src/api/xj/screen/index.js +++ b/src/api/xj/screen/index.js @@ -2,30 +2,35 @@ import request from "@/utils/request"; // 获取数据栏右上角选择数据接口 export function selectTypeList(query) { - return request({ - url: "/bigscreen/getSwitch", - method: "get", - params: query, - }); - } - + return request({ + url: "/bigscreen/getSwitch", + method: "get", + params: query, + }); +} // 获取地图打点数据接口 export function mapPointList(query) { - return request({ - url: "/bigscreen/getMapPoint", - method: "get", - params: query, - }); - } - + return request({ + url: "/bigscreen/getMapPoint", + method: "get", + params: query, + }); +} // 获取地图绘制线段数据接口 export function mapPciList(query) { - return request({ - url: "/bigscreen/roadPci", - method: "get", - params: query, - }); - } + return request({ + url: "/bigscreen/roadPci", + method: "get", + params: query, + }); +} +// 获取图片背景下地图坐标信息 +export function comppanyImg() { + return request({ + url: "/bigscreen/getCompanyInfo", + method: "get", + }); +} diff --git a/src/components/map/fssm-map.vue b/src/components/map/fssm-map.vue index 32c3d97..47368c5 100644 --- a/src/components/map/fssm-map.vue +++ b/src/components/map/fssm-map.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-10-14 10:46:23 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-10-24 17:17:45 + * @LastEditTime: 2024-10-31 13:58:48 * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\fssm-map.vue * @Description: 公共地图 --> @@ -203,6 +203,8 @@ export default { center: [this.centerPoint.lat, this.centerPoint.lon], //中心点经纬度 zoom: this.zoom, //图层缩放大小 projection: "EPSG:4326", + minZoom: 7, + maxZoom: 14, }), layers: [tianditu_vec_c, tianditu_img_c, tianditu_cva_c], }); @@ -255,7 +257,7 @@ export default { } }); // 地图缩放级别事件 - map.on("moveend",(e)=> { + map.on("moveend", (e) => { const zoom = map.getView().getZoom().toFixed(); //获取当前地图的缩放级别 this.$emit("map-moveend", zoom); }); diff --git a/src/views/big-screen/disease-components/today-inspection.vue b/src/views/big-screen/disease-components/today-inspection.vue index dbb76d4..4fa3804 100644 --- a/src/views/big-screen/disease-components/today-inspection.vue +++ b/src/views/big-screen/disease-components/today-inspection.vue @@ -96,12 +96,12 @@ export default { padding: 1rem; display: flex; flex-direction: column; - justify-content: center; + justify-content: space-around; color: #ffffff; .right-sum { width: 100%; - height: 4rem; + height: 45%; display: flex; padding-left: 1rem; justify-content: center; @@ -129,7 +129,7 @@ export default { .right-rate { width: 100%; - height: 4rem; + height: 45%; padding-left: 1rem; display: flex; justify-content: center; diff --git a/src/views/big-screen/index.vue b/src/views/big-screen/index.vue index 7766067..cdfcdb7 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-10-29 14:00:48 + * @LastEditTime: 2024-10-31 13:32:00 * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue * @Description: 大屏首页 --> @@ -115,7 +115,7 @@
{ + if (code === 200) { + console.log(data, "ffff"); + } + }); this.mapCareList = [ { name: "沈抚", @@ -399,9 +405,63 @@ export default { top: "15%", tip: "1", }, + { + name: "葫芦岛", + left: "24%", + top: "38%", + tip: "1", + }, + { + name: "阜新", + left: "40%", + top: "10%", + tip: "1", + }, + { + name: "盘锦", + left: "44%", + top: "27%", + tip: "1", + }, + { + name: "铁岭", + left: "70%", + top: "3%", + tip: "1", + }, + { + name: "抚顺", + left: "75%", + top: "17%", + tip: "1", + }, + { + name: "本溪", + left: "67%", + top: "26%", + tip: "1", + }, + { + name: "辽阳", + left: "60%", + top: "30%", + tip: "1", + }, + { + name: "营口", + left: "48%", + top: "42%", + tip: "1", + }, + { + name: "鞍山", + left: "57%", + top: "38%", + tip: "1", + }, { name: "沈阳", - left: "55%", + left: "54%", top: "12%", tip: "2", }, @@ -419,14 +479,14 @@ export default { }, { name: "大连", - left: "50%", - top: "50%", + left: "43%", + top: "53%", tip: "5", }, { name: "丹东", - left: "70%", - top: "40%", + left: "71%", + top: "39%", tip: "6", }, ]; @@ -463,11 +523,10 @@ export default { mapPointList({ type: this.mapClick }).then(({ code, data }) => { if (code === 200) { this.centerPiont = data.map((item) => { - if(item.geometry){ - + if (item.geometry) { return [item.geometry[0], item.geometry[1]]; } - return [] + return []; }); this.drawPoint(); } @@ -500,8 +559,8 @@ export default { features.push(feature); }); const clusterSource = new Cluster({ - distance: 40, - minDistance: 40, + distance: 60, + minDistance: 60, source: new VectorSource({ features, }), @@ -681,7 +740,7 @@ export default { if (this.clusters && zoom > 13) { this.clusters.getSource().setDistance(0); } else if (this.clusters && zoom <= 13) { - this.clusters.getSource().setDistance(40); + this.clusters.getSource().setDistance(60); } }, /* 地图选中feature事件 */ @@ -722,7 +781,7 @@ export default { this.leftModuleList = [ { width: "100%", - height: "14rem", + height: "27%", title: "今日巡查", component: TodayInspection, selectIsShow: false, @@ -730,7 +789,7 @@ export default { }, { width: "100%", - height: "14rem", + height: "27%", title: "病害趋势", component: DiseaseTrends, selectIsShow: false, @@ -738,7 +797,7 @@ export default { }, { width: "100%", - height: "15rem", + height: "29%", title: "病害趋势", component: DiseaseCurrent, selectIsShow: true, @@ -749,7 +808,7 @@ export default { this.rightModuleList = [ { width: "100%", - height: "13rem", + height: "25%", title: "工单统计", component: WorkOrder, selectIsShow: false, @@ -757,7 +816,7 @@ export default { }, { width: "100%", - height: "17rem", + height: "33%", title: "PIC排名", component: PicRank, selectIsShow: false, @@ -765,7 +824,7 @@ export default { }, { width: "100%", - height: "13rem", + height: "25%", title: "路面状况排名", component: RoadRank, selectIsShow: true, @@ -777,7 +836,7 @@ export default { this.leftModuleList = [ { width: "100%", - height: "9rem", + height: "17%", title: "管养道路统计", component: ManageMaintain, selectIsShow: false, @@ -785,7 +844,7 @@ export default { }, { width: "100%", - height: "28rem", + height: "55%", title: "附属设施分布", component: AncillaryFacilities, selectIsShow: false, @@ -795,7 +854,7 @@ export default { this.rightModuleList = [ { width: "100%", - height: "15rem", + height: "29%", title: "附属设施异常统计", component: AnomalyFacilities, selectIsShow: true, @@ -804,7 +863,7 @@ export default { }, { width: "100%", - height: "29rem", + height: "57%", title: "路产统计", component: RoadStatistic, selectIsShow: true, @@ -816,7 +875,7 @@ export default { this.leftModuleList = [ { width: "100%", - height: "14rem", + height: "27%", title: "交安事件", component: TrafficSafety, selectIsShow: false, @@ -824,7 +883,7 @@ export default { }, { width: "100%", - height: "14rem", + height: "27%", title: "交安事件趋势", component: TrafficTrend, selectIsShow: true, @@ -832,7 +891,7 @@ export default { }, { width: "100%", - height: "17rem", + height: "33%", title: "交安事件统计", component: TrafficStatistic, selectIsShow: true, @@ -843,7 +902,7 @@ export default { this.rightModuleList = [ { width: "100%", - height: "29rem", + height: "50%", title: "交安事件排名", component: TrafficRank, selectIsShow: true, @@ -852,7 +911,7 @@ export default { }, { width: "100%", - height: "15rem", + height: "29%", title: "交安突发事件", component: TrafficEmergency, selectIsShow: false, @@ -894,23 +953,6 @@ export default { background-image: url("../../assets/screen/index/bg-left.png"); background-repeat: no-repeat; background-size: 100% 100%; - grid-template-columns: 94.4rem 94.4rem; - grid-template-areas: - "one " - "two " - "three "; - - .one { - grid-area: one; - } - - .two { - grid-area: two; - } - - .three { - grid-area: three; - } ::v-deep .screen-checkBox { .el-radio-button__inner { diff --git a/src/views/big-screen/module-block.vue b/src/views/big-screen/module-block.vue index 6a87eb0..9edd5f0 100644 --- a/src/views/big-screen/module-block.vue +++ b/src/views/big-screen/module-block.vue @@ -61,7 +61,7 @@ export default { background-size: 100% 100%; .header-title { - width: 18rem; + width: 75%; height: 100%; padding-left: 6rem; line-height: 2rem; @@ -74,7 +74,7 @@ export default { } .header-operation { - width: calc(100% - 18rem); + width: 25%; height: 2.5rem; line-height: 2rem; } diff --git a/src/views/big-screen/road-components/anomaly-facilities.vue b/src/views/big-screen/road-components/anomaly-facilities.vue index d458b5a..a6ac5c3 100644 --- a/src/views/big-screen/road-components/anomaly-facilities.vue +++ b/src/views/big-screen/road-components/anomaly-facilities.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-10-18 15:21:24 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-10-30 17:13:17 + * @LastEditTime: 2024-10-31 14:24:19 * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\anomaly-facilities.vue * @Description: 附属设施异常统计 --> @@ -48,7 +48,7 @@ export default { // echart图数据 anomalyData: [], // echart实例 - chart:null + chart: null, }; }, watch: { @@ -97,8 +97,8 @@ export default { }, /* 绘制echart */ drawChart() { - if(this.chart){ - this.chart.dispose() + if (this.chart) { + this.chart.dispose(); } const xData = this.anomalyData.map((item) => { return item.label; @@ -249,6 +249,51 @@ export default { data: yData, }, ], + dataZoom: [ + { + // 设置滚动条的隐藏与显示 + show: false, + // 设置滚动条类型 + type: "slider", + // 设置背景颜色 + backgroundColor: "rgba(225,225,225,0.2)", + // 设置选中范围的填充颜色 + fillerColor: "#ccc", + // 设置边框颜色 + borderColor: "rgba(225,225,225,0.2)", + // 是否显示detail,即拖拽时候显示详细数值信息 + showDetail: false, + // 数据窗口范围的起始数值 + startValue: 0, + // 数据窗口范围的结束数值(一页显示多少条数据) + endValue: 10, + // empty:当前数据窗口外的数据,被设置为空。 + // 即不会影响其他轴的数据范围 + filterMode: "empty", + // 设置滚动条宽度,相对于盒子宽度 + width: "80%", + // 设置滚动条高度 + height: 5, + // 设置滚动条显示位置 + left: "center", + // 是否锁定选择区域(或叫做数据窗口)的大小 + zoomLoxk: true, + // 控制手柄的尺寸 + handleSize: 10, + // dataZoom-slider组件离容器下侧的距离 + bottom: 0, + }, + { + // 没有下面这块的话,只能拖动滚动条, + // 鼠标滚轮在区域内不能控制外部滚动条 + type: "inside", + // 滚轮是否触发缩放 + zoomOnMouseWheel: false, + // 鼠标滚轮触发滚动 + moveOnMouseMove: true, + moveOnMouseWheel: true, + }, + ], }); window.addEventListener("resize", () => { this.chart.resize(); diff --git a/src/views/big-screen/traffic-components/traffic-rank.vue b/src/views/big-screen/traffic-components/traffic-rank.vue index 6f0a12b..94a65a2 100644 --- a/src/views/big-screen/traffic-components/traffic-rank.vue +++ b/src/views/big-screen/traffic-components/traffic-rank.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-10-21 10:11:03 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-10-31 09:12:01 + * @LastEditTime: 2024-10-31 14:25:18 * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-rank.vue * @Description: 交安事件大屏-交安事件排名 --> @@ -14,7 +14,7 @@ class="vue-scroll" :class-option="defaultOption" :data="rankList" - v-if="rankList.length > 9" + v-if="rankList.length > 7" >
@@ -248,6 +248,51 @@ export default { data: yData, }, ], + dataZoom: [ + { + // 设置滚动条的隐藏与显示 + show: false, + // 设置滚动条类型 + type: "slider", + // 设置背景颜色 + backgroundColor: "rgba(225,225,225,0.2)", + // 设置选中范围的填充颜色 + fillerColor: "#ccc", + // 设置边框颜色 + borderColor: "rgba(225,225,225,0.2)", + // 是否显示detail,即拖拽时候显示详细数值信息 + showDetail: false, + // 数据窗口范围的起始数值 + startValue: 0, + // 数据窗口范围的结束数值(一页显示多少条数据) + endValue: 6, + // empty:当前数据窗口外的数据,被设置为空。 + // 即不会影响其他轴的数据范围 + filterMode: "empty", + // 设置滚动条宽度,相对于盒子宽度 + width: "80%", + // 设置滚动条高度 + height: 5, + // 设置滚动条显示位置 + left: "center", + // 是否锁定选择区域(或叫做数据窗口)的大小 + zoomLoxk: true, + // 控制手柄的尺寸 + handleSize: 10, + // dataZoom-slider组件离容器下侧的距离 + bottom: 0, + }, + { + // 没有下面这块的话,只能拖动滚动条, + // 鼠标滚轮在区域内不能控制外部滚动条 + type: "inside", + // 滚轮是否触发缩放 + zoomOnMouseWheel: false, + // 鼠标滚轮触发滚动 + moveOnMouseMove: true, + moveOnMouseWheel: true, + }, + ], }); window.addEventListener("resize", () => { this.chart.resize();