diff --git a/src/api/modules/aIEarlyWarn.ts b/src/api/modules/aIEarlyWarn.ts new file mode 100644 index 0000000..1beaffa --- /dev/null +++ b/src/api/modules/aIEarlyWarn.ts @@ -0,0 +1,3 @@ +// AI预警接口API +import http from "@/api"; +const BASEURL = import.meta.env.VITE_API_URL; diff --git a/src/api/modules/smartBuild.ts b/src/api/modules/smartBuild.ts new file mode 100644 index 0000000..1ab7627 --- /dev/null +++ b/src/api/modules/smartBuild.ts @@ -0,0 +1,3 @@ +// 智慧党建接口API +import http from "@/api"; +const BASEURL = import.meta.env.VITE_API_URL; diff --git a/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomRight.vue b/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomRight.vue index 1e04265..fc04c86 100644 --- a/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomRight.vue +++ b/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/bottomRight.vue @@ -72,7 +72,6 @@ import { reactive, ref, onMounted } from "vue"; import textIcon from "@/assets/images/vehicleManagement/car.png"; import { GlobalStore } from "@/stores"; const store = GlobalStore(); -let showDialog = ref(false as any); const list = reactive([ { id: 1, @@ -153,7 +152,7 @@ const list = reactive([ warnTime: "2023-01-01 12:00:00" } ]); - +let showDialog = ref(false as any); function handleClick(event: any) { console.log("点击", event.target.className); if (event.target.className == "list-detail") { diff --git a/src/views/sevenLargeScreen/greenConstruct/waterMonitor/blueLineEchart.vue b/src/views/sevenLargeScreen/greenConstruct/waterMonitor/blueLineEchart.vue index b35a09e..3f45eef 100644 --- a/src/views/sevenLargeScreen/greenConstruct/waterMonitor/blueLineEchart.vue +++ b/src/views/sevenLargeScreen/greenConstruct/waterMonitor/blueLineEchart.vue @@ -18,13 +18,20 @@ type Props = { yData?: any; // 传入y轴对应的数据 lineId?: any; // 传入折线图dom元素对应的id lineSmooth?: any; // 传入折线图的平滑度 0-1,(0:折线 1:圆滑) + grid?: any; //折线图的上下左右偏移量 }; // withDefaults 定义默认值(传入的数据类型同默认值) const props = withDefaults(defineProps(), { xData: ["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"], yData: [10, 5, 20, 25, 15, 25, 12], lineId: "waterShortTerm", - lineSmooth: 0 + lineSmooth: 0, + grid: { + top: "20%", + left: "6%", + right: "4%", + bottom: "10%" + } // num: () => [12, 13, 14] // 复杂数据类型使用函数方式 }); @@ -58,13 +65,7 @@ function initOption() { tooltip: { trigger: "axis" }, - grid: { - top: "20%", - left: "6%", - right: "4%", - bottom: "10%" - // containLabel: true - }, + grid: props.grid, xAxis: [ { type: "category", @@ -219,5 +220,6 @@ onBeforeUnmount(async () => { width: 100%; height: 100%; position: relative; + // transform: rotate(90deg); } diff --git a/src/views/sevenLargeScreen/greenConstruct/waterMonitor/bottomLeft.vue b/src/views/sevenLargeScreen/greenConstruct/waterMonitor/bottomLeft.vue index ef9af3f..677fcfa 100644 --- a/src/views/sevenLargeScreen/greenConstruct/waterMonitor/bottomLeft.vue +++ b/src/views/sevenLargeScreen/greenConstruct/waterMonitor/bottomLeft.vue @@ -33,11 +33,11 @@ const store = GlobalStore(); // x轴 let xData = ref(["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"] as any); // Y轴单位 -let unit = ref("单位:V" as any); +// let unit = ref("单位:V" as any); // Y轴数据 -let yData = ref([10, 5, 20, 25, 15, 25, 12] as any); +let yData = ref([10, 5, 20, 35, 25, 15, 12] as any); // 图表数据项 -let option = ref(null as any); +// let option = ref(null as any); // 选中 let checked = ref(1); diff --git a/src/views/sevenLargeScreen/greenConstruct/waterMonitor/greenLineEchart.vue b/src/views/sevenLargeScreen/greenConstruct/waterMonitor/greenLineEchart.vue index 8e336e6..8537228 100644 --- a/src/views/sevenLargeScreen/greenConstruct/waterMonitor/greenLineEchart.vue +++ b/src/views/sevenLargeScreen/greenConstruct/waterMonitor/greenLineEchart.vue @@ -27,7 +27,7 @@ const props = withDefaults(defineProps(), { lineId: "waterShortTerm", lineSmooth: 0, grid: { - top: "20%", + top: "15%", left: "10%", right: "10%", bottom: "10%" @@ -65,12 +65,7 @@ function initOption() { tooltip: { trigger: "axis" }, - grid: { - top: "20%", - left: "10%", - right: "10%", - bottom: "10%" - }, + grid: props.grid, xAxis: [ { type: "category", @@ -214,7 +209,7 @@ onMounted(async () => { drawChart(); }); -// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP +// 即时销毁事件总线派发，否则会执行两次mitts.on造成不必要的内存浪费 7.14 by CJP onBeforeUnmount(async () => { mitts.off("devSn"); }); diff --git a/src/views/sevenLargeScreen/largeMachinery/gantryCrane/bottomLeft.vue b/src/views/sevenLargeScreen/largeMachinery/gantryCrane/bottomLeft.vue index 5fae5a6..36cc7d8 100644 --- a/src/views/sevenLargeScreen/largeMachinery/gantryCrane/bottomLeft.vue +++ b/src/views/sevenLargeScreen/largeMachinery/gantryCrane/bottomLeft.vue @@ -10,13 +10,14 @@ - + > @@ -26,18 +27,25 @@ import Card from "@/components/card.vue"; import symbolIcon from "@/assets/images/lineSymbol.png"; import { onMounted, reactive, ref, onBeforeUnmount } from "vue"; -import greenLineEchart from "@/views/sevenLargeScreen/greenConstruct/waterMonitor/greenLineEchart.vue"; +import blueLineEchart from "@/views/sevenLargeScreen/greenConstruct/waterMonitor/blueLineEchart.vue"; import { GlobalStore } from "@/stores"; import mitts from "@/utils/bus"; //兄弟组件传值 const store = GlobalStore(); // x轴 let xData = ref(["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"] as any); // Y轴单位 -let unit = ref("单位:V" as any); +// let unit = ref("单位:V" as any); // Y轴数据 let yData = ref([10, 5, 20, 25, 15, 25, 12] as any); // 图表数据项 -let option = ref(null as any); +// let option = ref(null as any); +// 图标偏移度 +let lineGrid = ref({ + top: "20%", + left: "10%", + right: "8%", + bottom: "10%" +}); // 选中 let checked = ref(1); @@ -69,9 +77,11 @@ function getRecentSevenDays() { for (let i = 0; i < 7; i++) { const date = new Date(today.getTime() - i * millisecondsPerDay); + // 获取年 + const year = today.getFullYear(); const month = ("0" + (date.getMonth() + 1)).slice(-2); const day = ("0" + date.getDate()).slice(-2); - dates.unshift(`${month}-${day}`); + dates.unshift(`${year}-${month}-${day}`); } return dates; } @@ -94,7 +104,7 @@ function getPassedDaysOfMonth() { while (currentDate <= today) { const month = currentDate.getMonth() + 1; const day = currentDate.getDate(); - dates.push(`${("0" + month).slice(-2)}-${("0" + day).slice(-2)}`); + dates.push(`${year}-${("0" + month).slice(-2)}-${("0" + day).slice(-2)}`); currentDate.setDate(currentDate.getDate() + 1); } @@ -102,7 +112,9 @@ function getPassedDaysOfMonth() { return dates; } -onMounted(async () => {}); +onMounted(async () => { + getWeekData(1); +}); // 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP onBeforeUnmount(async () => { diff --git a/src/views/sevenLargeScreen/largeMachinery/gantryCrane/bottomRight.vue b/src/views/sevenLargeScreen/largeMachinery/gantryCrane/bottomRight.vue index 1aa52f8..c09f07d 100644 --- a/src/views/sevenLargeScreen/largeMachinery/gantryCrane/bottomRight.vue +++ b/src/views/sevenLargeScreen/largeMachinery/gantryCrane/bottomRight.vue @@ -10,13 +10,14 @@ --> - + > @@ -26,87 +27,94 @@ import Card from "@/components/card.vue"; import symbolIcon from "@/assets/images/lineSymbol.png"; import { onMounted, reactive, ref, onBeforeUnmount } from "vue"; -import greenLineEchart from "@/views/sevenLargeScreen/greenConstruct/waterMonitor/greenLineEchart.vue"; +import blueLineEchart from "@/views/sevenLargeScreen/greenConstruct/waterMonitor/blueLineEchart.vue"; import { GlobalStore } from "@/stores"; import mitts from "@/utils/bus"; //兄弟组件传值 const store = GlobalStore(); // x轴 -let xData = ref(["09-01", "09-02", "09-03", "09-04", "09-05", "09-06", "09-07"] as any); +let xData = ref(["02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00"] as any); // Y轴单位 -let unit = ref("单位:V" as any); +// let unit = ref("单位:V" as any); // Y轴数据 let yData = ref([10, 5, 25, 20, 15, 25, 12] as any); // 图表数据项 -let option = ref(null as any); +// let option = ref(null as any); +// 图标偏移度 +let lineGrid = ref({ + top: "10%", + left: "10%", + right: "8%", + bottom: "10%" +}); // 选中 -let checked = ref(1); -function getWeekData(type: any) { - checked.value = type; - let currentWeek = getRecentSevenDays(); - // console.log(currentWeek, "近七天"); - // 模拟数据改变 - xData.value = currentWeek; - yData.value = [20, 15, 25, 15, 25, 35, 12]; -} -function getMonthData(type: any) { - checked.value = type; - let currentWeek = getPassedDaysOfMonth(); - // console.log(currentWeek.length, "本月"); - let testyData: any = []; - for (let i = 0; i < currentWeek.length; i++) { - testyData.push((i % 2) + 10); - } - xData.value = currentWeek; - yData.value = testyData; -} +// let checked = ref(1); +// function getWeekData(type: any) { +// checked.value = type; +// let currentWeek = getRecentSevenDays(); +// // console.log(currentWeek, "近七天"); +// // 模拟数据改变 +// xData.value = currentWeek; +// yData.value = [20, 15, 25, 15, 25, 35, 12]; +// } +// function getMonthData(type: any) { +// checked.value = type; +// let currentWeek = getPassedDaysOfMonth(); +// // console.log(currentWeek.length, "本月"); +// let testyData: any = []; +// for (let i = 0; i < currentWeek.length; i++) { +// testyData.push((i % 2) + 10); +// } +// xData.value = currentWeek; +// yData.value = testyData; +// } -//获取近七天的日期 -function getRecentSevenDays() { - const dates: any = []; - const millisecondsPerDay = 24 * 60 * 60 * 1000; // 一天的毫秒数 - const today = new Date(); // 当前日期 +// //获取近七天的日期 +// function getRecentSevenDays() { +// const dates: any = []; +// const millisecondsPerDay = 24 * 60 * 60 * 1000; // 一天的毫秒数 +// const today = new Date(); // 当前日期 - for (let i = 0; i < 7; i++) { - const date = new Date(today.getTime() - i * millisecondsPerDay); - const month = ("0" + (date.getMonth() + 1)).slice(-2); - const day = ("0" + date.getDate()).slice(-2); - dates.unshift(`${month}-${day}`); - } - return dates; -} +// for (let i = 0; i < 7; i++) { +// const date = new Date(today.getTime() - i * millisecondsPerDay); +// const month = ("0" + (date.getMonth() + 1)).slice(-2); +// const day = ("0" + date.getDate()).slice(-2); +// dates.unshift(`${month}-${day}`); +// } +// return dates; +// } -// 获取本月到今天的日期 -function getPassedDaysOfMonth() { - // 存放数据的数组 - const dates: any = []; - // 获取当前时间的时间戳 - const today = new Date(); - // 获取年 - const year = today.getFullYear(); - // 获取月 - const month = today.getMonth(); - // 获取当前月份第一天的时间戳 - const startDate = new Date(year, month, 1); // 月份从 0 开始，所以 8 表示 9 月 +// // 获取本月到今天的日期 +// function getPassedDaysOfMonth() { +// // 存放数据的数组 +// const dates: any = []; +// // 获取当前时间的时间戳 +// const today = new Date(); +// // 获取年 +// const year = today.getFullYear(); +// // 获取月 +// const month = today.getMonth(); +// // 获取当前月份第一天的时间戳 +// const startDate = new Date(year, month, 1); // 月份从 0 开始，所以 8 表示 9 月 - let currentDate = startDate; - // 遍历从这个月第一天到现在的日期数 - while (currentDate <= today) { - const month = currentDate.getMonth() + 1; - const day = currentDate.getDate(); - dates.push(`${("0" + month).slice(-2)}-${("0" + day).slice(-2)}`); +// let currentDate = startDate; +// // 遍历从这个月第一天到现在的日期数 +// while (currentDate <= today) { +// const month = currentDate.getMonth() + 1; +// const day = currentDate.getDate(); +// dates.push(`${("0" + month).slice(-2)}-${("0" + day).slice(-2)}`); - currentDate.setDate(currentDate.getDate() + 1); - } +// currentDate.setDate(currentDate.getDate() + 1); +// } - return dates; -} +// return dates; +// } onMounted(async () => {}); // 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP onBeforeUnmount(async () => { - mitts.off("devSn"); + // mitts.off("devSn"); }); diff --git a/src/views/sevenLargeScreen/largeMachinery/gantryCrane/topCenter.vue b/src/views/sevenLargeScreen/largeMachinery/gantryCrane/topCenter.vue index 3a83ff6..78ae162 100644 --- a/src/views/sevenLargeScreen/largeMachinery/gantryCrane/topCenter.vue +++ b/src/views/sevenLargeScreen/largeMachinery/gantryCrane/topCenter.vue @@ -1,7 +1,7 @@ @@ -34,6 +72,13 @@ @@ -47,6 +92,7 @@ onMounted(async () => {}); width: 3%; left: 0%; top: 10%; + cursor: pointer; font-size: 12px; padding-left: 5px; padding-bottom: 1%; @@ -115,4 +161,120 @@ onMounted(async () => {}); } } } +.list-detail { + position: absolute; + width: 100%; + height: 100%; + .dialog-content { + position: absolute; + box-sizing: border-box; + padding: 2%; + left: 5%; + top: 5%; + width: 36%; + height: 92%; + background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat; + background-size: 100% 100%; + z-index: 21; + .dialog-icon { + position: absolute; + left: 4%; + top: 4%; + width: 7%; + height: 7%; + img { + width: 100%; + height: 100%; + } + } + .pic-icon { + position: absolute; + left: 3%; + top: 40%; + width: 7%; + height: 7%; + img { + width: 100%; + height: 100%; + } + } + .close-icon { + position: absolute; + right: 3%; + top: 3%; + cursor: pointer; + color: #ffffff; + font-size: calc(100vw * 18 / 1920); + } + .dialog-title { + color: #ffffff; + font-weight: bold; + margin-left: 3%; + font-size: calc(100vw * 18 / 1920); + font-family: "OPPOSans-Bold"; + } + .dialog-detail { + width: 100%; + height: 100%; + margin-top: 8%; + .detail-top { + height: 38%; + display: flex; + .top-left { + width: 35%; + height: 90%; + img { + width: 100%; + height: 100%; + object-fit: contain; + } + } + .top-right { + margin-left: 6%; + font-size: 12px; + color: #fff; + } + } + .detail-text { + width: 100%; + height: 100%; + margin-top: 3%; + .text-box { + height: 8%; + display: flex; + align-items: center; + background: url("@/assets/images/aIEarlyWarning/contentBg.png") no-repeat; + background-size: 100% 100%; + .type { + width: 25%; + margin-left: 4%; + color: #a1accb; + font-size: calc(100vw * 12 / 1920); + } + .text { + font-size: calc(100vw * 12 / 1920); + color: #ffffff; + } + } + } + } + .pic-title { + color: #ffffff; + font-weight: bold; + font-size: calc(100vw * 18 / 1920); + font-family: "OPPOSans-Bold"; + margin-top: 5%; + margin-left: 8%; + } + .big-pic { + width: 100%; + height: 50%; + margin-top: 10%; + img { + width: 100%; + height: 100%; + } + } + } +} diff --git a/src/views/sevenLargeScreen/largeMachinery/gantryCrane/topLeft.vue b/src/views/sevenLargeScreen/largeMachinery/gantryCrane/topLeft.vue index 471ae97..467cf4e 100644 --- a/src/views/sevenLargeScreen/largeMachinery/gantryCrane/topLeft.vue +++ b/src/views/sevenLargeScreen/largeMachinery/gantryCrane/topLeft.vue @@ -1,6 +1,10 @@