修改文件的加载方式
This commit is contained in:
parent
dae3fdc211
commit
7384c83e7e
@ -2,17 +2,16 @@
|
||||
<div class="bigscreen-wrapper background-frame">
|
||||
<div class="header-wrapper background-frame">
|
||||
<div class="time-wrapper">
|
||||
<span style="display: flex;">
|
||||
<span style="display: flex">
|
||||
<span>{{ dateDay }}</span>
|
||||
<span style="padding-left: 20px;">{{ dateTime }}</span>
|
||||
<span style="padding-left: 20px">{{ dateTime }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="main-title">大方县山林生态安全监控平台</div>
|
||||
<div class="weather-wrapper">
|
||||
</div>
|
||||
<div class="weather-wrapper"></div>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<div class="content-item" style="grid-row: span 2;">
|
||||
<div class="content-item" style="grid-row: span 2">
|
||||
<div class="content-header">野生动物种类红外检测</div>
|
||||
<div class="content-inner table-wrapper">
|
||||
<div class="table-header">
|
||||
@ -20,23 +19,27 @@
|
||||
class="table-header-cell"
|
||||
v-for="column in columns1"
|
||||
:style="`width:${column.width};`"
|
||||
>{{ column.label }}</div>
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row" v-for="item in data1">
|
||||
<div
|
||||
class="table-row-cell"
|
||||
v-for="column in columns1"
|
||||
:style="`width:${column.width};`"
|
||||
>{{ item[column.key] }}</div>
|
||||
>
|
||||
{{ item[column.key] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="content-item middle-map-wrapper"
|
||||
style="grid-row: span 3;grid-column: span 2;"
|
||||
style="grid-row: span 3; grid-column: span 2"
|
||||
id="middleMap"
|
||||
>
|
||||
<div class="middle-tool-tip" style="display: none;">
|
||||
<div class="middle-tool-tip" style="display: none">
|
||||
<div class="middle-tool-title"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -75,10 +78,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="content-item"
|
||||
style="grid-row: span 2;"
|
||||
>
|
||||
<div class="content-item" style="grid-row: span 2">
|
||||
<div class="content-header">季节性河流监测</div>
|
||||
<div class="content-inner table-wrapper">
|
||||
<div class="table-header">
|
||||
@ -86,14 +86,18 @@
|
||||
class="table-header-cell"
|
||||
v-for="column in columns3"
|
||||
:style="`width:${column.width};`"
|
||||
>{{ column.label }}</div>
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row" v-for="item in data3">
|
||||
<div
|
||||
class="table-row-cell"
|
||||
v-for="column in columns3"
|
||||
:style="`width:${column.width};`"
|
||||
>{{ item[column.key] }}</div>
|
||||
>
|
||||
{{ item[column.key] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -105,28 +109,26 @@
|
||||
class="table-header-cell"
|
||||
v-for="column in columns2"
|
||||
:style="`width:${column.width};`"
|
||||
>{{ column.label }}</div>
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row" v-for="item in data2">
|
||||
<div
|
||||
class="table-row-cell"
|
||||
v-for="column in columns2"
|
||||
:style="`width:${column.width};`"
|
||||
>{{ item[column.key] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="content-item"
|
||||
style="grid-column: span 2;"
|
||||
>
|
||||
{{ item[column.key] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-item" style="grid-column: span 2">
|
||||
<div class="content-header content-header1">病虫害分析统计图</div>
|
||||
<div class="content-inner" id="weakSomeChart"></div>
|
||||
</div>
|
||||
<div
|
||||
class="content-item"
|
||||
style="grid-column: span 2;"
|
||||
>
|
||||
<div class="content-item" style="grid-column: span 2">
|
||||
<div class="content-header content-header1">林植被覆盖分析</div>
|
||||
<div class="content-inner" id="treeChart"></div>
|
||||
</div>
|
||||
@ -135,171 +137,172 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ImageMap } from './assets/index'
|
||||
import * as echarts from 'echarts'
|
||||
import { ImageMap } from "./assets/index";
|
||||
import * as echarts from "echarts";
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode:'289153494763707d55b03878ace1cb08',
|
||||
}
|
||||
securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
ImageMap,
|
||||
dateDay: '',
|
||||
dateTime: '',
|
||||
dateDay: "",
|
||||
dateTime: "",
|
||||
timeTimer: null,
|
||||
columns1: [
|
||||
{
|
||||
key: 'name',
|
||||
label: '名称',
|
||||
width: '25%'
|
||||
key: "name",
|
||||
label: "名称",
|
||||
width: "25%",
|
||||
},
|
||||
{
|
||||
key: 'level',
|
||||
label: '级别',
|
||||
width: '25%'
|
||||
key: "level",
|
||||
label: "级别",
|
||||
width: "25%",
|
||||
},
|
||||
{
|
||||
key: 'this',
|
||||
label: '今年数量',
|
||||
width: '25%'
|
||||
key: "this",
|
||||
label: "今年数量",
|
||||
width: "25%",
|
||||
},
|
||||
{
|
||||
key: 'last',
|
||||
label: '去年数量',
|
||||
width: '25%'
|
||||
key: "last",
|
||||
label: "去年数量",
|
||||
width: "25%",
|
||||
},
|
||||
],
|
||||
data1: [
|
||||
{
|
||||
name: '黔金丝猴',
|
||||
level: '国家一级',
|
||||
this: '713',
|
||||
last: '683'
|
||||
name: "黔金丝猴",
|
||||
level: "国家一级",
|
||||
this: "713",
|
||||
last: "683",
|
||||
},
|
||||
{
|
||||
name: '黑叶猴',
|
||||
level: '国家一级',
|
||||
this: '672',
|
||||
last: '687'
|
||||
name: "黑叶猴",
|
||||
level: "国家一级",
|
||||
this: "672",
|
||||
last: "687",
|
||||
},
|
||||
{
|
||||
name: '林麝',
|
||||
level: '国家一级',
|
||||
this: '643',
|
||||
last: '674'
|
||||
name: "林麝",
|
||||
level: "国家一级",
|
||||
this: "643",
|
||||
last: "674",
|
||||
},
|
||||
{
|
||||
name: '黑颈鹤',
|
||||
level: '国家一级',
|
||||
this: '1231',
|
||||
last: '1286'
|
||||
name: "黑颈鹤",
|
||||
level: "国家一级",
|
||||
this: "1231",
|
||||
last: "1286",
|
||||
},
|
||||
{
|
||||
name: '穿山甲',
|
||||
level: '国家一级',
|
||||
this: '741',
|
||||
last: '709'
|
||||
name: "穿山甲",
|
||||
level: "国家一级",
|
||||
this: "741",
|
||||
last: "709",
|
||||
},
|
||||
{
|
||||
name: '鸳鸯',
|
||||
level: '国家二级',
|
||||
this: '1239',
|
||||
last: '1342'
|
||||
name: "鸳鸯",
|
||||
level: "国家二级",
|
||||
this: "1239",
|
||||
last: "1342",
|
||||
},
|
||||
{
|
||||
name: '红腹锦鸡',
|
||||
level: '国家二级',
|
||||
this: '1105',
|
||||
last: '997'
|
||||
name: "红腹锦鸡",
|
||||
level: "国家二级",
|
||||
this: "1105",
|
||||
last: "997",
|
||||
},
|
||||
{
|
||||
name: '猕猴',
|
||||
level: '国家二级',
|
||||
this: '1302',
|
||||
last: '1241'
|
||||
name: "猕猴",
|
||||
level: "国家二级",
|
||||
this: "1302",
|
||||
last: "1241",
|
||||
},
|
||||
],
|
||||
columns2: [
|
||||
{
|
||||
key: 'read',
|
||||
label: '监测因子',
|
||||
width: '33%'
|
||||
key: "read",
|
||||
label: "监测因子",
|
||||
width: "33%",
|
||||
},
|
||||
{
|
||||
key: 'multi',
|
||||
label: '多发季节',
|
||||
width: '33%'
|
||||
key: "multi",
|
||||
label: "多发季节",
|
||||
width: "33%",
|
||||
},
|
||||
{
|
||||
key: 'operate',
|
||||
label: '预防措施',
|
||||
width: '34%'
|
||||
key: "operate",
|
||||
label: "预防措施",
|
||||
width: "34%",
|
||||
},
|
||||
],
|
||||
data2: [
|
||||
{
|
||||
read: '松线虫',
|
||||
multi: '秋季',
|
||||
operate: '提前航化洒药',
|
||||
read: "松线虫",
|
||||
multi: "秋季",
|
||||
operate: "提前航化洒药",
|
||||
},
|
||||
{
|
||||
read: '美国白蛾',
|
||||
multi: '秋冬季',
|
||||
operate: '提前航化洒药',
|
||||
read: "美国白蛾",
|
||||
multi: "秋冬季",
|
||||
operate: "提前航化洒药",
|
||||
},
|
||||
{
|
||||
read: '草原蝗虫',
|
||||
multi: '秋季',
|
||||
operate: '生物农药治理',
|
||||
read: "草原蝗虫",
|
||||
multi: "秋季",
|
||||
operate: "生物农药治理",
|
||||
},
|
||||
],
|
||||
columns3: [
|
||||
{
|
||||
key: 'name',
|
||||
label: '河流名称',
|
||||
width: '33%'
|
||||
key: "name",
|
||||
label: "河流名称",
|
||||
width: "33%",
|
||||
},
|
||||
{
|
||||
key: 'water',
|
||||
label: '水量丰沛程度',
|
||||
width: '34%'
|
||||
key: "water",
|
||||
label: "水量丰沛程度",
|
||||
width: "34%",
|
||||
},
|
||||
{
|
||||
key: 'floor',
|
||||
label: '流量',
|
||||
width: '33%'
|
||||
key: "floor",
|
||||
label: "流量",
|
||||
width: "33%",
|
||||
},
|
||||
],
|
||||
data3: [
|
||||
{
|
||||
name: '白水河',
|
||||
water: '丰水期',
|
||||
floor: '6.2m³/s',
|
||||
name: "白水河",
|
||||
water: "丰水期",
|
||||
floor: "6.2m³/s",
|
||||
},
|
||||
{
|
||||
name: '牛兰江',
|
||||
water: '枯水期',
|
||||
floor: '6.5m³/s',
|
||||
name: "牛兰江",
|
||||
water: "枯水期",
|
||||
floor: "6.5m³/s",
|
||||
},
|
||||
{
|
||||
name: '林麝',
|
||||
water: '丰水期',
|
||||
floor: '7.5m³/s',
|
||||
name: "林麝",
|
||||
water: "丰水期",
|
||||
floor: "7.5m³/s",
|
||||
},
|
||||
{
|
||||
name: '黑颈鹤',
|
||||
water: '丰水期',
|
||||
floor: '31.2m³/s',
|
||||
name: "黑颈鹤",
|
||||
water: "丰水期",
|
||||
floor: "31.2m³/s",
|
||||
},
|
||||
{
|
||||
name: '穿山甲',
|
||||
water: '丰水期',
|
||||
floor: '44m³/s',
|
||||
name: "穿山甲",
|
||||
water: "丰水期",
|
||||
floor: "44m³/s",
|
||||
},
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getNowTime();
|
||||
@ -308,7 +311,7 @@ export default {
|
||||
}, 1000);
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timeTimer)
|
||||
clearInterval(this.timeTimer);
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
@ -318,25 +321,21 @@ export default {
|
||||
methods: {
|
||||
initChart() {
|
||||
const chart = document.getElementById("weakSomeChart");
|
||||
const chartInstance = echarts.init(chart, 'default');
|
||||
chartInstance.setOption({
|
||||
const chartInstance = echarts.init(chart, "default");
|
||||
chartInstance.setOption(
|
||||
{
|
||||
title: {
|
||||
text: "",
|
||||
textStyle: {
|
||||
fontSize: 16
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
color: "#fff",
|
||||
},
|
||||
color: [
|
||||
'#306fff',
|
||||
'#30c9c9',
|
||||
'#f7ad08',
|
||||
'#93beff'
|
||||
],
|
||||
color: ["#306fff", "#30c9c9", "#f7ad08", "#93beff"],
|
||||
tooltip: {
|
||||
show: true
|
||||
show: true,
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
@ -359,7 +358,15 @@ export default {
|
||||
position: "bottom",
|
||||
offset: 0, // 相对正常位置的偏移
|
||||
type: "category", // 类目轴，也可以是time， value， 对数轴log
|
||||
data: ['松线虫', '美国白蛾', '松墨天牛', '松赤枯病', '桃缩叶病', '松斑蛾', '茶袋蛾'],
|
||||
data: [
|
||||
"松线虫",
|
||||
"美国白蛾",
|
||||
"松墨天牛",
|
||||
"松赤枯病",
|
||||
"桃缩叶病",
|
||||
"松斑蛾",
|
||||
"茶袋蛾",
|
||||
],
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位:万亩",
|
||||
@ -383,20 +390,20 @@ export default {
|
||||
// 坐标轴在grid区域中的分割线
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
}
|
||||
type: "dashed",
|
||||
color: "rgba(255, 255, 255, 0.3)",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '2022',
|
||||
name: "2022",
|
||||
data: [6.7, 7.5, 4.52, 1.3, 0.2, 0.96, 1.2],
|
||||
type: 'bar',
|
||||
type: "bar",
|
||||
barWidth: 30,
|
||||
showBackground: true,
|
||||
itemStyle: {
|
||||
color: '#0f9f98'
|
||||
color: "#0f9f98",
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
@ -405,26 +412,29 @@ export default {
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#226dc0" // 0% 处的颜色
|
||||
}, {
|
||||
color: "#226dc0", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.7,
|
||||
color: "#226dc040" // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
color: "#226dc040", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '2023',
|
||||
name: "2023",
|
||||
data: [6.85, 5.5, 4.96, 1.1, 0.27, 0.16, 0.9],
|
||||
type: 'bar',
|
||||
type: "bar",
|
||||
barWidth: 30,
|
||||
showBackground: true,
|
||||
itemStyle: {
|
||||
color: '#0aa473'
|
||||
color: "#0aa473",
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
@ -433,18 +443,21 @@ export default {
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#226dc0" // 0% 处的颜色
|
||||
}, {
|
||||
offset: 0.7,
|
||||
color: "#226dc040" // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
color: "#226dc0", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.7,
|
||||
color: "#226dc040", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
show: true,
|
||||
@ -465,56 +478,60 @@ export default {
|
||||
fontSize: 9,
|
||||
},
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
opacity: 0
|
||||
}
|
||||
type: "dotted",
|
||||
opacity: 0,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '6%',
|
||||
top: '19%',
|
||||
right: '2%',
|
||||
bottom: '13%'
|
||||
}
|
||||
}, true, true);
|
||||
left: "6%",
|
||||
top: "19%",
|
||||
right: "2%",
|
||||
bottom: "13%",
|
||||
},
|
||||
},
|
||||
true,
|
||||
true
|
||||
);
|
||||
window.addEventListener("resize", () => {
|
||||
this.$nextTick(() => {
|
||||
chartInstance && chartInstance.resize();
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
},
|
||||
initPieChart() {
|
||||
const chart = document.getElementById("treeChart");
|
||||
const chartInstance = echarts.init(chart, 'default');
|
||||
chartInstance.setOption({
|
||||
const chartInstance = echarts.init(chart, "default");
|
||||
chartInstance.setOption(
|
||||
{
|
||||
textStyle: {
|
||||
color: '#7a8898'
|
||||
color: "#7a8898",
|
||||
},
|
||||
color: [
|
||||
'#37A2DA',
|
||||
'#9FE6B8',
|
||||
'#FFDB5C',
|
||||
'#ff9f7f',
|
||||
'#fb7293',
|
||||
'#E062AE',
|
||||
'#32C5E9',
|
||||
'#67E0E3',
|
||||
'#E690D1',
|
||||
'#e7bcf3',
|
||||
'#9d96f5',
|
||||
'#8378EA',
|
||||
'#96BFFF'
|
||||
"#37A2DA",
|
||||
"#9FE6B8",
|
||||
"#FFDB5C",
|
||||
"#ff9f7f",
|
||||
"#fb7293",
|
||||
"#E062AE",
|
||||
"#32C5E9",
|
||||
"#67E0E3",
|
||||
"#E690D1",
|
||||
"#e7bcf3",
|
||||
"#9d96f5",
|
||||
"#8378EA",
|
||||
"#96BFFF",
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
// 图例配置
|
||||
orient: "vertical",
|
||||
right: 50,
|
||||
itemGap: 20,
|
||||
top: 'center',
|
||||
top: "center",
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
@ -524,11 +541,11 @@ export default {
|
||||
radius: ["36%", "65%"],
|
||||
center: ["30%", "50%"],
|
||||
data: [
|
||||
{ name: '阔叶林', value: 204 },
|
||||
{ name: '针叶林', value: 166 },
|
||||
{ name: '灌从和灌草从', value: 47 },
|
||||
{ name: '沼泽与水生植被', value: 34 },
|
||||
{ name: '竹林', value: 25 },
|
||||
{ name: "阔叶林", value: 204 },
|
||||
{ name: "针叶林", value: 166 },
|
||||
{ name: "灌从和灌草从", value: 47 },
|
||||
{ name: "沼泽与水生植被", value: 34 },
|
||||
{ name: "竹林", value: 25 },
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
@ -539,9 +556,9 @@ export default {
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter: "{d}%"
|
||||
}
|
||||
}
|
||||
formatter: "{d}%",
|
||||
},
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
x: 80,
|
||||
@ -556,34 +573,52 @@ export default {
|
||||
polor: {
|
||||
center: ["30%", "50%"],
|
||||
},
|
||||
}, true, true);
|
||||
},
|
||||
true,
|
||||
true
|
||||
);
|
||||
window.addEventListener("resize", () => {
|
||||
this.$nextTick(() => {
|
||||
chartInstance && chartInstance.resize();
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
},
|
||||
getNowTime() {
|
||||
const date = new Date();
|
||||
let year = date.getFullYear(); //获取当前年份
|
||||
let month = date.getMonth() + 1; //获取当前月份（记得+1）
|
||||
month = month < 10 ? '0' + month.toString() : month.toString();
|
||||
month = month < 10 ? "0" + month.toString() : month.toString();
|
||||
let dates = date.getDate(); //获取当前是几日
|
||||
dates = dates < 10 ? '0' + dates.toString() : dates.toString();
|
||||
dates = dates < 10 ? "0" + dates.toString() : dates.toString();
|
||||
let day = date.getDay();
|
||||
const arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||||
this.dateDay = year + '-' + month + '-' + dates + ' ' + arr[day];
|
||||
this.dateTime = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours())
|
||||
+ ':' +
|
||||
(date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
|
||||
+ ':' +
|
||||
(date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
|
||||
const arr = [
|
||||
"星期日",
|
||||
"星期一",
|
||||
"星期二",
|
||||
"星期三",
|
||||
"星期四",
|
||||
"星期五",
|
||||
"星期六",
|
||||
];
|
||||
this.dateDay = year + "-" + month + "-" + dates + " " + arr[day];
|
||||
this.dateTime =
|
||||
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
|
||||
":" +
|
||||
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
|
||||
":" +
|
||||
(date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
|
||||
},
|
||||
initMap() {
|
||||
AMapLoader.load({
|
||||
key: "e49669059fa36494531a82ed982f395c", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
})
|
||||
.then((AMap) => {
|
||||
this.map = new AMap.Map("middleMap", {
|
||||
zoom: 11, //级别
|
||||
center: [105.60178899809716, 27.14450662262202], //中心点坐标
|
||||
mapStyle: 'amap://styles/blue',
|
||||
mapStyle: "amap://styles/blue",
|
||||
});
|
||||
|
||||
// 加载插件
|
||||
@ -600,10 +635,12 @@ export default {
|
||||
// this.map.addControl(scale);
|
||||
// });
|
||||
|
||||
this.map.on('mapmove', () => {})
|
||||
this.map.on('click', (e) => {
|
||||
navigator.clipboard.writeText(`[${e.lnglat.R.toString()}, ${e.lnglat.Q.toString()}],`)
|
||||
})
|
||||
this.map.on("mapmove", () => {});
|
||||
this.map.on("click", (e) => {
|
||||
navigator.clipboard.writeText(
|
||||
`[${e.lnglat.R.toString()}, ${e.lnglat.Q.toString()}],`
|
||||
);
|
||||
});
|
||||
|
||||
// const layers = [
|
||||
// new AMap.TileLayer.Satellite(),
|
||||
@ -615,81 +652,86 @@ export default {
|
||||
{
|
||||
position: [105.62449121519921, 27.136754069705578],
|
||||
info: {
|
||||
plantareaAddress: '烟雾传感器',
|
||||
plantareaAddress: "烟雾传感器",
|
||||
dataList: [
|
||||
{
|
||||
label: '编号',
|
||||
value: 'EH09801'
|
||||
label: "编号",
|
||||
value: "EH09801",
|
||||
},
|
||||
{
|
||||
label: '烟雾浓度',
|
||||
value: '4.3ug/m³'
|
||||
label: "烟雾浓度",
|
||||
value: "4.3ug/m³",
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
value: ' 正常'
|
||||
label: "状态",
|
||||
value: " 正常",
|
||||
},
|
||||
{
|
||||
label: '负责人',
|
||||
value: ' 祁星'
|
||||
label: "负责人",
|
||||
value: " 祁星",
|
||||
},
|
||||
{
|
||||
label: '联系方式',
|
||||
value: ' 15844596255'
|
||||
label: "联系方式",
|
||||
value: " 15844596255",
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
markers.forEach(item => {
|
||||
this.addMapMarker(
|
||||
item.position,
|
||||
'ii',
|
||||
item.info
|
||||
)
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
markers.forEach((item) => {
|
||||
this.addMapMarker(item.position, "ii", item.info);
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
// 添加图形点标记
|
||||
addMapMarker(sourceData = [], type = 'red', info = {}) {
|
||||
addMapMarker(sourceData = [], type = "red", info = {}) {
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(sourceData[0], sourceData[1]),
|
||||
offset: new AMap.Pixel(-30, -52),
|
||||
icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||
title: ''
|
||||
title: "",
|
||||
});
|
||||
this.map.add(marker);
|
||||
marker.on('click', (e) => {
|
||||
this.showInfoWindow(sourceData[0], sourceData[1], { type: '#304156', ...info })
|
||||
})
|
||||
marker.on("click", (e) => {
|
||||
this.showInfoWindow(sourceData[0], sourceData[1], {
|
||||
type: "#304156",
|
||||
...info,
|
||||
});
|
||||
});
|
||||
},
|
||||
// 显示信息窗体
|
||||
showInfoWindow(lng, lat, sourceInfo) {
|
||||
let content = `
|
||||
<div style="padding: 6px;background-color: #05121390;border: 1px solid #18fefe;">
|
||||
<div style="color: white;text-align:center;padding: 6px 10px;letter-spacing:1px;font-weight:bold;">
|
||||
${sourceInfo.plantareaAddress || '监控点'}
|
||||
${sourceInfo.plantareaAddress || "监控点"}
|
||||
</div>
|
||||
<div style="padding: 3px 10px 0 10px;font-size: 12px;color:#fff;">
|
||||
${
|
||||
sourceInfo.dataList.map(item => (`
|
||||
${sourceInfo.dataList
|
||||
.map(
|
||||
(item) => `
|
||||
<div style="margin-bottom: 4px;padding: 4px 10px;display:flex;justify-content:space-between;align-items:center;background-color:#063f3f;">
|
||||
<div>${item.label}</div>
|
||||
<div style="padding-left: 10px;">${item.value}</div>
|
||||
</div>
|
||||
`)).join('')
|
||||
}
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
content,
|
||||
anchor: 'middle-left',
|
||||
isCustom: true
|
||||
anchor: "middle-left",
|
||||
isCustom: true,
|
||||
});
|
||||
infoWindow.open(this.map, [lng, lat])
|
||||
infoWindow.open(this.map, [lng, lat]);
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import url(./bigscreen.scss);
|
||||
@ -709,7 +751,7 @@ export default {
|
||||
}
|
||||
.main-title {
|
||||
position: relative;
|
||||
top: -.5vh;
|
||||
top: -0.5vh;
|
||||
}
|
||||
}
|
||||
.content-wrapper {
|
||||
@ -723,7 +765,7 @@ export default {
|
||||
height: 40px;
|
||||
padding-left: 50px;
|
||||
padding-top: 9px;
|
||||
font-family: 'BigScreenFont';
|
||||
font-family: "BigScreenFont";
|
||||
color: white;
|
||||
background-image: url(./assets/titleBg.png);
|
||||
background-size: 100% 100%;
|
||||
@ -815,7 +857,7 @@ export default {
|
||||
padding: 10px;
|
||||
z-index: 99;
|
||||
.middle-tool-title {
|
||||
font-family: 'BigScreenFont';
|
||||
font-family: "BigScreenFont";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -127,22 +127,24 @@ import {
|
||||
} from "@/utils/bigscreenTool/index.js";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode:'289153494763707d55b03878ace1cb08',
|
||||
}
|
||||
|
||||
securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
|
||||
};
|
||||
|
||||
export default {
|
||||
components: { BigScreenTime },
|
||||
data() {
|
||||
const add0 = (val) => {
|
||||
const numVal = parseInt(val)
|
||||
return numVal < 10 ? ('0' + numVal) : numVal.toString()
|
||||
}
|
||||
const numVal = parseInt(val);
|
||||
return numVal < 10 ? "0" + numVal : numVal.toString();
|
||||
};
|
||||
const formatter = (offset = 0, date = new Date()) => {
|
||||
const d = new Date(date.getTime() - offset)
|
||||
return `${d.getFullYear()}/${add0(d.getMonth() + 1)}/${add0(d.getDate())} ${add0(d.getHours())}:${add0(d.getMinutes())}:${add0(d.getSeconds())}`
|
||||
}
|
||||
const d = new Date(date.getTime() - offset);
|
||||
return `${d.getFullYear()}/${add0(d.getMonth() + 1)}/${add0(
|
||||
d.getDate()
|
||||
)} ${add0(d.getHours())}:${add0(d.getMinutes())}:${add0(d.getSeconds())}`;
|
||||
};
|
||||
return {
|
||||
map: null,
|
||||
height: "100%",
|
||||
@ -199,10 +201,20 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
initMap() {
|
||||
AMapLoader.load({
|
||||
key: "e49669059fa36494531a82ed982f395c", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
})
|
||||
.then((AMap) => {
|
||||
this.map = new AMap.Map("middleMap", {
|
||||
zoom: 11, //级别
|
||||
center: [105.60178899809716, 27.14450662262202], //中心点坐标
|
||||
mapStyle: 'amap://styles/blue',
|
||||
mapStyle: "amap://styles/blue",
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
getEchart2Data() {
|
||||
@ -373,10 +385,10 @@ export default {
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '6%',
|
||||
top: '19%',
|
||||
right: '6%',
|
||||
bottom: '13%'
|
||||
left: "6%",
|
||||
top: "19%",
|
||||
right: "6%",
|
||||
bottom: "13%",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
</div>
|
||||
<div
|
||||
class="grid-item middle-map-wrapper"
|
||||
style="grid-row: span 3;padding: 0;"
|
||||
style="grid-row: span 3; padding: 0"
|
||||
>
|
||||
<div class="top-card-wrapper">
|
||||
<div class="top-card-item">
|
||||
@ -94,8 +94,8 @@
|
||||
<div class="grid-item">
|
||||
<div class="bigscreen-item-wrapper">
|
||||
<div class="bigscreen-item-title">农机信息</div>
|
||||
<div class="bigscreen-item-content" style="display: flex;">
|
||||
<div style="width: 150px;" class="nong-info-wrapper">
|
||||
<div class="bigscreen-item-content" style="display: flex">
|
||||
<div style="width: 150px" class="nong-info-wrapper">
|
||||
<div class="nong-info-item">
|
||||
<div class="nong-info-item-title">128</div>
|
||||
<div class="nong-info-item-value">农机总数</div>
|
||||
@ -113,7 +113,7 @@
|
||||
<div class="nong-info-item-value">故障</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%;" id="chart2"></div>
|
||||
<div style="width: 100%" id="chart2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -156,10 +156,13 @@
|
||||
<div class="bigscreen-item-title">农机监控</div>
|
||||
<div class="bigscreen-item-content monitor-wrapper">
|
||||
<div class="monitor-wrapper-item">
|
||||
<div class="monitor-side-part" style="width: calc(60% - 4px);">
|
||||
<div class="monitor-side-part" style="width: calc(60% - 4px)">
|
||||
<video :src="video" muted autoplay loop="loop"></video>
|
||||
</div>
|
||||
<div class="monitor-side-part right-part" style="width: calc(40% - 4px);">
|
||||
<div
|
||||
class="monitor-side-part right-part"
|
||||
style="width: calc(40% - 4px)"
|
||||
>
|
||||
<div>农机号：B130121091001010034</div>
|
||||
<div>农机类型: 中耕机</div>
|
||||
<div>作业地块: D985</div>
|
||||
@ -176,141 +179,144 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import BigScreenTime from '@/utils/bigscreenTool/currentTime.vue'
|
||||
import BigScreenTable from '@/utils/bigscreenTool/bigscreenTable.vue'
|
||||
import BigScreenTime from "@/utils/bigscreenTool/currentTime.vue";
|
||||
import BigScreenTable from "@/utils/bigscreenTool/bigscreenTable.vue";
|
||||
import {
|
||||
generateBaseOptions,
|
||||
generatePieOptions,
|
||||
initChartStatic
|
||||
} from '@/utils/bigscreenTool/index.js'
|
||||
import video from './assets/WeChat_20231114151516.mp4'
|
||||
initChartStatic,
|
||||
} from "@/utils/bigscreenTool/index.js";
|
||||
import video from "./assets/WeChat_20231114151516.mp4";
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode:'289153494763707d55b03878ace1cb08',
|
||||
}
|
||||
securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
|
||||
};
|
||||
|
||||
export default {
|
||||
components: { BigScreenTime, BigScreenTable },
|
||||
data() {
|
||||
const add0 = (val) => {
|
||||
const numVal = parseInt(val)
|
||||
return numVal < 10 ? ('0' + numVal) : numVal.toString()
|
||||
}
|
||||
const numVal = parseInt(val);
|
||||
return numVal < 10 ? "0" + numVal : numVal.toString();
|
||||
};
|
||||
const formatter = (offset = 0, date = new Date()) => {
|
||||
const d = new Date(date.getTime() - offset)
|
||||
return `${d.getFullYear()}/${add0(d.getMonth() + 1)}/${add0(d.getDate())} ${add0(d.getHours())}:${add0(d.getMinutes())}:${add0(d.getSeconds())}`
|
||||
}
|
||||
const d = new Date(date.getTime() - offset);
|
||||
return `${d.getFullYear()}/${add0(d.getMonth() + 1)}/${add0(
|
||||
d.getDate()
|
||||
)} ${add0(d.getHours())}:${add0(d.getMinutes())}:${add0(d.getSeconds())}`;
|
||||
};
|
||||
return {
|
||||
video,
|
||||
map: null,
|
||||
columns1: [
|
||||
{
|
||||
key: 'num',
|
||||
label: '农机编号',
|
||||
width: '50%'
|
||||
key: "num",
|
||||
label: "农机编号",
|
||||
width: "50%",
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
label: '类型',
|
||||
width: '25%'
|
||||
key: "type",
|
||||
label: "类型",
|
||||
width: "25%",
|
||||
},
|
||||
{
|
||||
key: 'oil',
|
||||
label: '油耗(升/亩)',
|
||||
width: '25%'
|
||||
key: "oil",
|
||||
label: "油耗(升/亩)",
|
||||
width: "25%",
|
||||
},
|
||||
],
|
||||
data1: [
|
||||
{
|
||||
num: 'B140121091004010018',
|
||||
type: '起垄机',
|
||||
oil: '30.24'
|
||||
num: "B140121091004010018",
|
||||
type: "起垄机",
|
||||
oil: "30.24",
|
||||
},
|
||||
{
|
||||
num: 'B130121091002040079',
|
||||
type: '穴播机',
|
||||
oil: '41.54'
|
||||
num: "B130121091002040079",
|
||||
type: "穴播机",
|
||||
oil: "41.54",
|
||||
},
|
||||
{
|
||||
num: 'B130121091004020128',
|
||||
type: '小粒种子播种',
|
||||
oil: '57.65'
|
||||
num: "B130121091004020128",
|
||||
type: "小粒种子播种",
|
||||
oil: "57.65",
|
||||
},
|
||||
{
|
||||
num: 'B130121091004010107',
|
||||
type: '钉齿耙',
|
||||
oil: '62.45'
|
||||
num: "B130121091004010107",
|
||||
type: "钉齿耙",
|
||||
oil: "62.45",
|
||||
},
|
||||
{
|
||||
num: 'B130121091002010011',
|
||||
type: '旋耕机',
|
||||
oil: '63.58'
|
||||
num: "B130121091002010011",
|
||||
type: "旋耕机",
|
||||
oil: "63.58",
|
||||
},
|
||||
{
|
||||
num: 'B130121091003010041',
|
||||
type: '中耕机',
|
||||
oil: '63.76'
|
||||
num: "B130121091003010041",
|
||||
type: "中耕机",
|
||||
oil: "63.76",
|
||||
},
|
||||
{
|
||||
num: 'B130121091005010111',
|
||||
type: '追肥机 (液肥)',
|
||||
oil: '64.18'
|
||||
num: "B130121091005010111",
|
||||
type: "追肥机 (液肥)",
|
||||
oil: "64.18",
|
||||
},
|
||||
],
|
||||
columns2: [
|
||||
{
|
||||
key: 'num',
|
||||
label: '农机编号',
|
||||
width: '34%'
|
||||
key: "num",
|
||||
label: "农机编号",
|
||||
width: "34%",
|
||||
},
|
||||
{
|
||||
key: 'info',
|
||||
label: '报警信息',
|
||||
width: '22%'
|
||||
key: "info",
|
||||
label: "报警信息",
|
||||
width: "22%",
|
||||
},
|
||||
{
|
||||
key: 'area',
|
||||
label: '地块',
|
||||
width: '12%'
|
||||
key: "area",
|
||||
label: "地块",
|
||||
width: "12%",
|
||||
},
|
||||
{
|
||||
key: 'time',
|
||||
label: '时间',
|
||||
width: '31%'
|
||||
key: "time",
|
||||
label: "时间",
|
||||
width: "31%",
|
||||
},
|
||||
],
|
||||
data2: [
|
||||
{
|
||||
num: 'B130121091001010068',
|
||||
info: '偏离轨迹',
|
||||
area: 'D101',
|
||||
time: formatter(4155322)
|
||||
num: "B130121091001010068",
|
||||
info: "偏离轨迹",
|
||||
area: "D101",
|
||||
time: formatter(4155322),
|
||||
},
|
||||
{
|
||||
num: '8130121091002020021',
|
||||
info: '低油量预警',
|
||||
area: 'D902',
|
||||
time: formatter(9155322)
|
||||
num: "8130121091002020021",
|
||||
info: "低油量预警",
|
||||
area: "D902",
|
||||
time: formatter(9155322),
|
||||
},
|
||||
{
|
||||
num: '8130121091003010009',
|
||||
info: '30分钟开机无作业',
|
||||
area: 'D713',
|
||||
time: formatter(10155322)
|
||||
num: "8130121091003010009",
|
||||
info: "30分钟开机无作业",
|
||||
area: "D713",
|
||||
time: formatter(10155322),
|
||||
},
|
||||
{
|
||||
num: '8130121091001040059',
|
||||
info: '发动机异常',
|
||||
area: 'D874',
|
||||
time: formatter(12155322)
|
||||
num: "8130121091001040059",
|
||||
info: "发动机异常",
|
||||
area: "D874",
|
||||
time: formatter(12155322),
|
||||
},
|
||||
{
|
||||
num: '8130121091004020028',
|
||||
info: '电平异常',
|
||||
area: 'D534',
|
||||
time: formatter(18155322)
|
||||
num: "8130121091004020028",
|
||||
info: "电平异常",
|
||||
area: "D534",
|
||||
time: formatter(18155322),
|
||||
},
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initChart1();
|
||||
@ -320,143 +326,162 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
initMap() {
|
||||
AMapLoader.load({
|
||||
key: "e49669059fa36494531a82ed982f395c", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
})
|
||||
.then((AMap) => {
|
||||
this.map = new AMap.Map("middleMap", {
|
||||
zoom: 11, //级别
|
||||
center: [106.67432426422835, 29.60831809360452], //中心点坐标
|
||||
mapStyle: 'amap://styles/blue',
|
||||
mapStyle: "amap://styles/blue",
|
||||
});
|
||||
this.map.on("click", (e) => {
|
||||
navigator.clipboard.writeText(
|
||||
`[${e.lnglat.R.toString()}, ${e.lnglat.Q.toString()}],`
|
||||
);
|
||||
});
|
||||
this.map.on('click', (e) => {
|
||||
navigator.clipboard.writeText(`[${e.lnglat.R.toString()}, ${e.lnglat.Q.toString()}],`)
|
||||
})
|
||||
const marks = [
|
||||
[106.65956138581038, 29.611899943229616],
|
||||
[106.62574409455061, 29.567117679096864],
|
||||
[106.75336158782244, 29.521608428578336],
|
||||
[106.49930274993181, 29.714416066155604],
|
||||
]
|
||||
];
|
||||
const INFOLIST = [
|
||||
{
|
||||
plantareaAddress: 'B13012109100耙式拖拉机',
|
||||
plantareaAddress: "B13012109100耙式拖拉机",
|
||||
dataList: [
|
||||
{
|
||||
label: '位置:',
|
||||
value: '渝北区龙凤镇'
|
||||
label: "位置:",
|
||||
value: "渝北区龙凤镇",
|
||||
},
|
||||
{
|
||||
label: '面积:',
|
||||
value: '2.7亩'
|
||||
label: "面积:",
|
||||
value: "2.7亩",
|
||||
},
|
||||
{
|
||||
label: '作业线形:',
|
||||
value: 'AB型'
|
||||
}
|
||||
]
|
||||
label: "作业线形:",
|
||||
value: "AB型",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
plantareaAddress: 'B5486963435拖拉机',
|
||||
plantareaAddress: "B5486963435拖拉机",
|
||||
dataList: [
|
||||
{
|
||||
label: '位置:',
|
||||
value: '渝北区龙凤镇'
|
||||
label: "位置:",
|
||||
value: "渝北区龙凤镇",
|
||||
},
|
||||
{
|
||||
label: '面积:',
|
||||
value: '3.4亩'
|
||||
label: "面积:",
|
||||
value: "3.4亩",
|
||||
},
|
||||
{
|
||||
label: '作业线形:',
|
||||
value: 'ABA型'
|
||||
}
|
||||
]
|
||||
label: "作业线形:",
|
||||
value: "ABA型",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
plantareaAddress: 'BG15445512拖挂拖拉机',
|
||||
plantareaAddress: "BG15445512拖挂拖拉机",
|
||||
dataList: [
|
||||
{
|
||||
label: '位置:',
|
||||
value: '渝北区龙凤镇'
|
||||
label: "位置:",
|
||||
value: "渝北区龙凤镇",
|
||||
},
|
||||
{
|
||||
label: '面积:',
|
||||
value: '4.1亩'
|
||||
label: "面积:",
|
||||
value: "4.1亩",
|
||||
},
|
||||
{
|
||||
label: '作业线形:',
|
||||
value: 'AB型'
|
||||
}
|
||||
]
|
||||
label: "作业线形:",
|
||||
value: "AB型",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
plantareaAddress: 'CG8845124拖拉机',
|
||||
plantareaAddress: "CG8845124拖拉机",
|
||||
dataList: [
|
||||
{
|
||||
label: '位置:',
|
||||
value: '渝北区龙凤镇'
|
||||
label: "位置:",
|
||||
value: "渝北区龙凤镇",
|
||||
},
|
||||
{
|
||||
label: '面积:',
|
||||
value: '2.5亩'
|
||||
label: "面积:",
|
||||
value: "2.5亩",
|
||||
},
|
||||
{
|
||||
label: '作业线形:',
|
||||
value: 'AB型'
|
||||
}
|
||||
]
|
||||
label: "作业线形:",
|
||||
value: "AB型",
|
||||
},
|
||||
]
|
||||
],
|
||||
},
|
||||
];
|
||||
marks.forEach((item, index) => {
|
||||
this.addMapMarker(item, 'car', INFOLIST[index])
|
||||
this.addMapMarker(item, "car", INFOLIST[index]);
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
// 添加图形点标记
|
||||
addMapMarker(sourceData = [], type = 'red', info = {}) {
|
||||
addMapMarker(sourceData = [], type = "red", info = {}) {
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(sourceData[0], sourceData[1]),
|
||||
offset: new AMap.Pixel(-30, -52),
|
||||
icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||
title: ''
|
||||
title: "",
|
||||
});
|
||||
this.map.add(marker);
|
||||
marker.on('click', (e) => {
|
||||
this.showInfoWindow(sourceData[0], sourceData[1], { type: '#304156', ...info })
|
||||
})
|
||||
marker.on("click", (e) => {
|
||||
this.showInfoWindow(sourceData[0], sourceData[1], {
|
||||
type: "#304156",
|
||||
...info,
|
||||
});
|
||||
});
|
||||
},
|
||||
// 显示信息窗体
|
||||
showInfoWindow(lng, lat, sourceInfo) {
|
||||
let content = `
|
||||
<div style="padding: 6px;background-color: #05121390;border: 1px solid #18fefe;">
|
||||
<div style="color: white;text-align:center;padding: 6px 10px;letter-spacing:1px;font-weight:bold;">
|
||||
${sourceInfo.plantareaAddress || '监控点'}
|
||||
${sourceInfo.plantareaAddress || "监控点"}
|
||||
</div>
|
||||
<div style="padding: 3px 10px 0 10px;font-size: 12px;color:#fff;">
|
||||
${
|
||||
sourceInfo.dataList.map(item => (`
|
||||
${sourceInfo.dataList
|
||||
.map(
|
||||
(item) => `
|
||||
<div style="margin-bottom: 4px;padding: 4px 10px;display:flex;justify-content:space-between;align-items:center;background-color:#063f3f;">
|
||||
<div>${item.label}</div>
|
||||
<div style="padding-left: 10px;">${item.value}</div>
|
||||
</div>
|
||||
`)).join('')
|
||||
}
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
content,
|
||||
anchor: 'middle-left',
|
||||
isCustom: true
|
||||
anchor: "middle-left",
|
||||
isCustom: true,
|
||||
});
|
||||
infoWindow.open(this.map, [lng, lat])
|
||||
infoWindow.open(this.map, [lng, lat]);
|
||||
},
|
||||
initChart1() {
|
||||
initChartStatic('chart1', generatePieOptions({
|
||||
initChartStatic(
|
||||
"chart1",
|
||||
generatePieOptions({
|
||||
color: [
|
||||
'#2352c0',
|
||||
'#218b92',
|
||||
'#9c7d2b',
|
||||
'#6a57a4',
|
||||
'#577297',
|
||||
'#9c9071',
|
||||
'#3380a5'
|
||||
"#2352c0",
|
||||
"#218b92",
|
||||
"#9c7d2b",
|
||||
"#6a57a4",
|
||||
"#577297",
|
||||
"#9c9071",
|
||||
"#3380a5",
|
||||
],
|
||||
series: [
|
||||
{
|
||||
@ -466,28 +491,28 @@ export default {
|
||||
center: ["35%", "50%"],
|
||||
data: [
|
||||
{
|
||||
name: '植保',
|
||||
value: 329
|
||||
name: "植保",
|
||||
value: 329,
|
||||
},
|
||||
{
|
||||
name: '耕地',
|
||||
value: 1021
|
||||
name: "耕地",
|
||||
value: 1021,
|
||||
},
|
||||
{
|
||||
name: '播种',
|
||||
value: 768
|
||||
name: "播种",
|
||||
value: 768,
|
||||
},
|
||||
{
|
||||
name: '施肥',
|
||||
value: 476
|
||||
name: "施肥",
|
||||
value: 476,
|
||||
},
|
||||
{
|
||||
name: '灌溉',
|
||||
value: 432
|
||||
name: "灌溉",
|
||||
value: 432,
|
||||
},
|
||||
{
|
||||
name: '收割',
|
||||
value: 882
|
||||
name: "收割",
|
||||
value: 882,
|
||||
},
|
||||
],
|
||||
label: {
|
||||
@ -505,29 +530,32 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
}))
|
||||
},
|
||||
],
|
||||
})
|
||||
);
|
||||
},
|
||||
initChart2() {
|
||||
initChartStatic('chart2', generatePieOptions({
|
||||
initChartStatic(
|
||||
"chart2",
|
||||
generatePieOptions({
|
||||
color: [
|
||||
'#2352c0',
|
||||
'#218b92',
|
||||
'#9c7d2b',
|
||||
'#6a57a4',
|
||||
'#577297',
|
||||
'#9c9071',
|
||||
'#3380a5'
|
||||
"#2352c0",
|
||||
"#218b92",
|
||||
"#9c7d2b",
|
||||
"#6a57a4",
|
||||
"#577297",
|
||||
"#9c9071",
|
||||
"#3380a5",
|
||||
],
|
||||
legend: {
|
||||
// 图例配置
|
||||
orient: "vertical",
|
||||
right: 20,
|
||||
itemGap: 20,
|
||||
top: 'center',
|
||||
top: "center",
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
@ -538,24 +566,24 @@ export default {
|
||||
center: ["35%", "50%"],
|
||||
data: [
|
||||
{
|
||||
name: '耕整地',
|
||||
value: 48
|
||||
name: "耕整地",
|
||||
value: 48,
|
||||
},
|
||||
{
|
||||
name: '种植施肥',
|
||||
value: 11
|
||||
name: "种植施肥",
|
||||
value: 11,
|
||||
},
|
||||
{
|
||||
name: '灌溉喷药',
|
||||
value: 18
|
||||
name: "灌溉喷药",
|
||||
value: 18,
|
||||
},
|
||||
{
|
||||
name: '收割采摘',
|
||||
value: 41
|
||||
name: "收割采摘",
|
||||
value: 41,
|
||||
},
|
||||
{
|
||||
name: '植保机',
|
||||
value: 10
|
||||
name: "植保机",
|
||||
value: 10,
|
||||
},
|
||||
],
|
||||
label: {
|
||||
@ -573,82 +601,90 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
}))
|
||||
},
|
||||
],
|
||||
})
|
||||
);
|
||||
},
|
||||
initChart3() {
|
||||
const xAxisData = [], baseDate = new Date();
|
||||
const xAxisData = [],
|
||||
baseDate = new Date();
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const middleDate = new Date();
|
||||
middleDate.setMonth(baseDate.getMonth() - i);
|
||||
xAxisData.unshift(`${middleDate.getMonth()}月`)
|
||||
xAxisData.unshift(`${middleDate.getMonth()}月`);
|
||||
}
|
||||
initChartStatic('chart3', generateBaseOptions({
|
||||
initChartStatic(
|
||||
"chart3",
|
||||
generateBaseOptions({
|
||||
xAxis: {
|
||||
data: xAxisData
|
||||
data: xAxisData,
|
||||
},
|
||||
color: ['#136acf', '#12a4ae', '#358d6a'],
|
||||
color: ["#136acf", "#12a4ae", "#358d6a"],
|
||||
yAxis: {
|
||||
name: '亩'
|
||||
name: "亩",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '耕整地机械',
|
||||
name: "耕整地机械",
|
||||
data: [107, 97.5, 88, 102, 91],
|
||||
type: 'bar',
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
textStyle: { //数值样式
|
||||
color: '#ffffff80',
|
||||
fontSize: 13
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
position: "top", //在上方显示
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: "#ffffff80",
|
||||
fontSize: 13,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '种植施肥机械',
|
||||
name: "种植施肥机械",
|
||||
data: [54, 68.5, 71, 53, 47],
|
||||
type: 'bar',
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
textStyle: { //数值样式
|
||||
color: '#ffffff80',
|
||||
fontSize: 13
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
position: "top", //在上方显示
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: "#ffffff80",
|
||||
fontSize: 13,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '田间管理机械',
|
||||
name: "田间管理机械",
|
||||
data: [76.5, 58, 61.5, 27, 38.5],
|
||||
type: 'bar',
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
textStyle: { //数值样式
|
||||
color: '#ffffff80',
|
||||
fontSize: 13
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
position: "top", //在上方显示
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: "#ffffff80",
|
||||
fontSize: 13,
|
||||
},
|
||||
]
|
||||
}))
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import url(../../utils/bigscreenTool/index.scss);
|
||||
@ -672,10 +708,10 @@ export default {
|
||||
padding-left: 7% !important;
|
||||
}
|
||||
.bigscreen-item-content {
|
||||
background: linear-gradient(to top, #203B53, #203B5300);
|
||||
background: linear-gradient(to top, #203b53, #203b5300);
|
||||
}
|
||||
#middleMap {
|
||||
background-color: #00D1FF;
|
||||
background-color: #00d1ff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@ -704,7 +740,7 @@ export default {
|
||||
align-items: center;
|
||||
padding: 16px 24px 8px 24px;
|
||||
&-title {
|
||||
font-size: .9rem;
|
||||
font-size: 0.9rem;
|
||||
padding: 0 20px;
|
||||
}
|
||||
&-value {
|
||||
@ -735,7 +771,7 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ffffffdc;
|
||||
font-size: .9rem;
|
||||
font-size: 0.9rem;
|
||||
justify-content: space-around;
|
||||
span:nth-child(2) {
|
||||
position: relative;
|
||||
@ -766,10 +802,10 @@ export default {
|
||||
color: white;
|
||||
.nong-info-item-title {
|
||||
font-family: "TitleFont";
|
||||
color: #00D1FF;
|
||||
color: #00d1ff;
|
||||
}
|
||||
.nong-info-item-value {
|
||||
font-size: .7rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -797,9 +833,9 @@ export default {
|
||||
}
|
||||
}
|
||||
.right-part {
|
||||
background: linear-gradient(to right, #20ecff9d, #20EBFF00);
|
||||
background: linear-gradient(to right, #20ecff9d, #20ebff00);
|
||||
padding: 8px;
|
||||
font-size: .9rem;
|
||||
font-size: 0.9rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
<script>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: "75f71884c462a7dfb8debd271a69498b",
|
||||
securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
|
||||
};
|
||||
export default {
|
||||
name: "app",
|
||||
@ -103,7 +103,7 @@ export default {
|
||||
loadmap() {
|
||||
const that = this;
|
||||
AMapLoader.load({
|
||||
key: "810bb1feef3a2c50e0fbace06c8e8c31", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
key: "e49669059fa36494531a82ed982f395c", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
AMapUI: {
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="火情位置" prop="fireAddress">
|
||||
<el-input
|
||||
v-model="queryParams.fireAddress"
|
||||
@ -55,8 +62,16 @@
|
||||
<!-- </el-form-item>-->
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
@ -69,7 +84,8 @@
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['forest:fire:add']"
|
||||
>新增</el-button>
|
||||
>新增</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
@ -80,7 +96,8 @@
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['forest:fire:edit']"
|
||||
>修改</el-button>
|
||||
>修改</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
@ -91,7 +108,8 @@
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['forest:fire:remove']"
|
||||
>删除</el-button>
|
||||
>删除</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
@ -101,18 +119,33 @@
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['forest:fire:export']"
|
||||
>导出</el-button>
|
||||
>导出</el-button
|
||||
>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
<right-toolbar
|
||||
:showSearch.sync="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="fireList" @selection-change="handleSelectionChange">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="fireList"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<!-- <el-table-column label="主键" align="center" prop="id" />-->
|
||||
<el-table-column label="火情位置" align="center" prop="fireAddress" />
|
||||
<el-table-column label="火情时间" align="center" prop="fireTime" width="180">
|
||||
<el-table-column
|
||||
label="火情时间"
|
||||
align="center"
|
||||
prop="fireTime"
|
||||
width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.fireTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
||||
<span>{{
|
||||
parseTime(scope.row.fireTime, "{y}-{m}-{d} {h}:{i}:{s}")
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="发生区域" align="center" prop="fireArea" />
|
||||
@ -125,7 +158,12 @@
|
||||
<!-- <el-table-column label="上报人" align="center" prop="reportPerson" />-->
|
||||
<!-- <el-table-column label="上报来源" align="center" prop="reportSource" />-->
|
||||
<el-table-column label="火情坐标" align="center" prop="coordinate" />
|
||||
<el-table-column label="火情图片" align="center" prop="photoInfo" width="100">
|
||||
<el-table-column
|
||||
label="火情图片"
|
||||
align="center"
|
||||
prop="photoInfo"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<image-preview :src="scope.row.photoInfo" :width="50" :height="50" />
|
||||
</template>
|
||||
@ -136,7 +174,11 @@
|
||||
<!-- <el-table-column label="发布方式" align="center" prop="reportMethod" />-->
|
||||
<!-- <el-table-column label="备注" align="center" prop="remark" />-->
|
||||
<!-- <el-table-column label="数据类型" align="center" prop="dataType" />-->
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
@ -144,28 +186,32 @@
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['forest:fire:edit']"
|
||||
>修改</el-button>
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['forest:fire:remove']"
|
||||
>删除</el-button>
|
||||
>删除</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-place"
|
||||
@click="handleJump(scope.row)"
|
||||
v-hasPermi="['forest:fire:remove']"
|
||||
>周边资源</el-button>
|
||||
>周边资源</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-location-outline"
|
||||
@click="handleZuobiao(scope.row)"
|
||||
v-hasPermi="['forest:fire:remove']"
|
||||
>火点位置</el-button>
|
||||
>火点位置</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -185,18 +231,24 @@
|
||||
<el-input v-model="form.fireAddress" placeholder="请输入火情位置" />
|
||||
</el-form-item>
|
||||
<el-form-item label="火情时间" prop="fireTime">
|
||||
<el-date-picker clearable
|
||||
<el-date-picker
|
||||
clearable
|
||||
v-model="form.fireTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择火情时间">
|
||||
placeholder="请选择火情时间"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="发生区域" prop="fireArea">
|
||||
<el-input v-model="form.fireArea" placeholder="请输入发生区域" />
|
||||
</el-form-item>
|
||||
<el-form-item label="火情情况" prop="fireInfo">
|
||||
<el-input v-model="form.fireInfo" placeholder="请输入火情情况" type="textarea"/>
|
||||
<el-input
|
||||
v-model="form.fireInfo"
|
||||
placeholder="请输入火情情况"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="上报时间" prop="reportTime">-->
|
||||
<!-- <el-date-picker clearable-->
|
||||
@ -231,7 +283,11 @@
|
||||
<!-- <el-input v-model="form.reportMethod" placeholder="请输入发布方式" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
placeholder="请输入内容"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="数据类型" prop="dataType">-->
|
||||
<!-- <el-input v-model="form.dataType" placeholder="请输入数据类型" />-->
|
||||
@ -243,24 +299,30 @@
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :title="title1" :visible.sync="open1" width="500px" append-to-body>
|
||||
<div id="innerMap" style="height: 400px;">
|
||||
|
||||
</div>
|
||||
<el-dialog
|
||||
:title="title1"
|
||||
:visible.sync="open1"
|
||||
width="500px"
|
||||
append-to-body
|
||||
>
|
||||
<div id="innerMap" style="height: 400px"></div>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listFire, getFire, delFire, addFire, updateFire } from "@/api/forest/fire";
|
||||
import {
|
||||
listFire,
|
||||
getFire,
|
||||
delFire,
|
||||
addFire,
|
||||
updateFire,
|
||||
} from "@/api/forest/fire";
|
||||
import { listFirePosition } from "../../../api/forest/fire";
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode:'b6314ade5a42c3f3ac2284b6d4d89b1f',
|
||||
}
|
||||
securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
|
||||
};
|
||||
|
||||
export default {
|
||||
//火点定位及展示
|
||||
@ -304,7 +366,7 @@ export default {
|
||||
chargePhone: null,
|
||||
fireLevel: null,
|
||||
reportMethod: null,
|
||||
dataType: "火情信息"
|
||||
dataType: "火情信息",
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
@ -314,35 +376,46 @@ export default {
|
||||
// 表单校验
|
||||
rules: {
|
||||
chargePerson: [
|
||||
{ required: true, message: "负责人不能为空", trigger: "blur" }
|
||||
{ required: true, message: "负责人不能为空", trigger: "blur" },
|
||||
],
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
|
||||
initMap(position) {
|
||||
let posiList = position.split(',')
|
||||
AMapLoader.load({
|
||||
key: "e49669059fa36494531a82ed982f395c", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
})
|
||||
.then((AMap) => {
|
||||
let posiList = position.split(",");
|
||||
this.map = new AMap.Map("innerMap", {
|
||||
zoom: 16, //级别
|
||||
center: posiList, //中心点坐标
|
||||
// mapStyle: "amap://styles/macaron"
|
||||
});
|
||||
this.map.on('click', (e) => {
|
||||
navigator.clipboard.writeText(`[${e.lnglat.lng.toString()}, ${e.lnglat.lat.toString()}],`)
|
||||
this.map.on("click", (e) => {
|
||||
navigator.clipboard.writeText(
|
||||
`[${e.lnglat.lng.toString()}, ${e.lnglat.lat.toString()}],`
|
||||
);
|
||||
});
|
||||
this.addMapMarker(posiList);
|
||||
})
|
||||
this.addMapMarker(posiList)
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
// 添加图形点标记
|
||||
addMapMarker(LngLatData = [], type = '', info = {}) {
|
||||
addMapMarker(LngLatData = [], type = "", info = {}) {
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(LngLatData[0], LngLatData[1]),
|
||||
// offset: new AMap.Pixel(-50, -52),
|
||||
// icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||
title: '',
|
||||
title: "",
|
||||
});
|
||||
this.map.add(marker);
|
||||
// marker.on('click', (e) => {
|
||||
@ -353,8 +426,10 @@ export default {
|
||||
showInfoWindow(lng, lat, sourceInfo = {}) {
|
||||
const content = `
|
||||
<div style="padding: 6px;background-color: white;">
|
||||
<div style="background-color: ${sourceInfo.type};color: white;text-align:center;padding: 6px 10px;letter-spacing:1px;font-weight:bold;">
|
||||
${sourceInfo.plantareaAddress || '监控点'}
|
||||
<div style="background-color: ${
|
||||
sourceInfo.type
|
||||
};color: white;text-align:center;padding: 6px 10px;letter-spacing:1px;font-weight:bold;">
|
||||
${sourceInfo.plantareaAddress || "监控点"}
|
||||
</div>
|
||||
<div style="padding: 6px 10px 0 10px;font-size: 12px;color:#565656;">
|
||||
<div style="padding: 4px;">${sourceInfo.info}</div>
|
||||
@ -365,10 +440,10 @@ export default {
|
||||
`;
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
content,
|
||||
anchor: 'middle-left',
|
||||
isCustom: true
|
||||
anchor: "middle-left",
|
||||
isCustom: true,
|
||||
});
|
||||
infoWindow.open(this.map, [lng, lat])
|
||||
infoWindow.open(this.map, [lng, lat]);
|
||||
},
|
||||
/**
|
||||
* 跳转GIS图
|
||||
@ -380,8 +455,8 @@ export default {
|
||||
this.open1 = true;
|
||||
this.title1 = "火点定位";
|
||||
this.$nextTick(() => {
|
||||
this.initMap(zuobiao)
|
||||
})
|
||||
this.initMap(zuobiao);
|
||||
});
|
||||
},
|
||||
/** 跳转周边资源按钮操作 */
|
||||
handleJump(row) {
|
||||
@ -390,7 +465,7 @@ export default {
|
||||
// id = this.ids[0];
|
||||
// }
|
||||
this.$router.push({
|
||||
path: '/fire/resource',
|
||||
path: "/fire/resource",
|
||||
// query: {
|
||||
// cardNoFirst: id
|
||||
// }// 要传递的参数
|
||||
@ -400,11 +475,11 @@ export default {
|
||||
getList() {
|
||||
this.loading = true;
|
||||
this.queryParams.params = {};
|
||||
if (null != this.daterangeFireTime && '' != this.daterangeFireTime) {
|
||||
if (null != this.daterangeFireTime && "" != this.daterangeFireTime) {
|
||||
this.queryParams.params["beginFireTime"] = this.daterangeFireTime[0];
|
||||
this.queryParams.params["endFireTime"] = this.daterangeFireTime[1];
|
||||
}
|
||||
listFirePosition(this.queryParams).then(response => {
|
||||
listFirePosition(this.queryParams).then((response) => {
|
||||
this.fireList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
@ -433,7 +508,7 @@ export default {
|
||||
fireLevel: null,
|
||||
reportMethod: null,
|
||||
remark: null,
|
||||
dataType: null
|
||||
dataType: null,
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
@ -450,9 +525,9 @@ export default {
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
this.ids = selection.map((item) => item.id);
|
||||
this.single = selection.length !== 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
@ -464,8 +539,8 @@ export default {
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getFire(id).then(response => {
|
||||
const id = row.id || this.ids;
|
||||
getFire(id).then((response) => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改火情管理";
|
||||
@ -473,16 +548,16 @@ export default {
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateFire(this.form).then(response => {
|
||||
updateFire(this.form).then((response) => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addFire(this.form).then(response => {
|
||||
addFire(this.form).then((response) => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
@ -494,19 +569,27 @@ export default {
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal.confirm('是否确认删除火情管理编号为"' + ids + '"的数据项？').then(function() {
|
||||
this.$modal
|
||||
.confirm('是否确认删除火情管理编号为"' + ids + '"的数据项？')
|
||||
.then(function () {
|
||||
return delFire(ids);
|
||||
}).then(() => {
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('forest/fire/export', {
|
||||
...this.queryParams
|
||||
}, `fire_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
this.download(
|
||||
"forest/fire/export",
|
||||
{
|
||||
...this.queryParams,
|
||||
},
|
||||
`fire_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user