|
|
|
|
@ -3,22 +3,258 @@
|
|
|
|
|
<div class="factor_body">
|
|
|
|
|
<div class="factor_title">要素资源</div>
|
|
|
|
|
<div class="factor_map">
|
|
|
|
|
<!-- 要素资源地图 -->
|
|
|
|
|
<div class="map_body">
|
|
|
|
|
<FactorMap ref="factorMap"></FactorMap>
|
|
|
|
|
<FactorMap
|
|
|
|
|
ref="factorMap"
|
|
|
|
|
:company_list="company_list"
|
|
|
|
|
:video_list="video_list"
|
|
|
|
|
@get_company_text="get_company_text"
|
|
|
|
|
></FactorMap>
|
|
|
|
|
<!-- 右上方查询部分 -->
|
|
|
|
|
<div class="right_search">
|
|
|
|
|
<el-form :model="search" class="search_form">
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-select v-model="search.select">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in select_list"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.label"
|
|
|
|
|
>
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="search.word"
|
|
|
|
|
placeholder="请选择关键词"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button icon="el-icon-search" @click="search_map"
|
|
|
|
|
>搜索</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button icon="el-icon-refresh-right" @click="reset_map"
|
|
|
|
|
>重置</el-button
|
|
|
|
|
>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 左上方查询部分 -->
|
|
|
|
|
<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_video()">{{
|
|
|
|
|
this.btn_video
|
|
|
|
|
}}</el-button>
|
|
|
|
|
<el-button size="small" @click="get_item()">{{
|
|
|
|
|
this.btn_item
|
|
|
|
|
}}</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 公司信息文本展示 -->
|
|
|
|
|
<div v-if="company_flag" class="company_text">
|
|
|
|
|
<!-- 伪弹窗头部 -->
|
|
|
|
|
<div class="text_head">
|
|
|
|
|
<div class="title" :title="text_company">{{ text_company }}</div>
|
|
|
|
|
<div class="text_icon" @click="close_company">
|
|
|
|
|
<i class="el-icon-close"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text_content">
|
|
|
|
|
<div class="text_content_types">
|
|
|
|
|
<div class="types_text">企业类型:</div>
|
|
|
|
|
<div class="types_value"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text_content_item">
|
|
|
|
|
<div class="item_text">企业地址:</div>
|
|
|
|
|
<div class="item_value">{{ company_address }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text_content_item">
|
|
|
|
|
<div class="item_text">企业性质:</div>
|
|
|
|
|
<div class="item_value">{{ company_nature }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text_content_item">
|
|
|
|
|
<div class="item_text">成立日期:</div>
|
|
|
|
|
<div class="item_value">{{ start_date }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text_content_item">
|
|
|
|
|
<div class="item_text">营业期限:</div>
|
|
|
|
|
<div class="item_value">{{ time_limit }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text_content_item">
|
|
|
|
|
<div class="item_text">登记机关:</div>
|
|
|
|
|
<div class="item_value">{{ sign_organ }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text_content_item">
|
|
|
|
|
<div class="item_text">企业法人:</div>
|
|
|
|
|
<div class="item_value">{{ legal_person }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text_content_item">
|
|
|
|
|
<div class="item_text">安全责任人:</div>
|
|
|
|
|
<div class="item_value">{{ safe_person }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text_content_item">
|
|
|
|
|
<div class="item_text">责任人电话:</div>
|
|
|
|
|
<div class="item_value">{{ person_phone }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text_content_item">
|
|
|
|
|
<div class="item_text">经营范围:</div>
|
|
|
|
|
<div class="item_value">{{ company_scope }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 跳转 -->
|
|
|
|
|
<div class="text_footer" @click="turn()">
|
|
|
|
|
{{ footer_text }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import FactorMap from "./components/factorMap"
|
|
|
|
|
import FactorMap from "./components/factorMap";
|
|
|
|
|
import { statistic, queryCompany, queryVideo } from "@/api/factorResources";
|
|
|
|
|
export default {
|
|
|
|
|
name: "factor",
|
|
|
|
|
components:{
|
|
|
|
|
FactorMap
|
|
|
|
|
components: {
|
|
|
|
|
FactorMap,
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {};
|
|
|
|
|
return {
|
|
|
|
|
company_list: [], // 七个区域所有的企业
|
|
|
|
|
video_list: [], // 七个区域所有监控单位
|
|
|
|
|
search: {
|
|
|
|
|
word: "",
|
|
|
|
|
select: "企业",
|
|
|
|
|
},
|
|
|
|
|
select_list: [
|
|
|
|
|
{ label: "企业", value: "1" },
|
|
|
|
|
{ label: "监控", value: "2" },
|
|
|
|
|
],
|
|
|
|
|
btn_video: "", // 复选框文字
|
|
|
|
|
btn_item: "", // 复选框文字
|
|
|
|
|
company_flag: false, // 公司详情框展示
|
|
|
|
|
/////////// 以下范围公司详情框所需对应变量声明
|
|
|
|
|
text_company: "",
|
|
|
|
|
company_address: "",
|
|
|
|
|
company_nature: "",
|
|
|
|
|
start_date: "",
|
|
|
|
|
time_limit: "",
|
|
|
|
|
sign_organ: "",
|
|
|
|
|
legal_person: "",
|
|
|
|
|
safe_person: "",
|
|
|
|
|
company_scope: "",
|
|
|
|
|
footer_text: "查看企业档案>>",
|
|
|
|
|
id: "",
|
|
|
|
|
///////////
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.get_list();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 七个区域所有的企业
|
|
|
|
|
get_list() {
|
|
|
|
|
statistic().then((res) => {
|
|
|
|
|
this.company_list = res.data.companyInfoList;
|
|
|
|
|
this.btn_item = `园区企业(${res.data.companyInfoList.length})`;
|
|
|
|
|
this.video_list = res.data.deviceVideoInfoList;
|
|
|
|
|
this.btn_video = `视频监控(${res.data.deviceVideoInfoList.length})`;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 展示所有点位
|
|
|
|
|
get_all() {
|
|
|
|
|
statistic().then((res) => {
|
|
|
|
|
this.company_list = res.data.companyInfoList;
|
|
|
|
|
this.video_list = res.data.deviceVideoInfoList;
|
|
|
|
|
// 重新在地图打点
|
|
|
|
|
this.$refs.factorMap.init_map();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 展示园区企业
|
|
|
|
|
get_item() {
|
|
|
|
|
let param = {
|
|
|
|
|
name: "",
|
|
|
|
|
};
|
|
|
|
|
queryCompany(param).then((res) => {
|
|
|
|
|
this.company_list = res.data;
|
|
|
|
|
this.video_list = [];
|
|
|
|
|
// 重新在地图打点
|
|
|
|
|
this.$refs.factorMap.init_map();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 展示视频监控
|
|
|
|
|
get_video() {
|
|
|
|
|
let param = {
|
|
|
|
|
name: "",
|
|
|
|
|
};
|
|
|
|
|
queryVideo(param).then((res) => {
|
|
|
|
|
this.video_list = res.data;
|
|
|
|
|
this.company_list = [];
|
|
|
|
|
// 重新在地图打点
|
|
|
|
|
this.$refs.factorMap.init_map();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 查询企业
|
|
|
|
|
search_map() {
|
|
|
|
|
let param = {
|
|
|
|
|
name: this.search.word,
|
|
|
|
|
};
|
|
|
|
|
// 判断时企业查询还是监控查询
|
|
|
|
|
if (this.search.select == "企业") {
|
|
|
|
|
queryCompany(param).then((res) => {
|
|
|
|
|
this.company_list = res.data;
|
|
|
|
|
this.video_list = [];
|
|
|
|
|
// 重新在地图打点
|
|
|
|
|
this.$refs.factorMap.init_map();
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
queryVideo(param).then((res) => {
|
|
|
|
|
this.video_list = res.data;
|
|
|
|
|
this.company_list = [];
|
|
|
|
|
// 重新在地图打点
|
|
|
|
|
this.$refs.factorMap.init_map();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 地图点位点击展开公司详情弹窗
|
|
|
|
|
get_company_text(item) {
|
|
|
|
|
this.company_flag = true;
|
|
|
|
|
console.log("item111", item);
|
|
|
|
|
this.text_company = item.companyName;
|
|
|
|
|
this.company_address = item.companyAddress;
|
|
|
|
|
this.company_nature = item.companyNature;
|
|
|
|
|
this.start_date = item.establishDate;
|
|
|
|
|
this.time_limit = item.businessTermDate;
|
|
|
|
|
this.sign_organ = item.registerAuthority;
|
|
|
|
|
this.legal_person = item.legalPerson;
|
|
|
|
|
this.safe_person = item.emergencyContact;
|
|
|
|
|
this.person_phone = item.emergencyContactPhone;
|
|
|
|
|
this.company_scope = item.businessScope;
|
|
|
|
|
this.id = item.id;
|
|
|
|
|
},
|
|
|
|
|
// 点击跳转企业档案详情页面
|
|
|
|
|
turn() {
|
|
|
|
|
sessionStorage.setItem("companyID", this.id);
|
|
|
|
|
sessionStorage.setItem("companyName", this.text_company);
|
|
|
|
|
this.$router.push({
|
|
|
|
|
name: "archives",
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 点击关闭公司详情弹窗
|
|
|
|
|
close_company() {
|
|
|
|
|
this.company_flag = false;
|
|
|
|
|
},
|
|
|
|
|
// 重置点位
|
|
|
|
|
reset_map() {
|
|
|
|
|
this.search.select = "企业";
|
|
|
|
|
this.search.word = "";
|
|
|
|
|
this.get_all();
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
@ -57,6 +293,202 @@ export default {
|
|
|
|
|
width: 98%;
|
|
|
|
|
height: 82vh;
|
|
|
|
|
border: 0.1px solid #28847e;
|
|
|
|
|
position: relative;
|
|
|
|
|
.right_search {
|
|
|
|
|
top: 20px;
|
|
|
|
|
right: 20px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 50%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row-reverse;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
/deep/.el-form {
|
|
|
|
|
display: flex;
|
|
|
|
|
.el-form-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-left: 0.5vw;
|
|
|
|
|
}
|
|
|
|
|
.el-form-item__label {
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
.el-form-item__content {
|
|
|
|
|
.el-input__inner {
|
|
|
|
|
background: #1c2528;
|
|
|
|
|
border: 0.1px solid #28847e;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
.el-select {
|
|
|
|
|
width: 100px;
|
|
|
|
|
}
|
|
|
|
|
// .el-scrollbar__view .el-select-dropdown__list {
|
|
|
|
|
// background: #1c2528;
|
|
|
|
|
// }
|
|
|
|
|
/* 查询框点击颜色变化 */
|
|
|
|
|
.el-input__inner:focus,
|
|
|
|
|
.el-input__inner:hover {
|
|
|
|
|
border-color: #2a968f;
|
|
|
|
|
}
|
|
|
|
|
.el-range-input {
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: #283436;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.el-button {
|
|
|
|
|
border: 0.1px solid #28847e;
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: #1c2528;
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
&:before {
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: -100%;
|
|
|
|
|
left: -50%;
|
|
|
|
|
width: 150%;
|
|
|
|
|
height: 2px;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
box-shadow: 0 0 4px 1px #fff;
|
|
|
|
|
transform: rotateZ(-45deg);
|
|
|
|
|
}
|
|
|
|
|
&:hover::before {
|
|
|
|
|
transition: 0.7s;
|
|
|
|
|
top: 200%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.el-button:hover {
|
|
|
|
|
color: #34e1b3;
|
|
|
|
|
background: #4d8f89;
|
|
|
|
|
border: 0.1px solid #137868;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.left_check {
|
|
|
|
|
width: 13vw;
|
|
|
|
|
height: 18vh;
|
|
|
|
|
border: 0.1px solid #28847e;
|
|
|
|
|
background: #1c2528;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: 20;
|
|
|
|
|
top: 20px;
|
|
|
|
|
left: 20px;
|
|
|
|
|
.check_title {
|
|
|
|
|
width: 13vw;
|
|
|
|
|
height: 4vh;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 4vh;
|
|
|
|
|
color: aliceblue;
|
|
|
|
|
}
|
|
|
|
|
.check_body {
|
|
|
|
|
margin-top: 1vh;
|
|
|
|
|
margin-left: 1vw;
|
|
|
|
|
width: 11vw;
|
|
|
|
|
height: 13vh;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.el-button {
|
|
|
|
|
width: 7vw;
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
.el-button:focus,
|
|
|
|
|
.el-button:hover {
|
|
|
|
|
background: #4d8f89;
|
|
|
|
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.company_text {
|
|
|
|
|
width: 18vw;
|
|
|
|
|
height: 60vh;
|
|
|
|
|
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: 50vh;
|
|
|
|
|
margin-top: 1vh;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
.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_content::-webkit-scrollbar {
|
|
|
|
|
width: 6px;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
.text_content::-webkit-scrollbar-thumb {
|
|
|
|
|
width: 5px;
|
|
|
|
|
background-color: #28847e;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
.text_footer {
|
|
|
|
|
width: 18vw;
|
|
|
|
|
height: 4vh;
|
|
|
|
|
line-height: 4vh;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #34e1b3;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
lukeyan
1 year ago