diff --git a/src/assets/index/middle-item-10.png b/src/assets/index/middle-item-10.png new file mode 100644 index 0000000..ab5580b Binary files /dev/null and b/src/assets/index/middle-item-10.png differ diff --git a/src/assets/index/middle-item-11.png b/src/assets/index/middle-item-11.png new file mode 100644 index 0000000..f29002d Binary files /dev/null and b/src/assets/index/middle-item-11.png differ diff --git a/src/assets/index/middle-item-12.png b/src/assets/index/middle-item-12.png new file mode 100644 index 0000000..8169fd3 Binary files /dev/null and b/src/assets/index/middle-item-12.png differ diff --git a/src/assets/index/middle-item-8.png b/src/assets/index/middle-item-8.png new file mode 100644 index 0000000..dbcdcd0 Binary files /dev/null and b/src/assets/index/middle-item-8.png differ diff --git a/src/assets/index/middle-item-9.png b/src/assets/index/middle-item-9.png new file mode 100644 index 0000000..c83dbd3 Binary files /dev/null and b/src/assets/index/middle-item-9.png differ diff --git a/src/assets/screen/index/btn-time-click.png b/src/assets/screen/index/btn-time-click.png new file mode 100644 index 0000000..b7bf7f7 Binary files /dev/null and b/src/assets/screen/index/btn-time-click.png differ diff --git a/src/assets/screen/index/btn-time.png b/src/assets/screen/index/btn-time.png new file mode 100644 index 0000000..2abe95b Binary files /dev/null and b/src/assets/screen/index/btn-time.png differ diff --git a/src/assets/screen/index/loop-div-0.png b/src/assets/screen/index/loop-div-0.png new file mode 100644 index 0000000..4482685 Binary files /dev/null and b/src/assets/screen/index/loop-div-0.png differ diff --git a/src/assets/screen/index/loop-div-0.svg b/src/assets/screen/index/loop-div-0.svg new file mode 100644 index 0000000..5944b6f --- /dev/null +++ b/src/assets/screen/index/loop-div-0.svg @@ -0,0 +1,174 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/screen/index/loop-div-1.png b/src/assets/screen/index/loop-div-1.png new file mode 100644 index 0000000..724ec39 Binary files /dev/null and b/src/assets/screen/index/loop-div-1.png differ diff --git a/src/assets/screen/index/loop-div-1.svg b/src/assets/screen/index/loop-div-1.svg new file mode 100644 index 0000000..cd2b8fb --- /dev/null +++ b/src/assets/screen/index/loop-div-1.svg @@ -0,0 +1,180 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/screen/index/loop-div-2.png b/src/assets/screen/index/loop-div-2.png new file mode 100644 index 0000000..24c693e Binary files /dev/null and b/src/assets/screen/index/loop-div-2.png differ diff --git a/src/assets/screen/index/loop-div-2.svg b/src/assets/screen/index/loop-div-2.svg new file mode 100644 index 0000000..be1c2f3 --- /dev/null +++ b/src/assets/screen/index/loop-div-2.svg @@ -0,0 +1,176 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/screen/index/screen-map-popover.png b/src/assets/screen/index/screen-map-popover.png index f3674e2..24c97bd 100644 Binary files a/src/assets/screen/index/screen-map-popover.png and b/src/assets/screen/index/screen-map-popover.png differ diff --git a/src/views/big-screen/disease-components/traffic-log.vue b/src/views/big-screen/disease-components/traffic-log.vue index b9ee261..714f76f 100644 --- a/src/views/big-screen/disease-components/traffic-log.vue +++ b/src/views/big-screen/disease-components/traffic-log.vue @@ -256,7 +256,7 @@ export default { }, }, }, - created() { + mounted() { this.getData(); this.getLineList(); this.getAllDefectType(); diff --git a/src/views/big-screen/disease-components/traffic-safety.vue b/src/views/big-screen/disease-components/traffic-safety.vue index 52ec406..5e6ad75 100644 --- a/src/views/big-screen/disease-components/traffic-safety.vue +++ b/src/views/big-screen/disease-components/traffic-safety.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-10-21 09:59:32 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-12-16 17:07:19 + * @LastEditTime: 2024-12-19 10:43:45 * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-safety.vue * @Description: 病害巡检大屏-今日巡查 --> @@ -137,7 +137,7 @@ export default { }, }, }, - created() { + mounted() { this.getData(); }, methods: { diff --git a/src/views/big-screen/disease-components/traffic-statistic.vue b/src/views/big-screen/disease-components/traffic-statistic.vue index 014cff8..08bec4f 100644 --- a/src/views/big-screen/disease-components/traffic-statistic.vue +++ b/src/views/big-screen/disease-components/traffic-statistic.vue @@ -118,7 +118,7 @@ export default { }, }, }, - created() { + mounted() { this.getChartData(); }, methods: { diff --git a/src/views/big-screen/disease-components/traffic-trend.vue b/src/views/big-screen/disease-components/traffic-trend.vue index 154fa02..06e9cc5 100644 --- a/src/views/big-screen/disease-components/traffic-trend.vue +++ b/src/views/big-screen/disease-components/traffic-trend.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-10-21 10:03:08 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-12-13 15:21:00 + * @LastEditTime: 2024-12-19 10:44:06 * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-trend.vue * @Description: 病害巡检大屏-病害趋势 --> @@ -78,7 +78,7 @@ export default { }, }, }, - created() { + mounted() { this.getChartData(); }, methods: { diff --git a/src/views/big-screen/index.vue b/src/views/big-screen/index.vue index 1d36db5..a68319c 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-12-18 10:49:32 + * @LastEditTime: 2024-12-19 10:40:14 * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue * @Description: 大屏首页 --> @@ -164,16 +164,61 @@ -
+
+
+ 本周 + 本月 + 本年 +
+
+
+
+ + + 件 +
+
{{ item.name }}
+
+
+
-
+
+ ≥{{ mapLegendList.s5 }} + ≥{{ mapLegendList.s4 }} + ≥{{ mapLegendList.s3 }} + ≥{{ mapLegendList.s2 }} + ≥{{ mapLegendList.s1 }} +
- 病害类型筛选： + 病害类型筛选： @@ -397,6 +442,7 @@ import TrafficStatistic from "./disease-components/traffic-statistic.vue"; import TrafficLog from "./disease-components/traffic-log.vue"; import ImgDialog from "./components/img-dialog.vue"; import FssmScroll from "@/components/scroll/fssm-scroll.vue"; +import CountTo from "vue-count-to"; // 接口 import { selectTypeList, @@ -427,6 +473,7 @@ export default { ImgDialog, FssmScroll, TrafficLog, + CountTo, }, data() { return { @@ -495,8 +542,16 @@ export default { class: "twe", }, ], + // 顶端工单数据 + workOrderList: [ + { name: "生成工单数", value: 562254 }, + { name: "未完成工单数", value: 562254 }, + { name: "已完成工单数", value: 562254 }, + ], // 图片背景下打点坐标数据 mapCareList: [], + // 图例循环数据 + mapLegendList: { s1: "0", s2: "20", s3: "40", s4: "60", s5: "80" }, // 具体icon类别 iconTypeList: [], @@ -575,13 +630,14 @@ export default { }, created() { this.setTime(); + // this.handleMessage(); + }, + mounted() { this.getSelect(); this.getMapCare(); this.getDieaseTypeList(); this.getMessageList(); - // this.handleMessage(); }, - mounted() {}, methods: { /** * @description: 获取当前时间 @@ -707,7 +763,7 @@ export default { }, /** - * @description: 获取图片背景左上角病害类型下拉 + * @description: 图片背景左上角病害类型下拉修改 * @return {void} */ changeMapCareSelect(value) { @@ -716,6 +772,18 @@ export default { this.getMapCare(value); }, + /** + * @description: 工单修改时间事件 + * @return {void} + */ + changeOrder(val) { + this.workOrderList = [ + { name: "生成工单数", value: 54 }, + { name: "未完成工单数", value: 5254 }, + { name: "已完成工单数", value: 554 }, + ]; + }, + /** * @description: 获取图片背景下坐标数据 * @return {void} @@ -1585,7 +1653,7 @@ export default { // 筛选病害类型下拉 .map-image-select { position: absolute; - left: 28%; + left: 26%; top: 10%; font-size: 0.9rem; position: absolute; @@ -1602,14 +1670,123 @@ export default { z-index: 1; } + // 大屏工单数据部分 + .work-order { + width: 35%; + height: 12%; + left: 38.5%; + top: 10%; + display: flex; + position: absolute; + z-index: 1; + + .work-order-left { + width: 20%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: flex-end; + + .btn-time { + width: 80%; + margin: 0; + background: url("~@/assets/screen/index/btn-time.png") no-repeat; + background-size: 100% 100%; + border-color: transparent; + color: #ffffff; + font-family: "DouYu"; + + &:hover { + background: url("~@/assets/screen/index/btn-time-click.png") + no-repeat; + background-size: 100% 100%; + } + + &:focus { + background: url("~@/assets/screen/index/btn-time-click.png") + no-repeat; + background-size: 100% 100%; + } + } + } + + .work-order-right { + width: 80%; + height: 100%; + display: flex; + justify-content: space-around; + + .loop-div { + width: 30%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + + .value { + font-size: 0.8rem; + font-family: "DouYu"; + color: #ffffff; + + span { + font-size: 1.5rem; + font-family: "DouYu"; + background: linear-gradient( + to bottom, + rgba(0, 240, 255, 0.64), + rgba(89, 255, 235, 1) + ); + /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/ + background-clip: text; + /*将设置的背景颜色限制在文字中*/ + -webkit-text-fill-color: transparent; + /*给文字设置成透明*/ + } + } + + .name { + font-size: 0.8rem; + font-family: "DouYu"; + color: #ffffff; + } + } + + .loop-div-0 { + background: url("~@/assets/screen/index/loop-div-0.svg") no-repeat; + background-size: 50% 50%; + background-position: center 100%; + } + + .loop-div-1 { + background: url("~@/assets/screen/index/loop-div-1.svg") no-repeat; + background-size: 50% 50%; + background-position: center 100%; + } + + .loop-div-2 { + background: url("~@/assets/screen/index/loop-div-2.svg") no-repeat; + background-size: 50% 50%; + background-position: center 100%; + } + } + } + // 图例 .map-legend { height: 7rem; - width: 2rem; + width: 2.5rem; position: absolute; bottom: 16%; right: 27%; + padding-left: 0.5rem; z-index: 1; + display: flex; + flex-direction: column; + justify-content: space-around; + font-size: 0.8rem; + color: #ffffff; + user-select: none; background-image: url("~@/assets/screen/index/map-legend.png"); background-repeat: no-repeat; background-size: 100% 100%; @@ -1998,7 +2175,7 @@ export default { // 修改级联样式 ::v-deep .el-cascader { - width: 8rem; + width: 10rem; .el-input--medium .el-input__inner { height: 1.5rem; @@ -2088,7 +2265,6 @@ export default { color: #cccccc; .item { - .name { width: 7rem; line-height: 1rem; diff --git a/src/views/big-screen/overview-components/disease-current.vue b/src/views/big-screen/overview-components/disease-current.vue index ef9b395..c60bde9 100644 --- a/src/views/big-screen/overview-components/disease-current.vue +++ b/src/views/big-screen/overview-components/disease-current.vue @@ -148,7 +148,7 @@ export default { }, }, }, - created() { + mounted() { this.getChartList(); }, methods: { diff --git a/src/views/big-screen/overview-components/disease-trends.vue b/src/views/big-screen/overview-components/disease-trends.vue index 30996d6..0aef4bf 100644 --- a/src/views/big-screen/overview-components/disease-trends.vue +++ b/src/views/big-screen/overview-components/disease-trends.vue @@ -21,7 +21,7 @@ export default { echartList: [], }; }, - created() { + mounted() { this.geteEhartList(); }, methods: { diff --git a/src/views/big-screen/overview-components/inspection-vehicles.vue b/src/views/big-screen/overview-components/inspection-vehicles.vue index 9abf9e2..2e0a246 100644 --- a/src/views/big-screen/overview-components/inspection-vehicles.vue +++ b/src/views/big-screen/overview-components/inspection-vehicles.vue @@ -199,7 +199,7 @@ export default { viewTitle: "", }; }, - created() { + mounted() { this.getTableData(); }, methods: { diff --git a/src/views/big-screen/overview-components/patrol-order.vue b/src/views/big-screen/overview-components/patrol-order.vue index 6ba631a..85b31f6 100644 --- a/src/views/big-screen/overview-components/patrol-order.vue +++ b/src/views/big-screen/overview-components/patrol-order.vue @@ -85,7 +85,7 @@ export default { echartData: [], }; }, - created() { + mounted() { this.getData(); }, methods: { diff --git a/src/views/big-screen/overview-components/today-inspection.vue b/src/views/big-screen/overview-components/today-inspection.vue index 03e6366..ae9468b 100644 --- a/src/views/big-screen/overview-components/today-inspection.vue +++ b/src/views/big-screen/overview-components/today-inspection.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-10-18 09:42:49 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-12-16 17:07:26 + * @LastEditTime: 2024-12-19 10:42:31 * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\today-inspection.vue * @Description: 总览大屏-今日巡查 --> @@ -122,7 +122,7 @@ export default { rightChartData: [], }; }, - created() { + mounted() { this.getData(); }, methods: { diff --git a/src/views/big-screen/road-components/ancillary-facilities.vue b/src/views/big-screen/road-components/ancillary-facilities.vue index 972b7a6..27c017e 100644 --- a/src/views/big-screen/road-components/ancillary-facilities.vue +++ b/src/views/big-screen/road-components/ancillary-facilities.vue @@ -9,14 +9,16 @@