diff --git a/src/components/amount.vue b/src/components/amount.vue index b6ec1a0..b51b147 100644 --- a/src/components/amount.vue +++ b/src/components/amount.vue @@ -16,6 +16,7 @@ export default defineComponent({ myCharts: {}, carOfInLists: [], carOfOutLists: [], + time: null }; }, @@ -77,19 +78,21 @@ export default defineComponent({ }, }, - created() { + mounted() { this.getMbpsByTime(); setInterval(() => { // 获取数据 this.getMbpsByTime(); }, 3000); - }, - - mounted() { // 绘制图表 this.getOptions(); }, + unmounted() { + clearInterval(this.time) + this.time = null + }, + methods: { /** 查看吞吐量折线图 * @param {number} endTime 结束时间 @@ -117,9 +120,13 @@ export default defineComponent({ // 绘制图表 getOptions() { const { weightOfIns, weightOfOuts, timeArray } = this; - const throughput = document.getElementById("throughput"); - this.myCharts = echarts.init(throughput); - this.myCharts.setOption({ + + // 基于准备好的dom，初始化echarts实例 + let throughput = document.getElementById('throughput') + throughput.removeAttribute('_echarts_instance_') + let myChart1 = echarts.init(throughput) + + myChart1.setOption({ tooltip: { trigger: "axis", axisPointer: { diff --git a/src/components/curve.vue b/src/components/curve.vue index 44d14e1..285acee 100644 --- a/src/components/curve.vue +++ b/src/components/curve.vue @@ -28,6 +28,7 @@ export default defineComponent({ weightOfOutLists: [], cycles: ["天", "周", "月", "年"], currentIndex: 0, + time: null, }; }, @@ -89,19 +90,21 @@ export default defineComponent({ }, }, - created() { + mounted() { this.getMbpsByTime(this.currentIndex); setInterval(() => { // 获取数据 this.getMbpsByTime(this.currentIndex); }, 4000); - }, - - mounted() { // 绘制图表 this.getOptions(); }, + unmounted() { + clearInterval(this.time); + this.time = null; + }, + methods: { // 切换周期 changeCycle(index) { @@ -135,9 +138,13 @@ export default defineComponent({ // 绘制图表 getOptions() { const { weightOfIns, weightOfOuts, timeArray } = this; - const comparisonChart = document.getElementById("comparisonChart"); - this.myCharts = echarts.init(comparisonChart); - this.myCharts.setOption({ + + // 基于准备好的dom，初始化echarts实例 + let comparisonChart = document.getElementById("comparisonChart"); + comparisonChart.removeAttribute("_echarts_instance_"); + let myChart1 = echarts.init(comparisonChart); + + myChart1.setOption({ tooltip: { trigger: "axis", axisPointer: { diff --git a/src/components/finance.vue b/src/components/finance.vue index 28969ac..6e0ddae 100644 --- a/src/components/finance.vue +++ b/src/components/finance.vue @@ -26,9 +26,12 @@ export default defineComponent({ methods: { // 绘制图表 getOptions() { - const finance = document.getElementById("finance"); - this.myCharts = echarts.init(finance); - this.myCharts.setOption({ + // 基于准备好的dom，初始化echarts实例 + let finance = document.getElementById("finance"); + finance.removeAttribute("_echarts_instance_"); + let myChart1 = echarts.init(finance); + + myChart1.setOption({ tooltip: { trigger: "axis", axisPointer: { diff --git a/src/components/heat.vue b/src/components/heat.vue index 470d2e0..67c832d 100644 --- a/src/components/heat.vue +++ b/src/components/heat.vue @@ -17,25 +17,28 @@ export default defineComponent({ }; }, - created() { + mounted() { setInterval(() => { // 获取数据 this.getHeatImaging(); }, 5000); - }, - - mounted() { // 获取数据 this.getHeatImaging(); }, + unmounted() { + clearInterval(this.time); + this.time = null; + }, + methods: { /** 查询温度与湿度 * @param {number} id 热成像设备id */ async getHeatImaging() { try { - const param = {}; + const { warehouseId } = this.$route.query; + const param = { warehouseId: warehouseId ? warehouseId : 7 }; const data = await getHeatImaging(param); this.src = data.imageData; } catch (error) { diff --git a/src/components/humidity.vue b/src/components/humidity.vue index 00b639b..c21fe10 100644 --- a/src/components/humidity.vue +++ b/src/components/humidity.vue @@ -15,6 +15,7 @@ export default defineComponent({ return { myCharts: {}, humiditys: [], + time: null, }; }, @@ -59,18 +60,20 @@ export default defineComponent({ }, }, - created() { + mounted() { setInterval(() => { // 获取数据 this.getTeamAndHumidity(); }, 4500); - }, - - mounted() { // 绘制图表 this.getOptions(); }, + unmounted() { + clearInterval(this.time); + this.time = null; + }, + methods: { /** 查询温度与湿度 * @param {number} endTime 结束时间 @@ -91,9 +94,13 @@ export default defineComponent({ // 绘制图表 getOptions() { const { humidityArray, timeArray } = this; - const humidity = document.getElementById("humidity"); - this.myCharts = echarts.init(humidity); - this.myCharts.setOption({ + + // 基于准备好的dom，初始化echarts实例 + let humidity = document.getElementById("humidity"); + humidity.removeAttribute("_echarts_instance_"); + let myChart1 = echarts.init(humidity); + + myChart1.setOption({ tooltip: {}, grid: { left: "0", diff --git a/src/components/memorabilia.vue b/src/components/memorabilia.vue index 291024c..3610614 100644 --- a/src/components/memorabilia.vue +++ b/src/components/memorabilia.vue @@ -36,34 +36,28 @@ export default defineComponent({ return { details: [ { - title: "防火墙", - time: "2021-04-08", + title: "物流园区升级", + time: "两周前", describe: - "有助于提高计算机的安全性。Windows防火墙能够限制从其他计算机送到用户计算机上的信息,这使得用户可以更好的控制", + "中国第一个保税物流园区升级 形成1+1+3联动发展新格局。外高桥港综合保税区今后将发挥“保税+”功能优势，围绕“提质、升级、开放、创新”，推动产业链、供应链、价值链和创新链融合发展，探索具有创新示范意义、体现差异化竞争、发挥引领作用的外高桥港综合保税区创新试验新路子，为我国改革开放积累新经验、提供新样本。", }, { - title: "代理服务器", - time: "2021-04-08", + title: "物流园区资产证券化探索与突破", + time: "一个月前", describe: - "代理服务器代表内部客户端与外部的服务器通信,代理服务器这个术语通常是指一个应用级的网关,虽然电路级网关也可作为代理服务器的一种", + "观察当前物流市场，物流园区的盈利模式明确，现金流相对稳定，比较符合发行公募REITs的条件。对于一些自持物流园区的电商企业来说，扩大规模的需求是明确且迫切的，但自建仓储对财务的影响也是现实存在的。公募REITs的推行正好能缓解重资产对财务造成的压力。", }, { - title: "包过滤", - time: "2021-04-08", + title: "物流园区的未来前景", + time: "一周前", describe: - "包过滤是处理网络上基于packet-by-packet流量的设备,包过滤设备允许或阻止包,典型的实施方法是通过标准的路由器,包过滤是几种不同防火墙的类型之一.", + "利用信息互联网和设施物联网推动物流园区的全面接入，以信息互联、设施互联带动物流互联，实现园区业务线上化转型，打造在线物流园区。", }, { - title: "电路级网关", - time: "2021-04-08", + title: "积极开展安全生产检查", + time: "3天前", describe: - "电路级网关用来监控受信任的客户或服务器与不受信任的主机间的TCP握手信息,这样来决定这个会话是否悠哉游哉,电路级网关是在OSI模型中会话层上来过滤数据包", - }, - { - title: "代理服务器", - time: "2021-04-08", - describe: - "代理服务器代表内部客户端与外部的服务器通信,代理服务器这个术语通常是指一个应用级的网关,虽然电路级网关也可作为代理服务器的一种.", + "近日,物流园区安监局对落实企业安全生产主体责任情况进行专项检查，执法人员实地查看了公司的维修车间、配件存储库房、喷漆车间,并对公司安全生产各类档案建立情况进行检查。针对检查中发现的问题隐患，下达《责令限期整改指令书》，要求企业限期整改落实，确保企业生产安全。", }, ], }; diff --git a/src/components/parkingSpace.vue b/src/components/parkingSpace.vue index a76ada6..c113761 100644 --- a/src/components/parkingSpace.vue +++ b/src/components/parkingSpace.vue @@ -27,9 +27,12 @@ export default defineComponent({ methods: { // 绘制图表 getOptions() { - const parkingSpace = document.getElementById("parkingSpace"); - this.myCharts = echarts.init(parkingSpace); - this.myCharts.setOption({ + // 基于准备好的dom，初始化echarts实例 + let parkingSpace = document.getElementById("parkingSpace"); + parkingSpace.removeAttribute("_echarts_instance_"); + let myChart1 = echarts.init(parkingSpace); + + myChart1.setOption({ series: [ { type: "gauge", diff --git a/src/components/statistics.vue b/src/components/statistics.vue index ea62952..f169abd 100644 --- a/src/components/statistics.vue +++ b/src/components/statistics.vue @@ -26,9 +26,12 @@ export default defineComponent({ methods: { // 绘制图表 getOptions() { - const statistics = document.getElementById("statistics"); - this.myCharts = echarts.init(statistics); - this.myCharts.setOption({ + // 基于准备好的dom，初始化echarts实例 + let statistics = document.getElementById("statistics"); + statistics.removeAttribute("_echarts_instance_"); + let myChart1 = echarts.init(statistics); + + myChart1.setOption({ tooltip: { trigger: "axis", axisPointer: { diff --git a/src/components/temperature.vue b/src/components/temperature.vue index 211f6bf..e1ef355 100644 --- a/src/components/temperature.vue +++ b/src/components/temperature.vue @@ -15,6 +15,7 @@ export default defineComponent({ return { myCharts: {}, temps: [], + time: null, }; }, @@ -59,18 +60,20 @@ export default defineComponent({ }, }, - created() { + mounted() { setInterval(() => { // 获取数据 this.getTeamAndHumidity(); }, 3500); - }, - - mounted() { // 绘制图表 this.getOptions(); }, + unmounted() { + clearInterval(this.time); + this.time = null; + }, + methods: { /** 查询温度与湿度 * @param {number} endTime 结束时间 @@ -91,9 +94,12 @@ export default defineComponent({ getOptions() { // 绘制图表 const { tempArray, timeArray } = this; - const temperature = document.getElementById("temperature"); - this.myCharts = echarts.init(temperature); - this.myCharts.setOption({ + // 基于准备好的dom，初始化echarts实例 + let temperature = document.getElementById("temperature"); + temperature.removeAttribute("_echarts_instance_"); + let myChart1 = echarts.init(temperature); + + myChart1.setOption({ tooltip: {}, grid: { left: "0", diff --git a/src/components/top-bar.vue b/src/components/top-bar.vue index 270737c..b6ff5ae 100644 --- a/src/components/top-bar.vue +++ b/src/components/top-bar.vue @@ -10,8 +10,8 @@

{{ title }}电子看板

{{ time }}
-
-
+
+
@@ -239,4 +239,17 @@ export default defineComponent({ .top-wrap .right-wrap .water { background-image: url("../assets/img/water.png"); } + +@keyframes twinkling { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +.state { + animation: twinkling 1s infinite; +} diff --git a/src/components/totalCargo.vue b/src/components/totalCargo.vue index 2b08702..a098755 100644 --- a/src/components/totalCargo.vue +++ b/src/components/totalCargo.vue @@ -27,9 +27,12 @@ export default defineComponent({ methods: { // 绘制图表 getOptions() { - const totalCargo = document.getElementById("totalCargo"); - this.myCharts = echarts.init(totalCargo); - this.myCharts.setOption({ + // 基于准备好的dom，初始化echarts实例 + let totalCargo = document.getElementById("totalCargo"); + totalCargo.removeAttribute("_echarts_instance_"); + let myChart1 = echarts.init(totalCargo); + + myChart1.setOption({ series: [ { type: "gauge", diff --git a/src/components/usableArea.vue b/src/components/usableArea.vue index dcd633f..fe15fe4 100644 --- a/src/components/usableArea.vue +++ b/src/components/usableArea.vue @@ -27,9 +27,12 @@ export default defineComponent({ methods: { // 绘制图表 getOptions() { - const usableArea = document.getElementById("usableArea"); - this.myCharts = echarts.init(usableArea); - this.myCharts.setOption({ + // 基于准备好的dom，初始化echarts实例 + let usableArea = document.getElementById("usableArea"); + usableArea.removeAttribute("_echarts_instance_"); + let myChart1 = echarts.init(usableArea); + + myChart1.setOption({ series: [ { type: "gauge", diff --git a/src/views/videoScreen.vue b/src/components/videoScreen.vue similarity index 55% rename from src/views/videoScreen.vue rename to src/components/videoScreen.vue index 51486c4..1641fc9 100644 --- a/src/views/videoScreen.vue +++ b/src/components/videoScreen.vue @@ -1,17 +1,12 @@ @@ -112,14 +162,14 @@ export default defineComponent({ .monitor—btn { position: absolute; right: 0; - top: 28%; + top: 20%; z-index: 99; width: 48rem; height: 50rem; } .monitor—btn1 { - top: 20%; + top: 28%; } .frame { diff --git a/src/views/repo-5.vue b/src/views/repo-5.vue index 30488bc..8aed53b 100644 --- a/src/views/repo-5.vue +++ b/src/views/repo-5.vue @@ -39,7 +39,7 @@ - +
摄像头监控视频
@@ -47,21 +47,15 @@
- - - +
- +
+ + diff --git a/src/views/repo-yj.vue b/src/views/repo-yj.vue index 30488bc..8427051 100644 --- a/src/views/repo-yj.vue +++ b/src/views/repo-yj.vue @@ -39,7 +39,7 @@ - +
摄像头监控视频
@@ -47,21 +47,15 @@
- - - +
- +
+ + diff --git a/src/views/xh.vue b/src/views/xh.vue index 9beaa2e..609f8c7 100644 --- a/src/views/xh.vue +++ b/src/views/xh.vue @@ -38,36 +38,49 @@ - - + + +
+
+
{{show}}摄像头监控视频
+ +
+
+
+ +
+ +
+
+
+
+ + + + -
+
摄像头监控视频
- - - +
- +
+ + + @@ -112,14 +162,14 @@ export default defineComponent({ .monitor—btn { position: absolute; right: 0; - top: 28%; + top: 20%; z-index: 99; width: 48rem; height: 50rem; } .monitor—btn1 { - top: 20%; + top: 28%; } .frame { diff --git a/vite.config.ts b/vite.config.ts index 1e2a83d..6d39a5a 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -9,6 +9,7 @@ export default ({ mode }) => { console.log("🚀 ~ file: vite.config.ts ~ line 8 ~ VITE_PROXY", createProxy(JSON.parse(VITE_PROXY))) return defineConfig({ plugins: [vue()], + base: '/wl/0/', server: { open: true, proxy: createProxy(JSON.parse(VITE_PROXY)),