DIGITAL_FACTORY
/
park-h
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

上线

feature
lucky 4 years ago
parent
7f0776f030
commit
51d8898651
20 changed files with 339 additions and 143 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 21
      src/components/amount.vue
  2. 21
      src/components/curve.vue
  3. 9
      src/components/finance.vue
  4. 13
      src/components/heat.vue
  5. 21
      src/components/humidity.vue
  6. 30
      src/components/memorabilia.vue
  7. 9
      src/components/parkingSpace.vue
  8. 9
      src/components/statistics.vue
  9. 20
      src/components/temperature.vue
  10. 17
      src/components/top-bar.vue
  11. 9
      src/components/totalCargo.vue
  12. 9
      src/components/usableArea.vue
  13. 18
      src/components/videoScreen.vue
  14. 9
      src/components/warehouse.vue
  15. 2
      src/utils/http.ts
  16. 84
      src/views/jht.vue
  17. 47
      src/views/repo-5.vue
  18. 47
      src/views/repo-yj.vue
  19. 86
      src/views/xh.vue
  20. 1
      vite.config.ts

21
src/components/amount.vue
View File

@ -16,6 +16,7 @@ export default defineComponent({
myCharts: {}, myCharts: {},
carOfInLists: [], carOfInLists: [],
carOfOutLists: [], carOfOutLists: [],
time: null
}; };
}, },
@ -77,19 +78,21 @@ export default defineComponent({
}, },
}, },
created() { mounted() {
this.getMbpsByTime(); this.getMbpsByTime();
setInterval(() => { setInterval(() => {
// 获取数据 // 获取数据
this.getMbpsByTime(); this.getMbpsByTime();
}, 3000); }, 3000);
},
mounted() {
// 绘制图表 // 绘制图表
this.getOptions(); this.getOptions();
}, },
unmounted() {
clearInterval(this.time)
this.time = null
},
methods: { methods: {
/** 查看吞吐量折线图 /** 查看吞吐量折线图
* @param {number} endTime 结束时间 * @param {number} endTime 结束时间
@ -117,9 +120,13 @@ export default defineComponent({
// 绘制图表 // 绘制图表
getOptions() { getOptions() {
const { weightOfIns, weightOfOuts, timeArray } = this; const { weightOfIns, weightOfOuts, timeArray } = this;
const throughput = document.getElementById("throughput");
this.myCharts = echarts.init(throughput); // 基于准备好的dom，初始化echarts实例
this.myCharts.setOption({ let throughput = document.getElementById('throughput')
throughput.removeAttribute('_echarts_instance_')
let myChart1 = echarts.init(throughput)
myChart1.setOption({
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {

21
src/components/curve.vue
View File

@ -28,6 +28,7 @@ export default defineComponent({
weightOfOutLists: [], weightOfOutLists: [],
cycles: ["天", "周", "月", "年"], cycles: ["天", "周", "月", "年"],
currentIndex: 0, currentIndex: 0,
time: null,
}; };
}, },
@ -89,19 +90,21 @@ export default defineComponent({
}, },
}, },
created() { mounted() {
this.getMbpsByTime(this.currentIndex); this.getMbpsByTime(this.currentIndex);
setInterval(() => { setInterval(() => {
// 获取数据 // 获取数据
this.getMbpsByTime(this.currentIndex); this.getMbpsByTime(this.currentIndex);
}, 4000); }, 4000);
},
mounted() {
// 绘制图表 // 绘制图表
this.getOptions(); this.getOptions();
}, },
unmounted() {
clearInterval(this.time);
this.time = null;
},
methods: { methods: {
// 切换周期 // 切换周期
changeCycle(index) { changeCycle(index) {
@ -135,9 +138,13 @@ export default defineComponent({
// 绘制图表 // 绘制图表
getOptions() { getOptions() {
const { weightOfIns, weightOfOuts, timeArray } = this; const { weightOfIns, weightOfOuts, timeArray } = this;
const comparisonChart = document.getElementById("comparisonChart");
this.myCharts = echarts.init(comparisonChart); // 基于准备好的dom，初始化echarts实例
this.myCharts.setOption({ let comparisonChart = document.getElementById("comparisonChart");
comparisonChart.removeAttribute("_echarts_instance_");
let myChart1 = echarts.init(comparisonChart);
myChart1.setOption({
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {

9
src/components/finance.vue
View File

@ -26,9 +26,12 @@ export default defineComponent({
methods: { methods: {
// 绘制图表 // 绘制图表
getOptions() { getOptions() {
const finance = document.getElementById("finance"); // 基于准备好的dom，初始化echarts实例
this.myCharts = echarts.init(finance); let finance = document.getElementById("finance");
this.myCharts.setOption({ finance.removeAttribute("_echarts_instance_");
let myChart1 = echarts.init(finance);
myChart1.setOption({
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {

13
src/components/heat.vue
View File

@ -17,25 +17,28 @@ export default defineComponent({
}; };
}, },
created() { mounted() {
setInterval(() => { setInterval(() => {
// 获取数据 // 获取数据
this.getHeatImaging(); this.getHeatImaging();
}, 5000); }, 5000);
},
mounted() {
// 获取数据 // 获取数据
this.getHeatImaging(); this.getHeatImaging();
}, },
unmounted() {
clearInterval(this.time);
this.time = null;
},
methods: { methods: {
/** 查询温度与湿度 /** 查询温度与湿度
* @param {number} id 热成像设备id * @param {number} id 热成像设备id
*/ */
async getHeatImaging() { async getHeatImaging() {
try { try {
const param = {}; const { warehouseId } = this.$route.query;
const param = { warehouseId: warehouseId ? warehouseId : 7 };
const data = await getHeatImaging(param); const data = await getHeatImaging(param);
this.src = data.imageData; this.src = data.imageData;
} catch (error) { } catch (error) {

21
src/components/humidity.vue
View File

@ -15,6 +15,7 @@ export default defineComponent({
return { return {
myCharts: {}, myCharts: {},
humiditys: [], humiditys: [],
time: null,
}; };
}, },
@ -59,18 +60,20 @@ export default defineComponent({
}, },
}, },
created() { mounted() {
setInterval(() => { setInterval(() => {
// 获取数据 // 获取数据
this.getTeamAndHumidity(); this.getTeamAndHumidity();
}, 4500); }, 4500);
},
mounted() {
// 绘制图表 // 绘制图表
this.getOptions(); this.getOptions();
}, },
unmounted() {
clearInterval(this.time);
this.time = null;
},
methods: { methods: {
/** 查询温度与湿度 /** 查询温度与湿度
* @param {number} endTime 结束时间 * @param {number} endTime 结束时间
@ -91,9 +94,13 @@ export default defineComponent({
// 绘制图表 // 绘制图表
getOptions() { getOptions() {
const { humidityArray, timeArray } = this; const { humidityArray, timeArray } = this;
const humidity = document.getElementById("humidity");
this.myCharts = echarts.init(humidity); // 基于准备好的dom，初始化echarts实例
this.myCharts.setOption({ let humidity = document.getElementById("humidity");
humidity.removeAttribute("_echarts_instance_");
let myChart1 = echarts.init(humidity);
myChart1.setOption({
tooltip: {}, tooltip: {},
grid: { grid: {
left: "0", left: "0",

30
src/components/memorabilia.vue
View File

@ -36,34 +36,28 @@ export default defineComponent({
return { return {
details: [ details: [
{ {
title: "防火墙", title: "物流园区升级",
time: "2021-04-08", time: "两周前",
describe: describe:
"有助于提高计算机的安全性。Windows防火墙能够限制从其他计算机送到用户计算机上的信息,这使得用户可以更好的控制", "中国第一个保税物流园区升级 形成1+1+3联动发展新格局。外高桥港综合保税区今后将发挥“保税+”功能优势，围绕“提质、升级、开放、创新”，推动产业链、供应链、价值链和创新链融合发展，探索具有创新示范意义、体现差异化竞争、发挥引领作用的外高桥港综合保税区创新试验新路子，为我国改革开放积累新经验、提供新样本。",
}, },
{ {
title: "代理服务器", title: "物流园区资产证券化探索与突破",
time: "2021-04-08", time: "一个月前",
describe: describe:
"代理服务器代表内部客户端与外部的服务器通信,代理服务器这个术语通常是指一个应用级的网关,虽然电路级网关也可作为代理服务器的一种", "观察当前物流市场，物流园区的盈利模式明确，现金流相对稳定，比较符合发行公募REITs的条件。对于一些自持物流园区的电商企业来说，扩大规模的需求是明确且迫切的，但自建仓储对财务的影响也是现实存在的。公募REITs的推行正好能缓解重资产对财务造成的压力。",
}, },
{ {
title: "包过滤", title: "物流园区的未来前景",
time: "2021-04-08", time: "一周前",
describe: describe:
"包过滤是处理网络上基于packet-by-packet流量的设备,包过滤设备允许或阻止包,典型的实施方法是通过标准的路由器,包过滤是几种不同防火墙的类型之一.", "利用信息互联网和设施物联网推动物流园区的全面接入，以信息互联、设施互联带动物流互联，实现园区业务线上化转型，打造在线物流园区。",
}, },
{ {
title: "电路级网关", title: "积极开展安全生产检查",
time: "2021-04-08", time: "3天前",
describe: describe:
"电路级网关用来监控受信任的客户或服务器与不受信任的主机间的TCP握手信息,这样来决定这个会话是否悠哉游哉,电路级网关是在OSI模型中会话层上来过滤数据包", "近日,物流园区安监局对落实企业安全生产主体责任情况进行专项检查，执法人员实地查看了公司的维修车间、配件存储库房、喷漆车间,并对公司安全生产各类档案建立情况进行检查。针对检查中发现的问题隐患，下达《责令限期整改指令书》，要求企业限期整改落实，确保企业生产安全。",
},
{
title: "代理服务器",
time: "2021-04-08",
describe:
"代理服务器代表内部客户端与外部的服务器通信,代理服务器这个术语通常是指一个应用级的网关,虽然电路级网关也可作为代理服务器的一种.",
}, },
], ],
}; };

9
src/components/parkingSpace.vue
View File

@ -27,9 +27,12 @@ export default defineComponent({
methods: { methods: {
// 绘制图表 // 绘制图表
getOptions() { getOptions() {
const parkingSpace = document.getElementById("parkingSpace"); // 基于准备好的dom，初始化echarts实例
this.myCharts = echarts.init(parkingSpace); let parkingSpace = document.getElementById("parkingSpace");
this.myCharts.setOption({ parkingSpace.removeAttribute("_echarts_instance_");
let myChart1 = echarts.init(parkingSpace);
myChart1.setOption({
series: [ series: [
{ {
type: "gauge", type: "gauge",

9
src/components/statistics.vue
View File

@ -26,9 +26,12 @@ export default defineComponent({
methods: { methods: {
// 绘制图表 // 绘制图表
getOptions() { getOptions() {
const statistics = document.getElementById("statistics"); // 基于准备好的dom，初始化echarts实例
this.myCharts = echarts.init(statistics); let statistics = document.getElementById("statistics");
this.myCharts.setOption({ statistics.removeAttribute("_echarts_instance_");
let myChart1 = echarts.init(statistics);
myChart1.setOption({
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {

20
src/components/temperature.vue
View File

@ -15,6 +15,7 @@ export default defineComponent({
return { return {
myCharts: {}, myCharts: {},
temps: [], temps: [],
time: null,
}; };
}, },
@ -59,18 +60,20 @@ export default defineComponent({
}, },
}, },
created() { mounted() {
setInterval(() => { setInterval(() => {
// 获取数据 // 获取数据
this.getTeamAndHumidity(); this.getTeamAndHumidity();
}, 3500); }, 3500);
},
mounted() {
// 绘制图表 // 绘制图表
this.getOptions(); this.getOptions();
}, },
unmounted() {
clearInterval(this.time);
this.time = null;
},
methods: { methods: {
/** 查询温度与湿度 /** 查询温度与湿度
* @param {number} endTime 结束时间 * @param {number} endTime 结束时间
@ -91,9 +94,12 @@ export default defineComponent({
getOptions() { getOptions() {
// 绘制图表 // 绘制图表
const { tempArray, timeArray } = this; const { tempArray, timeArray } = this;
const temperature = document.getElementById("temperature"); // 基于准备好的dom，初始化echarts实例
this.myCharts = echarts.init(temperature); let temperature = document.getElementById("temperature");
this.myCharts.setOption({ temperature.removeAttribute("_echarts_instance_");
let myChart1 = echarts.init(temperature);
myChart1.setOption({
tooltip: {}, tooltip: {},
grid: { grid: {
left: "0", left: "0",

17
src/components/top-bar.vue
View File

@ -10,8 +10,8 @@
<h3 class="title">{{ title }}电子看板</h3> <h3 class="title">{{ title }}电子看板</h3>
<div class="right-wrap"> <div class="right-wrap">
<div class="time">{{ time }}</div> <div class="time">{{ time }}</div>
<div class="fire" v-if="isFire"></div> <div class="fire state" v-if="isFire"></div>
<div class="water" v-if="isFlood"></div> <div class="water state" v-if="isFlood"></div>
</div> </div>
</div> </div>
</template> </template>
@ -239,4 +239,17 @@ export default defineComponent({
.top-wrap .right-wrap .water { .top-wrap .right-wrap .water {
background-image: url("../assets/img/water.png"); background-image: url("../assets/img/water.png");
} }
@keyframes twinkling {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.state {
animation: twinkling 1s infinite;
}
</style> </style>

9
src/components/totalCargo.vue
View File

@ -27,9 +27,12 @@ export default defineComponent({
methods: { methods: {
// 绘制图表 // 绘制图表
getOptions() { getOptions() {
const totalCargo = document.getElementById("totalCargo"); // 基于准备好的dom，初始化echarts实例
this.myCharts = echarts.init(totalCargo); let totalCargo = document.getElementById("totalCargo");
this.myCharts.setOption({ totalCargo.removeAttribute("_echarts_instance_");
let myChart1 = echarts.init(totalCargo);
myChart1.setOption({
series: [ series: [
{ {
type: "gauge", type: "gauge",

9
src/components/usableArea.vue
View File

@ -27,9 +27,12 @@ export default defineComponent({
methods: { methods: {
// 绘制图表 // 绘制图表
getOptions() { getOptions() {
const usableArea = document.getElementById("usableArea"); // 基于准备好的dom，初始化echarts实例
this.myCharts = echarts.init(usableArea); let usableArea = document.getElementById("usableArea");
this.myCharts.setOption({ usableArea.removeAttribute("_echarts_instance_");
let myChart1 = echarts.init(usableArea);
myChart1.setOption({
series: [ series: [
{ {
type: "gauge", type: "gauge",

18
src/views/videoScreen.vue → src/components/videoScreen.vue
View File

@ -1,17 +1,12 @@
<template> <template>
<div class="flex w-screen h-screen min-h-0 bg-black"> <div
class="flex min-h-0 bg-black"
style="position:absolute;top:0;left:0;z-index:99999;width:100%;height:100%"
>
<div class="frame1"> <div class="frame1">
<iframe <iframe :src="iframeSrc" frameborder="0" height="100%" scrolling="no" width="100%"></iframe>
frameborder="0"
height="100%"
scrolling="no"
src="https://www.tall.wiki/kangfu-v1/?key=230659446"
width="100%"
></iframe>
<!-- 生产 https://www.tall.wiki/kangfu-v1/?key=E83239936 -->
<!-- 测试 https://www.tall.wiki/kangfu-v1/?key=230659446 -->
<div class="screen"> <div class="screen">
<img @click="$router.go(-1)" class="frame2" src="../assets/img/closeScreen.png" /> <img @click="$emit('closeScreen')" class="frame2" src="../assets/img/closeScreen.png" />
</div> </div>
</div> </div>
</div> </div>
@ -21,6 +16,7 @@
import { defineComponent } from "vue"; import { defineComponent } from "vue";
export default defineComponent({ export default defineComponent({
props: { iframeSrc: { type: String, default: "" } },
data() { data() {
return {}; return {};
}, },

9
src/components/warehouse.vue
View File

@ -26,9 +26,12 @@ export default defineComponent({
methods: { methods: {
// 绘制图表 // 绘制图表
getOptions() { getOptions() {
const warehouse = document.getElementById("warehouse"); // 基于准备好的dom，初始化echarts实例
this.myCharts = echarts.init(warehouse); let warehouse = document.getElementById("warehouse");
this.myCharts.setOption({ warehouse.removeAttribute("_echarts_instance_");
let myChart1 = echarts.init(warehouse);
myChart1.setOption({
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{b} : {c} ({d}%)", formatter: "{b} : {c} ({d}%)",

2
src/utils/http.ts
View File

@ -1,7 +1,5 @@
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'; import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
console.log('import.meta.env: ', import.meta.env);
const service = axios.create({ const service = axios.create({
baseURL: import.meta.env.VITE_BASE_URL baseURL: import.meta.env.VITE_BASE_URL
}); });

84
src/views/jht.vue
View File

@ -38,36 +38,49 @@
<!-- 底部区域 --> <!-- 底部区域 -->
<footer-bar :showIndex="showIndex" @showMonitor="showMonitor"></footer-bar> <footer-bar :showIndex="showIndex" @showMonitor="showMonitor"></footer-bar>
<!-- 监控 --> <!-- 监控1 -->
<img @click="show = true" class="monitor—btn" src="../assets/img/monitor.png" style /> <img @click="getWarehouses('show1')" class="monitor—btn" src="../assets/img/monitor.png" style />
<div class="vedio" v-show="show">
<div class="head">
<div class="camera">{{show}}摄像头监控视频</div>
<img @click="show = false" class="close" src="../assets/img/close.png" />
</div>
<div class="monitor">
<div class="monitor1">
<iframe :src="iframeSrc1" frameborder="0" height="100%" scrolling="no" width="100%"></iframe>
<div class="screen">
<img @click="showScreen = true" class="monitor2" src="../assets/img/fullScreen.png" />
</div>
</div>
</div>
</div>
<!-- 全屏监控 -->
<video-screen :iframeSrc="iframeSrc1" @closeScreen="closeScreen" v-if="showScreen" />
<!-- 监控2 -->
<img <img
@click="show = true" @click="getWarehouses('show2')"
class="monitor—btn monitor—btn1" class="monitor—btn monitor—btn1"
src="../assets/img/monitor-left.png" src="../assets/img/monitor-left.png"
style style
/> />
<div class="vedio" v-show="show"> <div class="vedio" v-show="show2">
<div class="head"> <div class="head">
<div class="camera">摄像头监控视频</div> <div class="camera">摄像头监控视频</div>
<img @click="show = false" class="close" src="../assets/img/close.png" /> <img @click="show = false" class="close" src="../assets/img/close.png" />
</div> </div>
<div class="monitor"> <div class="monitor">
<div class="monitor1"> <div class="monitor1">
<iframe <iframe :src="iframeSrc2" frameborder="0" height="100%" scrolling="no" width="100%"></iframe>
frameborder="0"
height="100%"
scrolling="no"
src="https://www.tall.wiki/kangfu-v1/?key=E83239936"
width="100%"
></iframe>
<!-- 生产 https://www.tall.wiki/kangfu-v1/?key=E83239936 -->
<!-- 测试 https://www.tall.wiki/kangfu-v1/?key=230659446 -->
<div class="screen"> <div class="screen">
<img @click="$router.push('/vs')" class="monitor2" src="../assets/img/fullScreen.png" /> <img @click="showScreen = true" class="monitor2" src="../assets/img/fullScreen.png" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 全屏监控 -->
<video-screen :iframeSrc="iframeSrc2" @closeScreen="closeScreen" v-if="showScreen" />
</template> </template>
<script lang="ts"> <script lang="ts">
@ -83,6 +96,8 @@ import Warehouse from "@/components/warehouse.vue";
import ParkingSpace from "@/components/parkingSpace.vue"; import ParkingSpace from "@/components/parkingSpace.vue";
import UsableArea from "@/components/usableArea.vue"; import UsableArea from "@/components/usableArea.vue";
import Memorabilia from "@/components/memorabilia.vue"; import Memorabilia from "@/components/memorabilia.vue";
import VideoScreen from "@/components/videoScreen.vue";
import { getWarehouses } from "api/index";
export default defineComponent({ export default defineComponent({
components: { components: {
@ -97,14 +112,49 @@ export default defineComponent({
ParkingSpace, ParkingSpace,
UsableArea, UsableArea,
Memorabilia, Memorabilia,
VideoScreen,
}, },
data() { data() {
return { return {
show: false, show: false,
show2: false,
showScreen: false,
showIndex: 0, showIndex: 0,
iframeSrc1: "",
iframeSrc2: "",
}; };
}, },
methods: {}, methods: {
// 关闭大屏
closeScreen() {
this.showScreen = false;
},
// 获取仓库信息
async getWarehouses(value) {
try {
if (value === "show1") {
if (this.show2) {
this.show2 = false;
}
this.show = true;
}
if (value === "show2") {
if (this.show) {
this.show = false;
}
this.show2 = true;
}
const data = await getWarehouses({ parkId: 1 });
if (data && data.parkEquipment && data.parkEquipment.length) {
this.iframeSrc1 = data.parkEquipment[0].equipmentLocation;
this.iframeSrc2 = data.parkEquipment[1].equipmentLocation;
}
} catch (error) {
console.log("error: ", error);
}
},
},
}); });
</script> </script>
@ -112,14 +162,14 @@ export default defineComponent({
.monitor—btn { .monitor—btn {
position: absolute; position: absolute;
right: 0; right: 0;
top: 28%; top: 20%;
z-index: 99; z-index: 99;
width: 48rem; width: 48rem;
height: 50rem; height: 50rem;
} }
.monitor—btn1 { .monitor—btn1 {
top: 20%; top: 28%;
} }
.frame { .frame {

47
src/views/repo-5.vue
View File

@ -39,7 +39,7 @@
<footer-bar :showIndex="showIndex"></footer-bar> <footer-bar :showIndex="showIndex"></footer-bar>
<!-- 监控 --> <!-- 监控 -->
<img @click="show = true" class="monitor—btn" src="../assets/img/monitor.png" style /> <img @click="getWarehouses" class="monitor—btn" src="../assets/img/monitor.png" style />
<div class="vedio" v-show="show"> <div class="vedio" v-show="show">
<div class="head"> <div class="head">
<div class="camera">摄像头监控视频</div> <div class="camera">摄像头监控视频</div>
@ -47,21 +47,15 @@
</div> </div>
<div class="monitor"> <div class="monitor">
<div class="monitor1"> <div class="monitor1">
<iframe <iframe :src="iframeSrc" frameborder="0" height="100%" scrolling="no" width="100%"></iframe>
frameborder="0"
height="100%"
scrolling="no"
src="https://www.tall.wiki/kangfu-v1/?key=E83239936"
width="100%"
></iframe>
<!-- 生产 https://www.tall.wiki/kangfu-v1/?key=E83239936 -->
<!-- 测试 https://www.tall.wiki/kangfu-v1/?key=230659446 -->
<div class="screen"> <div class="screen">
<img @click="$router.push('/vs')" class="monitor2" src="../assets/img/fullScreen.png" /> <img @click="showScreen = true" class="monitor2" src="../assets/img/fullScreen.png" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 全屏监控 -->
<video-screen :iframeSrc="iframeSrc" @closeScreen="closeScreen" v-if="showScreen" />
</template> </template>
<script lang="ts"> <script lang="ts">
@ -77,6 +71,8 @@ import Humidity from "@/components/humidity.vue";
import Temperature from "@/components/temperature.vue"; import Temperature from "@/components/temperature.vue";
import UsableArea from "@/components/usableArea.vue"; import UsableArea from "@/components/usableArea.vue";
import TotalCargo from "@/components/totalCargo.vue"; import TotalCargo from "@/components/totalCargo.vue";
import VideoScreen from "@/components/videoScreen.vue";
import { getWarehouses } from "api/index";
export default defineComponent({ export default defineComponent({
components: { components: {
@ -91,14 +87,41 @@ export default defineComponent({
Temperature, Temperature,
UsableArea, UsableArea,
TotalCargo, TotalCargo,
VideoScreen,
}, },
data() { data() {
return { return {
show: false, show: false,
showScreen: false,
showIndex: 3, showIndex: 3,
iframeSrc: "",
}; };
}, },
methods: {}, methods: {
// 关闭大屏
closeScreen() {
this.showScreen = false;
},
// 查询仓库列表及仓库下的摄像头
async getWarehouses() {
try {
this.show = true;
const param = { parkId: 2 };
const data = await getWarehouses(param);
if (data && data.warehouseInfo && data.warehouseInfo.length) {
let item = data.warehouseInfo.find(
(item) => item.warehouseId === "7"
);
if (item && item.cameras && item.cameras.length) {
this.iframeSrc = item.cameras[0].equipmentLocation;
}
}
} catch (error) {
console.log("error: ", error);
}
},
},
}); });
</script> </script>

47
src/views/repo-yj.vue
View File

@ -39,7 +39,7 @@
<footer-bar :showIndex="showIndex"></footer-bar> <footer-bar :showIndex="showIndex"></footer-bar>
<!-- 监控 --> <!-- 监控 -->
<img @click="show = true" class="monitor—btn" src="../assets/img/monitor.png" style /> <img @click="getWarehouses" class="monitor—btn" src="../assets/img/monitor.png" style />
<div class="vedio" v-show="show"> <div class="vedio" v-show="show">
<div class="head"> <div class="head">
<div class="camera">摄像头监控视频</div> <div class="camera">摄像头监控视频</div>
@ -47,21 +47,15 @@
</div> </div>
<div class="monitor"> <div class="monitor">
<div class="monitor1"> <div class="monitor1">
<iframe <iframe :src="iframeSrc" frameborder="0" height="100%" scrolling="no" width="100%"></iframe>
frameborder="0"
height="100%"
scrolling="no"
src="https://www.tall.wiki/kangfu-v1/?key=E83239936"
width="100%"
></iframe>
<!-- 生产 https://www.tall.wiki/kangfu-v1/?key=E83239936 -->
<!-- 测试 https://www.tall.wiki/kangfu-v1/?key=230659446 -->
<div class="screen"> <div class="screen">
<img @click="$router.push('/vs')" class="monitor2" src="../assets/img/fullScreen.png" /> <img @click="showScreen = true" class="monitor2" src="../assets/img/fullScreen.png" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 全屏监控 -->
<video-screen :iframeSrc="iframeSrc" @closeScreen="closeScreen" v-if="showScreen" />
</template> </template>
<script lang="ts"> <script lang="ts">
@ -77,6 +71,8 @@ import Humidity from "@/components/humidity.vue";
import Temperature from "@/components/temperature.vue"; import Temperature from "@/components/temperature.vue";
import UsableArea from "@/components/usableArea.vue"; import UsableArea from "@/components/usableArea.vue";
import TotalCargo from "@/components/totalCargo.vue"; import TotalCargo from "@/components/totalCargo.vue";
import VideoScreen from "@/components/videoScreen.vue";
import { getWarehouses } from "api/index";
export default defineComponent({ export default defineComponent({
components: { components: {
@ -91,14 +87,41 @@ export default defineComponent({
Temperature, Temperature,
UsableArea, UsableArea,
TotalCargo, TotalCargo,
VideoScreen,
}, },
data() { data() {
return { return {
show: false, show: false,
showScreen: false,
showIndex: 3, showIndex: 3,
iframeSrc: "",
}; };
}, },
methods: {}, methods: {
// 关闭大屏
closeScreen() {
this.showScreen = false;
},
// 查询仓库列表及仓库下的摄像头
async getWarehouses() {
try {
this.show = true;
const param = { parkId: 2 };
const data = await getWarehouses(param);
if (data && data.warehouseInfo && data.warehouseInfo.length) {
let item = data.warehouseInfo.find(
(item) => item.warehouseId === "6"
);
if (item && item.cameras && item.cameras.length) {
this.iframeSrc = item.cameras[0].equipmentLocation;
}
}
} catch (error) {
console.log("error: ", error);
}
},
},
}); });
</script> </script>

86
src/views/xh.vue
View File

@ -38,36 +38,49 @@
<!-- 底部区域 --> <!-- 底部区域 -->
<footer-bar :showIndex="showIndex" @showMonitor="showMonitor"></footer-bar> <footer-bar :showIndex="showIndex" @showMonitor="showMonitor"></footer-bar>
<!-- 监控 --> <!-- 监控1 -->
<img @click="show = true" class="monitor—btn" src="../assets/img/monitor.png" style /> <img @click="getWarehouses('show1')" class="monitor—btn" src="../assets/img/monitor.png" style />
<div class="vedio" v-show="show">
<div class="head">
<div class="camera">{{show}}摄像头监控视频</div>
<img @click="show = false" class="close" src="../assets/img/close.png" />
</div>
<div class="monitor">
<div class="monitor1">
<iframe :src="iframeSrc1" frameborder="0" height="100%" scrolling="no" width="100%"></iframe>
<div class="screen">
<img @click="showScreen = true" class="monitor2" src="../assets/img/fullScreen.png" />
</div>
</div>
</div>
</div>
<!-- 全屏监控 -->
<video-screen :iframeSrc="iframeSrc1" @closeScreen="closeScreen" v-if="showScreen" />
<!-- 监控2 -->
<img <img
@click="show = true" @click="getWarehouses('show2')"
class="monitor—btn monitor—btn1" class="monitor—btn monitor—btn1"
src="../assets/img/monitor-left.png" src="../assets/img/monitor-left.png"
style style
/> />
<div class="vedio" v-show="show"> <div class="vedio" v-show="show2">
<div class="head"> <div class="head">
<div class="camera">摄像头监控视频</div> <div class="camera">摄像头监控视频</div>
<img @click="show = false" class="close" src="../assets/img/close.png" /> <img @click="show = false" class="close" src="../assets/img/close.png" />
</div> </div>
<div class="monitor"> <div class="monitor">
<div class="monitor1"> <div class="monitor1">
<iframe <iframe :src="iframeSrc2" frameborder="0" height="100%" scrolling="no" width="100%"></iframe>
frameborder="0"
height="100%"
scrolling="no"
src="https://www.tall.wiki/kangfu-v1/?key=E83239936"
width="100%"
></iframe>
<!-- 生产 https://www.tall.wiki/kangfu-v1/?key=E83239936 -->
<!-- 测试 https://www.tall.wiki/kangfu-v1/?key=230659446 -->
<div class="screen"> <div class="screen">
<img @click="$router.push('/vs')" class="monitor2" src="../assets/img/fullScreen.png" /> <img @click="showScreen = true" class="monitor2" src="../assets/img/fullScreen.png" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 全屏监控 -->
<video-screen :iframeSrc="iframeSrc2" @closeScreen="closeScreen" v-if="showScreen" />
</template> </template>
<script lang="ts"> <script lang="ts">
@ -83,6 +96,8 @@ import Warehouse from "@/components/warehouse.vue";
import ParkingSpace from "@/components/parkingSpace.vue"; import ParkingSpace from "@/components/parkingSpace.vue";
import UsableArea from "@/components/usableArea.vue"; import UsableArea from "@/components/usableArea.vue";
import Memorabilia from "@/components/memorabilia.vue"; import Memorabilia from "@/components/memorabilia.vue";
import VideoScreen from "@/components/videoScreen.vue";
import { getWarehouses } from "api/index";
export default defineComponent({ export default defineComponent({
components: { components: {
@ -97,14 +112,49 @@ export default defineComponent({
ParkingSpace, ParkingSpace,
UsableArea, UsableArea,
Memorabilia, Memorabilia,
VideoScreen,
}, },
data() { data() {
return { return {
show: false, show: false,
showIndex: 0, show2: false,
showScreen: false,
showIndex: 1,
iframeSrc1: "",
iframeSrc2: "",
}; };
}, },
methods: {}, methods: {
// 关闭大屏
closeScreen() {
this.showScreen = false;
},
// 获取仓库信息
async getWarehouses(value) {
try {
if (value === "show1") {
if (this.show2) {
this.show2 = false;
}
this.show = true;
}
if (value === "show2") {
if (this.show) {
this.show = false;
}
this.show2 = true;
}
const data = await getWarehouses({ parkId: 2 });
if (data && data.parkEquipment && data.parkEquipment.length) {
this.iframeSrc1 = data.parkEquipment[0].equipmentLocation;
this.iframeSrc2 = data.parkEquipment[1].equipmentLocation;
}
} catch (error) {
console.log("error: ", error);
}
},
},
}); });
</script> </script>
@ -112,14 +162,14 @@ export default defineComponent({
.monitor—btn { .monitor—btn {
position: absolute; position: absolute;
right: 0; right: 0;
top: 28%; top: 20%;
z-index: 99; z-index: 99;
width: 48rem; width: 48rem;
height: 50rem; height: 50rem;
} }
.monitor—btn1 { .monitor—btn1 {
top: 20%; top: 28%;
} }
.frame { .frame {

1
vite.config.ts
View File

@ -9,6 +9,7 @@ export default ({ mode }) => {
console.log("🚀 ~ file: vite.config.ts ~ line 8 ~ VITE_PROXY", createProxy(JSON.parse(VITE_PROXY))) console.log("🚀 ~ file: vite.config.ts ~ line 8 ~ VITE_PROXY", createProxy(JSON.parse(VITE_PROXY)))
return defineConfig({ return defineConfig({
plugins: [vue()], plugins: [vue()],
base: '/wl/0/',
server: { server: {
open: true, open: true,
proxy: createProxy(JSON.parse(VITE_PROXY)), proxy: createProxy(JSON.parse(VITE_PROXY)),

Write Preview
Loading…
Cancel
Save