|
|
@@ -8,37 +8,17 @@
|
|
|
<!-- 左侧 -->
|
|
|
<div class="leftbar w-10" ref="left" style="width:12rem !important;height: 80vh;overflow-y: hidden;">
|
|
|
<div class="forthis">
|
|
|
- <dv-border-box-13
|
|
|
- backgroundColor="rgba(12, 19, 38, .90)"
|
|
|
- style="padding-bottom: 1rem;height: 80vh;"
|
|
|
- >
|
|
|
- <img
|
|
|
- src="../assets/images/integrated/light.png"
|
|
|
- style="width: 100%; margin-top: 0.4rem"
|
|
|
- />
|
|
|
+ <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;height: 80vh;">
|
|
|
+ <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: 0.4rem" />
|
|
|
<div class="sj-search">
|
|
|
- <el-input
|
|
|
- v-model="searchName"
|
|
|
- placeholder="请输入名称"
|
|
|
- @keyup.enter.native="searchByName()"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- prefix-icon="el-icon-search"
|
|
|
- />
|
|
|
+ <el-input v-model="searchName" placeholder="请输入名称" @keyup.enter.native="searchByName()" clearable
|
|
|
+ size="small" prefix-icon="el-icon-search" />
|
|
|
</div>
|
|
|
<div class="i-list-con" style="height: 71vh;">
|
|
|
<div class="d-l-con-icon">
|
|
|
- <div
|
|
|
- class="icon-con"
|
|
|
- :class="{ on: iconCurrentIndex == item.resourceTable }"
|
|
|
- v-for="(item, index) in resourcesList"
|
|
|
- v-on:click="fireControlViewPoint(item.type, searchName)"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="iconfont icon icon-normal"
|
|
|
- :class="item.icon"
|
|
|
- :style="'background:' + item.bg"
|
|
|
- ></div>
|
|
|
+ <div class="icon-con" :class="{ on: iconCurrentIndex == item.resourceTable }"
|
|
|
+ v-for="(item, index) in resourcesList" v-on:click="fireControlViewPoint(item.type, searchName)">
|
|
|
+ <div class="iconfont icon icon-normal" :class="item.icon" :style="'background:' + item.bg"></div>
|
|
|
<div class="icon-text">
|
|
|
<h6>{{ item.num }}</h6>
|
|
|
<h5>{{ item.name }}</h5>
|
|
|
@@ -50,38 +30,22 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 地图 -->
|
|
|
- <supermap
|
|
|
- ref="supermap"
|
|
|
- style="width: 100%; height: 100vh"
|
|
|
- @sewageOutletClick="sewageOutletClick"
|
|
|
- ></supermap>
|
|
|
+ <supermap ref="supermap" style="width: 100%; height: 100vh" @sewageOutletClick="sewageOutletClick"></supermap>
|
|
|
<!-- <button @click="showEventInfo1" style="position: absolute; right: 50%;top: 45%;z-index: 1000;">弹层事件演示用按钮-->
|
|
|
<!-- </button>-->
|
|
|
<!-- 右侧 -->
|
|
|
<div class="rightbar" ref="right" v-if="showSearch == true">
|
|
|
<div class="forthis">
|
|
|
- <dv-border-box-13
|
|
|
- backgroundColor="rgba(12, 19, 38, .90)"
|
|
|
- style="padding-bottom: 1rem"
|
|
|
- >
|
|
|
- <img
|
|
|
- src="../assets/images/integrated/light.png"
|
|
|
- style="width: 100%; margin-top: 0.4rem"
|
|
|
- />
|
|
|
+ <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem">
|
|
|
+ <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: 0.4rem" />
|
|
|
<div class="this-title">
|
|
|
<span>数据分布</span>
|
|
|
- <dv-decoration-3
|
|
|
- style="width: 150px; height: 15px; margin-right: 1rem"
|
|
|
- />
|
|
|
+ <dv-decoration-3 style="width: 150px; height: 15px; margin-right: 1rem" />
|
|
|
</div>
|
|
|
<div class="i-list-con h-73">
|
|
|
<div class="overflow-y" style="height: 39vh">
|
|
|
- <div
|
|
|
- class="d-l-con"
|
|
|
- :class="{ on: listCurrentIndex == item.deptId }"
|
|
|
- v-for="(item, index) in deptGroupList"
|
|
|
- v-on:click="indentleftByDeptIdSetMarkers(item.deptId)"
|
|
|
- >
|
|
|
+ <div class="d-l-con" :class="{ on: listCurrentIndex == item.deptId }"
|
|
|
+ v-for="(item, index) in deptGroupList" v-on:click="indentleftByDeptIdSetMarkers(item.deptId)">
|
|
|
<div class="d-l-l-text">
|
|
|
<i class="i-small"></i>
|
|
|
<h4>{{ item.deptName }}</h4>
|
|
|
@@ -100,158 +64,166 @@
|
|
|
</div>
|
|
|
<eventLocation ref="eventLocation"></eventLocation>
|
|
|
<TVWall ref="TVWall"></TVWall>
|
|
|
+ <TVWalls ref="TVWalls"></TVWalls>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {
|
|
|
- fireControlViewList,
|
|
|
- fireControlViewPoint,
|
|
|
-} from "@/api/datacenter";
|
|
|
+ import {
|
|
|
+ fireControlViewList,
|
|
|
+ fireControlViewPoint,
|
|
|
+ getResourceDetail
|
|
|
+ } from "@/api/datacenter";
|
|
|
|
|
|
-import supermap from "@/components/supermap-2.5d"; //超图
|
|
|
-import vheader from "@/components/v-header.vue"; //一体化共用头部
|
|
|
-import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
|
|
|
-import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
|
|
|
-import TVWall from "@/components/TVWall.vue"; //电视墙弹窗
|
|
|
-import { getIconBg } from "@/api/components/sookaMapIcon";
|
|
|
-import {getUserProfile} from "@/api/system/user";
|
|
|
-import { Button } from '@/dahua/TVWalllib/iview' //资源底色控制文件
|
|
|
+ import supermap from "@/components/supermap-2.5d"; //超图
|
|
|
+ import vheader from "@/components/v-header.vue"; //一体化共用头部
|
|
|
+ import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
|
|
|
+ import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
|
|
|
+ import TVWall from "@/components/TVWall.vue"; //电视墙弹窗
|
|
|
+ import TVWalls from "@/components/TVWalls.vue"; //电视墙弹窗
|
|
|
+ import {
|
|
|
+ getIconBg
|
|
|
+ } from "@/api/components/sookaMapIcon";
|
|
|
+ import {
|
|
|
+ getUserProfile
|
|
|
+ } from "@/api/system/user";
|
|
|
+ import {
|
|
|
+ Button
|
|
|
+ } from '@/dahua/TVWalllib/iview' //资源底色控制文件
|
|
|
|
|
|
-// import echarts from 'echarts'
|
|
|
-let echarts = require("echarts");
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- Button,
|
|
|
- supermap,
|
|
|
- vheader,
|
|
|
- vBottomMenu,
|
|
|
- eventLocation,
|
|
|
- TVWall,
|
|
|
- },
|
|
|
- created() {
|
|
|
- /** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
- window.showDialog = this.showDialog;
|
|
|
- window.choseLayerSwitching = this.choseLayerSwitching;
|
|
|
- window.choseLayerSwitchingList = this.choseLayerSwitchingList;
|
|
|
- /** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- // 初始化地图数据
|
|
|
- this.getSuperMapUrl();
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- this.fireControlViewList();
|
|
|
- }, 2000)
|
|
|
- this.bottomMenuList(); //获取底部公共组件消息和任务
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // 搜索框
|
|
|
- showSearch: true,
|
|
|
- // 搜索名称
|
|
|
- searchName: "",
|
|
|
- // 搜索类型
|
|
|
- iconCurrentIndex: "",
|
|
|
- listCurrentIndex: "",
|
|
|
- markersList: [],
|
|
|
- iframeBoo: true,
|
|
|
- open: false,
|
|
|
- iframeVue: null,
|
|
|
- activeName: "info",
|
|
|
- radio: "1",
|
|
|
- //类型
|
|
|
- resourceTable: "",
|
|
|
- //左侧资源
|
|
|
- resourcesList: [],
|
|
|
- //右侧资源
|
|
|
- deptGroupList: [],
|
|
|
- source: [],
|
|
|
- };
|
|
|
- },
|
|
|
- watch: {
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //初始化地图数据
|
|
|
- getSuperMapUrl(){
|
|
|
- getUserProfile().then(response => {
|
|
|
- let mapDeptId=response.mapDeptId
|
|
|
- let num = 0;
|
|
|
- if (mapDeptId == "365") {
|
|
|
- num = 0;
|
|
|
- } else if (mapDeptId == "369") {
|
|
|
- num = 1;
|
|
|
- } else if (mapDeptId == "371") {
|
|
|
- num = 2;
|
|
|
- } else if (mapDeptId == "373") {
|
|
|
- num = 3;
|
|
|
- } else if (mapDeptId == "372") {
|
|
|
- num = 4;
|
|
|
- } else if (mapDeptId == "370") {
|
|
|
- num = 5;
|
|
|
- }
|
|
|
- this.$refs.supermap.removeAllviewer(num, -1);
|
|
|
- });
|
|
|
+ // import echarts from 'echarts'
|
|
|
+ let echarts = require("echarts");
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ Button,
|
|
|
+ supermap,
|
|
|
+ vheader,
|
|
|
+ vBottomMenu,
|
|
|
+ eventLocation,
|
|
|
+ TVWall,
|
|
|
+ TVWalls
|
|
|
},
|
|
|
- // 根据名称筛选资源点位
|
|
|
- searchByName() {
|
|
|
- this.$modal.msgSuccess("正在查询，请稍后...");
|
|
|
- this.fireControlViewPoint(this.resourceTable, this.searchName);
|
|
|
+ created() {
|
|
|
+ /** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
+ window.showDialog = this.showDialog;
|
|
|
+ window.choseLayerSwitching = this.choseLayerSwitching;
|
|
|
+ window.choseLayerSwitchingList = this.choseLayerSwitchingList;
|
|
|
+ /** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
},
|
|
|
- /** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
- bottomMenuList() {
|
|
|
- this.$refs.bottomMenu.selectTaskList(); //获取任务列表
|
|
|
- this.$refs.bottomMenu.selectMessageList(); //获取消息列表
|
|
|
+ mounted() {
|
|
|
+ // 初始化地图数据
|
|
|
+ this.getSuperMapUrl();
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ this.fireControlViewList();
|
|
|
+ }, 2000)
|
|
|
+ this.bottomMenuList(); //获取底部公共组件消息和任务
|
|
|
},
|
|
|
- showDialog(click) {
|
|
|
- if (click == "eventLocation") {
|
|
|
- this.$refs.eventLocation.showEventLocation();
|
|
|
- this.$refs.bottomMenu.showMeasure = false;
|
|
|
- this.$refs.bottomMenu.showChild = false;
|
|
|
- } else if (click == "editableLayers") {
|
|
|
- this.$refs.bottomMenu.showChild = false;
|
|
|
- if (!this.$refs.bottomMenu.showMeasure) {
|
|
|
- this.$refs.bottomMenu.showMeasure = true;
|
|
|
- } else {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 搜索框
|
|
|
+ showSearch: true,
|
|
|
+ // 搜索名称
|
|
|
+ searchName: "",
|
|
|
+ // 搜索类型
|
|
|
+ iconCurrentIndex: "",
|
|
|
+ listCurrentIndex: "",
|
|
|
+ markersList: [],
|
|
|
+ iframeBoo: true,
|
|
|
+ open: false,
|
|
|
+ iframeVue: null,
|
|
|
+ activeName: "info",
|
|
|
+ radio: "1",
|
|
|
+ //类型
|
|
|
+ resourceTable: "",
|
|
|
+ //左侧资源
|
|
|
+ resourcesList: [],
|
|
|
+ //右侧资源
|
|
|
+ deptGroupList: [],
|
|
|
+ source: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ methods: {
|
|
|
+ //初始化地图数据
|
|
|
+ getSuperMapUrl() {
|
|
|
+ getUserProfile().then(response => {
|
|
|
+ let mapDeptId = response.mapDeptId
|
|
|
+ let num = 0;
|
|
|
+ if (mapDeptId == "365") {
|
|
|
+ num = 0;
|
|
|
+ } else if (mapDeptId == "369") {
|
|
|
+ num = 1;
|
|
|
+ } else if (mapDeptId == "371") {
|
|
|
+ num = 2;
|
|
|
+ } else if (mapDeptId == "373") {
|
|
|
+ num = 3;
|
|
|
+ } else if (mapDeptId == "372") {
|
|
|
+ num = 4;
|
|
|
+ } else if (mapDeptId == "370") {
|
|
|
+ num = 5;
|
|
|
+ }
|
|
|
+ this.$refs.supermap.removeAllviewer(num, -1);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 根据名称筛选资源点位
|
|
|
+ searchByName() {
|
|
|
+ this.$modal.msgSuccess("正在查询，请稍后...");
|
|
|
+ this.fireControlViewPoint(this.resourceTable, this.searchName);
|
|
|
+ },
|
|
|
+ /** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
+ bottomMenuList() {
|
|
|
+ this.$refs.bottomMenu.selectTaskList(); //获取任务列表
|
|
|
+ this.$refs.bottomMenu.selectMessageList(); //获取消息列表
|
|
|
+ },
|
|
|
+ showDialog(click) {
|
|
|
+ if (click == "eventLocation") {
|
|
|
+ this.$refs.eventLocation.showEventLocation();
|
|
|
+ this.$refs.bottomMenu.showMeasure = false;
|
|
|
+ this.$refs.bottomMenu.showChild = false;
|
|
|
+ } else if (click == "editableLayers") {
|
|
|
+ this.$refs.bottomMenu.showChild = false;
|
|
|
+ if (!this.$refs.bottomMenu.showMeasure) {
|
|
|
+ this.$refs.bottomMenu.showMeasure = true;
|
|
|
+ } else {
|
|
|
+ this.$refs.bottomMenu.showMeasure = false;
|
|
|
+ }
|
|
|
+ } else if (click == "layerSwitching") {
|
|
|
+ this.$refs.bottomMenu.showMeasure = false;
|
|
|
+ if (!this.$refs.bottomMenu.showChild) {
|
|
|
+ this.$refs.bottomMenu.showChild = true;
|
|
|
+ } else {
|
|
|
+ this.$refs.bottomMenu.showChild = false;
|
|
|
+ }
|
|
|
+ } else if (click == "TVWall") {
|
|
|
+ this.$refs.TVWall.showTVWall();
|
|
|
this.$refs.bottomMenu.showMeasure = false;
|
|
|
- }
|
|
|
- } else if (click == "layerSwitching") {
|
|
|
- this.$refs.bottomMenu.showMeasure = false;
|
|
|
- if (!this.$refs.bottomMenu.showChild) {
|
|
|
- this.$refs.bottomMenu.showChild = true;
|
|
|
- } else {
|
|
|
this.$refs.bottomMenu.showChild = false;
|
|
|
}
|
|
|
- } else if (click == "TVWall") {
|
|
|
- this.$refs.TVWall.showTVWall();
|
|
|
- this.$refs.bottomMenu.showMeasure = false;
|
|
|
- this.$refs.bottomMenu.showChild = false;
|
|
|
- }
|
|
|
- },
|
|
|
- //选择图层
|
|
|
- choseLayerSwitching(url, isClear) {
|
|
|
- this.$refs.supermap.layerSwitching(url, isClear);
|
|
|
- },
|
|
|
- //选择图层(传递数组)
|
|
|
- choseLayerSwitchingList(urlList) {
|
|
|
- this.$refs.supermap.layerSwitchingList(urlList);
|
|
|
- },
|
|
|
- /** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
- //数据分布chart
|
|
|
- dataChat() {
|
|
|
- // 基于准备好的dom，初始化echarts实例
|
|
|
- let myChart = echarts.init(document.getElementById("data-chart"));
|
|
|
- // 绘制图表
|
|
|
- const dfColor = ["#92E1FF", "#0097FB", "#30ECA6", "#FFC227", "#FF4848"];
|
|
|
- myChart.setOption({
|
|
|
- dataset: {
|
|
|
- source: this.source,
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: "item",
|
|
|
- },
|
|
|
- dataZoom: [
|
|
|
- {
|
|
|
+ },
|
|
|
+ //选择图层
|
|
|
+ choseLayerSwitching(url, isClear) {
|
|
|
+ this.$refs.supermap.layerSwitching(url, isClear);
|
|
|
+ },
|
|
|
+ //选择图层(传递数组)
|
|
|
+ choseLayerSwitchingList(urlList) {
|
|
|
+ this.$refs.supermap.layerSwitchingList(urlList);
|
|
|
+ },
|
|
|
+ /** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
+ //数据分布chart
|
|
|
+ dataChat() {
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ let myChart = echarts.init(document.getElementById("data-chart"));
|
|
|
+ // 绘制图表
|
|
|
+ const dfColor = ["#92E1FF", "#0097FB", "#30ECA6", "#FFC227", "#FF4848"];
|
|
|
+ myChart.setOption({
|
|
|
+ dataset: {
|
|
|
+ source: this.source,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ },
|
|
|
+ dataZoom: [{
|
|
|
show: this.source.length > 8 ? true : false,
|
|
|
// show: true,
|
|
|
type: "slider",
|
|
|
@@ -260,43 +232,41 @@ export default {
|
|
|
start: 0,
|
|
|
end: this.source.length > 8 ? 8 : 100,
|
|
|
width: 15,
|
|
|
+ }, ],
|
|
|
+ grid: {
|
|
|
+ top: "5%",
|
|
|
+ left: "12%",
|
|
|
+ // right: "4%",
|
|
|
+ bottom: "-15%",
|
|
|
+ width: "75%",
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
- ],
|
|
|
- grid: {
|
|
|
- top: "5%",
|
|
|
- left: "12%",
|
|
|
- // right: "4%",
|
|
|
- bottom: "-15%",
|
|
|
- width: "75%",
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- show: false,
|
|
|
- type: "value",
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: "category", // 不设置类目轴，抽离的dataset数据展示不出来
|
|
|
- inverse: true,
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: "#5deaff",
|
|
|
- fontSize: "12",
|
|
|
- },
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
+ xAxis: {
|
|
|
show: false,
|
|
|
+ type: "value",
|
|
|
},
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
+ yAxis: {
|
|
|
+ type: "category", // 不设置类目轴，抽离的dataset数据展示不出来
|
|
|
+ inverse: true,
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: "#5deaff",
|
|
|
+ fontSize: "12",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
|
|
|
- series: [
|
|
|
- {
|
|
|
+ series: [{
|
|
|
type: "bar",
|
|
|
animationCurve: "easeOutBack",
|
|
|
barWidth: 5,
|
|
|
@@ -329,8 +299,7 @@ export default {
|
|
|
labelLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
- {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
offset: 0,
|
|
|
color: "rgba(41,244,236,0)",
|
|
|
},
|
|
|
@@ -343,66 +312,210 @@ export default {
|
|
|
shadowBlur: 16,
|
|
|
shadowColor: "#a2f9f7",
|
|
|
},
|
|
|
- },
|
|
|
- ],
|
|
|
- });
|
|
|
- },
|
|
|
- fireControlViewList() {
|
|
|
- let that = this;
|
|
|
- fireControlViewList("jiaotong").then(function (res) {
|
|
|
- for (let i = 0; i < res.data.length; i++) {
|
|
|
- if(res.data[i].type !='centerdata_t_forest_fireteam'){
|
|
|
- that.resourcesList.push(res.data[i]);
|
|
|
- }
|
|
|
- }
|
|
|
- //截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
|
|
|
- that.resourcesList.forEach(function (data, index) {
|
|
|
- let icon =
|
|
|
- "sj" +
|
|
|
- "-" +
|
|
|
- "icon" +
|
|
|
- "-" +
|
|
|
- data.type.replaceAll("_", "-").replaceAll("@", "-");
|
|
|
- console.log("icon_" + (index + 1) + "=", icon);
|
|
|
- that.$set(that.resourcesList[index], "icon", icon);
|
|
|
- //每个图标对应固定颜色
|
|
|
- that.$set(that.resourcesList[index], "bg", getIconBg(icon));
|
|
|
+ }, ],
|
|
|
});
|
|
|
- that.fireControlViewPoint("jiaotong", "");
|
|
|
- });
|
|
|
- },
|
|
|
- fireControlViewPoint(resourceTable, name) {
|
|
|
- // 搜索框
|
|
|
- if (name == "" || name == null || name == undefined) {
|
|
|
- name = "";
|
|
|
- } else {
|
|
|
- this.showSearch = true;
|
|
|
- }
|
|
|
- console.log("name=", name);
|
|
|
- console.log("this.showSearch=", this.showSearch);
|
|
|
- if(resourceTable == this.resourceTable){
|
|
|
- resourceTable = "jiaotong"
|
|
|
- }
|
|
|
- let that = this;
|
|
|
- that.resourceTable = resourceTable;
|
|
|
- that.markersList = [];
|
|
|
- that.source = [];
|
|
|
- fireControlViewPoint(resourceTable, name,"").then((res) => {
|
|
|
- let pointList = res.data.pointList;
|
|
|
- that.deptGroupList = res.data.deptList;
|
|
|
- if (res.data.deptList != null && res.data.deptList.length > 0) {
|
|
|
- for (let i = 0; i < res.data.deptList.length; i++) {
|
|
|
- let aa = [
|
|
|
- res.data.deptList[i].deptName,
|
|
|
- res.data.deptList[i].count,
|
|
|
- ];
|
|
|
- that.source.push(aa);
|
|
|
+ },
|
|
|
+ fireControlViewList() {
|
|
|
+ let that = this;
|
|
|
+ fireControlViewList("jiaotong").then(function(res) {
|
|
|
+ for (let i = 0; i < res.data.length; i++) {
|
|
|
+ if (res.data[i].type != 'centerdata_t_forest_fireteam') {
|
|
|
+ that.resourcesList.push(res.data[i]);
|
|
|
+ }
|
|
|
}
|
|
|
+ //截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
|
|
|
+ that.resourcesList.forEach(function(data, index) {
|
|
|
+ let icon =
|
|
|
+ "sj" +
|
|
|
+ "-" +
|
|
|
+ "icon" +
|
|
|
+ "-" +
|
|
|
+ data.type.replaceAll("_", "-").replaceAll("@", "-");
|
|
|
+ console.log("icon_" + (index + 1) + "=", icon);
|
|
|
+ that.$set(that.resourcesList[index], "icon", icon);
|
|
|
+ //每个图标对应固定颜色
|
|
|
+ that.$set(that.resourcesList[index], "bg", getIconBg(icon));
|
|
|
+ });
|
|
|
+ that.fireControlViewPoint("jiaotong", "");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fireControlViewPoint(resourceTable, name) {
|
|
|
+ // 搜索框
|
|
|
+ if (name == "" || name == null || name == undefined) {
|
|
|
+ name = "";
|
|
|
+ } else {
|
|
|
+ this.showSearch = true;
|
|
|
}
|
|
|
+ console.log("name=", name);
|
|
|
+ console.log("this.showSearch=", this.showSearch);
|
|
|
+ if (resourceTable == this.resourceTable) {
|
|
|
+ resourceTable = "jiaotong"
|
|
|
+ }
|
|
|
+ let that = this;
|
|
|
+ that.resourceTable = resourceTable;
|
|
|
+ that.markersList = [];
|
|
|
+ that.source = [];
|
|
|
+ fireControlViewPoint(resourceTable, name, "").then((res) => {
|
|
|
+ let pointList = res.data.pointList;
|
|
|
+ that.deptGroupList = res.data.deptList;
|
|
|
+ if (res.data.deptList != null && res.data.deptList.length > 0) {
|
|
|
+ for (let i = 0; i < res.data.deptList.length; i++) {
|
|
|
+ let aa = [
|
|
|
+ res.data.deptList[i].deptName,
|
|
|
+ res.data.deptList[i].count,
|
|
|
+ ];
|
|
|
+ that.source.push(aa);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- if (res.data.pointList != null && res.data.pointList.length > 0) {
|
|
|
- for (let i = 0; i < res.data.pointList.length; i++) {
|
|
|
- if(res.data.pointList[i].indexName != 'centerdata_t_forest_fireteam'){
|
|
|
+ if (res.data.pointList != null && res.data.pointList.length > 0) {
|
|
|
+ for (let i = 0; i < res.data.pointList.length; i++) {
|
|
|
+ if (res.data.pointList[i].indexName != 'centerdata_t_forest_fireteam') {
|
|
|
+ let markersMap = {
|
|
|
+ lng: res.data.pointList[i].longitude,
|
|
|
+ lat: res.data.pointList[i].latitude,
|
|
|
+ icon: "marker",
|
|
|
+ bindPopupHtml: "",
|
|
|
+ click: "",
|
|
|
+ name: i,
|
|
|
+ keepBindPopup: false,
|
|
|
+ isAggregation: false,
|
|
|
+ };
|
|
|
+ that.markersList.push(
|
|
|
+ this.getMarkersMap(
|
|
|
+ resourceTable == "jiaotong" ? res.data.pointList[i].indexName : resourceTable,
|
|
|
+ markersMap,
|
|
|
+ res.data.pointList[i]
|
|
|
+ )
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.showSearch == true) {
|
|
|
+ this.dataChat();
|
|
|
+ }
|
|
|
+ that.$refs.supermap.clearM(false);
|
|
|
+ that.$refs.supermap.setMarkers(that.markersList);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getMarkersMap(resourceTable, markersMap, item) {
|
|
|
+ let icon = "sj-icon-map-" + resourceTable.replaceAll("_", "-");
|
|
|
+ console.log(icon)
|
|
|
+ markersMap.lng = item.longitude;
|
|
|
+ markersMap.lat = item.latitude;
|
|
|
+ markersMap.click = "sewageOutletClick";
|
|
|
+ markersMap.parameter = item;
|
|
|
+ markersMap.icon = icon;
|
|
|
+ markersMap.bindPopupHtml =
|
|
|
+ '<div class="map-tip">' +
|
|
|
+ "<span>" +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ " <h4>经纬度：" +
|
|
|
+ (item.longitude ? item.longitude : "") +
|
|
|
+ "," +
|
|
|
+ (item.latitude ? item.latitude : "") +
|
|
|
+ "</h4>" +
|
|
|
+ " </div>" +
|
|
|
+ " </div>" +
|
|
|
+ " </span>" +
|
|
|
+ "<span>" +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ " <h4>名称：" +
|
|
|
+ (item.name ? item.name : "") +
|
|
|
+ "</h4>" +
|
|
|
+ " </div>" +
|
|
|
+ " </div>" +
|
|
|
+ " </span>" +
|
|
|
+ "<span>" +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ " <h4>地址：" +
|
|
|
+ (item.address ? item.address : "") +
|
|
|
+ "</h4>" +
|
|
|
+ " </div>" +
|
|
|
+ " </div>" +
|
|
|
+ " </span>" +
|
|
|
+ "<span>" +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ " <h4>联系人：" +
|
|
|
+ (item.contacts ? item.contacts : "") +
|
|
|
+ "</h4>" +
|
|
|
+ " </div>" +
|
|
|
+ " </div>" +
|
|
|
+ " </span>" +
|
|
|
+ "<span>" +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ " <h4>联系电话：" +
|
|
|
+ (item.phone ? item.phone : "") +
|
|
|
+ "</h4>" +
|
|
|
+ " </div>" +
|
|
|
+ " </div>" +
|
|
|
+ " </span></div>";
|
|
|
+ return markersMap;
|
|
|
+ },
|
|
|
+ sewageOutletClick(data) {
|
|
|
+ const params = Object.assign({});
|
|
|
+ params.longitude = data.longitude;
|
|
|
+ params.latitude = data.latitude;
|
|
|
+ let data1 = null
|
|
|
+ getResourceDetail(data.indexName, data.id).then(res => {
|
|
|
+ data1 = res.data
|
|
|
+ const treeLabels = [{
|
|
|
+ id: null,
|
|
|
+ labelCode: "999",
|
|
|
+ labelName: "电视墙",
|
|
|
+ cameraType: null,
|
|
|
+ parentLabelCode: "",
|
|
|
+ }, ];
|
|
|
+ const labelChannels = [];
|
|
|
+ if (0 < data1.cameras.length) {
|
|
|
+ for (let i in data1.cameras) {
|
|
|
+ treeLabels.push({
|
|
|
+ id: null,
|
|
|
+ labelCode: data1.cameras[i].cameraCode,
|
|
|
+ labelName: data1.cameras[i].cameraName,
|
|
|
+ cameraType: data1.cameras[i].cameraType,
|
|
|
+ parentLabelCode: "999",
|
|
|
+ });
|
|
|
+ labelChannels.push({
|
|
|
+ labelCode: data1.cameras[i].cameraCode,
|
|
|
+ channelDates: [{
|
|
|
+ channelCode: data1.cameras[i].cameraCode,
|
|
|
+ channelName: data1.cameras[i].cameraName,
|
|
|
+ channelSn: null,
|
|
|
+ cameraType: data1.cameras[i].cameraType,
|
|
|
+ online: "1",
|
|
|
+ cameraCode: "1",
|
|
|
+ }, ],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ const dianshiqiang = [{
|
|
|
+ switchTab: "2",
|
|
|
+ treeLabels: treeLabels,
|
|
|
+ labelChannels: labelChannels,
|
|
|
+ }, ]
|
|
|
+ this.$refs.TVWalls.showTVWall1(
|
|
|
+ dianshiqiang, {
|
|
|
+ longitude: params.longitude,
|
|
|
+ latitude: params.latitude
|
|
|
+ },
|
|
|
+ data1.detail
|
|
|
+ );
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ indentleftByDeptIdSetMarkers(deptId) {
|
|
|
+ this.listCurrentIndex = deptId;
|
|
|
+ let that = this;
|
|
|
+ //点击左侧地图落点
|
|
|
+ fireControlViewPoint(that.resourceTable, that.searchName, deptId).then((res) => {
|
|
|
+ that.markersList = [];
|
|
|
+ if (res.data != null && res.data.pointList.length > 0) {
|
|
|
+ for (let i = 0; i < res.data.pointList.length; i++) {
|
|
|
let markersMap = {
|
|
|
lng: res.data.pointList[i].longitude,
|
|
|
lat: res.data.pointList[i].latitude,
|
|
|
@@ -413,170 +526,23 @@ export default {
|
|
|
keepBindPopup: false,
|
|
|
isAggregation: false,
|
|
|
};
|
|
|
+ console.log("resourceTable=", that.resourceTable);
|
|
|
+ console.log("res.data[i]=", res.data.pointList[i]);
|
|
|
that.markersList.push(
|
|
|
- this.getMarkersMap(
|
|
|
- resourceTable == "jiaotong" ? res.data.pointList[i].indexName:resourceTable,
|
|
|
- markersMap,
|
|
|
- res.data.pointList[i]
|
|
|
- )
|
|
|
+ that.getMarkersMap(
|
|
|
+ that.resourceTable == "jiaotong" ? res.data.pointList[i].indexName : that.resourceTable,
|
|
|
+ markersMap, res.data.pointList[i])
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- if (this.showSearch == true) {
|
|
|
- this.dataChat();
|
|
|
- }
|
|
|
- that.$refs.supermap.clearM(false);
|
|
|
- that.$refs.supermap.setMarkers(that.markersList);
|
|
|
- });
|
|
|
- },
|
|
|
- getMarkersMap(resourceTable, markersMap, item) {
|
|
|
- let icon = "sj-icon-map-"+resourceTable.replaceAll("_", "-");
|
|
|
- console.log(icon)
|
|
|
- markersMap.lng = item.longitude;
|
|
|
- markersMap.lat = item.latitude;
|
|
|
- markersMap.click = "sewageOutletClick";
|
|
|
- markersMap.parameter = item;
|
|
|
- markersMap.icon = icon;
|
|
|
- markersMap.bindPopupHtml =
|
|
|
- '<div class="map-tip">' +
|
|
|
- "<span>" +
|
|
|
- ' <div class="d-l-con">' +
|
|
|
- ' <div class="d-l-l-text">' +
|
|
|
- " <h4>经纬度：" +
|
|
|
- (item.longitude ? item.longitude : "") +
|
|
|
- "," +
|
|
|
- (item.latitude ? item.latitude : "") +
|
|
|
- "</h4>" +
|
|
|
- " </div>" +
|
|
|
- " </div>" +
|
|
|
- " </span>" +
|
|
|
- "<span>" +
|
|
|
- ' <div class="d-l-con">' +
|
|
|
- ' <div class="d-l-l-text">' +
|
|
|
- " <h4>名称：" +
|
|
|
- (item.name ? item.name : "") +
|
|
|
- "</h4>" +
|
|
|
- " </div>" +
|
|
|
- " </div>" +
|
|
|
- " </span>" +
|
|
|
- "<span>" +
|
|
|
- ' <div class="d-l-con">' +
|
|
|
- ' <div class="d-l-l-text">' +
|
|
|
- " <h4>地址：" +
|
|
|
- (item.address ? item.address : "") +
|
|
|
- "</h4>" +
|
|
|
- " </div>" +
|
|
|
- " </div>" +
|
|
|
- " </span>" +
|
|
|
- "<span>" +
|
|
|
- ' <div class="d-l-con">' +
|
|
|
- ' <div class="d-l-l-text">' +
|
|
|
- " <h4>联系人：" +
|
|
|
- (item.contacts ? item.contacts : "") +
|
|
|
- "</h4>" +
|
|
|
- " </div>" +
|
|
|
- " </div>" +
|
|
|
- " </span>" +
|
|
|
- "<span>" +
|
|
|
- ' <div class="d-l-con">' +
|
|
|
- ' <div class="d-l-l-text">' +
|
|
|
- " <h4>联系电话：" +
|
|
|
- (item.phone ? item.phone : "") +
|
|
|
- "</h4>" +
|
|
|
- " </div>" +
|
|
|
- " </div>" +
|
|
|
- " </span></div>";
|
|
|
- return markersMap;
|
|
|
- },
|
|
|
- sewageOutletClick(data) {
|
|
|
- console.log(data);
|
|
|
- const params = Object.assign({});
|
|
|
- params.longitude = data.longitude;
|
|
|
- params.latitude = data.latitude;
|
|
|
-
|
|
|
- const treeLabels = [
|
|
|
- {
|
|
|
- id: null,
|
|
|
- labelCode: "999",
|
|
|
- labelName: "电视墙",
|
|
|
- cameraType: null,
|
|
|
- parentLabelCode: "",
|
|
|
- },
|
|
|
- ];
|
|
|
- const labelChannels = [];
|
|
|
- for (let i in data.cameraList) {
|
|
|
- treeLabels.push({
|
|
|
- id: null,
|
|
|
- labelCode: data.cameraList[i].cameraCode,
|
|
|
- labelName: data.cameraList[i].cameraName,
|
|
|
- cameraType: data.cameraList[i].cameraType,
|
|
|
- parentLabelCode: "999",
|
|
|
- });
|
|
|
- labelChannels.push({
|
|
|
- labelCode: data.cameraList[i].cameraCode,
|
|
|
- channelDates: [
|
|
|
- {
|
|
|
- channelCode: data.cameraList[i].cameraCode,
|
|
|
- channelName: data.cameraList[i].cameraName,
|
|
|
- channelSn: null,
|
|
|
- cameraType: data.cameraList[i].cameraType,
|
|
|
- online: "1",
|
|
|
- cameraCode: "1",
|
|
|
- },
|
|
|
- ],
|
|
|
+ that.$refs.supermap.clearM();
|
|
|
+ that.$refs.supermap.setMarkers(that.markersList);
|
|
|
});
|
|
|
- }
|
|
|
- const dianshiqiang = [
|
|
|
- {
|
|
|
- switchTab: "2",
|
|
|
- treeLabels: treeLabels,
|
|
|
- labelChannels: labelChannels,
|
|
|
- },
|
|
|
- ];
|
|
|
- if (data.cameraList.length > 0) {
|
|
|
- this.$refs.TVWall.showTVWall1(
|
|
|
- data.longitude,
|
|
|
- data.latitude,
|
|
|
- dianshiqiang
|
|
|
- );
|
|
|
- }
|
|
|
- },
|
|
|
- indentleftByDeptIdSetMarkers(deptId) {
|
|
|
- this.listCurrentIndex = deptId;
|
|
|
- let that = this;
|
|
|
- //点击左侧地图落点
|
|
|
- fireControlViewPoint(that.resourceTable,that.searchName, deptId).then((res) => {
|
|
|
- that.markersList = [];
|
|
|
- if (res.data != null && res.data.pointList.length>0) {
|
|
|
- for (let i = 0; i < res.data.pointList.length; i++) {
|
|
|
- let markersMap = {
|
|
|
- lng: res.data.pointList[i].longitude,
|
|
|
- lat: res.data.pointList[i].latitude,
|
|
|
- icon: "marker",
|
|
|
- bindPopupHtml: "",
|
|
|
- click: "",
|
|
|
- name: i,
|
|
|
- keepBindPopup: false,
|
|
|
- isAggregation: false,
|
|
|
- };
|
|
|
- console.log("resourceTable=", that.resourceTable);
|
|
|
- console.log("res.data[i]=", res.data.pointList[i]);
|
|
|
- that.markersList.push(
|
|
|
- that.getMarkersMap(
|
|
|
- that.resourceTable == "jiaotong" ? res.data.pointList[i].indexName:that.resourceTable,
|
|
|
- markersMap, res.data.pointList[i])
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
- that.$refs.supermap.clearM();
|
|
|
- that.$refs.supermap.setMarkers(that.markersList);
|
|
|
- });
|
|
|
+ },
|
|
|
},
|
|
|
- },
|
|
|
-};
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
-@import "@/assets/styles/base.scss";
|
|
|
+ @import "@/assets/styles/base.scss";
|
|
|
</style>
|
JX.LI