|
|
@@ -0,0 +1,441 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-breadcrumb separator-class="el-icon-arrow-right">
|
|
|
+ <el-breadcrumb-item>设备管理</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item>设备列表</el-breadcrumb-item>
|
|
|
+ </el-breadcrumb>
|
|
|
+ <div class="search-box">
|
|
|
+ <div class="filter-box">
|
|
|
+ <el-select
|
|
|
+ size="small"
|
|
|
+ v-model="queryInfo.device_type_id"
|
|
|
+ placeholder="请选择设备类型"
|
|
|
+ @change="searchChange()"
|
|
|
+ >
|
|
|
+ <el-option label="全部" value="0"></el-option>
|
|
|
+ <el-option label="性诱测报" value="4"></el-option>
|
|
|
+ <el-option label="孢子仪" value="7"></el-option>
|
|
|
+ <el-option label="虫情测报" value="3"></el-option>
|
|
|
+ <el-option label="杀虫灯" value="2"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-input
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ @change="searchChange()"
|
|
|
+ placeholder="请输入设备ID"
|
|
|
+ v-model="queryInfo.f_id"
|
|
|
+ >
|
|
|
+ <i slot="suffix" class="el-input__icon el-icon-search"></i>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <el-date-picker
|
|
|
+ size="small"
|
|
|
+ @change="DateChange()"
|
|
|
+ v-model="timeRange"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ ></el-date-picker>
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col
|
|
|
+ :xs="24"
|
|
|
+ :sm="24"
|
|
|
+ :md="12"
|
|
|
+ :lg="6"
|
|
|
+ :xl="4"
|
|
|
+ v-for="item in dataList"
|
|
|
+ :key="item.id"
|
|
|
+ >
|
|
|
+ <el-card class="box-card pad0">
|
|
|
+ <div class="img-box">
|
|
|
+ <template v-if="item.equip_type == '2'">
|
|
|
+ <img src="@/assets/images/equipdistribute/scdIconOn.png" />
|
|
|
+ <p>杀虫灯</p>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.equip_type == '3'">
|
|
|
+ <img src="@/assets/images/equipdistribute/cbdIconOn.png" />
|
|
|
+ <p>测报灯</p>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.equip_type == '4'">
|
|
|
+ <img src="@/assets/images/equipdistribute/znxyOn.png" />
|
|
|
+ <p>智能性诱</p>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.equip_type == '5'">
|
|
|
+ <img src="@/assets/images/equipdistribute/hjjcIconOn.png" />
|
|
|
+ <p>环境监测</p>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.equip_type == '6'">
|
|
|
+ <img src="@/assets/images/equipdistribute/jkIconOn.png" />
|
|
|
+ <p>监控设备</p>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.equip_type == '7'">
|
|
|
+ <img src="@/assets/images/equipdistribute/bzyIconOn.png" />
|
|
|
+ <p>孢子仪</p>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.equip_type == '8'">
|
|
|
+ <img src="@/assets/images/equipdistribute/xyOn.png" />
|
|
|
+ <p>性诱设备</p>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.equip_type == 9">
|
|
|
+ <img src="@/assets/images/equipdistribute/tccbOn.png" />
|
|
|
+ <p>糖醋测报</p>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="detail">
|
|
|
+ <p>
|
|
|
+ 设备ID
|
|
|
+ <span>{{ item.equip_id }}</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 适配用户
|
|
|
+ <span>{{ item.equip_user || '无' }}</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 设备名称
|
|
|
+ <span>{{ item.equip_name || '无' }}</span>
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 设备添加时间
|
|
|
+ <span>{{ item.equip_add_time }}</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <span @click="modifyName(item.equip_id, item.equip_name)">
|
|
|
+ <i class="el-icon-edit-outline"></i> 修改名称
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <!-- 暂无数据 -->
|
|
|
+ <div class="expertDiagnosis_referral_units_not" v-if="dataList.length <= 0">
|
|
|
+ <img
|
|
|
+ src="@/assets/images/zanwu.png"
|
|
|
+ alt
|
|
|
+ class="expertDiagnosis_referral_units_notImg"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <el-pagination
|
|
|
+ v-if="dataList.length > 0"
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :page-size="12"
|
|
|
+ :total="totalNum"
|
|
|
+ @current-change="changePage"
|
|
|
+ ></el-pagination>
|
|
|
+ <!-- 添加定位弹框 -->
|
|
|
+ <el-dialog
|
|
|
+ class="map_dialog"
|
|
|
+ title="添加定位"
|
|
|
+ v-if="addLocationDialogVisible"
|
|
|
+ :visible.sync="addLocationDialogVisible"
|
|
|
+ width="800px"
|
|
|
+ @closed="addLocationDialogClosed"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ :inline="true"
|
|
|
+ :model="locationForm"
|
|
|
+ class="demo-form-inline"
|
|
|
+ size="mini"
|
|
|
+ >
|
|
|
+ <el-form-item label="经度">
|
|
|
+ <el-input clearable v-model="locationForm.lng"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="维度">
|
|
|
+ <el-input clearable v-model="locationForm.lat"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" size="mini" @click="locationSearch"
|
|
|
+ >定位</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入地区检索"
|
|
|
+ v-model="addr"
|
|
|
+ clearable
|
|
|
+ @change="addrChange()"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <baidu-map
|
|
|
+ class="Bmap"
|
|
|
+ :center="center"
|
|
|
+ :zoom="mapZoom"
|
|
|
+ :scroll-wheel-zoom="true"
|
|
|
+ @ready="handlerBMap"
|
|
|
+ @click="locationPoint"
|
|
|
+ >
|
|
|
+ <bm-marker :position="point" :dragging="true"></bm-marker>
|
|
|
+ </baidu-map>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="addLocationDialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="addLocationSubm">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ timeRange: '',
|
|
|
+ queryInfo: {
|
|
|
+ f_id: '',
|
|
|
+ page: 1,
|
|
|
+ device_type_id: '0',
|
|
|
+ start_time: '',
|
|
|
+ end_time: ''
|
|
|
+ },
|
|
|
+ dataList: [],
|
|
|
+ totalNum: 0,
|
|
|
+ addr: '',
|
|
|
+ locationForm: {
|
|
|
+ lat: '',
|
|
|
+ lng: ''
|
|
|
+ },
|
|
|
+ device_id: '',
|
|
|
+ mapZoom: 6,
|
|
|
+ point: { lng: '', lat: '' },
|
|
|
+ center: { lng: '', lat: '' },
|
|
|
+ addLocationDialogVisible: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ beforeMount() {},
|
|
|
+ methods: {
|
|
|
+ //获取设备列表
|
|
|
+ getList() {
|
|
|
+ this.$axios({
|
|
|
+ method: 'POST',
|
|
|
+ url: '/api/equiplist_filter',
|
|
|
+ data: this.qs.stringify({
|
|
|
+ f_type: this.queryInfo.device_type_id,
|
|
|
+ f_id: this.queryInfo.f_id,
|
|
|
+ f_tbegin: this.queryInfo.start_time,
|
|
|
+ f_tend: this.queryInfo.end_time,
|
|
|
+ page: this.queryInfo.page,
|
|
|
+ })
|
|
|
+ }).then((res) => {
|
|
|
+ this.dataList = res.data.dat
|
|
|
+ this.totalNum = res.data.nums
|
|
|
+ })
|
|
|
+ },
|
|
|
+ searchChange() {
|
|
|
+ this.queryInfo.page = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ DateChange(val) {
|
|
|
+ this.queryInfo.page = 1
|
|
|
+ if (this.timeRange) {
|
|
|
+ this.queryInfo.start_time = new Date(this.timeRange[0]).toLocaleDateString().replace(/\//g,'-');
|
|
|
+ this.queryInfo.end_time = new Date(this.timeRange[1]).toLocaleDateString().replace(/\//g,'-');
|
|
|
+ this.getList()
|
|
|
+ } else {
|
|
|
+ this.queryInfo.start_time = ''
|
|
|
+ this.queryInfo.end_time = ''
|
|
|
+ this.getList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //在地图中点击定位
|
|
|
+ locationPoint(e) {
|
|
|
+ let { point } = e
|
|
|
+ this.point = point
|
|
|
+ this.locationForm = point
|
|
|
+ this.map.clearOverlays()
|
|
|
+ this.map.addOverlay(new BMap.Marker(this.point))
|
|
|
+ },
|
|
|
+ addrChange() {
|
|
|
+ let local = new this.BMap.LocalSearch(this.map, {
|
|
|
+ renderOptions: { map: this.map, panel: 'r-result' }
|
|
|
+ })
|
|
|
+ local.search(this.addr)
|
|
|
+ },
|
|
|
+ // 修改设备名称
|
|
|
+ modifyName(id, device_name) {
|
|
|
+ let value = device_name
|
|
|
+ this.$prompt('', '修改名字', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ inputPlaceholder: device_name
|
|
|
+ })
|
|
|
+ .then(({ value }) => {
|
|
|
+ if (value) {
|
|
|
+ this.$axios({
|
|
|
+ method: 'POST',
|
|
|
+ url: '/api/equiplist',
|
|
|
+ data: this.qs.stringify({
|
|
|
+ req: 'rename',
|
|
|
+ ename: value,
|
|
|
+ eid: id
|
|
|
+ })
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.data == 0) {
|
|
|
+ this.getList()
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '修改成功'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '内容不能为空'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '取消输入'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //通过经纬度搜索定位
|
|
|
+ locationSearch() {
|
|
|
+ if (this.locationForm.lat && this.locationForm.lng) {
|
|
|
+ this.point = this.locationForm
|
|
|
+ this.map.clearOverlays()
|
|
|
+ this.map.addOverlay(new BMap.Marker(this.point))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handlerBMap({ BMap, map }) {
|
|
|
+ this.BMap = BMap
|
|
|
+ this.map = map
|
|
|
+ let point = new BMap.Point(this.point.lng, this.point.lat)
|
|
|
+ map.centerAndZoom(point, 15)
|
|
|
+ },
|
|
|
+ //点击“添加定位”按钮
|
|
|
+ addPosition(device_id, lng, lat) {
|
|
|
+ this.device_id = device_id
|
|
|
+ this.point = { lng, lat }
|
|
|
+ this.addLocationDialogVisible = true
|
|
|
+ },
|
|
|
+ changePage(val) {
|
|
|
+ console.log(val)
|
|
|
+ this.queryInfo.page = val
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ //关闭定位弹框时调用
|
|
|
+ addLocationDialogClosed() {
|
|
|
+ this.locationForm = { lat: '', lng: '' }
|
|
|
+ this.point = { lng: '', lat: '' }
|
|
|
+ this.center = { lng: 113.271429, lat: 23.135336 }
|
|
|
+
|
|
|
+ // this.map.clearOverlays();
|
|
|
+ this.map = null
|
|
|
+ this.BMap = null
|
|
|
+ },
|
|
|
+ //选择定位点后，提交
|
|
|
+ addLocationSubm() {
|
|
|
+ console.log(this.point)
|
|
|
+ this.$axios({
|
|
|
+ method: 'POST',
|
|
|
+ url: '/api/api_gateway?method=forecast.worm_lamp.revise_device',
|
|
|
+ data: this.qs.stringify({
|
|
|
+ device_id: this.device_id,
|
|
|
+ lat: this.point.lat,
|
|
|
+ lng: this.point.lng
|
|
|
+ })
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.data.message == '') {
|
|
|
+ this.getList()
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '定位成功'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: '定位失败'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.addLocationDialogVisible = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang='less' scoped>
|
|
|
+.search-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-left;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .filter-box > div {
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+ .el-input {
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+ .el-date-editor--daterange {
|
|
|
+ width: 222px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-card.selected {
|
|
|
+ border: 1px solid #14a478;
|
|
|
+}
|
|
|
+.el-card {
|
|
|
+ .img-box {
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 1px solid #e1e1e1;
|
|
|
+ padding: 20px 0;
|
|
|
+ img {
|
|
|
+ height: 55px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 800;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .detail {
|
|
|
+ border-bottom: 1px solid #e1e1e1;
|
|
|
+ padding: 10px 0;
|
|
|
+ padding: 0 20px;
|
|
|
+ p {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 34px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ display: flex;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #666;
|
|
|
+ line-height: 50px;
|
|
|
+ span {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ i {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span:first-child {
|
|
|
+ border-right: 1px solid #e1e1e1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.Bmap {
|
|
|
+ width: 100%;
|
|
|
+ height: 400px;
|
|
|
+}
|
|
|
+.map_dialog /deep/ .el-dialog__body {
|
|
|
+ padding: 20px 20px 0 20px;
|
|
|
+}
|
|
|
+// 暂无数据
|
|
|
+.expertDiagnosis_referral_units_not {
|
|
|
+ width: 272px;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+</style>
|
