|
|
|
|
@ -9,7 +9,10 @@
|
|
|
|
|
ref="factorMap"
|
|
|
|
|
:company_list="company_list"
|
|
|
|
|
:video_list="video_list"
|
|
|
|
|
:car_list="car_list"
|
|
|
|
|
@get_company_text="get_company_text"
|
|
|
|
|
@get_video_text="get_video_text"
|
|
|
|
|
@get_car_text="get_car_text"
|
|
|
|
|
></FactorMap>
|
|
|
|
|
<!-- 右上方查询部分 -->
|
|
|
|
|
<div class="right_search">
|
|
|
|
|
@ -45,17 +48,20 @@
|
|
|
|
|
<div class="left_check">
|
|
|
|
|
<div class="check_title">图层</div>
|
|
|
|
|
<div class="check_body">
|
|
|
|
|
<el-button size="small" @click="get_all()">全部</el-button>
|
|
|
|
|
<!-- <el-button size="small" @click="get_all()">全部</el-button> -->
|
|
|
|
|
<el-button size="small" @click="get_video()">{{
|
|
|
|
|
this.btn_video
|
|
|
|
|
}}</el-button>
|
|
|
|
|
<el-button size="small" @click="get_item()">{{
|
|
|
|
|
this.btn_item
|
|
|
|
|
}}</el-button>
|
|
|
|
|
<el-button size="small" @click="get_car()">{{
|
|
|
|
|
this.btn_car
|
|
|
|
|
}}</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 公司信息文本展示 -->
|
|
|
|
|
<div v-if="company_flag" class="company_text">
|
|
|
|
|
<div v-if="company_flag == '1'" class="company_text">
|
|
|
|
|
<!-- 伪弹窗头部 -->
|
|
|
|
|
<div class="text_head">
|
|
|
|
|
<div class="title" :title="text_company">{{ text_company }}</div>
|
|
|
|
|
@ -110,6 +116,36 @@
|
|
|
|
|
{{ footer_text }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 监控文本展示 -->
|
|
|
|
|
<div v-else-if="company_flag == '2'" class="video_text">
|
|
|
|
|
<!-- 伪弹窗头部 -->
|
|
|
|
|
<div class="text_head">
|
|
|
|
|
<div class="title" :title="video.video_name">
|
|
|
|
|
{{ video.video_name }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text_icon" @click="close_video">
|
|
|
|
|
<i class="el-icon-close"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text_content">
|
|
|
|
|
<div class="text_content_item">
|
|
|
|
|
<div class="item_text">隶属企业:</div>
|
|
|
|
|
<div class="item_value">{{ video.company_name }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text_content_item">
|
|
|
|
|
<div class="item_text">监控:</div>
|
|
|
|
|
<div class="item_value">{{ video.video_name }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text_content_item">
|
|
|
|
|
<div class="item_text">监控状态:</div>
|
|
|
|
|
<div class="item_value">{{ video.video_status }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 跳转 -->
|
|
|
|
|
<div class="text_footer" @click="turn_video()">
|
|
|
|
|
{{ video_footer_text }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -117,7 +153,12 @@
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import FactorMap from "./components/factorMap";
|
|
|
|
|
import { statistic, queryCompany, queryVideo } from "@/api/factorResources";
|
|
|
|
|
import {
|
|
|
|
|
statistic,
|
|
|
|
|
queryCompany,
|
|
|
|
|
queryVideo,
|
|
|
|
|
car_point,
|
|
|
|
|
} from "@/api/factorResources";
|
|
|
|
|
export default {
|
|
|
|
|
name: "factor",
|
|
|
|
|
components: {
|
|
|
|
|
@ -127,6 +168,7 @@ export default {
|
|
|
|
|
return {
|
|
|
|
|
company_list: [], // 七个区域所有的企业
|
|
|
|
|
video_list: [], // 七个区域所有监控单位
|
|
|
|
|
car_list:[], // 车辆点位
|
|
|
|
|
search: {
|
|
|
|
|
word: "",
|
|
|
|
|
select: "企业",
|
|
|
|
|
@ -137,7 +179,8 @@ export default {
|
|
|
|
|
],
|
|
|
|
|
btn_video: "", // 复选框文字
|
|
|
|
|
btn_item: "", // 复选框文字
|
|
|
|
|
company_flag: false, // 公司详情框展示
|
|
|
|
|
btn_car:'', // 危化品车辆文字
|
|
|
|
|
company_flag: "0", // 公司详情框展示
|
|
|
|
|
/////////// 以下范围公司详情框所需对应变量声明
|
|
|
|
|
text_company: "",
|
|
|
|
|
company_address: "",
|
|
|
|
|
@ -149,20 +192,30 @@ export default {
|
|
|
|
|
safe_person: "",
|
|
|
|
|
company_scope: "",
|
|
|
|
|
footer_text: "查看企业档案>>",
|
|
|
|
|
video_footer_text: "查看实时监控>>",
|
|
|
|
|
id: "",
|
|
|
|
|
///////////
|
|
|
|
|
////////// 以下范围视频监控框所需对应变量声明
|
|
|
|
|
video: {
|
|
|
|
|
video_name: "", // 监控设备名
|
|
|
|
|
company_name: "", // 隶属企业名
|
|
|
|
|
video_status: "", // 监控状态
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.get_list();
|
|
|
|
|
// 默认地图打开展示视频监控
|
|
|
|
|
this.get_video();
|
|
|
|
|
this.get_car_point();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 七个区域所有的企业
|
|
|
|
|
get_list() {
|
|
|
|
|
statistic().then((res) => {
|
|
|
|
|
this.company_list = res.data.companyInfoList;
|
|
|
|
|
// this.company_list = res.data.companyInfoList;
|
|
|
|
|
this.btn_item = `园区企业(${res.data.companyInfoList.length})`;
|
|
|
|
|
this.video_list = res.data.deviceVideoInfoList;
|
|
|
|
|
// this.video_list = res.data.deviceVideoInfoList;
|
|
|
|
|
this.btn_video = `视频监控(${res.data.deviceVideoInfoList.length})`;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
@ -177,28 +230,48 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
// 展示园区企业
|
|
|
|
|
get_item() {
|
|
|
|
|
this.company_flag = "0";
|
|
|
|
|
let param = {
|
|
|
|
|
name: "",
|
|
|
|
|
};
|
|
|
|
|
queryCompany(param).then((res) => {
|
|
|
|
|
this.company_list = res.data;
|
|
|
|
|
this.video_list = [];
|
|
|
|
|
this.car_list = [];
|
|
|
|
|
// 重新在地图打点
|
|
|
|
|
this.$refs.factorMap.init_map();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 展示视频监控
|
|
|
|
|
get_video() {
|
|
|
|
|
this.company_flag = "0";
|
|
|
|
|
let param = {
|
|
|
|
|
name: "",
|
|
|
|
|
};
|
|
|
|
|
queryVideo(param).then((res) => {
|
|
|
|
|
this.video_list = res.data;
|
|
|
|
|
this.company_list = [];
|
|
|
|
|
this.car_list = []
|
|
|
|
|
// 重新在地图打点
|
|
|
|
|
this.$refs.factorMap.init_map();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 展示危化品车辆点位
|
|
|
|
|
async get_car() {
|
|
|
|
|
this.company_flag = '0'
|
|
|
|
|
let res = await car_point();
|
|
|
|
|
console.log("resss", res);
|
|
|
|
|
if(res.code == 200) {
|
|
|
|
|
this.car_list = res.data
|
|
|
|
|
this.company_list = [];
|
|
|
|
|
this.video_list = []
|
|
|
|
|
// 重新在地图打点
|
|
|
|
|
this.$refs.factorMap.init_map();
|
|
|
|
|
// this.btn_car = `危化品车辆(${res.data.length})`;
|
|
|
|
|
} else if (res.code == 500) {
|
|
|
|
|
this.$message.warning(res.msg)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 查询企业
|
|
|
|
|
search_map() {
|
|
|
|
|
let param = {
|
|
|
|
|
@ -223,7 +296,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
// 地图点位点击展开公司详情弹窗
|
|
|
|
|
get_company_text(item) {
|
|
|
|
|
this.company_flag = true;
|
|
|
|
|
this.company_flag = 1;
|
|
|
|
|
console.log("item111", item);
|
|
|
|
|
this.text_company = item.companyName;
|
|
|
|
|
this.company_address = item.companyAddress;
|
|
|
|
|
@ -237,6 +310,35 @@ export default {
|
|
|
|
|
this.company_scope = item.businessScope;
|
|
|
|
|
this.id = item.id;
|
|
|
|
|
},
|
|
|
|
|
// 地图点位点击展开视频弹窗
|
|
|
|
|
get_video_text(item) {
|
|
|
|
|
this.company_flag = 2;
|
|
|
|
|
console.log("item222", item);
|
|
|
|
|
this.video.video_name = item.deviceName;
|
|
|
|
|
this.video.company_name = item.companyName;
|
|
|
|
|
if (item.isOnline == "1") {
|
|
|
|
|
this.video.video_status = "在线";
|
|
|
|
|
} else if (item.isOnline == "2") {
|
|
|
|
|
this.video.video_status = "离线";
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 查看危化品车辆轨迹
|
|
|
|
|
get_car_text(item) {
|
|
|
|
|
// 查看轨迹的点击事件是要重新创建地图的，以该车坐标为中心
|
|
|
|
|
console.log('item',item);
|
|
|
|
|
this.$refs.factorMap.cause_car_line_map(item)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async get_car_point() {
|
|
|
|
|
let res = await car_point();
|
|
|
|
|
console.log("resss", res);
|
|
|
|
|
if(res.code == 200) {
|
|
|
|
|
// this.car_list = res.data
|
|
|
|
|
this.btn_car = `危化品车辆(${res.data.length})`;
|
|
|
|
|
} else if (res.code == 500) {
|
|
|
|
|
this.$message.warning(res.msg)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 点击跳转企业档案详情页面
|
|
|
|
|
turn() {
|
|
|
|
|
sessionStorage.setItem("companyID", this.id);
|
|
|
|
|
@ -245,15 +347,19 @@ export default {
|
|
|
|
|
name: "archives",
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
turn_video() {},
|
|
|
|
|
// 点击关闭公司详情弹窗
|
|
|
|
|
close_company() {
|
|
|
|
|
this.company_flag = false;
|
|
|
|
|
this.company_flag = 0;
|
|
|
|
|
},
|
|
|
|
|
close_video() {
|
|
|
|
|
this.company_flag = 0;
|
|
|
|
|
},
|
|
|
|
|
// 重置点位
|
|
|
|
|
reset_map() {
|
|
|
|
|
this.search.select = "企业";
|
|
|
|
|
this.search.word = "";
|
|
|
|
|
this.get_all();
|
|
|
|
|
this.get_video();
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
@ -314,7 +420,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
.el-form-item__content {
|
|
|
|
|
.el-input__inner {
|
|
|
|
|
background: #1c2528;
|
|
|
|
|
background: #212f30;
|
|
|
|
|
border: 0.1px solid #28847e;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
@ -337,7 +443,7 @@ export default {
|
|
|
|
|
.el-button {
|
|
|
|
|
border: 0.1px solid #28847e;
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: #1c2528;
|
|
|
|
|
background: #212f30;
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
&:before {
|
|
|
|
|
@ -368,7 +474,7 @@ export default {
|
|
|
|
|
width: 13vw;
|
|
|
|
|
height: 18vh;
|
|
|
|
|
border: 0.1px solid #28847e;
|
|
|
|
|
background: #1c2528;
|
|
|
|
|
background: #212f30;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: 20;
|
|
|
|
|
@ -389,14 +495,14 @@ export default {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.el-button {
|
|
|
|
|
width: 7vw;
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
width: 11vw;
|
|
|
|
|
margin-left: 0px;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: rgba(0, 0, 0, 0);
|
|
|
|
|
border: 0.1px solid rgba(0, 0, 0, 0);
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.el-button:focus,
|
|
|
|
|
.el-button:hover {
|
|
|
|
|
@ -489,6 +595,79 @@ export default {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.video_text {
|
|
|
|
|
width: 18vw;
|
|
|
|
|
height: 30vh;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 90px;
|
|
|
|
|
right: 20px;
|
|
|
|
|
border: 0.1px solid #28847e;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
background: #283436;
|
|
|
|
|
.text_head {
|
|
|
|
|
width: 18vw;
|
|
|
|
|
height: 4vh;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
.title {
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
width: 15vw;
|
|
|
|
|
height: 4vh;
|
|
|
|
|
line-height: 4vh;
|
|
|
|
|
text-align: left;
|
|
|
|
|
color: aliceblue;
|
|
|
|
|
text-shadow: 0 0 9px #86d49d;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.text_icon {
|
|
|
|
|
width: 2vw;
|
|
|
|
|
height: 4vh;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 4vh;
|
|
|
|
|
color: #e55b5b;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.text_icon:hover {
|
|
|
|
|
text-shadow: 0 0 9px #86d49d;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.text_content {
|
|
|
|
|
margin-left: 1vw;
|
|
|
|
|
width: 16vw;
|
|
|
|
|
height: 20vh;
|
|
|
|
|
margin-top: 1vh;
|
|
|
|
|
.text_content_types {
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
.types_text {
|
|
|
|
|
color: antiquewhite;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.text_content_item {
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
display: flex;
|
|
|
|
|
.item_text {
|
|
|
|
|
width: 5vw;
|
|
|
|
|
color: antiquewhite;
|
|
|
|
|
}
|
|
|
|
|
.item_value {
|
|
|
|
|
width: 11vw;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.text_footer {
|
|
|
|
|
width: 18vw;
|
|
|
|
|
height: 4vh;
|
|
|
|
|
line-height: 4vh;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #34e1b3;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
