|
|
@@ -29,6 +29,20 @@
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
<el-select
|
|
|
+ v-model="point_type"
|
|
|
+ placeholder="请选择监测点类型"
|
|
|
+ size="mini"
|
|
|
+ @change="handlePointTypeChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in pointTypeOptions"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select
|
|
|
v-model="inoffvalue"
|
|
|
placeholder="请选择所在监测点"
|
|
|
size="mini"
|
|
|
@@ -56,7 +70,12 @@
|
|
|
>
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
- <el-date-picker
|
|
|
+ <DateSearch
|
|
|
+ ref="timeCirculation"
|
|
|
+ @dateChange="dateChange"
|
|
|
+ @timeScreen="timeScreen"
|
|
|
+ />
|
|
|
+ <!-- <el-date-picker
|
|
|
v-model="timevalue"
|
|
|
type="daterange"
|
|
|
range-separator="至"
|
|
|
@@ -66,7 +85,7 @@
|
|
|
size="mini"
|
|
|
:editable="false"
|
|
|
>
|
|
|
- </el-date-picker>
|
|
|
+ </el-date-picker> -->
|
|
|
<el-button type="info" @click="search" size="mini">搜索</el-button>
|
|
|
<el-button @click="reset" size="mini">重置</el-button>
|
|
|
<el-button type="warning" @click="dialogVisible = true" size="mini"
|
|
|
@@ -86,7 +105,7 @@
|
|
|
height: '500px',
|
|
|
width: width,
|
|
|
transition: 'all 1s ease',
|
|
|
- borderRadius: '10px',
|
|
|
+ borderRadius: '10px'
|
|
|
}"
|
|
|
id="mychartpie"
|
|
|
ref="mychartpie"
|
|
|
@@ -147,63 +166,69 @@
|
|
|
|
|
|
<script>
|
|
|
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
-import * as echarts from "echarts";
|
|
|
-import { map, time } from "highcharts";
|
|
|
+import * as echarts from 'echarts';
|
|
|
+import { pointTypeOptions } from '@/util/constants';
|
|
|
+import { map, time } from 'highcharts';
|
|
|
+import DateSearch from '@/components/DateSearch';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
- components: {},
|
|
|
+ components: { DateSearch },
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
var checklnglat = (rule, value, callback) => {
|
|
|
if (isNaN(value)) {
|
|
|
- callback(new Error("请输入数字"));
|
|
|
+ callback(new Error('请输入数字'));
|
|
|
} else {
|
|
|
callback();
|
|
|
}
|
|
|
};
|
|
|
return {
|
|
|
pietf: true,
|
|
|
- width: "500px",
|
|
|
- wornvalue: "", //有害生物名称 选择
|
|
|
+ width: '500px',
|
|
|
+ wornvalue: '', //有害生物名称 选择
|
|
|
wornoptions: [], //有害生物列表
|
|
|
- inoffvalue: "", //监测点 选择
|
|
|
+ inoffvalue: '', //监测点 选择
|
|
|
inoffoptions: [], //监测点列表
|
|
|
- versionsvalue2: "", //隶属组织选择
|
|
|
+ versionsvalue2: '', //隶属组织选择
|
|
|
versionsoptions2: [], //隶属组织列表
|
|
|
- timevalue: "",
|
|
|
- start_time: "",
|
|
|
- end_time: "",
|
|
|
+ timevalue: '',
|
|
|
+ start_time: '',
|
|
|
+ end_time: '',
|
|
|
loading: false,
|
|
|
dialogVisible: false,
|
|
|
ruleForm: {
|
|
|
- threshold: "100", //阈值
|
|
|
+ threshold: '100' //阈值
|
|
|
},
|
|
|
rules: {
|
|
|
name: [
|
|
|
- { required: true, message: "请输入值", trigger: "blur" },
|
|
|
- { validator: checklnglat, trigger: "blur" },
|
|
|
- ],
|
|
|
+ { required: true, message: '请输入值', trigger: 'blur' },
|
|
|
+ { validator: checklnglat, trigger: 'blur' }
|
|
|
+ ]
|
|
|
},
|
|
|
pestboxloading: true,
|
|
|
center: [114.052758, 22.545817],
|
|
|
- measure_index:0,
|
|
|
- mouseTool:null,
|
|
|
+ measure_index: 0,
|
|
|
+ mouseTool: null,
|
|
|
arealistmouse: {},
|
|
|
+ point_type: '1', //监测点类型 1 表示 林木害虫监测点。2 表示 实蝇监测点
|
|
|
+ pointTypeOptions
|
|
|
};
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
computed: {},
|
|
|
//监控data中的数据变化
|
|
|
watch: {
|
|
|
- pietf: function (val) {
|
|
|
+ pietf: function(val) {
|
|
|
// console.log(this.width)
|
|
|
if (val) {
|
|
|
- this.width = "500px";
|
|
|
+ this.width = '500px';
|
|
|
} else {
|
|
|
- this.width = "0";
|
|
|
+ this.width = '0';
|
|
|
}
|
|
|
// console.log(this.width)
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
@@ -214,48 +239,48 @@ export default {
|
|
|
}
|
|
|
lnglat = lnglat.toString();
|
|
|
var strDu, strFen, strMiao;
|
|
|
- var duindex = lnglat.indexOf("°"); //字符度的下标
|
|
|
- var fenindex = lnglat.indexOf("′"); //字符分的下标
|
|
|
- var miaoindex = lnglat.indexOf("″"); //字符秒的下标
|
|
|
+ var duindex = lnglat.indexOf('°'); //字符度的下标
|
|
|
+ var fenindex = lnglat.indexOf('′'); //字符分的下标
|
|
|
+ var miaoindex = lnglat.indexOf('″'); //字符秒的下标
|
|
|
strDu = lnglat.slice(0, duindex);
|
|
|
strFen = lnglat.slice(duindex + 1, fenindex);
|
|
|
strMiao = lnglat.slice(fenindex + 1, miaoindex);
|
|
|
// len = len > 6 || typeof len == "undefined" ? 6 : len; //精确到小数点后最多六位
|
|
|
strDu =
|
|
|
- typeof strDu == "undefined" || strDu == "" ? 0 : parseFloat(strDu);
|
|
|
+ typeof strDu == 'undefined' || strDu == '' ? 0 : parseFloat(strDu);
|
|
|
strFen =
|
|
|
- typeof strFen == "undefined" || strFen == ""
|
|
|
+ typeof strFen == 'undefined' || strFen == ''
|
|
|
? 0
|
|
|
: parseFloat(strFen) / 60;
|
|
|
strMiao =
|
|
|
- typeof strMiao == "undefined" || strMiao == ""
|
|
|
+ typeof strMiao == 'undefined' || strMiao == ''
|
|
|
? 0
|
|
|
: parseFloat(strMiao) / 3600;
|
|
|
var digital = strDu + strFen + strMiao;
|
|
|
if (digital == 0) {
|
|
|
- return "";
|
|
|
+ return '';
|
|
|
} else {
|
|
|
return digital.toFixed(6);
|
|
|
}
|
|
|
},
|
|
|
initmap() {
|
|
|
- var map = new AMap.Map(document.getElementById("mapContainer2"), {
|
|
|
+ var map = new AMap.Map(document.getElementById('mapContainer2'), {
|
|
|
center: this.center,
|
|
|
resizeEnable: true,
|
|
|
zoom: 11,
|
|
|
- lang: "en",
|
|
|
- mapStyle: "amap://styles/fresh",
|
|
|
- layers: [],
|
|
|
+ lang: 'en',
|
|
|
+ mapStyle: 'amap://styles/fresh',
|
|
|
+ layers: []
|
|
|
});
|
|
|
//new AMap.TileLayer.Satellite(),new AMap.TileLayer.RoadNet()
|
|
|
- AMap.plugin(["AMap.ToolBar", "AMap.Geocoder"], () => {
|
|
|
+ AMap.plugin(['AMap.ToolBar', 'AMap.Geocoder'], () => {
|
|
|
map.addControl(new AMap.ToolBar());
|
|
|
this.geocoder = new AMap.Geocoder({
|
|
|
- city: "全国",
|
|
|
- radius: 1000,
|
|
|
+ city: '全国',
|
|
|
+ radius: 1000
|
|
|
});
|
|
|
});
|
|
|
- AMap.plugin(["AMap.MouseTool"], () => {
|
|
|
+ AMap.plugin(['AMap.MouseTool'], () => {
|
|
|
this.mouseTool = new AMap.MouseTool(map);
|
|
|
this.mouseTool.on('draw', this.drawend());
|
|
|
});
|
|
|
@@ -267,33 +292,33 @@ export default {
|
|
|
var placeHolderStyle = {
|
|
|
normal: {
|
|
|
label: {
|
|
|
- show: false,
|
|
|
+ show: false
|
|
|
},
|
|
|
labelLine: {
|
|
|
- show: false,
|
|
|
+ show: false
|
|
|
},
|
|
|
- color: "rgba(0, 0, 0, 0)",
|
|
|
- borderColor: "rgba(0, 0, 0, 0)",
|
|
|
- borderWidth: 0,
|
|
|
- },
|
|
|
+ color: 'rgba(0, 0, 0, 0)',
|
|
|
+ borderColor: 'rgba(0, 0, 0, 0)',
|
|
|
+ borderWidth: 0
|
|
|
+ }
|
|
|
};
|
|
|
var data1 = [];
|
|
|
var data2 = [];
|
|
|
var colorIn = [
|
|
|
- "rgb(33, 166, 161)",
|
|
|
- "rgb(102,113,209)",
|
|
|
- "rgb(230,144,78)",
|
|
|
- "rgb(38,185,211)",
|
|
|
- "rgb(82,125,12)",
|
|
|
- "rgb(35,70,209)",
|
|
|
+ 'rgb(33, 166, 161)',
|
|
|
+ 'rgb(102,113,209)',
|
|
|
+ 'rgb(230,144,78)',
|
|
|
+ 'rgb(38,185,211)',
|
|
|
+ 'rgb(82,125,12)',
|
|
|
+ 'rgb(35,70,209)'
|
|
|
];
|
|
|
var colorOut = [
|
|
|
- "rgba(33, 166, 161, 0.5)",
|
|
|
- "rgba(102,113,209, 0.5)",
|
|
|
- "rgba(230,144,78, 0.5)",
|
|
|
- "rgba(38,185,211, 0.5)",
|
|
|
- "rgb(82,125,12,0.5)",
|
|
|
- "rgb(35,70,209,0.5)",
|
|
|
+ 'rgba(33, 166, 161, 0.5)',
|
|
|
+ 'rgba(102,113,209, 0.5)',
|
|
|
+ 'rgba(230,144,78, 0.5)',
|
|
|
+ 'rgba(38,185,211, 0.5)',
|
|
|
+ 'rgb(82,125,12,0.5)',
|
|
|
+ 'rgb(35,70,209,0.5)'
|
|
|
];
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
data1.push({
|
|
|
@@ -302,9 +327,9 @@ export default {
|
|
|
name: data[i].name,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: colorOut[i],
|
|
|
- },
|
|
|
- },
|
|
|
+ color: colorOut[i]
|
|
|
+ }
|
|
|
+ }
|
|
|
});
|
|
|
data2.push({
|
|
|
data: data[i].value,
|
|
|
@@ -312,9 +337,9 @@ export default {
|
|
|
name: data[i].name,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: colorIn[i],
|
|
|
- },
|
|
|
- },
|
|
|
+ color: colorIn[i]
|
|
|
+ }
|
|
|
+ }
|
|
|
});
|
|
|
}
|
|
|
var dataArr = [];
|
|
|
@@ -325,11 +350,11 @@ export default {
|
|
|
value: 25,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: "#2ac9e1",
|
|
|
+ color: '#2ac9e1',
|
|
|
borderWidth: 0,
|
|
|
- borderColor: "rgba(0,0,0,0)",
|
|
|
- },
|
|
|
- },
|
|
|
+ borderColor: 'rgba(0,0,0,0)'
|
|
|
+ }
|
|
|
+ }
|
|
|
});
|
|
|
} else {
|
|
|
dataArr.push({
|
|
|
@@ -337,143 +362,144 @@ export default {
|
|
|
value: 20,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- color: "rgba(0,0,0,0)",
|
|
|
+ color: 'rgba(0,0,0,0)',
|
|
|
borderWidth: 0,
|
|
|
- borderColor: "rgba(0,0,0,0)",
|
|
|
- },
|
|
|
- },
|
|
|
+ borderColor: 'rgba(0,0,0,0)'
|
|
|
+ }
|
|
|
+ }
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
var option = {
|
|
|
title: {
|
|
|
- text: "有害生物占比",
|
|
|
- subtext: "",
|
|
|
- sublink: "",
|
|
|
- left: "center",
|
|
|
+ text: '有害生物占比',
|
|
|
+ subtext: '',
|
|
|
+ sublink: '',
|
|
|
+ left: 'center',
|
|
|
textStyle: {
|
|
|
- color: "#222222",
|
|
|
+ color: '#222222'
|
|
|
},
|
|
|
- top: "5%",
|
|
|
+ top: '5%'
|
|
|
},
|
|
|
- backgroundColor: "#ffffff",
|
|
|
+ backgroundColor: '#ffffff',
|
|
|
tooltip: {
|
|
|
- title: "详情",
|
|
|
- trigger: "item",
|
|
|
- formatter: "{a} <br/>{b}: {c} ({d}%)",
|
|
|
+ title: '详情',
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
|
},
|
|
|
legend: {
|
|
|
- orient: "horizontal",
|
|
|
- top: "90%",
|
|
|
+ orient: 'horizontal',
|
|
|
+ top: '90%',
|
|
|
itemWidth: 10,
|
|
|
itemHeight: 10,
|
|
|
- x: "center",
|
|
|
+ x: 'center',
|
|
|
textStyle: {
|
|
|
- color: "#222222",
|
|
|
- fontSize: 12,
|
|
|
+ color: '#222222',
|
|
|
+ fontSize: 12
|
|
|
},
|
|
|
show: true,
|
|
|
// data: data,
|
|
|
- type: "scroll", //分页类型
|
|
|
- data: (function () {
|
|
|
+ type: 'scroll', //分页类型
|
|
|
+ data: (function() {
|
|
|
var list = [];
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
list.push(data[i]);
|
|
|
}
|
|
|
return list;
|
|
|
})(),
|
|
|
- pageIconColor: "#ff781f", //翻页箭头颜色
|
|
|
+ pageIconColor: '#ff781f', //翻页箭头颜色
|
|
|
pageTextStyle: {
|
|
|
- color: "#999", //翻页数字颜色
|
|
|
+ color: '#999' //翻页数字颜色
|
|
|
}, //翻页数字设置
|
|
|
pageIconSize: 13,
|
|
|
itemHeight: 10,
|
|
|
- itemWidth: 15,
|
|
|
+ itemWidth: 15
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- type: "pie",
|
|
|
+ type: 'pie',
|
|
|
zlevel: 3,
|
|
|
silent: true,
|
|
|
// center: ['50%', '40%'],
|
|
|
- radius: ["43%", "45%"],
|
|
|
+ radius: ['43%', '45%'],
|
|
|
label: {
|
|
|
normal: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
+ show: false
|
|
|
+ }
|
|
|
},
|
|
|
labelLine: {
|
|
|
normal: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
+ show: false
|
|
|
+ }
|
|
|
},
|
|
|
- data: dataArr,
|
|
|
+ data: dataArr
|
|
|
},
|
|
|
{
|
|
|
- name: "详情",
|
|
|
- type: "pie",
|
|
|
- selectedMode: "single",
|
|
|
- radius: [0, "40%"],
|
|
|
+ name: '详情',
|
|
|
+ type: 'pie',
|
|
|
+ selectedMode: 'single',
|
|
|
+ radius: [0, '40%'],
|
|
|
label: {
|
|
|
- formatter: "",
|
|
|
- position: "inner",
|
|
|
+ formatter: '',
|
|
|
+ position: 'inner'
|
|
|
},
|
|
|
- data: data2,
|
|
|
+ data: data2
|
|
|
},
|
|
|
{
|
|
|
- name: "详情",
|
|
|
- type: "pie",
|
|
|
- radius: ["48%", "50%"],
|
|
|
+ name: '详情',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['48%', '50%'],
|
|
|
labelLine: {
|
|
|
normal: {
|
|
|
length: 10,
|
|
|
- length2: 14,
|
|
|
- },
|
|
|
+ length2: 14
|
|
|
+ }
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
- position: "outer",
|
|
|
- alignTo: "labelLine",
|
|
|
+ position: 'outer',
|
|
|
+ alignTo: 'labelLine',
|
|
|
// ·圆点
|
|
|
- backgroundColor: "auto",
|
|
|
+ backgroundColor: 'auto',
|
|
|
height: 0,
|
|
|
width: 0,
|
|
|
lineHeight: 0,
|
|
|
distanceToLabelLine: 0,
|
|
|
borderRadius: 2.5,
|
|
|
padding: [2.5, -2.5, 2.5, -2.5],
|
|
|
- formatter: "{a|{b} }",
|
|
|
+ formatter: '{a|{b} }',
|
|
|
rich: {
|
|
|
a: {
|
|
|
padding: [0, 0, 0, 10],
|
|
|
- color: "#151515",
|
|
|
- fontSize: 14,
|
|
|
+ color: '#151515',
|
|
|
+ fontSize: 14
|
|
|
},
|
|
|
b: {
|
|
|
padding: [0, 10, 0, 0],
|
|
|
- fontSize: 14,
|
|
|
- },
|
|
|
- },
|
|
|
+ fontSize: 14
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- data: data1,
|
|
|
- },
|
|
|
- ],
|
|
|
+ data: data1
|
|
|
+ }
|
|
|
+ ]
|
|
|
};
|
|
|
- echarts.init(document.getElementById("mychartpie")).setOption(option);
|
|
|
+ echarts.init(document.getElementById('mychartpie')).setOption(option);
|
|
|
},
|
|
|
getwornlist() {
|
|
|
this.loading = true;
|
|
|
this.$axios({
|
|
|
- method: "POST",
|
|
|
- url: "/api/api_gateway?method=monitor_manage.home_map.pest_distribute_new",
|
|
|
+ method: 'POST',
|
|
|
+ url:
|
|
|
+ '/api/api_gateway?method=monitor_manage.home_map.pest_distribute_new',
|
|
|
data: this.qs.stringify({
|
|
|
pest_name: this.wornvalue, // 非必传(string) 有害生物名称 搜索项
|
|
|
point_name: this.inoffvalue, // 非必传(string) 设备所属监测点 搜索项
|
|
|
org_name: this.versionsvalue2, // 非必传(string) 设备所属组织 搜索项
|
|
|
start_time: this.start_time, // 非必传(string) 开始时间 搜索项 2022-01-20
|
|
|
- end_time: this.end_time, // 非必传(string) 结束时间 搜索项 2022-01-23
|
|
|
- }),
|
|
|
- }).then((res) => {
|
|
|
+ end_time: this.end_time // 非必传(string) 结束时间 搜索项 2022-01-23
|
|
|
+ })
|
|
|
+ }).then(res => {
|
|
|
// console.log(res.data.data);
|
|
|
this.map.clearMap();
|
|
|
this.mouseTool.close(true);
|
|
|
@@ -484,7 +510,7 @@ export default {
|
|
|
for (var i = 0; i < pest_count.length; i++) {
|
|
|
var obj = {
|
|
|
value: pest_count[i].sum,
|
|
|
- name: pest_count[i].pest_name,
|
|
|
+ name: pest_count[i].pest_name
|
|
|
};
|
|
|
arr.push(obj);
|
|
|
}
|
|
|
@@ -495,11 +521,11 @@ export default {
|
|
|
device_id: resdata.huizhou[i].device_id,
|
|
|
pest_data: resdata.huizhou[i].pest_data,
|
|
|
pest_total: resdata.huizhou[i].pest_total,
|
|
|
- name: "北京",
|
|
|
+ name: '北京',
|
|
|
center: [
|
|
|
this.ToDigital(resdata.huizhou[i].lng),
|
|
|
- this.ToDigital(resdata.huizhou[i].lat),
|
|
|
- ],
|
|
|
+ this.ToDigital(resdata.huizhou[i].lat)
|
|
|
+ ]
|
|
|
};
|
|
|
capitals.push(obj);
|
|
|
}
|
|
|
@@ -512,8 +538,8 @@ export default {
|
|
|
pest_total: resdata.shenzhen[i].pest_total,
|
|
|
center: [
|
|
|
this.ToDigital(resdata.shenzhen[i].lng),
|
|
|
- this.ToDigital(resdata.shenzhen[i].lat),
|
|
|
- ],
|
|
|
+ this.ToDigital(resdata.shenzhen[i].lat)
|
|
|
+ ]
|
|
|
};
|
|
|
capitals.push(obj);
|
|
|
}
|
|
|
@@ -526,8 +552,8 @@ export default {
|
|
|
pest_total: resdata.shanwei[i].pest_total,
|
|
|
center: [
|
|
|
this.ToDigital(resdata.shanwei[i].lng),
|
|
|
- this.ToDigital(resdata.shanwei[i].lat),
|
|
|
- ],
|
|
|
+ this.ToDigital(resdata.shanwei[i].lat)
|
|
|
+ ]
|
|
|
};
|
|
|
capitals.push(obj);
|
|
|
}
|
|
|
@@ -540,17 +566,17 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
for (var i = 0; i < capitals.length; i += 1) {
|
|
|
- var color = "";
|
|
|
+ var color = '';
|
|
|
if (capitals[i].pest_total > Math.floor(maxnum * 0.8)) {
|
|
|
- color = "#ff0202";
|
|
|
+ color = '#ff0202';
|
|
|
} else if (capitals[i].pest_total > Math.floor(maxnum * 0.6)) {
|
|
|
- color = "#ff4902";
|
|
|
+ color = '#ff4902';
|
|
|
} else if (capitals[i].pest_total > Math.floor(maxnum * 0.4)) {
|
|
|
- color = "#ffe402";
|
|
|
+ color = '#ffe402';
|
|
|
} else if (capitals[i].pest_total > Math.floor(maxnum * 0.2)) {
|
|
|
- color = "#ff00ba";
|
|
|
+ color = '#ff00ba';
|
|
|
} else {
|
|
|
- color = "#0cff00";
|
|
|
+ color = '#0cff00';
|
|
|
}
|
|
|
var center = capitals[i].center;
|
|
|
var device_id = capitals[i].device_id;
|
|
|
@@ -562,18 +588,18 @@ export default {
|
|
|
pest_data: pest_data,
|
|
|
pest_total: pest_total,
|
|
|
radius: 8, //3D视图下，CircleMarker半径不要超过64px
|
|
|
- strokeColor: "white",
|
|
|
+ strokeColor: 'white',
|
|
|
strokeWeight: 2,
|
|
|
strokeOpacity: 0.5,
|
|
|
fillColor: color,
|
|
|
fillOpacity: 0.8,
|
|
|
zIndex: 10,
|
|
|
bubble: true,
|
|
|
- cursor: "pointer",
|
|
|
- clickable: true,
|
|
|
+ cursor: 'pointer',
|
|
|
+ clickable: true
|
|
|
});
|
|
|
circleMarker.setMap(this.map);
|
|
|
- circleMarker.on("click", (e) => {
|
|
|
+ circleMarker.on('click', e => {
|
|
|
// console.log(e.target);
|
|
|
this.openInfo(e.target._opts);
|
|
|
});
|
|
|
@@ -599,23 +625,23 @@ export default {
|
|
|
info.device_id +
|
|
|
`</p>` +
|
|
|
str +
|
|
|
- `</div>`, //使用默认信息窗体框样式，显示信息内容
|
|
|
+ `</div>` //使用默认信息窗体框样式，显示信息内容
|
|
|
});
|
|
|
|
|
|
infoWindow.open(this.map, [info.center.lng, info.center.lat]);
|
|
|
},
|
|
|
getwornlistflex() {
|
|
|
this.$axios({
|
|
|
- method: "POST",
|
|
|
- url: "/api/api_gateway?method=monitor_manage.home_map.pest_name_list",
|
|
|
- }).then((res) => {
|
|
|
+ method: 'POST',
|
|
|
+ url: '/api/api_gateway?method=monitor_manage.home_map.pest_name_list'
|
|
|
+ }).then(res => {
|
|
|
// console.log(res.data.data);
|
|
|
this.wornoptions = [];
|
|
|
var pest_list = res.data.data;
|
|
|
for (var i = 0; i < pest_list.length; i++) {
|
|
|
var obj2 = {
|
|
|
point_id: pest_list[i].pest_name,
|
|
|
- point_name: pest_list[i].pest_name,
|
|
|
+ point_name: pest_list[i].pest_name
|
|
|
};
|
|
|
this.wornoptions.push(obj2);
|
|
|
}
|
|
|
@@ -626,37 +652,49 @@ export default {
|
|
|
var years = times.getFullYear();
|
|
|
var month = times.getMonth() + 1;
|
|
|
var date = times.getDate();
|
|
|
- return years + "-" + month + "-" + date;
|
|
|
+ return years + '-' + month + '-' + date;
|
|
|
},
|
|
|
oickchange(e) {
|
|
|
if (e) {
|
|
|
this.start_time = this.tabtime(e[0]);
|
|
|
this.end_time = this.tabtime(e[1]);
|
|
|
} else {
|
|
|
- this.start_time = "";
|
|
|
- this.end_time = "";
|
|
|
+ this.start_time = '';
|
|
|
+ this.end_time = '';
|
|
|
}
|
|
|
},
|
|
|
search() {
|
|
|
this.getwornlist();
|
|
|
},
|
|
|
reset() {
|
|
|
- this.wornvalue = "";
|
|
|
- this.inoffvalue = "";
|
|
|
- this.versionsvalue2 = "";
|
|
|
- this.timevalue = "";
|
|
|
+ this.wornvalue = '';
|
|
|
+ this.inoffvalue = '';
|
|
|
+ this.versionsvalue2 = '';
|
|
|
+ this.timevalue = '';
|
|
|
+ this.start_time = '';
|
|
|
+ this.end_time = '';
|
|
|
+ this.$refs.timeCirculation.timeBtnClick(1);
|
|
|
this.getwornlist();
|
|
|
},
|
|
|
+ handlePointTypeChange() {
|
|
|
+ this.inoffvalue = '';
|
|
|
+ this.getmon2();
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
getmon2() {
|
|
|
this.$axios({
|
|
|
- method: "POST",
|
|
|
- url: "/api/api_gateway?method=monitor_manage.trap_manage.pest_trap_org",
|
|
|
- }).then((res) => {
|
|
|
+ method: 'POST',
|
|
|
+ url: '/api/api_gateway?method=monitor_manage.trap_manage.pest_trap_org',
|
|
|
+ data: this.qs.stringify({
|
|
|
+ point_type: this.point_type,
|
|
|
+ page_item: '1000000'
|
|
|
+ })
|
|
|
+ }).then(res => {
|
|
|
// console.log(res.data.data);
|
|
|
this.versionsoptions2 = [];
|
|
|
var org_list = res.data.data.org_list;
|
|
|
for (var i = 0; i < org_list.length; i++) {
|
|
|
- if (org_list[i].org_name != "") {
|
|
|
+ if (org_list[i].org_name != '') {
|
|
|
this.versionsoptions2.push(org_list[i]);
|
|
|
}
|
|
|
}
|
|
|
@@ -666,41 +704,42 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
submitForm(formName) {
|
|
|
- this.$refs[formName].validate((valid) => {
|
|
|
+ this.$refs[formName].validate(valid => {
|
|
|
if (valid) {
|
|
|
this.$axios({
|
|
|
- method: "POST",
|
|
|
- url: "/api/api_gateway?method=monitor_manage.home_map.pest_distribute_threshold",
|
|
|
+ method: 'POST',
|
|
|
+ url:
|
|
|
+ '/api/api_gateway?method=monitor_manage.home_map.pest_distribute_threshold',
|
|
|
data: this.qs.stringify({
|
|
|
- threshold: this.ruleForm.threshold,
|
|
|
- }),
|
|
|
- }).then((res) => {
|
|
|
+ threshold: this.ruleForm.threshold
|
|
|
+ })
|
|
|
+ }).then(res => {
|
|
|
if (res.data.data) {
|
|
|
this.dialogVisible = false;
|
|
|
- if (document.getElementsByClassName("el-message").length == 0) {
|
|
|
+ if (document.getElementsByClassName('el-message').length == 0) {
|
|
|
this.$message({
|
|
|
showClose: true,
|
|
|
- message: "设置成功",
|
|
|
- type: "success",
|
|
|
+ message: '设置成功',
|
|
|
+ type: 'success'
|
|
|
});
|
|
|
}
|
|
|
this.getwornlist();
|
|
|
} else {
|
|
|
- if (document.getElementsByClassName("el-message").length == 0) {
|
|
|
+ if (document.getElementsByClassName('el-message').length == 0) {
|
|
|
this.$message({
|
|
|
showClose: true,
|
|
|
- message: "设置失败",
|
|
|
- type: "success",
|
|
|
+ message: '设置失败',
|
|
|
+ type: 'success'
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
} else {
|
|
|
- if (document.getElementsByClassName("el-message").length == 0) {
|
|
|
+ if (document.getElementsByClassName('el-message').length == 0) {
|
|
|
this.$message({
|
|
|
showClose: true,
|
|
|
- message: "设置失败" + res.data.message,
|
|
|
- type: "warning",
|
|
|
+ message: '设置失败' + res.data.message,
|
|
|
+ type: 'warning'
|
|
|
});
|
|
|
}
|
|
|
// return false;
|
|
|
@@ -714,12 +753,12 @@ export default {
|
|
|
//距离测量
|
|
|
measure_distance() {
|
|
|
this.measure_index = 1;
|
|
|
- this.draw("rule");
|
|
|
- window.addEventListener("dblclick", () => {
|
|
|
+ this.draw('rule');
|
|
|
+ window.addEventListener('dblclick', () => {
|
|
|
this.measure_index = 0;
|
|
|
this.mouseTool.close();
|
|
|
});
|
|
|
- window.addEventListener("contextmenu", () => {
|
|
|
+ window.addEventListener('contextmenu', () => {
|
|
|
this.measure_index = 0;
|
|
|
this.mouseTool.close();
|
|
|
});
|
|
|
@@ -727,12 +766,12 @@ export default {
|
|
|
//面积测量
|
|
|
measure_area() {
|
|
|
this.measure_index = 2;
|
|
|
- this.draw("measureArea");
|
|
|
- window.addEventListener("dblclick", () => {
|
|
|
+ this.draw('measureArea');
|
|
|
+ window.addEventListener('dblclick', () => {
|
|
|
this.measure_index = 0;
|
|
|
this.mouseTool.close();
|
|
|
});
|
|
|
- window.addEventListener("contextmenu", () => {
|
|
|
+ window.addEventListener('contextmenu', () => {
|
|
|
this.measure_index = 0;
|
|
|
this.mouseTool.close();
|
|
|
});
|
|
|
@@ -746,47 +785,47 @@ export default {
|
|
|
// this.mouseTool.close(true);
|
|
|
var mouseTool = this.mouseTool;
|
|
|
switch (type) {
|
|
|
- case "rule": {
|
|
|
+ case 'rule': {
|
|
|
mouseTool.rule({
|
|
|
startMarkerOptions: {
|
|
|
//可缺省
|
|
|
icon: new AMap.Icon({
|
|
|
size: new AMap.Size(19, 31), //图标大小
|
|
|
imageSize: new AMap.Size(19, 31),
|
|
|
- image: "//webapi.amap.com/theme/v1.3/markers/b/start.png",
|
|
|
+ image: '//webapi.amap.com/theme/v1.3/markers/b/start.png'
|
|
|
}),
|
|
|
- offset: new AMap.Pixel(-9, -31),
|
|
|
+ offset: new AMap.Pixel(-9, -31)
|
|
|
},
|
|
|
endMarkerOptions: {
|
|
|
//可缺省
|
|
|
icon: new AMap.Icon({
|
|
|
size: new AMap.Size(19, 31), //图标大小
|
|
|
imageSize: new AMap.Size(19, 31),
|
|
|
- image: "//webapi.amap.com/theme/v1.3/markers/b/end.png",
|
|
|
+ image: '//webapi.amap.com/theme/v1.3/markers/b/end.png'
|
|
|
}),
|
|
|
- offset: new AMap.Pixel(-9, -31),
|
|
|
+ offset: new AMap.Pixel(-9, -31)
|
|
|
},
|
|
|
midMarkerOptions: {
|
|
|
//可缺省
|
|
|
icon: new AMap.Icon({
|
|
|
size: new AMap.Size(19, 31), //图标大小
|
|
|
imageSize: new AMap.Size(19, 31),
|
|
|
- image: "//webapi.amap.com/theme/v1.3/markers/b/mid.png",
|
|
|
+ image: '//webapi.amap.com/theme/v1.3/markers/b/mid.png'
|
|
|
}),
|
|
|
- offset: new AMap.Pixel(-9, -31),
|
|
|
+ offset: new AMap.Pixel(-9, -31)
|
|
|
},
|
|
|
lineOptions: {
|
|
|
//可缺省
|
|
|
- strokeStyle: "solid",
|
|
|
- strokeColor: "#FF33FF",
|
|
|
+ strokeStyle: 'solid',
|
|
|
+ strokeColor: '#FF33FF',
|
|
|
strokeOpacity: 1,
|
|
|
- strokeWeight: 2,
|
|
|
- },
|
|
|
+ strokeWeight: 2
|
|
|
+ }
|
|
|
//同 RangingTool 的 自定义 设置，缺省为默认样式
|
|
|
});
|
|
|
break;
|
|
|
}
|
|
|
- case "measureArea": {
|
|
|
+ case 'measureArea': {
|
|
|
mouseTool.polygon({
|
|
|
strokeColor: '#4f71ff',
|
|
|
strokeOpacity: 1,
|
|
|
@@ -794,7 +833,7 @@ export default {
|
|
|
strokeOpacity: 0.5,
|
|
|
fillColor: '#1791fc',
|
|
|
fillOpacity: 0.4,
|
|
|
- strokeStyle: 'solid',
|
|
|
+ strokeStyle: 'solid'
|
|
|
});
|
|
|
break;
|
|
|
}
|
|
|
@@ -802,7 +841,7 @@ export default {
|
|
|
},
|
|
|
drawend() {
|
|
|
var mouseTool = this.mouseTool;
|
|
|
- mouseTool.on('draw', (ev) => {
|
|
|
+ mouseTool.on('draw', ev => {
|
|
|
// 确定时测量面积鼠标工具
|
|
|
if (ev.obj.CLASS_NAME === 'Overlay.Polygon') {
|
|
|
const id = ev.obj._amap_id;
|
|
|
@@ -814,7 +853,7 @@ export default {
|
|
|
position: new AMap.LngLat(position[0], position[1]),
|
|
|
icon: 'https://webapi.amap.com/images/destroy.png',
|
|
|
offset: new AMap.Pixel(-7, 7),
|
|
|
- id: id,
|
|
|
+ id: id
|
|
|
});
|
|
|
// 计算区域面积
|
|
|
var area =
|
|
|
@@ -825,11 +864,11 @@ export default {
|
|
|
text = new AMap.Text({
|
|
|
position: center,
|
|
|
text: area + '平方公里',
|
|
|
- offset: new AMap.Pixel(-20, -20),
|
|
|
+ offset: new AMap.Pixel(-20, -20)
|
|
|
});
|
|
|
this.map.add(text);
|
|
|
this.map.add(marker);
|
|
|
- marker.on('click', (e) => {
|
|
|
+ marker.on('click', e => {
|
|
|
var ids = e.target._originOpts.id;
|
|
|
this.map.remove(this.arealistmouse[ids].text);
|
|
|
this.map.remove(this.arealistmouse[ids].marker);
|
|
|
@@ -838,7 +877,7 @@ export default {
|
|
|
var obj = {
|
|
|
text: text,
|
|
|
marker: marker,
|
|
|
- mouse: ev.obj,
|
|
|
+ mouse: ev.obj
|
|
|
};
|
|
|
this.arealistmouse[id] = obj;
|
|
|
}
|
|
|
@@ -850,7 +889,7 @@ export default {
|
|
|
let X = 0;
|
|
|
let Y = 0;
|
|
|
let Z = 0;
|
|
|
- PolygonArr.forEach((lnglat) => {
|
|
|
+ PolygonArr.forEach(lnglat => {
|
|
|
let lng = (lnglat[0] * Math.PI) / 180;
|
|
|
let lat = (lnglat[1] * Math.PI) / 180;
|
|
|
let x, y, z;
|
|
|
@@ -871,6 +910,16 @@ export default {
|
|
|
// console.log(Lng, Lat, Hyp);
|
|
|
return [(Lng * 180) / Math.PI, (Lat * 180) / Math.PI];
|
|
|
},
|
|
|
+ dateChange(data) {
|
|
|
+ console.log(data, 'date change');
|
|
|
+ this.start_time = dayjs(data.begin * 1000).format('YYYY-MM-DD');
|
|
|
+ this.end_time = dayjs(data.end * 1000).format('YYYY-MM-DD');
|
|
|
+ },
|
|
|
+ // 当使用日期筛选
|
|
|
+ timeScreen(data) {
|
|
|
+ console.log(data, '000000000 time screen');
|
|
|
+ // this.timeScreenData = data;
|
|
|
+ }
|
|
|
},
|
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
@@ -886,7 +935,7 @@ export default {
|
|
|
updated() {}, //生命周期 - 更新之后
|
|
|
beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
destroyed() {}, //生命周期 - 销毁完成
|
|
|
- activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
@@ -909,8 +958,13 @@ export default {
|
|
|
position: absolute;
|
|
|
top: 10px;
|
|
|
left: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
/deep/.el-select {
|
|
|
margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
/deep/.el-date-editor {
|
|
|
margin-right: 10px;
|
|
|
@@ -985,4 +1039,4 @@ export default {
|
|
|
/deep/.amap-controls {
|
|
|
display: none !important;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
