|
|
@@ -20,8 +20,230 @@
|
|
|
<el-radio :label="1">卫星图</el-radio>
|
|
|
</el-radio-group>
|
|
|
</div>
|
|
|
- <sidebar></sidebar>
|
|
|
- <equip-list></equip-list>
|
|
|
+ <!-- tabs设备类型 -->
|
|
|
+ <div class="equipTypebox">
|
|
|
+ <div class="equipTypeBody">
|
|
|
+ <div class="equipTypeList">
|
|
|
+ <div v-for="(item,index) in equipType" @click="changeEquip(index,item)" @mouseover='mouseOve(index,item)' @mouseleave='mouseOut(index,item)' :key="item.type" :class="[currSelectType==item.type?'active':'']" >{{item.name}}</div>
|
|
|
+ </div>
|
|
|
+ <div :style="'left:'+equipStyleLeft+'px'" class="equipHighLight"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 控制 -->
|
|
|
+ <!-- <sidebar></sidebar> -->
|
|
|
+ <components :is="sidebarComponents" @sidebarClear="sidebarClear()" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='queryInfo.type' :model="queryInfo.model"></components>
|
|
|
+ <!-- 设备列表 -->
|
|
|
+ <equip-list>
|
|
|
+ <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
|
|
|
+ <button @click="detailsShow == 3">ceshi</button>
|
|
|
+ </equip-list>
|
|
|
+ <!-- 杀虫灯数据框 -->
|
|
|
+ <transition
|
|
|
+ enter-active-class="animate__animated animate__zoomIn"
|
|
|
+ leave-active-class="animate__animated animate__rotateOut"
|
|
|
+ >
|
|
|
+ <dialog-box v-if="detailsShow==2" width='800'>
|
|
|
+ <template v-slot:header>
|
|
|
+ <span class="dialog-title">杀虫灯数据框</span>
|
|
|
+ <button type="button" @click="detailsShow=''" class="dialog-headerbtn">
|
|
|
+ <i class="el-icon el-icon-close"></i>
|
|
|
+ </button>
|
|
|
+ </template>
|
|
|
+ <template v-slot:inner>
|
|
|
+ <equip-info :equipId="queryInfo.equip_id" :equipType='detailsShow'>
|
|
|
+ <template v-solt:equipStateInner></template>
|
|
|
+ </equip-info>
|
|
|
+ <div class="equipData">
|
|
|
+ <div class="more" @click="lookmore()">查看更多</div>
|
|
|
+ <template>
|
|
|
+ <el-tabs v-model="activeName" @tab-click="tabshandleClick">
|
|
|
+ <el-tab-pane
|
|
|
+ v-for="(pages, index) in pages['2']"
|
|
|
+ v-bind:key="index"
|
|
|
+ :label="pages.label"
|
|
|
+ :name="pages.name"
|
|
|
+ >
|
|
|
+ <!-- <keep-alive> -->
|
|
|
+ <components :is="pages.name" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' v-if="pages.name == nowPage"></components>
|
|
|
+ <!-- </keep-alive> -->
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </dialog-box>
|
|
|
+ </transition>
|
|
|
+ <!-- 测报灯数据框 -->
|
|
|
+ <transition
|
|
|
+ enter-active-class="animate__animated animate__zoomIn"
|
|
|
+ leave-active-class="animate__animated animate__rotateOut"
|
|
|
+ >
|
|
|
+ <dialog-box v-if="detailsShow==3" width='800'>
|
|
|
+ <template v-slot:header>
|
|
|
+ <span class="dialog-title">测报灯数据框</span>
|
|
|
+ <button type="button" @click="detailsShow=''" class="dialog-headerbtn">
|
|
|
+ <i class="el-icon el-icon-close"></i>
|
|
|
+ </button>
|
|
|
+ </template>
|
|
|
+ <template v-slot:inner>
|
|
|
+ <equip-info :equipId="queryInfo.equip_id" :equipType='detailsShow'>
|
|
|
+ <template v-solt:equipStateInner></template>
|
|
|
+ </equip-info>
|
|
|
+ <div class="equipData">
|
|
|
+ <div class="more" @click="lookmore()">查看更多</div>
|
|
|
+ <template>
|
|
|
+ <el-tabs v-model="activeName" @tab-click="tabshandleClick">
|
|
|
+ <el-tab-pane
|
|
|
+ v-for="(pages, index) in pages['3']"
|
|
|
+ v-bind:key="index"
|
|
|
+ :label="pages.label"
|
|
|
+ :name="pages.name"
|
|
|
+ >
|
|
|
+ <keep-alive>
|
|
|
+ <components :is="pages.name" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' v-if="pages.name == nowPage"></components>
|
|
|
+ </keep-alive>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </dialog-box>
|
|
|
+ </transition>
|
|
|
+ <!-- 性诱设备数据框 -->
|
|
|
+ <transition
|
|
|
+ enter-active-class="animate__animated animate__zoomIn"
|
|
|
+ leave-active-class="animate__animated animate__rotateOut"
|
|
|
+ >
|
|
|
+ <dialog-box v-if="detailsShow==4" width='800'>
|
|
|
+ <template v-slot:header>
|
|
|
+ <span class="dialog-title">性诱设备数据框</span>
|
|
|
+ <button type="button" @click="detailsShow=''" class="dialog-headerbtn">
|
|
|
+ <i class="el-icon el-icon-close"></i>
|
|
|
+ </button>
|
|
|
+ </template>
|
|
|
+ <template v-slot:inner>
|
|
|
+ <equip-info :equipId="queryInfo.equip_id" :equipType='detailsShow'>
|
|
|
+ <template v-solt:equipStateInner></template>
|
|
|
+ </equip-info>
|
|
|
+ <div class="equipData">
|
|
|
+ <div class="more" @click="lookmore()">查看更多</div>
|
|
|
+ <template>
|
|
|
+ <el-tabs v-model="activeName" @tab-click="tabshandleClick">
|
|
|
+ <el-tab-pane
|
|
|
+ v-for="(pages, index) in pages['4']"
|
|
|
+ v-bind:key="index"
|
|
|
+ :label="pages.label"
|
|
|
+ :name="pages.name"
|
|
|
+ >
|
|
|
+ <keep-alive>
|
|
|
+ <components :is="pages.name" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' v-if="pages.name == nowPage"></components>
|
|
|
+ </keep-alive>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </dialog-box>
|
|
|
+ </transition>
|
|
|
+ <!-- 气象站数据框 -->
|
|
|
+ <transition
|
|
|
+ enter-active-class="animate__animated animate__zoomIn"
|
|
|
+ leave-active-class="animate__animated animate__rotateOut"
|
|
|
+ >
|
|
|
+ <dialog-box v-if="detailsShow==5" width='800'>
|
|
|
+ <template v-slot:header>
|
|
|
+ <span class="dialog-title">气象站数据框</span>
|
|
|
+ <button type="button" @click="detailsShow=''" class="dialog-headerbtn">
|
|
|
+ <i class="el-icon el-icon-close"></i>
|
|
|
+ </button>
|
|
|
+ </template>
|
|
|
+ <template v-slot:inner>
|
|
|
+ <equip-info :equipId='queryInfo.equip_id' :equipType='detailsShow'>
|
|
|
+ <template v-solt:equipStateInner></template>
|
|
|
+ </equip-info>
|
|
|
+ <div class="equipData">
|
|
|
+ <div class="more" @click="lookmore()">查看更多</div>
|
|
|
+ <template>
|
|
|
+ <el-tabs v-model="activeName" @tab-click="tabshandleClick">
|
|
|
+ <el-tab-pane
|
|
|
+ v-for="(pages, index) in pages['5']"
|
|
|
+ v-bind:key="index"
|
|
|
+ :label="pages.label"
|
|
|
+ :name="pages.name"
|
|
|
+ >
|
|
|
+ <keep-alive>
|
|
|
+ <components :is="pages.name" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' v-if="pages.name == nowPage"></components>
|
|
|
+ </keep-alive>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </dialog-box>
|
|
|
+ </transition>
|
|
|
+ <!-- 孢子仪数据框 -->
|
|
|
+ <transition
|
|
|
+ enter-active-class="animate__animated animate__zoomIn"
|
|
|
+ leave-active-class="animate__animated animate__rotateOut"
|
|
|
+ >
|
|
|
+ <dialog-box v-if="detailsShow==7" width='800'>
|
|
|
+ <template v-slot:header>
|
|
|
+ <span class="dialog-title">孢子仪数据框</span>
|
|
|
+ <button type="button" @click="detailsShow=''" class="dialog-headerbtn">
|
|
|
+ <i class="el-icon el-icon-close"></i>
|
|
|
+ </button>
|
|
|
+ </template>
|
|
|
+ <template v-slot:inner>
|
|
|
+ <equip-info @child-event="setTimeDialogShow" :equipId='queryInfo.equip_id' :equipType='detailsShow'>
|
|
|
+ <template v-solt:equipStateInner></template>
|
|
|
+ </equip-info>
|
|
|
+ <div class="equipData">
|
|
|
+ <div class="more" @click="lookmore()">查看更多</div>
|
|
|
+ <template>
|
|
|
+ <el-tabs v-model="activeName" @tab-click="tabshandleClick">
|
|
|
+ <el-tab-pane
|
|
|
+ v-for="(pages, index) in pages['7']"
|
|
|
+ v-bind:key="index"
|
|
|
+ :label="pages.label"
|
|
|
+ :name="pages.name"
|
|
|
+ >
|
|
|
+ <keep-alive>
|
|
|
+ <components :is="pages.name" :equipId="queryInfo.equip_id" :d_id="queryInfo.d_id" :equipType='detailsShow' v-if="pages.name == nowPage"></components>
|
|
|
+ </keep-alive>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </dialog-box>
|
|
|
+ </transition>
|
|
|
+ <!-- 设置孢子仪载玻片、培养液更换时间配置弹框 -->
|
|
|
+ <el-dialog
|
|
|
+ title="配置(请及时填写)"
|
|
|
+ :visible.sync="setTimeDialogVisible"
|
|
|
+ width="420px"
|
|
|
+ >
|
|
|
+ <el-form ref="form" :model="time" label-width="130px">
|
|
|
+ <el-form-item label="载玻片更换时间: ">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="time.time01"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="培养液更换时间: ">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="time.time02"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="grayInfo" @click="setTimeDialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="blueInfo" @click="setTimeSubm()">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -32,28 +254,46 @@ import VueAMap from "vue-amap";
|
|
|
let amapManager = new VueAMap.AMapManager();
|
|
|
import sidebar from "@/components/highStand/sidebar"
|
|
|
import equipList from "@/components/highStand/equipList"
|
|
|
+import { bd09togcj02,gcj02tobd09,wgs84togcj02,gcj02towgs84 } from "@/components/home/coordtransform_utils.js"; //纠偏方法
|
|
|
+import dialogBox from './dialogHollow' //地图镂空弹框
|
|
|
+import equipState from './equipState' //设备状态
|
|
|
+import qxzEquipState from './equipStateQxz' //气象站设备状态
|
|
|
+import equipInfo from './equipInfo' //设备基础信息
|
|
|
+import equipHistoryDate from './equipHistoryDate' //设备历史数据
|
|
|
+import qxzEquipHistoryDate from './equipHistoryDateQxz' //气象站设备历史数据
|
|
|
+import twentyFourHistoryDate from './twentyFourHistoryDate' //气象站24小时数据
|
|
|
+import cbdPhoto from './cbdPhoto/cbdPhoto' //测报灯图片
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
components: {
|
|
|
sidebar,
|
|
|
- equipList
|
|
|
+ equipList,
|
|
|
+ dialogBox,
|
|
|
+ equipState,
|
|
|
+ qxzEquipState,
|
|
|
+ equipInfo,
|
|
|
+ equipHistoryDate,
|
|
|
+ qxzEquipHistoryDate,
|
|
|
+ twentyFourHistoryDate,
|
|
|
+ cbdPhoto,
|
|
|
},
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
+ sidebarComponents:'',
|
|
|
amapManager,
|
|
|
center: [120.298433, 31.680335],
|
|
|
zoom: 6,
|
|
|
mapType: 1,
|
|
|
plugin: [
|
|
|
- {
|
|
|
- pName: "ToolBar",
|
|
|
- events: {
|
|
|
- init(instance) {
|
|
|
- console.log(instance);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
+ // {
|
|
|
+ // pName: "ToolBar",
|
|
|
+ // events: {
|
|
|
+ // init(instance) {
|
|
|
+ // console.log(instance);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
{
|
|
|
pName: "Scale",
|
|
|
events: {
|
|
|
@@ -95,7 +335,168 @@ export default {
|
|
|
o.add(this.xyzTileLayer);
|
|
|
o.add(this.xyzTileLayer2);
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ // tabs导航
|
|
|
+ equipType:[
|
|
|
+ {
|
|
|
+ type:'',
|
|
|
+ name:"全部",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type:7,
|
|
|
+ name:"孢子仪",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type:6,
|
|
|
+ name:"监控",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type:5,
|
|
|
+ name:"环境监测",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type:4,
|
|
|
+ name:"性诱设备",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type:3,
|
|
|
+ name:"虫情测报",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type:2,
|
|
|
+ name:"杀虫灯"
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ currSelectType:0,
|
|
|
+ currSelectSite:0,
|
|
|
+ equipStyleLeft:0,
|
|
|
+ // 海量点样式表
|
|
|
+ equipPoints:[],
|
|
|
+ massMarks:null,
|
|
|
+ geocoder:null,
|
|
|
+ equipStyleObject:[
|
|
|
+ {
|
|
|
+ url: require("@/assets/images/home/mapView/scd.png"), // 设别类型0
|
|
|
+ size: new AMap.Size(25, 15), // 图标大小
|
|
|
+ anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量,基准点为图标左上角
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require("@/assets/images/home/mapView/scd.png"), // 设别类型1
|
|
|
+ size: new AMap.Size(25, 15), // 图标大小
|
|
|
+ anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量,基准点为图标左上角
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require("@/assets/images/home/mapView/scd.png"), // 设别类型2
|
|
|
+ size: new AMap.Size(25, 15), // 图标大小
|
|
|
+ anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量,基准点为图标左上角
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require("@/assets/images/home/mapView/cbd.png"), // 设别类型3
|
|
|
+ size: new AMap.Size(25, 15), // 图标大小
|
|
|
+ anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量,基准点为图标左上角
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require("@/assets/images/home/mapView/xyq.png"), // 设别类型4
|
|
|
+ size: new AMap.Size(25, 15), // 图标大小
|
|
|
+ anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量,基准点为图标左上角
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require("@/assets/images/home/mapView/qxz.png"), // 设别类型5
|
|
|
+ size: new AMap.Size(25, 15), // 图标大小
|
|
|
+ anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量,基准点为图标左上角
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require("@/assets/images/home/mapView/jk.png"), // 设别类型6
|
|
|
+ size: new AMap.Size(25, 15), // 图标大小
|
|
|
+ anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量,基准点为图标左上角
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require("@/assets/images/home/mapView/bzy.png"), // 设别类型7
|
|
|
+ size: new AMap.Size(25, 15), // 图标大小
|
|
|
+ anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量,基准点为图标左上角
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require("@/assets/images/home/mapView/bzy.png"), // 设别类型8
|
|
|
+ size: new AMap.Size(25, 15), // 图标大小
|
|
|
+ anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量,基准点为图标左上角
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require("@/assets/images/home/mapView/tccb.png"), // 设别类型9
|
|
|
+ size: new AMap.Size(25, 15), // 图标大小
|
|
|
+ anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量,基准点为图标左上角
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ queryInfo:{
|
|
|
+ equip_id:"",
|
|
|
+ d_id:"",
|
|
|
+ type:"",
|
|
|
+ model:""
|
|
|
+ },
|
|
|
+ // 信息弹框
|
|
|
+ detailsShow:false,
|
|
|
+ // 孢子仪弹框
|
|
|
+ setTimeDialogVisible:false,
|
|
|
+ time:{
|
|
|
+ time01:"",
|
|
|
+ time02:"",
|
|
|
+ },
|
|
|
+ // 孢子仪配置载玻片时间did
|
|
|
+ currbzyGlass:"",
|
|
|
+ // 设备tabs标签
|
|
|
+ activeName: "equipState",
|
|
|
+ nowPage: "equipState",
|
|
|
+ pages:{
|
|
|
+ "2":[{
|
|
|
+ name:"equipState",
|
|
|
+ label:"实时状态",
|
|
|
+ },{
|
|
|
+ name:"equipHistoryDate",
|
|
|
+ label:"历史数据",
|
|
|
+ }],
|
|
|
+ "3":[{
|
|
|
+ name:"equipState",
|
|
|
+ label:"实时状态",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:"cbdPhoto",
|
|
|
+ label:"查看图片",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:"equipHistoryDate",
|
|
|
+ label:"历史数据",
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // name:"equipState",
|
|
|
+ // label:"害虫统计",
|
|
|
+ // }
|
|
|
+ ],
|
|
|
+ "4":[{
|
|
|
+ name:"equipState",
|
|
|
+ label:"实时状态",
|
|
|
+ },{
|
|
|
+ name:"equipHistoryDate",
|
|
|
+ label:"历史数据",
|
|
|
+ }],
|
|
|
+ "5":[{
|
|
|
+ name:"qxzEquipState",
|
|
|
+ label:"实时状态",
|
|
|
+ },{
|
|
|
+ name:"twentyFourHistoryDate",
|
|
|
+ label:"24小时数据",
|
|
|
+ },{
|
|
|
+ name:"qxzEquipHistoryDate",
|
|
|
+ label:"历史数据",
|
|
|
+ }],
|
|
|
+ "7":[{
|
|
|
+ name:"equipState",
|
|
|
+ label:"实时状态",
|
|
|
+ },{
|
|
|
+ name:"equipHistoryDate",
|
|
|
+ label:"历史数据",
|
|
|
+ }],
|
|
|
+ },
|
|
|
+ // 右侧控制
|
|
|
+ sidebarState:false,
|
|
|
};
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
@@ -104,7 +505,7 @@ export default {
|
|
|
watch: {},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
- changeMapType(val){
|
|
|
+ changeMapType(val){
|
|
|
let o = amapManager.getMap();
|
|
|
if(val==0){
|
|
|
this.xyzTileLayer.hide()
|
|
|
@@ -114,11 +515,173 @@ export default {
|
|
|
this.xyzTileLayer2.show()
|
|
|
}
|
|
|
},
|
|
|
+ changeEquip(index,item){
|
|
|
+ this.currSelectType = item.type;
|
|
|
+ this.currSelectSite = index;
|
|
|
+ this.detailsShow = ''
|
|
|
+ this.getEquipList(item.type)
|
|
|
+ console.log(item.type);
|
|
|
+
|
|
|
+ this.activeName = this.pages[item.type][0].name
|
|
|
+ this.nowPage = this.pages[item.type][0].name
|
|
|
+ },
|
|
|
+ mouseOve(index,item){
|
|
|
+ this.equipStyleLeft = 80*index
|
|
|
+ },
|
|
|
+ mouseOut(index,item){
|
|
|
+ if(item.type!=this.currSelectType){
|
|
|
+ this.equipStyleLeft = 80*this.currSelectSite
|
|
|
+ }
|
|
|
+ },
|
|
|
+ iconFormat(equip_ip, item) {
|
|
|
+ switch (equip_ip + "") {
|
|
|
+ case "2":
|
|
|
+ item.icon = require("@/assets/images/home/mapView/scd.png");
|
|
|
+ break;
|
|
|
+ case "3":
|
|
|
+ item.icon = require("@/assets/images/home/mapView/cbd.png");
|
|
|
+ break;
|
|
|
+ case "4":
|
|
|
+ item.icon = require("@/assets/images/home/mapView/xyq.png");
|
|
|
+ break;
|
|
|
+ case "5":
|
|
|
+ item.icon = require("@/assets/images/home/mapView/qxz.png");
|
|
|
+ break;
|
|
|
+ case "6":
|
|
|
+ item.icon = require("@/assets/images/home/mapView/jk.png");
|
|
|
+ break;
|
|
|
+ case "7":
|
|
|
+ item.icon = require("@/assets/images/home/mapView/bzy.png");
|
|
|
+ break;
|
|
|
+ case "9":
|
|
|
+ item.icon = require("@/assets/images/home/mapView/tccb.png");
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getEquipList(type) {
|
|
|
+ this.componentMarker.position = []
|
|
|
+ if(this.infoWindow){
|
|
|
+ this.infoWindow.close()
|
|
|
+ }
|
|
|
+ let o = amapManager.getMap();
|
|
|
+ o.setZoom(4);
|
|
|
+ this.$axios({
|
|
|
+ method: "POST",
|
|
|
+ url: "/api/api_gateway?method=home.homes.equip_map_location",
|
|
|
+ data: this.qs.stringify({
|
|
|
+ equip_type: type,
|
|
|
+ })
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data.message == "") {
|
|
|
+ let data = res.data.data;
|
|
|
+ this.equipShow = false;
|
|
|
+ this.equips = data.map(item => {
|
|
|
+ this.iconFormat(item.device_type_id, item);
|
|
|
+ item.style = item.device_type_id
|
|
|
+ if(item.gps_type == 1){ //GPS
|
|
|
+ console.log(wgs84togcj02)
|
|
|
+ item.lnglat = wgs84togcj02(item.lng,item.lat)
|
|
|
+ }else{
|
|
|
+ // this.lnglatFormat(item);
|
|
|
+ }
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ if(this.massMarks){
|
|
|
+ this.massMarks.clear()
|
|
|
+ }
|
|
|
+ console.log(this.equips)
|
|
|
+ this.massMarks = new AMap.MassMarks(this.equips, {
|
|
|
+ zIndex: 199, // 海量点图层叠加的顺序
|
|
|
+ zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
|
|
|
+ style: this.equipStyleObject // 设置样式对象
|
|
|
+ });
|
|
|
+ this.massMarks.setMap(o)
|
|
|
+ var _this = this
|
|
|
+ this.massMarks.on('click',e =>{
|
|
|
+ this.equipMarkerClick(e.data)
|
|
|
+ // this.openInfo(e.data)
|
|
|
+ console.log(e.data)
|
|
|
+ })
|
|
|
+
|
|
|
+ // this.equipPoints = []
|
|
|
+ // this.equips.forEach((item) =>{
|
|
|
+ // this.equipPoints.push(new AMap.Marker({
|
|
|
+ // position: item.lnglat
|
|
|
+ // }))
|
|
|
+ // })
|
|
|
+ // this.$nextTick(()=>{
|
|
|
+ // o.setFitView(this.equipPoints)
|
|
|
+ // })
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.message);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ equipMarkerClick(item) {
|
|
|
+ this.equipShow = true; //图标上设备信息框
|
|
|
+ this.equipsVisible = true; //右侧设备弹框
|
|
|
+ this.detailsShow = item.device_type_id; //右侧弹框根据不同设备类型,显示设备信息
|
|
|
+ this.currEquip = item;
|
|
|
+ this.queryInfo.equip_id = item.device_id
|
|
|
+ this.queryInfo.d_id = item.d_id
|
|
|
+ this.queryInfo.type = item.device_type_id
|
|
|
+ this.queryInfo.model = item.device_model
|
|
|
+ this.sidebarComponents = "" //siderbar为空
|
|
|
+ },
|
|
|
+ //载玻片、培养液更换时间展示
|
|
|
+ setTimeDialogShow(data){
|
|
|
+ this.setTimeDialogVisible = true;
|
|
|
+ this.time.time01 = data.glass
|
|
|
+ this.time.time02 = data.cultivate
|
|
|
+ this.currbzyGlass = data.d_id
|
|
|
+ },
|
|
|
+ //载玻片、培养液更换时间配置提交
|
|
|
+ setTimeSubm() {
|
|
|
+ let glass_slide_time = parseInt(
|
|
|
+ new Date(this.time.time01).getTime() / 1000
|
|
|
+ );
|
|
|
+ let cultivate_time = parseInt(
|
|
|
+ new Date(this.time.time02).getTime() / 1000
|
|
|
+ );
|
|
|
+ this.$axios({
|
|
|
+ method: "POST",
|
|
|
+ url: "/api/api_gateway?method=device.device_manage.updata_spore_time",
|
|
|
+ data: this.qs.stringify({
|
|
|
+ device_type_id: 7,
|
|
|
+ d_id: this.currbzyGlass,
|
|
|
+ glass_slide_time,
|
|
|
+ cultivate_time,
|
|
|
+ }),
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.data.message == "") {
|
|
|
+ this.$message.success("修改成功!");
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.data.message);
|
|
|
+ }
|
|
|
+ this.setTimeDialogVisible = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //tabs每次切换只渲染一个界面
|
|
|
+ tabshandleClick(tab) {
|
|
|
+ this.nowPage = tab.name;
|
|
|
+
|
|
|
+ },
|
|
|
+ // 查看更多控制
|
|
|
+ lookmore(){
|
|
|
+ this.sidebarComponents = 'sidebar'
|
|
|
+ this.detailsShow=""
|
|
|
+ },
|
|
|
+ // 注销控制组件
|
|
|
+ sidebarClear(val){
|
|
|
+ this.sidebarComponents = ''
|
|
|
+ },
|
|
|
},
|
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
|
created() {},
|
|
|
//生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
- mounted() {},
|
|
|
+ mounted() {
|
|
|
+ // this.getEquipList('')
|
|
|
+ },
|
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|
|
beforeMount() {}, //生命周期 - 挂载之前
|
|
|
beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
@@ -144,4 +707,72 @@ export default {
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
}
|
|
|
+// tabs设备类型
|
|
|
+.equipTypebox{
|
|
|
+ position: absolute;
|
|
|
+ left: 20px;
|
|
|
+ top:30px;
|
|
|
+ // background: #fff;
|
|
|
+ line-height: 32px;
|
|
|
+ border-radius: 20px;
|
|
|
+ .equipTypeBody{
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ background: #262a31;
|
|
|
+ border-radius: 43px;
|
|
|
+ color: #fff;
|
|
|
+ .equipTypeList{
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ >div{
|
|
|
+ width: 80px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ >div.active{
|
|
|
+ // background: #0195ff;
|
|
|
+ // color:#eee;
|
|
|
+ }
|
|
|
+ >div:hover{
|
|
|
+ // color: #eee;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .equipHighLight{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ height: 32px;
|
|
|
+ width: 80px;
|
|
|
+ border-radius: 20px;
|
|
|
+ background: #0195ff;
|
|
|
+ z-index: 0;
|
|
|
+ transition: all 1s;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+// 设备数据样式
|
|
|
+.equipData{
|
|
|
+ padding-top: 10px;
|
|
|
+ position: relative;
|
|
|
+ .more{
|
|
|
+ position: absolute;
|
|
|
+ right: 5px;
|
|
|
+ top: 20px;
|
|
|
+ z-index: 9999;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .more:hover{
|
|
|
+ color: #0195ff;
|
|
|
+ }
|
|
|
+}
|
|
|
+// 弹框tabs样式覆盖
|
|
|
+/deep/.el-tabs__active-bar{
|
|
|
+ background-color: #0295ff;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|