From 7384c83e7eb8de6cfae73ca1607db87ab21072f0 Mon Sep 17 00:00:00 2001
From: zhangshujuan <zhangshujuan@inspur.com>
Date: Thu, 23 Nov 2023 09:21:03 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=96=87=E4=BB=B6=E7=9A=84?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 god-ui/src/views/bigscreen1/index.vue         | 1590 +++++++++--------
 god-ui/src/views/bigscreen3/index.vue         |   48 +-
 god-ui/src/views/bigscreen5/index.vue         | 1550 ++++++++--------
 .../cityManage/mapInfo/geography/index1.vue   |    4 +-
 .../src/views/forest/firePosition/index.vue   |  347 ++--
 5 files changed, 1856 insertions(+), 1683 deletions(-)

diff --git a/god-ui/src/views/bigscreen1/index.vue b/god-ui/src/views/bigscreen1/index.vue
index 0f0b21c2..2e836906 100644
--- a/god-ui/src/views/bigscreen1/index.vue
+++ b/god-ui/src/views/bigscreen1/index.vue
@@ -1,822 +1,864 @@
 <template>
-    <div class="bigscreen-wrapper background-frame">
-        <div class="header-wrapper background-frame">
-            <div class="time-wrapper">
-                <span style="display: flex;">
-                    <span>{{ dateDay }}</span>
-                    <span style="padding-left: 20px;">{{ dateTime }}</span>
-                </span>
-            </div>
-            <div class="main-title">大方县山林生态安全监控平台</div>
-            <div class="weather-wrapper">
-            </div>
-        </div>
-        <div class="content-wrapper">
-            <div class="content-item" style="grid-row: span 2;">
-                <div class="content-header">野生动物种类红外检测</div>
-                <div class="content-inner table-wrapper">
-                    <div class="table-header">
-                        <div
-                            class="table-header-cell"
-                            v-for="column in columns1"
-                            :style="`width:${column.width};`"
-                        >{{ 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>
-                    </div>
-                </div>
-            </div>
-            <div
-                class="content-item middle-map-wrapper"
-                style="grid-row: span 3;grid-column: span 2;"
-                id="middleMap"
-            >
-                <div class="middle-tool-tip" style="display: none;">
-                    <div class="middle-tool-title"></div>
-                </div>
-            </div>
-            <div class="content-item">
-                <div class="content-header">森林环境监测</div>
-                <div class="content-inner forest-wrapper">
-                    <div class="forest-item">
-                        <i></i>
-                        <div class="forest-info">山洪可能性</div>
-                        <div class="forest-level">较低</div>
-                    </div>
-                    <div class="forest-item">
-                        <i></i>
-                        <div class="forest-info">降水量</div>
-                        <div class="forest-level">1.2mm</div>
-                    </div>
-                    <div class="forest-item">
-                        <i></i>
-                        <div class="forest-info">植被覆盖率</div>
-                        <div class="forest-level">54.33%</div>
-                    </div>
-                    <div class="forest-item">
-                        <i></i>
-                        <div class="forest-info">温度</div>
-                        <div class="forest-level">16°C</div>
-                    </div>
-                    <div class="forest-item">
-                        <i></i>
-                        <div class="forest-info">湿度</div>
-                        <div class="forest-level">75%</div>
-                    </div>
-                    <div class="forest-item">
-                        <i></i>
-                        <div class="forest-info">地表径流量</div>
-                        <div class="forest-level"> 11.108 mm</div>
-                    </div>
-                </div>
-            </div>
-            <div
-                class="content-item"
-                style="grid-row: span 2;"
-            >
-                <div class="content-header">季节性河流监测</div>
-                <div class="content-inner table-wrapper">
-                    <div class="table-header">
-                        <div
-                            class="table-header-cell"
-                            v-for="column in columns3"
-                            :style="`width:${column.width};`"
-                        >{{ 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>
-                    </div>
-                </div>
-            </div>
-            <div class="content-item">
-                <div class="content-header">山林虫情预防</div>
-                <div class="content-inner table-wrapper">
-                    <div class="table-header">
-                        <div
-                            class="table-header-cell"
-                            v-for="column in columns2"
-                            :style="`width:${column.width};`"
-                        >{{ 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;"
-            >
-                <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-header content-header1">林植被覆盖分析</div>
-                <div class="content-inner" id="treeChart"></div>
-            </div>
-        </div>
-        <div class="footer-wrapper"></div>
+  <div class="bigscreen-wrapper background-frame">
+    <div class="header-wrapper background-frame">
+      <div class="time-wrapper">
+        <span style="display: flex">
+          <span>{{ dateDay }}</span>
+          <span style="padding-left: 20px">{{ dateTime }}</span>
+        </span>
+      </div>
+      <div class="main-title">大方县山林生态安全监控平台</div>
+      <div class="weather-wrapper"></div>
     </div>
+    <div class="content-wrapper">
+      <div class="content-item" style="grid-row: span 2">
+        <div class="content-header">野生动物种类红外检测</div>
+        <div class="content-inner table-wrapper">
+          <div class="table-header">
+            <div
+              class="table-header-cell"
+              v-for="column in columns1"
+              :style="`width:${column.width};`"
+            >
+              {{ 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>
+          </div>
+        </div>
+      </div>
+      <div
+        class="content-item middle-map-wrapper"
+        style="grid-row: span 3; grid-column: span 2"
+        id="middleMap"
+      >
+        <div class="middle-tool-tip" style="display: none">
+          <div class="middle-tool-title"></div>
+        </div>
+      </div>
+      <div class="content-item">
+        <div class="content-header">森林环境监测</div>
+        <div class="content-inner forest-wrapper">
+          <div class="forest-item">
+            <i></i>
+            <div class="forest-info">山洪可能性</div>
+            <div class="forest-level">较低</div>
+          </div>
+          <div class="forest-item">
+            <i></i>
+            <div class="forest-info">降水量</div>
+            <div class="forest-level">1.2mm</div>
+          </div>
+          <div class="forest-item">
+            <i></i>
+            <div class="forest-info">植被覆盖率</div>
+            <div class="forest-level">54.33%</div>
+          </div>
+          <div class="forest-item">
+            <i></i>
+            <div class="forest-info">温度</div>
+            <div class="forest-level">16°C</div>
+          </div>
+          <div class="forest-item">
+            <i></i>
+            <div class="forest-info">湿度</div>
+            <div class="forest-level">75%</div>
+          </div>
+          <div class="forest-item">
+            <i></i>
+            <div class="forest-info">地表径流量</div>
+            <div class="forest-level">11.108 mm</div>
+          </div>
+        </div>
+      </div>
+      <div class="content-item" style="grid-row: span 2">
+        <div class="content-header">季节性河流监测</div>
+        <div class="content-inner table-wrapper">
+          <div class="table-header">
+            <div
+              class="table-header-cell"
+              v-for="column in columns3"
+              :style="`width:${column.width};`"
+            >
+              {{ 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>
+          </div>
+        </div>
+      </div>
+      <div class="content-item">
+        <div class="content-header">山林虫情预防</div>
+        <div class="content-inner table-wrapper">
+          <div class="table-header">
+            <div
+              class="table-header-cell"
+              v-for="column in columns2"
+              :style="`width:${column.width};`"
+            >
+              {{ 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">
+        <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-header content-header1">林植被覆盖分析</div>
+        <div class="content-inner" id="treeChart"></div>
+      </div>
+    </div>
+    <div class="footer-wrapper"></div>
+  </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: '',
-            timeTimer: null,
-            columns1: [
-                {
-                    key: 'name',
-                    label: '名称',
-                    width: '25%'
-                },
-                {
-                    key: 'level',
-                    label: '级别',
-                    width: '25%'
-                },
-                {
-                    key: 'this',
-                    label: '今年数量',
-                    width: '25%'
-                },
-                {
-                    key: 'last',
-                    label: '去年数量',
-                    width: '25%'
-                },
-            ],
-            data1: [
-                {
-                    name: '黔金丝猴',
-                    level: '国家一级',
-                    this: '713',
-                    last: '683'
-                },
-                {
-                    name: '黑叶猴',
-                    level: '国家一级',
-                    this: '672',
-                    last: '687'
-                },
-                {
-                    name: '林麝',
-                    level: '国家一级',
-                    this: '643',
-                    last: '674'
-                },
-                {
-                    name: '黑颈鹤',
-                    level: '国家一级',
-                    this: '1231',
-                    last: '1286'
-                },
-                {
-                    name: '穿山甲',
-                    level: '国家一级',
-                    this: '741',
-                    last: '709'
-                },
-                {
-                    name: '鸳鸯',
-                    level: '国家二级',
-                    this: '1239',
-                    last: '1342'
-                },
-                {
-                    name: '红腹锦鸡',
-                    level: '国家二级',
-                    this: '1105',
-                    last: '997'
-                },
-                {
-                    name: '猕猴',
-                    level: '国家二级',
-                    this: '1302',
-                    last: '1241'
-                },
-            ],
-            columns2: [
-                {
-                    key: 'read',
-                    label: '监测因子',
-                    width: '33%'
-                },
-                {
-                    key: 'multi',
-                    label: '多发季节',
-                    width: '33%'
-                },
-                {
-                    key: 'operate',
-                    label: '预防措施',
-                    width: '34%'
-                },
-            ],
-            data2: [
-                {
-                    read: '松线虫',
-                    multi: '秋季',
-                    operate: '提前航化洒药',
-                },
-                {
-                    read: '美国白蛾',
-                    multi: '秋冬季',
-                    operate: '提前航化洒药',
-                },
-                {
-                    read: '草原蝗虫',
-                    multi: '秋季',
-                    operate: '生物农药治理',
-                },
-            ],
-            columns3: [
-                {
-                    key: 'name',
-                    label: '河流名称',
-                    width: '33%'
-                },
-                {
-                    key: 'water',
-                    label: '水量丰沛程度',
-                    width: '34%'
-                },
-                {
-                    key: 'floor',
-                    label: '流量',
-                    width: '33%'
-                },
-            ],
-            data3: [
-                {
-                    name: '白水河',
-                    water: '丰水期',
-                    floor: '6.2m³/s',
-                },
-                {
-                    name: '牛兰江',
-                    water: '枯水期',
-                    floor: '6.5m³/s',
-                },
-                {
-                    name: '林麝',
-                    water: '丰水期',
-                    floor: '7.5m³/s',
-                },
-                {
-                    name: '黑颈鹤',
-                    water: '丰水期',
-                    floor: '31.2m³/s',
-                },
-                {
-                    name: '穿山甲',
-                    water: '丰水期',
-                    floor: '44m³/s',
-                },
-            ],
-        }
-    },
-    created() {
-        this.getNowTime();
-        this.timeTimer = setInterval(() => {
-            this.getNowTime();
-        }, 1000);
-    },
-    beforeDestroy() {
-        clearInterval(this.timeTimer)
-    },
-    mounted() {
-        this.initChart();
-        this.initPieChart();
-        this.initMap();
-    },
-    methods: {
-        initChart() {
-            const chart = document.getElementById("weakSomeChart");
-            const chartInstance = echarts.init(chart, 'default');
-            chartInstance.setOption({
-                title: {
-                    text: "",
-                    textStyle: {
-                        fontSize: 16
-                    },
-                },
-                textStyle: {
-                    color: '#fff'
-                },
-                color: [
-                    '#306fff',
-                    '#30c9c9',
-                    '#f7ad08',
-                    '#93beff'
-                ],
-                tooltip: {
-                    show: true
-                },
-                xAxis: {
-                    show: true,
-                    name: "",
-                    nameLocation: "end", // 坐标轴名称及显示位置，可以时start和middle
-                    nameTextStyle: {
-                        // 坐标轴名称的样式
-                        color: "#9b9ba4",
-                    },
-                    nameGap: 15, // 坐标轴名称与轴线的距离
-                    inverse: false, // 是否反向坐标轴
-                    axisLabel: {
-                        // 刻度标签的样式
-                        hideOverlap: true, // 隐藏重叠的标签
-                        color: "#9b9ba4",
-                    },
-                    axisLine: {
-                        show: false,
-                    },
-                    position: "bottom",
-                    offset: 0, // 相对正常位置的偏移
-                    type: "category", // 类目轴，也可以是time， value， 对数轴log
-                    data: ['松线虫', '美国白蛾', '松墨天牛', '松赤枯病', '桃缩叶病', '松斑蛾', '茶袋蛾'],
-                },
-                yAxis: {
-                    name: "单位:万亩",
-                    nameTextStyle: {
-                        // 坐标轴名称的样式
-                        color: "#9b9ba4",
-                    },
-                    axisLabel: {
-                        // 刻度标签的样式
-                        hideOverlap: true, // 隐藏重叠的标签
-                        color: "#9b9ba4",
-                    },
-                    axisLine: {
-                        show: false,
-                    },
-                    minorTick: {
-                        // 坐标轴刻度线相关配置
-                        show: false,
-                    },
-                    splitLine: {
-                        // 坐标轴在grid区域中的分割线
-                        show: true,
-                        lineStyle: {
-                            type: 'dashed',
-                            color: 'rgba(255, 255, 255, 0.3)'
-                        }
-                    },
-                },
-                series: [
-                    {
-                        name: '2022',
-                        data: [6.7, 7.5, 4.52, 1.3, 0.2, 0.96, 1.2],
-                        type: 'bar',
-                        barWidth: 30,
-                        showBackground: true,
-                        itemStyle: {
-                            color: '#0f9f98'
-                        },
-                        areaStyle: {
-                        normal: {
-                            color: {
-                            x: 0,
-                            y: 0,
-                            x2: 0,
-                            y2: 1,
-                            colorStops: [{
-                                offset: 0,
-                                color: "#226dc0" // 0% 处的颜色
-                                }, {
-                                offset: 0.7,
-                                color: "#226dc040" // 100% 处的颜色
-                                }],
-                                globalCoord: false // 缺省为 false
-                                }
-                            }
-                        },
-                    },
-                    {
-                        name: '2023',
-                        data: [6.85, 5.5, 4.96, 1.1, 0.27, 0.16, 0.9],
-                        type: 'bar',
-                        barWidth: 30,
-                        showBackground: true,
-                        itemStyle: {
-                            color: '#0aa473'
-                        },
-                        areaStyle: {
-                        normal: {
-                            color: {
-                            x: 0,
-                            y: 0,
-                            x2: 0,
-                            y2: 1,
-                            colorStops: [{
-                                offset: 0,
-                                color: "#226dc0" // 0% 处的颜色
-                                }, {
-                                offset: 0.7,
-                                color: "#226dc040" // 100% 处的颜色
-                                }],
-                                globalCoord: false // 缺省为 false
-                                }
-                            }
-                        },
-                    }
-                ],
-                legend: {
-                    show: true,
-                    // 图例配置
-                    orient: "horizontal", // horizontal水平布局， vertical垂直布局
-                    right: "10", // 水平安放位置
-                    top: "10", // 垂直安放位置
-                    // backgroundColor: "#000000",
-                    // borderColor: "#ccc",
-                    // borderWidth: 0,
-                    padding: 5,
-                    itemGap: 10, // 各个item之间的距离
-                    itemWidth: 10, // 图例图形宽度
-                    itemHeight: 10, // 图例图形高度
-                    borderRadius: 10,
-                    textStyle: {
-                        color: "#d7d8db",
-                        fontSize: 9,
-                    },
-                    lineStyle: {
-                        type: 'dotted',
-                        opacity: 0
-                    }
-                },
-                grid: {
-                    left: '6%',
-                    top: '19%',
-                    right: '2%',
-                    bottom: '13%'
-                }
-            }, true, true);
-            window.addEventListener("resize", () => {
-                this.$nextTick(() => {
-                    chartInstance && chartInstance.resize();
-                })
-            })
+  data() {
+    return {
+      map: null,
+      ImageMap,
+      dateDay: "",
+      dateTime: "",
+      timeTimer: null,
+      columns1: [
+        {
+          key: "name",
+          label: "名称",
+          width: "25%",
         },
-        initPieChart() {
-            const chart = document.getElementById("treeChart");
-            const chartInstance = echarts.init(chart, 'default');
-            chartInstance.setOption({
-                textStyle: {
-                    color: '#7a8898'
-                },
-                color: [
-                    '#37A2DA',
-                    '#9FE6B8',
-                    '#FFDB5C',
-                    '#ff9f7f',
-                    '#fb7293',
-                    '#E062AE',
-                    '#32C5E9',
-                    '#67E0E3',
-                    '#E690D1',
-                    '#e7bcf3',
-                    '#9d96f5',
-                    '#8378EA',
-                    '#96BFFF'
-                ],
-                tooltip: {
-                    trigger: 'item'
-                },
-                legend: {
-                    // 图例配置
-                    orient: "vertical",
-                    right: 50,
-                    itemGap: 20,
-                    top: 'center',
-                    textStyle: {
-                        color: '#fff'
-                    },
-                },
-                series: [
-                    {
-                        name: "",
-                        type: "pie",
-                        radius: ["36%", "65%"],
-                        center: ["30%", "50%"],
-                        data: [
-                            { name: '阔叶林', value: 204 },
-                            { name: '针叶林', value: 166 },
-                            { name: '灌从和灌草从', value: 47 },
-                            { name: '沼泽与水生植被', value: 34 },
-                            { name: '竹林', value: 25 },
-                        ],
-                        emphasis: {
-                            itemStyle: {
-                                shadowBlur: 10,
-                                shadowOffsetX: 0,
-                                shadowColor: "rgba(0, 0, 0, 0.5)",
-                            },
-                        },
-                        label: {
-                            show: true,
-                            formatter: "{d}%"
-                        }
-                    }
-                ],
-                grid: {
-                    x: 80,
-                    x2: 80,
-                    y: 80,
-                    y2: 60,
-                    // 网格
-                    backgroundColor: "rgba(0,0,0,0)",
-                    borderWidth: 2,
-                    borderColor: "#fff232",
-                },
-                polor: {
-                    center: ["30%", "50%"],
-                },
-            }, true, true);
-            window.addEventListener("resize", () => {
-                this.$nextTick(() => {
-                    chartInstance && chartInstance.resize();
-                })
-            })
+        {
+          key: "level",
+          label: "级别",
+          width: "25%",
         },
-        getNowTime() {
-            const date = new Date();
-            let year = date.getFullYear();	//获取当前年份
-            let month = date.getMonth() + 1;	//获取当前月份（记得+1）
-            month = month < 10 ? '0' + month.toString() : month.toString();
-            let dates = date.getDate();		//获取当前是几日
-            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());
+        {
+          key: "this",
+          label: "今年数量",
+          width: "25%",
         },
-        initMap() {
-            this.map = new AMap.Map("middleMap", {
-                zoom: 11,//级别
-                center: [105.60178899809716, 27.14450662262202], //中心点坐标
-                mapStyle: 'amap://styles/blue',
-            });
+        {
+          key: "last",
+          label: "去年数量",
+          width: "25%",
+        },
+      ],
+      data1: [
+        {
+          name: "黔金丝猴",
+          level: "国家一级",
+          this: "713",
+          last: "683",
+        },
+        {
+          name: "黑叶猴",
+          level: "国家一级",
+          this: "672",
+          last: "687",
+        },
+        {
+          name: "林麝",
+          level: "国家一级",
+          this: "643",
+          last: "674",
+        },
+        {
+          name: "黑颈鹤",
+          level: "国家一级",
+          this: "1231",
+          last: "1286",
+        },
+        {
+          name: "穿山甲",
+          level: "国家一级",
+          this: "741",
+          last: "709",
+        },
+        {
+          name: "鸳鸯",
+          level: "国家二级",
+          this: "1239",
+          last: "1342",
+        },
+        {
+          name: "红腹锦鸡",
+          level: "国家二级",
+          this: "1105",
+          last: "997",
+        },
+        {
+          name: "猕猴",
+          level: "国家二级",
+          this: "1302",
+          last: "1241",
+        },
+      ],
+      columns2: [
+        {
+          key: "read",
+          label: "监测因子",
+          width: "33%",
+        },
+        {
+          key: "multi",
+          label: "多发季节",
+          width: "33%",
+        },
+        {
+          key: "operate",
+          label: "预防措施",
+          width: "34%",
+        },
+      ],
+      data2: [
+        {
+          read: "松线虫",
+          multi: "秋季",
+          operate: "提前航化洒药",
+        },
+        {
+          read: "美国白蛾",
+          multi: "秋冬季",
+          operate: "提前航化洒药",
+        },
+        {
+          read: "草原蝗虫",
+          multi: "秋季",
+          operate: "生物农药治理",
+        },
+      ],
+      columns3: [
+        {
+          key: "name",
+          label: "河流名称",
+          width: "33%",
+        },
+        {
+          key: "water",
+          label: "水量丰沛程度",
+          width: "34%",
+        },
+        {
+          key: "floor",
+          label: "流量",
+          width: "33%",
+        },
+      ],
+      data3: [
+        {
+          name: "白水河",
+          water: "丰水期",
+          floor: "6.2m³/s",
+        },
+        {
+          name: "牛兰江",
+          water: "枯水期",
+          floor: "6.5m³/s",
+        },
+        {
+          name: "林麝",
+          water: "丰水期",
+          floor: "7.5m³/s",
+        },
+        {
+          name: "黑颈鹤",
+          water: "丰水期",
+          floor: "31.2m³/s",
+        },
+        {
+          name: "穿山甲",
+          water: "丰水期",
+          floor: "44m³/s",
+        },
+      ],
+    };
+  },
+  created() {
+    this.getNowTime();
+    this.timeTimer = setInterval(() => {
+      this.getNowTime();
+    }, 1000);
+  },
+  beforeDestroy() {
+    clearInterval(this.timeTimer);
+  },
+  mounted() {
+    this.initChart();
+    this.initPieChart();
+    this.initMap();
+  },
+  methods: {
+    initChart() {
+      const chart = document.getElementById("weakSomeChart");
+      const chartInstance = echarts.init(chart, "default");
+      chartInstance.setOption(
+        {
+          title: {
+            text: "",
+            textStyle: {
+              fontSize: 16,
+            },
+          },
+          textStyle: {
+            color: "#fff",
+          },
+          color: ["#306fff", "#30c9c9", "#f7ad08", "#93beff"],
+          tooltip: {
+            show: true,
+          },
+          xAxis: {
+            show: true,
+            name: "",
+            nameLocation: "end", // 坐标轴名称及显示位置，可以时start和middle
+            nameTextStyle: {
+              // 坐标轴名称的样式
+              color: "#9b9ba4",
+            },
+            nameGap: 15, // 坐标轴名称与轴线的距离
+            inverse: false, // 是否反向坐标轴
+            axisLabel: {
+              // 刻度标签的样式
+              hideOverlap: true, // 隐藏重叠的标签
+              color: "#9b9ba4",
+            },
+            axisLine: {
+              show: false,
+            },
+            position: "bottom",
+            offset: 0, // 相对正常位置的偏移
+            type: "category", // 类目轴，也可以是time， value， 对数轴log
+            data: [
+              "松线虫",
+              "美国白蛾",
+              "松墨天牛",
+              "松赤枯病",
+              "桃缩叶病",
+              "松斑蛾",
+              "茶袋蛾",
+            ],
+          },
+          yAxis: {
+            name: "单位:万亩",
+            nameTextStyle: {
+              // 坐标轴名称的样式
+              color: "#9b9ba4",
+            },
+            axisLabel: {
+              // 刻度标签的样式
+              hideOverlap: true, // 隐藏重叠的标签
+              color: "#9b9ba4",
+            },
+            axisLine: {
+              show: false,
+            },
+            minorTick: {
+              // 坐标轴刻度线相关配置
+              show: false,
+            },
+            splitLine: {
+              // 坐标轴在grid区域中的分割线
+              show: true,
+              lineStyle: {
+                type: "dashed",
+                color: "rgba(255, 255, 255, 0.3)",
+              },
+            },
+          },
+          series: [
+            {
+              name: "2022",
+              data: [6.7, 7.5, 4.52, 1.3, 0.2, 0.96, 1.2],
+              type: "bar",
+              barWidth: 30,
+              showBackground: true,
+              itemStyle: {
+                color: "#0f9f98",
+              },
+              areaStyle: {
+                normal: {
+                  color: {
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "#226dc0", // 0% 处的颜色
+                      },
+                      {
+                        offset: 0.7,
+                        color: "#226dc040", // 100% 处的颜色
+                      },
+                    ],
+                    globalCoord: false, // 缺省为 false
+                  },
+                },
+              },
+            },
+            {
+              name: "2023",
+              data: [6.85, 5.5, 4.96, 1.1, 0.27, 0.16, 0.9],
+              type: "bar",
+              barWidth: 30,
+              showBackground: true,
+              itemStyle: {
+                color: "#0aa473",
+              },
+              areaStyle: {
+                normal: {
+                  color: {
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "#226dc0", // 0% 处的颜色
+                      },
+                      {
+                        offset: 0.7,
+                        color: "#226dc040", // 100% 处的颜色
+                      },
+                    ],
+                    globalCoord: false, // 缺省为 false
+                  },
+                },
+              },
+            },
+          ],
+          legend: {
+            show: true,
+            // 图例配置
+            orient: "horizontal", // horizontal水平布局， vertical垂直布局
+            right: "10", // 水平安放位置
+            top: "10", // 垂直安放位置
+            // backgroundColor: "#000000",
+            // borderColor: "#ccc",
+            // borderWidth: 0,
+            padding: 5,
+            itemGap: 10, // 各个item之间的距离
+            itemWidth: 10, // 图例图形宽度
+            itemHeight: 10, // 图例图形高度
+            borderRadius: 10,
+            textStyle: {
+              color: "#d7d8db",
+              fontSize: 9,
+            },
+            lineStyle: {
+              type: "dotted",
+              opacity: 0,
+            },
+          },
+          grid: {
+            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(
+        {
+          textStyle: {
+            color: "#7a8898",
+          },
+          color: [
+            "#37A2DA",
+            "#9FE6B8",
+            "#FFDB5C",
+            "#ff9f7f",
+            "#fb7293",
+            "#E062AE",
+            "#32C5E9",
+            "#67E0E3",
+            "#E690D1",
+            "#e7bcf3",
+            "#9d96f5",
+            "#8378EA",
+            "#96BFFF",
+          ],
+          tooltip: {
+            trigger: "item",
+          },
+          legend: {
+            // 图例配置
+            orient: "vertical",
+            right: 50,
+            itemGap: 20,
+            top: "center",
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          series: [
+            {
+              name: "",
+              type: "pie",
+              radius: ["36%", "65%"],
+              center: ["30%", "50%"],
+              data: [
+                { name: "阔叶林", value: 204 },
+                { name: "针叶林", value: 166 },
+                { name: "灌从和灌草从", value: 47 },
+                { name: "沼泽与水生植被", value: 34 },
+                { name: "竹林", value: 25 },
+              ],
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: "rgba(0, 0, 0, 0.5)",
+                },
+              },
+              label: {
+                show: true,
+                formatter: "{d}%",
+              },
+            },
+          ],
+          grid: {
+            x: 80,
+            x2: 80,
+            y: 80,
+            y2: 60,
+            // 网格
+            backgroundColor: "rgba(0,0,0,0)",
+            borderWidth: 2,
+            borderColor: "#fff232",
+          },
+          polor: {
+            center: ["30%", "50%"],
+          },
+        },
+        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();
+      let dates = date.getDate(); //获取当前是几日
+      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());
+    },
+    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",
+          });
 
-            // 加载插件
-            // AMap.plugin([
-            //     'AMap.MapType',
-            //     'AMap.ToolBar',
-            //     'AMap.Scale'
-            // ], () => {//异步同时加载多个插件
-            //     const mapType = new AMap.MapType();
-            //     this.map.addControl(mapType);
-            //     const toolbar = new AMap.ToolBar();
-            //     this.map.addControl(toolbar);
-            //     const scale = new AMap.Scale();
-            //     this.map.addControl(scale);
-            // });
+          // 加载插件
+          // AMap.plugin([
+          //     'AMap.MapType',
+          //     'AMap.ToolBar',
+          //     'AMap.Scale'
+          // ], () => {//异步同时加载多个插件
+          //     const mapType = new AMap.MapType();
+          //     this.map.addControl(mapType);
+          //     const toolbar = new AMap.ToolBar();
+          //     this.map.addControl(toolbar);
+          //     const scale = new AMap.Scale();
+          //     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(),
-            //     new AMap.TileLayer.RoadNet()
-            // ]
-            // this.map.setLayers(layers);
-            
-            const markers = [
-                {
-                    position: [105.62449121519921, 27.136754069705578],
-                    info: {
-                        plantareaAddress: '烟雾传感器',
-                        dataList: [
-                            {
-                                label: '编号',
-                                value: 'EH09801'
-                            },
-                            {
-                                label: '烟雾浓度',
-                                value: '4.3ug/m³'
-                            },
-                            {
-                                label: '状态',
-                                value: ' 正常'
-                            },
-                            {
-                                label: '负责人',
-                                value: ' 祁星'
-                            },
-                            {
-                                label: '联系方式',
-                                value: ' 15844596255'
-                            },
-                        ]
-                    }
-                }
-            ]
-            markers.forEach(item => {
-                this.addMapMarker(
-                    item.position,
-                    'ii',
-                    item.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: ''
-            });
-            this.map.add(marker);
-            marker.on('click', (e) => {
-                this.showInfoWindow(sourceData[0], sourceData[1], { type: '#304156',  ...info })
-            })
-        },
-        // 显示信息窗体
-        showInfoWindow(lng, lat, sourceInfo) {
-            let content = `
+          // const layers = [
+          //     new AMap.TileLayer.Satellite(),
+          //     new AMap.TileLayer.RoadNet()
+          // ]
+          // this.map.setLayers(layers);
+
+          const markers = [
+            {
+              position: [105.62449121519921, 27.136754069705578],
+              info: {
+                plantareaAddress: "烟雾传感器",
+                dataList: [
+                  {
+                    label: "编号",
+                    value: "EH09801",
+                  },
+                  {
+                    label: "烟雾浓度",
+                    value: "4.3ug/m³",
+                  },
+                  {
+                    label: "状态",
+                    value: " 正常",
+                  },
+                  {
+                    label: "负责人",
+                    value: " 祁星",
+                  },
+                  {
+                    label: "联系方式",
+                    value: " 15844596255",
+                  },
+                ],
+              },
+            },
+          ];
+          markers.forEach((item) => {
+            this.addMapMarker(item.position, "ii", item.info);
+          });
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    },
+    // 添加图形点标记
+    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: "",
+      });
+      this.map.add(marker);
+      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
-            });
-            infoWindow.open(this.map, [lng, lat])
-        },
-    }
-}
+      const infoWindow = new AMap.InfoWindow({
+        content,
+        anchor: "middle-left",
+        isCustom: true,
+      });
+      infoWindow.open(this.map, [lng, lat]);
+    },
+  },
+};
 </script>
 <style scoped lang="scss">
 @import url(./bigscreen.scss);
 .bigscreen-wrapper {
-    background-image: url(./assets/bg.png);
-    .header-wrapper {
-        position: relative;
-        background-image: url(./assets/headerBg.png);
-        .time-wrapper {
-            font-family: "BigScreenFont";
-            background-image: linear-gradient(to top, #a5dfff, white);
-            -webkit-background-clip: text;
-            color: transparent;
-            position: relative;
-            top: 10px;
-            left: 16px;
-        }
-        .main-title {
-            position: relative;
-            top: -.5vh;
-        }
+  background-image: url(./assets/bg.png);
+  .header-wrapper {
+    position: relative;
+    background-image: url(./assets/headerBg.png);
+    .time-wrapper {
+      font-family: "BigScreenFont";
+      background-image: linear-gradient(to top, #a5dfff, white);
+      -webkit-background-clip: text;
+      color: transparent;
+      position: relative;
+      top: 10px;
+      left: 16px;
     }
-    .content-wrapper {
-        display: grid;
-        grid-template-columns: 2fr 2fr 2fr 2fr;
-        grid-template-rows: 6fr 2fr 6fr 7fr;
-        padding: 16px;
-        gap: 14px;
-        .content-item {
-            .content-header {
-                height: 40px;
-                padding-left: 50px;
-                padding-top: 9px;
-                font-family: 'BigScreenFont';
-                color: white;
-                background-image: url(./assets/titleBg.png);
-                background-size: 100% 100%;
-            }
-            .content-header1 {
-                background-image: url(./assets/titleBg1.png) !important;
-            }
-            .content-inner {
-                margin-top: 6px;
-                height: calc(100% - 46px);
-                background-image: url(./assets/contentInner.png);
-                background-size: 100% 100%;
-            }
-        }
+    .main-title {
+      position: relative;
+      top: -0.5vh;
     }
+  }
+  .content-wrapper {
+    display: grid;
+    grid-template-columns: 2fr 2fr 2fr 2fr;
+    grid-template-rows: 6fr 2fr 6fr 7fr;
+    padding: 16px;
+    gap: 14px;
+    .content-item {
+      .content-header {
+        height: 40px;
+        padding-left: 50px;
+        padding-top: 9px;
+        font-family: "BigScreenFont";
+        color: white;
+        background-image: url(./assets/titleBg.png);
+        background-size: 100% 100%;
+      }
+      .content-header1 {
+        background-image: url(./assets/titleBg1.png) !important;
+      }
+      .content-inner {
+        margin-top: 6px;
+        height: calc(100% - 46px);
+        background-image: url(./assets/contentInner.png);
+        background-size: 100% 100%;
+      }
+    }
+  }
 }
 /**森林环境 */
 .forest-wrapper {
-    padding: 12px 18px;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr 1fr;
-    gap: 16px;
-    .forest-item {
-        background-color: #0b292f;
-        display: flex;
-        align-items: center;
-        padding: 0 14px;
-        i {
-            background-image: url(./assets/rect.png);
-            width: 20px;
-            height: 20px;
-            background-size: 100% 100%;
-        }
-        .forest-info {
-            color: #dbdbdb;
-            width: 130px;
-            padding: 0 12px;
-        }
-        .forest-level {
-            color: white;
-            padding: 0 8px;
-        }
+  padding: 12px 18px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr;
+  gap: 16px;
+  .forest-item {
+    background-color: #0b292f;
+    display: flex;
+    align-items: center;
+    padding: 0 14px;
+    i {
+      background-image: url(./assets/rect.png);
+      width: 20px;
+      height: 20px;
+      background-size: 100% 100%;
     }
+    .forest-info {
+      color: #dbdbdb;
+      width: 130px;
+      padding: 0 12px;
+    }
+    .forest-level {
+      color: white;
+      padding: 0 8px;
+    }
+  }
 }
 
 .table-wrapper {
-    padding: 10px;
-    position: relative;
-    overflow: auto;
-    .table-header {
-        display: flex;
-        color: #56d8d9;
-        padding: 8px 0 10px 0;
-        position: sticky;
-        .table-header-cell {
-            text-align: center;
-            font-size: 14px;
-        }
+  padding: 10px;
+  position: relative;
+  overflow: auto;
+  .table-header {
+    display: flex;
+    color: #56d8d9;
+    padding: 8px 0 10px 0;
+    position: sticky;
+    .table-header-cell {
+      text-align: center;
+      font-size: 14px;
     }
-    .table-row {
-        display: flex;
-        align-items: center;
-        color: #d4d5d5;
-        padding: 8px 0 10px 0;
-        border: 1px solid #3890919a;
-        .table-row-cell {
-            text-align: center;
-        }
-    }
-    .table-row:nth-child(odd) {
-        background-color: #031015;
-    }
-    .table-row:nth-child(even) {
-        background-color: #0a2329;
+  }
+  .table-row {
+    display: flex;
+    align-items: center;
+    color: #d4d5d5;
+    padding: 8px 0 10px 0;
+    border: 1px solid #3890919a;
+    .table-row-cell {
+      text-align: center;
     }
+  }
+  .table-row:nth-child(odd) {
+    background-color: #031015;
+  }
+  .table-row:nth-child(even) {
+    background-color: #0a2329;
+  }
 }
 .table-wrapper::-webkit-scrollbar {
-    width: 0px;
+  width: 0px;
 }
 
 /**山林中央地图 */
 .middle-map-wrapper {
-    position: relative;
-    .middle-tool-tip {
-        position: absolute;
-        top: 10px;
-        left: 10px;
-        padding: 10px;
-        z-index: 99;
-        .middle-tool-title {
-            font-family: 'BigScreenFont';
-        }
+  position: relative;
+  .middle-tool-tip {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    padding: 10px;
+    z-index: 99;
+    .middle-tool-title {
+      font-family: "BigScreenFont";
     }
+  }
 }
 </style>
diff --git a/god-ui/src/views/bigscreen3/index.vue b/god-ui/src/views/bigscreen3/index.vue
index 6eb885a2..e56fb06b 100644
--- a/god-ui/src/views/bigscreen3/index.vue
+++ b/god-ui/src/views/bigscreen3/index.vue
@@ -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,11 +201,21 @@ export default {
   },
   methods: {
     initMap() {
-      this.map = new AMap.Map("middleMap", {
-        zoom: 11,//级别
-        center: [105.60178899809716, 27.14450662262202], //中心点坐标
-        mapStyle: 'amap://styles/blue',
-      });
+      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",
+          });
+        })
+        .catch((e) => {
+          console.log(e);
+        });
     },
     getEchart2Data() {
       //   calEquipNumPerWeek({ locationId: 0 }).then((response) => {
@@ -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",
diff --git a/god-ui/src/views/bigscreen5/index.vue b/god-ui/src/views/bigscreen5/index.vue
index ca4f0b27..a859f47d 100644
--- a/god-ui/src/views/bigscreen5/index.vue
+++ b/god-ui/src/views/bigscreen5/index.vue
@@ -1,810 +1,846 @@
 <template>
-    <div class="bigscreen5-wrapper bigscreen-main-wrapper">
-        <div class="header-main-wrapper">
-            <div class="header-left-part-wrapper"><BigScreenTime /></div>
-            <div class="header-title-wrapper">重庆银钢科技数字农机管理平台</div>
-            <div class="header-right-part-wrapper"></div>
-        </div>
-        <div class="content-main-wrapper grid-wrapper">
-            <div class="grid-item">
-                <div class="bigscreen-item-wrapper">
-                    <div class="bigscreen-item-title">农机作业类型分析</div>
-                    <div class="bigscreen-item-content" id="chart1"></div>
-                </div>
-            </div>
-            <div
-                class="grid-item middle-map-wrapper"
-                style="grid-row: span 3;padding: 0;"
-            >
-                <div class="top-card-wrapper">
-                    <div class="top-card-item">
-                        <div class="top-card-main">
-                            <div class="icon-warpper icon1"></div>
-                            <div class="top-card-main-title linear-font-type">农机数量</div>
-                            <div class="top-card-main-value linear-font-type">128</div>
-                        </div>
-                        <div class="top-card-extra-wrapper">
-                            <div class="top-card-extra-item">
-                                <span>耕整地农机</span>
-                                <span>48</span>
-                            </div>
-                            <div class="top-card-extra-item">
-                                <span>种植施肥农机</span>
-                                <span>21</span>
-                            </div>
-                            <div class="top-card-extra-item">
-                                <span>灌溉喷药农机</span>
-                                <span>18</span>
-                            </div>
-                            <div class="top-card-extra-item">
-                                <span>收割采摘农机</span>
-                                <span>41</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="top-card-item">
-                        <div class="top-card-main">
-                            <div class="icon-warpper icon2"></div>
-                            <div class="top-card-main-title linear-font-type">作业地块</div>
-                            <div class="top-card-main-value linear-font-type">129</div>
-                        </div>
-                        <div class="top-card-extra-wrapper">
-                            <div class="top-card-extra-item">
-                                <span>AB线形</span>
-                                <span>76</span>
-                            </div>
-                            <div class="top-card-extra-item">
-                                <span>“回”线形</span>
-                                <span>25</span>
-                            </div>
-                            <div class="top-card-extra-item">
-                                <span>S线形</span>
-                                <span>12</span>
-                            </div>
-                            <div class="top-card-extra-item">
-                                <span>“几”线形</span>
-                                <span>16</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="top-card-item">
-                        <div class="top-card-main">
-                            <div class="icon-warpper icon3"></div>
-                            <div class="top-card-main-title linear-font-type">作业亩数</div>
-                            <div class="top-card-main-value linear-font-type"></div>
-                        </div>
-                        <div class="top-card-extra-wrapper">
-                            <div class="top-card-extra-item">
-                                <span>总计作业</span>
-                                <span>7,328</span>
-                            </div>
-                            <div class="top-card-extra-item">
-                                <span>今日作业</span>
-                                <span>68</span>
-                            </div>
-                            <div class="top-card-extra-item">
-                                <span>本月作业</span>
-                                <span>1021</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div id="middleMap"></div>
-            </div>
-            <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="nong-info-item">
-                                <div class="nong-info-item-title">128</div>
-                                <div class="nong-info-item-value">农机总数</div>
-                            </div>
-                            <div class="nong-info-item">
-                                <div class="nong-info-item-title">32</div>
-                                <div class="nong-info-item-value">正在作业</div>
-                            </div>
-                            <div class="nong-info-item">
-                                <div class="nong-info-item-title">88</div>
-                                <div class="nong-info-item-value">空闲</div>
-                            </div>
-                            <div class="nong-info-item">
-                                <div class="nong-info-item-title">7</div>
-                                <div class="nong-info-item-value">故障</div>
-                            </div>
-                        </div>
-                        <div style="width: 100%;" id="chart2"></div>
-                    </div>
-                </div>
-            </div>
-            <div class="grid-item">
-                <div class="bigscreen-item-wrapper">
-                    <div class="bigscreen-item-title">农机运行情况</div>
-                    <div class="bigscreen-item-content">
-                        <bigScreen-table
-                            :columns="columns1"
-                            :data="data1"
-                            rowStyle="background: none;margin-top: 3px;"
-                            rowOddStyle="background: none;margin-top: 3px;"
-                        >
-                        </bigScreen-table>
-                    </div>
-                </div>
-            </div>
-            <div class="grid-item">
-                <div class="bigscreen-item-wrapper">
-                    <div class="bigscreen-item-title">报警信息</div>
-                    <div class="bigscreen-item-content">
-                        <bigScreen-table
-                            :columns="columns2"
-                            :data="data2"
-                            rowStyle="background: none;margin-top: 7px;"
-                            rowOddStyle="background: none;margin-top: 7px;"
-                        >
-                        </bigScreen-table>
-                    </div>
-                </div>
-            </div>
-            <div class="grid-item">
-                <div class="bigscreen-item-wrapper">
-                    <div class="bigscreen-item-title">农机作业趋势分析</div>
-                    <div class="bigscreen-item-content" id="chart3"></div>
-                </div>
-            </div>
-            <div class="grid-item">
-                <div class="bigscreen-item-wrapper">
-                    <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);">
-                                <video :src="video" muted autoplay loop="loop"></video>
-                            </div>
-                            <div class="monitor-side-part right-part" style="width: calc(40% - 4px);">
-                                <div>农机号：B130121091001010034</div>
-                                <div>农机类型: 中耕机</div>
-                                <div>作业地块: D985</div>
-                                <div>作业线型: AB线</div>
-                                <div>面积: 3.3亩</div>
-                                <div>作业开始时间：2023/11/13 17:23:12</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="footer-main-wrapper"></div>
+  <div class="bigscreen5-wrapper bigscreen-main-wrapper">
+    <div class="header-main-wrapper">
+      <div class="header-left-part-wrapper"><BigScreenTime /></div>
+      <div class="header-title-wrapper">重庆银钢科技数字农机管理平台</div>
+      <div class="header-right-part-wrapper"></div>
     </div>
+    <div class="content-main-wrapper grid-wrapper">
+      <div class="grid-item">
+        <div class="bigscreen-item-wrapper">
+          <div class="bigscreen-item-title">农机作业类型分析</div>
+          <div class="bigscreen-item-content" id="chart1"></div>
+        </div>
+      </div>
+      <div
+        class="grid-item middle-map-wrapper"
+        style="grid-row: span 3; padding: 0"
+      >
+        <div class="top-card-wrapper">
+          <div class="top-card-item">
+            <div class="top-card-main">
+              <div class="icon-warpper icon1"></div>
+              <div class="top-card-main-title linear-font-type">农机数量</div>
+              <div class="top-card-main-value linear-font-type">128</div>
+            </div>
+            <div class="top-card-extra-wrapper">
+              <div class="top-card-extra-item">
+                <span>耕整地农机</span>
+                <span>48</span>
+              </div>
+              <div class="top-card-extra-item">
+                <span>种植施肥农机</span>
+                <span>21</span>
+              </div>
+              <div class="top-card-extra-item">
+                <span>灌溉喷药农机</span>
+                <span>18</span>
+              </div>
+              <div class="top-card-extra-item">
+                <span>收割采摘农机</span>
+                <span>41</span>
+              </div>
+            </div>
+          </div>
+          <div class="top-card-item">
+            <div class="top-card-main">
+              <div class="icon-warpper icon2"></div>
+              <div class="top-card-main-title linear-font-type">作业地块</div>
+              <div class="top-card-main-value linear-font-type">129</div>
+            </div>
+            <div class="top-card-extra-wrapper">
+              <div class="top-card-extra-item">
+                <span>AB线形</span>
+                <span>76</span>
+              </div>
+              <div class="top-card-extra-item">
+                <span>“回”线形</span>
+                <span>25</span>
+              </div>
+              <div class="top-card-extra-item">
+                <span>S线形</span>
+                <span>12</span>
+              </div>
+              <div class="top-card-extra-item">
+                <span>“几”线形</span>
+                <span>16</span>
+              </div>
+            </div>
+          </div>
+          <div class="top-card-item">
+            <div class="top-card-main">
+              <div class="icon-warpper icon3"></div>
+              <div class="top-card-main-title linear-font-type">作业亩数</div>
+              <div class="top-card-main-value linear-font-type"></div>
+            </div>
+            <div class="top-card-extra-wrapper">
+              <div class="top-card-extra-item">
+                <span>总计作业</span>
+                <span>7,328</span>
+              </div>
+              <div class="top-card-extra-item">
+                <span>今日作业</span>
+                <span>68</span>
+              </div>
+              <div class="top-card-extra-item">
+                <span>本月作业</span>
+                <span>1021</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div id="middleMap"></div>
+      </div>
+      <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="nong-info-item">
+                <div class="nong-info-item-title">128</div>
+                <div class="nong-info-item-value">农机总数</div>
+              </div>
+              <div class="nong-info-item">
+                <div class="nong-info-item-title">32</div>
+                <div class="nong-info-item-value">正在作业</div>
+              </div>
+              <div class="nong-info-item">
+                <div class="nong-info-item-title">88</div>
+                <div class="nong-info-item-value">空闲</div>
+              </div>
+              <div class="nong-info-item">
+                <div class="nong-info-item-title">7</div>
+                <div class="nong-info-item-value">故障</div>
+              </div>
+            </div>
+            <div style="width: 100%" id="chart2"></div>
+          </div>
+        </div>
+      </div>
+      <div class="grid-item">
+        <div class="bigscreen-item-wrapper">
+          <div class="bigscreen-item-title">农机运行情况</div>
+          <div class="bigscreen-item-content">
+            <bigScreen-table
+              :columns="columns1"
+              :data="data1"
+              rowStyle="background: none;margin-top: 3px;"
+              rowOddStyle="background: none;margin-top: 3px;"
+            >
+            </bigScreen-table>
+          </div>
+        </div>
+      </div>
+      <div class="grid-item">
+        <div class="bigscreen-item-wrapper">
+          <div class="bigscreen-item-title">报警信息</div>
+          <div class="bigscreen-item-content">
+            <bigScreen-table
+              :columns="columns2"
+              :data="data2"
+              rowStyle="background: none;margin-top: 7px;"
+              rowOddStyle="background: none;margin-top: 7px;"
+            >
+            </bigScreen-table>
+          </div>
+        </div>
+      </div>
+      <div class="grid-item">
+        <div class="bigscreen-item-wrapper">
+          <div class="bigscreen-item-title">农机作业趋势分析</div>
+          <div class="bigscreen-item-content" id="chart3"></div>
+        </div>
+      </div>
+      <div class="grid-item">
+        <div class="bigscreen-item-wrapper">
+          <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)">
+                <video :src="video" muted autoplay loop="loop"></video>
+              </div>
+              <div
+                class="monitor-side-part right-part"
+                style="width: calc(40% - 4px)"
+              >
+                <div>农机号：B130121091001010034</div>
+                <div>农机类型: 中耕机</div>
+                <div>作业地块: D985</div>
+                <div>作业线型: AB线</div>
+                <div>面积: 3.3亩</div>
+                <div>作业开始时间：2023/11/13 17:23:12</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="footer-main-wrapper"></div>
+  </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'
+  generateBaseOptions,
+  generatePieOptions,
+  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 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())}`
-        }
-        return {
-            video,
-            map: null,
-            columns1: [
-                {
-                    key: 'num',
-                    label: '农机编号',
-                    width: '50%'
-                },
-                {
-                    key: 'type',
-                    label: '类型',
-                    width: '25%'
-                },
-                {
-                    key: 'oil',
-                    label: '油耗(升/亩)',
-                    width: '25%'
-                },
-            ],
-            data1: [
-                {
-                    num: 'B140121091004010018',
-                    type: '起垄机',
-                    oil: '30.24'
-                },
-                {
-                    num: 'B130121091002040079',
-                    type: '穴播机',
-                    oil: '41.54'
-                },
-                {
-                    num: 'B130121091004020128',
-                    type: '小粒种子播种',
-                    oil: '57.65'
-                },
-                {
-                    num: 'B130121091004010107',
-                    type: '钉齿耙',
-                    oil: '62.45'
-                },
-                {
-                    num: 'B130121091002010011',
-                    type: '旋耕机',
-                    oil: '63.58'
-                },
-                {
-                    num: 'B130121091003010041',
-                    type: '中耕机',
-                    oil: '63.76'
-                },
-                {
-                    num: 'B130121091005010111',
-                    type: '追肥机 (液肥)',
-                    oil: '64.18'
-                },
-            ],
-            columns2: [
-                {
-                    key: 'num',
-                    label: '农机编号',
-                    width: '34%'
-                },
-                {
-                    key: 'info',
-                    label: '报警信息',
-                    width: '22%'
-                },
-                {
-                    key: 'area',
-                    label: '地块',
-                    width: '12%'
-                },
-                {
-                    key: 'time',
-                    label: '时间',
-                    width: '31%'
-                },
-            ],
-            data2: [
-                {
-                    num: 'B130121091001010068',
-                    info: '偏离轨迹',
-                    area: 'D101',
-                    time: formatter(4155322)
-                },
-                {
-                    num: '8130121091002020021',
-                    info: '低油量预警',
-                    area: 'D902',
-                    time: formatter(9155322)
-                },
-                {
-                    num: '8130121091003010009',
-                    info: '30分钟开机无作业',
-                    area: 'D713',
-                    time: formatter(10155322)
-                },
-                {
-                    num: '8130121091001040059',
-                    info: '发动机异常',
-                    area: 'D874',
-                    time: formatter(12155322)
-                },
-                {
-                    num: '8130121091004020028',
-                    info: '电平异常',
-                    area: 'D534',
-                    time: formatter(18155322)
-                },
-            ],
-        }
-    },
-    mounted() {
-        this.initChart1();
-        this.initChart2();
-        this.initChart3();
-        this.initMap();
-    },
-    methods: {
-        initMap() {
-            this.map = new AMap.Map("middleMap", {
-                zoom: 11,//级别
-                center: [106.67432426422835, 29.60831809360452], //中心点坐标
-                mapStyle: 'amap://styles/blue',
-            });
-            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耙式拖拉机',
-                    dataList: [
-                        {
-                            label: '位置:',
-                            value: '渝北区龙凤镇'
-                        },
-                        {
-                            label: '面积:',
-                            value: '2.7亩'
-                        },
-                        {
-                            label: '作业线形:',
-                            value: 'AB型'
-                        }
-                    ]
-                },
-                {
-                    plantareaAddress: 'B5486963435拖拉机',
-                    dataList: [
-                        {
-                            label: '位置:',
-                            value: '渝北区龙凤镇'
-                        },
-                        {
-                            label: '面积:',
-                            value: '3.4亩'
-                        },
-                        {
-                            label: '作业线形:',
-                            value: 'ABA型'
-                        }
-                    ]
-                },
-                {
-                    plantareaAddress: 'BG15445512拖挂拖拉机',
-                    dataList: [
-                        {
-                            label: '位置:',
-                            value: '渝北区龙凤镇'
-                        },
-                        {
-                            label: '面积:',
-                            value: '4.1亩'
-                        },
-                        {
-                            label: '作业线形:',
-                            value: 'AB型'
-                        }
-                    ]
-                },
-                {
-                    plantareaAddress: 'CG8845124拖拉机',
-                    dataList: [
-                        {
-                            label: '位置:',
-                            value: '渝北区龙凤镇'
-                        },
-                        {
-                            label: '面积:',
-                            value: '2.5亩'
-                        },
-                        {
-                            label: '作业线形:',
-                            value: 'AB型'
-                        }
-                    ]
-                },
-            ]
-            marks.forEach((item, index) => {
-                this.addMapMarker(item, 'car', INFOLIST[index])
-            })
+  components: { BigScreenTime, BigScreenTable },
+  data() {
+    const add0 = (val) => {
+      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())}`;
+    };
+    return {
+      video,
+      map: null,
+      columns1: [
+        {
+          key: "num",
+          label: "农机编号",
+          width: "50%",
         },
-        // 添加图形点标记
-        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: ''
-            });
-            this.map.add(marker);
-            marker.on('click', (e) => {
-                this.showInfoWindow(sourceData[0], sourceData[1], { type: '#304156',  ...info })
-            })
+        {
+          key: "type",
+          label: "类型",
+          width: "25%",
         },
-        // 显示信息窗体
-        showInfoWindow(lng, lat, sourceInfo) {
-            let content = `
+        {
+          key: "oil",
+          label: "油耗(升/亩)",
+          width: "25%",
+        },
+      ],
+      data1: [
+        {
+          num: "B140121091004010018",
+          type: "起垄机",
+          oil: "30.24",
+        },
+        {
+          num: "B130121091002040079",
+          type: "穴播机",
+          oil: "41.54",
+        },
+        {
+          num: "B130121091004020128",
+          type: "小粒种子播种",
+          oil: "57.65",
+        },
+        {
+          num: "B130121091004010107",
+          type: "钉齿耙",
+          oil: "62.45",
+        },
+        {
+          num: "B130121091002010011",
+          type: "旋耕机",
+          oil: "63.58",
+        },
+        {
+          num: "B130121091003010041",
+          type: "中耕机",
+          oil: "63.76",
+        },
+        {
+          num: "B130121091005010111",
+          type: "追肥机 (液肥)",
+          oil: "64.18",
+        },
+      ],
+      columns2: [
+        {
+          key: "num",
+          label: "农机编号",
+          width: "34%",
+        },
+        {
+          key: "info",
+          label: "报警信息",
+          width: "22%",
+        },
+        {
+          key: "area",
+          label: "地块",
+          width: "12%",
+        },
+        {
+          key: "time",
+          label: "时间",
+          width: "31%",
+        },
+      ],
+      data2: [
+        {
+          num: "B130121091001010068",
+          info: "偏离轨迹",
+          area: "D101",
+          time: formatter(4155322),
+        },
+        {
+          num: "8130121091002020021",
+          info: "低油量预警",
+          area: "D902",
+          time: formatter(9155322),
+        },
+        {
+          num: "8130121091003010009",
+          info: "30分钟开机无作业",
+          area: "D713",
+          time: formatter(10155322),
+        },
+        {
+          num: "8130121091001040059",
+          info: "发动机异常",
+          area: "D874",
+          time: formatter(12155322),
+        },
+        {
+          num: "8130121091004020028",
+          info: "电平异常",
+          area: "D534",
+          time: formatter(18155322),
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.initChart1();
+    this.initChart2();
+    this.initChart3();
+    this.initMap();
+  },
+  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",
+          });
+          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耙式拖拉机",
+              dataList: [
+                {
+                  label: "位置:",
+                  value: "渝北区龙凤镇",
+                },
+                {
+                  label: "面积:",
+                  value: "2.7亩",
+                },
+                {
+                  label: "作业线形:",
+                  value: "AB型",
+                },
+              ],
+            },
+            {
+              plantareaAddress: "B5486963435拖拉机",
+              dataList: [
+                {
+                  label: "位置:",
+                  value: "渝北区龙凤镇",
+                },
+                {
+                  label: "面积:",
+                  value: "3.4亩",
+                },
+                {
+                  label: "作业线形:",
+                  value: "ABA型",
+                },
+              ],
+            },
+            {
+              plantareaAddress: "BG15445512拖挂拖拉机",
+              dataList: [
+                {
+                  label: "位置:",
+                  value: "渝北区龙凤镇",
+                },
+                {
+                  label: "面积:",
+                  value: "4.1亩",
+                },
+                {
+                  label: "作业线形:",
+                  value: "AB型",
+                },
+              ],
+            },
+            {
+              plantareaAddress: "CG8845124拖拉机",
+              dataList: [
+                {
+                  label: "位置:",
+                  value: "渝北区龙凤镇",
+                },
+                {
+                  label: "面积:",
+                  value: "2.5亩",
+                },
+                {
+                  label: "作业线形:",
+                  value: "AB型",
+                },
+              ],
+            },
+          ];
+          marks.forEach((item, index) => {
+            this.addMapMarker(item, "car", INFOLIST[index]);
+          });
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    },
+    // 添加图形点标记
+    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: "",
+      });
+      this.map.add(marker);
+      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
-            });
-            infoWindow.open(this.map, [lng, lat])
-        },
-        initChart1() {
-            initChartStatic('chart1', generatePieOptions({
-                color: [
-                    '#2352c0',
-                    '#218b92',
-                    '#9c7d2b',
-                    '#6a57a4',
-                    '#577297',
-                    '#9c9071',
-                    '#3380a5'
-                ],
-                series: [
-                    {
-                        name: "数据详情",
-                        type: "pie",
-                        radius: ["36%", "60%"],
-                        center: ["35%", "50%"],
-                        data: [
-                            {
-                                name: '植保',
-                                value: 329
-                            },
-                            {
-                                name: '耕地',
-                                value: 1021
-                            },
-                            {
-                                name: '播种',
-                                value: 768
-                            },
-                            {
-                                name: '施肥',
-                                value: 476
-                            },
-                            {
-                                name: '灌溉',
-                                value: 432
-                            },
-                            {
-                                name: '收割',
-                                value: 882
-                            },
-                        ],
-                        label: {
-                            formatter: "{c|{c}台}, {per|{d}%}",
-                            rich: {
-                                c: {
-                                    color: "#fff",
-                                    fontSize: 12,
-                                    lineHeight: 33,
-                                },
-                                per: {
-                                    color: "#fff",
-                                    fontSize: 12,
-                                    lineHeight: 33,
-                                },
-                            },
-                        },
-                    }
-                ]
-            }))
-        },
-        initChart2() {
-            initChartStatic('chart2', generatePieOptions({
-                color: [
-                    '#2352c0',
-                    '#218b92',
-                    '#9c7d2b',
-                    '#6a57a4',
-                    '#577297',
-                    '#9c9071',
-                    '#3380a5'
-                ],
-                legend: {
-                    // 图例配置
-                    orient: "vertical",
-                    right: 20,
-                    itemGap: 20,
-                    top: 'center',
+      const infoWindow = new AMap.InfoWindow({
+        content,
+        anchor: "middle-left",
+        isCustom: true,
+      });
+      infoWindow.open(this.map, [lng, lat]);
+    },
+    initChart1() {
+      initChartStatic(
+        "chart1",
+        generatePieOptions({
+          color: [
+            "#2352c0",
+            "#218b92",
+            "#9c7d2b",
+            "#6a57a4",
+            "#577297",
+            "#9c9071",
+            "#3380a5",
+          ],
+          series: [
+            {
+              name: "数据详情",
+              type: "pie",
+              radius: ["36%", "60%"],
+              center: ["35%", "50%"],
+              data: [
+                {
+                  name: "植保",
+                  value: 329,
+                },
+                {
+                  name: "耕地",
+                  value: 1021,
+                },
+                {
+                  name: "播种",
+                  value: 768,
+                },
+                {
+                  name: "施肥",
+                  value: 476,
+                },
+                {
+                  name: "灌溉",
+                  value: 432,
+                },
+                {
+                  name: "收割",
+                  value: 882,
+                },
+              ],
+              label: {
+                formatter: "{c|{c}台}, {per|{d}%}",
+                rich: {
+                  c: {
+                    color: "#fff",
+                    fontSize: 12,
+                    lineHeight: 33,
+                  },
+                  per: {
+                    color: "#fff",
+                    fontSize: 12,
+                    lineHeight: 33,
+                  },
+                },
+              },
+            },
+          ],
+        })
+      );
+    },
+    initChart2() {
+      initChartStatic(
+        "chart2",
+        generatePieOptions({
+          color: [
+            "#2352c0",
+            "#218b92",
+            "#9c7d2b",
+            "#6a57a4",
+            "#577297",
+            "#9c9071",
+            "#3380a5",
+          ],
+          legend: {
+            // 图例配置
+            orient: "vertical",
+            right: 20,
+            itemGap: 20,
+            top: "center",
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          series: [
+            {
+              name: "数据详情",
+              type: "pie",
+              radius: ["32%", "50%"],
+              center: ["35%", "50%"],
+              data: [
+                {
+                  name: "耕整地",
+                  value: 48,
+                },
+                {
+                  name: "种植施肥",
+                  value: 11,
+                },
+                {
+                  name: "灌溉喷药",
+                  value: 18,
+                },
+                {
+                  name: "收割采摘",
+                  value: 41,
+                },
+                {
+                  name: "植保机",
+                  value: 10,
+                },
+              ],
+              label: {
+                formatter: "{c|{c}}, {per|{d}%}",
+                rich: {
+                  c: {
+                    color: "#fff",
+                    fontSize: 12,
+                    lineHeight: 33,
+                  },
+                  per: {
+                    color: "#fff",
+                    fontSize: 12,
+                    lineHeight: 33,
+                  },
+                },
+              },
+            },
+          ],
+        })
+      );
+    },
+    initChart3() {
+      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()}月`);
+      }
+      initChartStatic(
+        "chart3",
+        generateBaseOptions({
+          xAxis: {
+            data: xAxisData,
+          },
+          color: ["#136acf", "#12a4ae", "#358d6a"],
+          yAxis: {
+            name: "亩",
+          },
+          series: [
+            {
+              name: "耕整地机械",
+              data: [107, 97.5, 88, 102, 91],
+              type: "bar",
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true, //开启显示
+                    position: "top", //在上方显示
                     textStyle: {
-                        color: '#fff'
+                      //数值样式
+                      color: "#ffffff80",
+                      fontSize: 13,
                     },
+                  },
                 },
-                series: [
-                    {
-                        name: "数据详情",
-                        type: "pie",
-                        radius: ["32%", "50%"],
-                        center: ["35%", "50%"],
-                        data: [
-                            {
-                                name: '耕整地',
-                                value: 48
-                            },
-                            {
-                                name: '种植施肥',
-                                value: 11
-                            },
-                            {
-                                name: '灌溉喷药',
-                                value: 18
-                            },
-                            {
-                                name: '收割采摘',
-                                value: 41
-                            },
-                            {
-                                name: '植保机',
-                                value: 10
-                            },
-                        ],
-                        label: {
-                            formatter: "{c|{c}}, {per|{d}%}",
-                            rich: {
-                                c: {
-                                    color: "#fff",
-                                    fontSize: 12,
-                                    lineHeight: 33,
-                                },
-                                per: {
-                                    color: "#fff",
-                                    fontSize: 12,
-                                    lineHeight: 33,
-                                },
-                            },
-                        },
-                    }
-                ]
-            }))
-        },
-        initChart3() {
-            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()}月`)
-            }
-            initChartStatic('chart3', generateBaseOptions({
-                xAxis: {
-                    data: xAxisData
+              },
+            },
+            {
+              name: "种植施肥机械",
+              data: [54, 68.5, 71, 53, 47],
+              type: "bar",
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true, //开启显示
+                    position: "top", //在上方显示
+                    textStyle: {
+                      //数值样式
+                      color: "#ffffff80",
+                      fontSize: 13,
+                    },
+                  },
                 },
-                color: ['#136acf', '#12a4ae', '#358d6a'],
-                yAxis: {
-                    name: '亩'
+              },
+            },
+            {
+              name: "田间管理机械",
+              data: [76.5, 58, 61.5, 27, 38.5],
+              type: "bar",
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true, //开启显示
+                    position: "top", //在上方显示
+                    textStyle: {
+                      //数值样式
+                      color: "#ffffff80",
+                      fontSize: 13,
+                    },
+                  },
                 },
-                series: [
-                    {
-                        name: '耕整地机械',
-                        data: [107, 97.5, 88, 102, 91],
-                        type: 'bar',
-                        itemStyle: {
-							normal: {
-								label: {
-									show: true, //开启显示
-									position: 'top', //在上方显示
-									textStyle: { //数值样式
-										color: '#ffffff80',
-										fontSize: 13
-									}
-								}
-							}
-						}
-                    },
-                    {
-                        name: '种植施肥机械',
-                        data: [54, 68.5, 71, 53, 47],
-                        type: 'bar',
-                        itemStyle: {
-							normal: {
-								label: {
-									show: true, //开启显示
-									position: 'top', //在上方显示
-									textStyle: { //数值样式
-										color: '#ffffff80',
-										fontSize: 13
-									}
-								}
-							}
-						}
-                    },
-                    {
-                        name: '田间管理机械',
-                        data: [76.5, 58, 61.5, 27, 38.5],
-                        type: 'bar',
-                        itemStyle: {
-							normal: {
-								label: {
-									show: true, //开启显示
-									position: 'top', //在上方显示
-									textStyle: { //数值样式
-										color: '#ffffff80',
-										fontSize: 13
-									}
-								}
-							}
-						}
-                    },
-                ]
-            }))
-        },
-    }
-}
+              },
+            },
+          ],
+        })
+      );
+    },
+  },
+};
 </script>
 <style scoped lang="scss">
 @import url(../../utils/bigscreenTool/index.scss);
 .bigscreen5-wrapper {
-    width: 100vw;
-    height: 100vh;
-    overflow: hidden;
-    .header-main-wrapper {
-        background-image: url(./assets/headerBg.png);
-    }
-    .grid-wrapper {
-        padding: 10px;
-        display: grid;
-        grid-template-columns: 25% 50% 25%;
-        grid-template-rows: 33% 33% 34%;
-        .grid-item {
-            padding: 16px;
-            .bigscreen-item-title {
-                background-image: url(./assets/itemTitle.png);
-                color: aliceblue;
-                padding-left: 7% !important;
-            }
-            .bigscreen-item-content {
-                background: linear-gradient(to top, #203B53, #203B5300);
-            }
-            #middleMap {
-                background-color: #00D1FF;
-                width: 100%;
-                height: 100%;
-            }
-        }
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  .header-main-wrapper {
+    background-image: url(./assets/headerBg.png);
+  }
+  .grid-wrapper {
+    padding: 10px;
+    display: grid;
+    grid-template-columns: 25% 50% 25%;
+    grid-template-rows: 33% 33% 34%;
+    .grid-item {
+      padding: 16px;
+      .bigscreen-item-title {
+        background-image: url(./assets/itemTitle.png);
+        color: aliceblue;
+        padding-left: 7% !important;
+      }
+      .bigscreen-item-content {
+        background: linear-gradient(to top, #203b53, #203b5300);
+      }
+      #middleMap {
+        background-color: #00d1ff;
+        width: 100%;
+        height: 100%;
+      }
     }
+  }
 }
 
 /**中央地图 */
 .middle-map-wrapper {
-    position: relative;
-    .top-card-wrapper {
-        z-index: 9999;
+  position: relative;
+  .top-card-wrapper {
+    z-index: 9999;
+    display: flex;
+    justify-content: space-around;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 10px 20px;
+    .top-card-item {
+      width: 32%;
+      background-image: url(./assets/topCard.png);
+      background-size: 100% 100%;
+      .top-card-main {
         display: flex;
-        justify-content: space-around;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        padding: 10px 20px;
-        .top-card-item {
-            width: 32%;
-            background-image: url(./assets/topCard.png);
-            background-size: 100% 100%;
-            .top-card-main {
-                display: flex;
-                align-items: center;
-                padding: 16px 24px 8px 24px;
-                &-title {
-                    font-size: .9rem;
-                    padding: 0 20px;
-                }
-                &-value {
-                    font-size: 1.5rem;
-                    font-family: "TitleFont";
-                }
-                .icon-warpper {
-                    width: 50px;
-                    height: 50px;
-                    background-size: 100% 100%;
-                }
-                .icon1 {
-                    background-image: url(./assets/icon1.png);
-                }
-                .icon2 {
-                    background-image: url(./assets/icon2.png);
-                }
-                .icon3 {
-                    background-image: url(./assets/icon3.png);
-                }
-            }
-            .top-card-extra-wrapper {
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                padding-bottom: 10px;
-                .top-card-extra-item {
-                    padding: 0 10px;
-                    display: flex;
-                    align-items: center;
-                    color: #ffffffdc;
-                    font-size: .9rem;
-                    justify-content: space-around;
-                    span:nth-child(2) {
-                        position: relative;
-                        top: 2px;
-                    }
-                }
-            }
+        align-items: center;
+        padding: 16px 24px 8px 24px;
+        &-title {
+          font-size: 0.9rem;
+          padding: 0 20px;
         }
+        &-value {
+          font-size: 1.5rem;
+          font-family: "TitleFont";
+        }
+        .icon-warpper {
+          width: 50px;
+          height: 50px;
+          background-size: 100% 100%;
+        }
+        .icon1 {
+          background-image: url(./assets/icon1.png);
+        }
+        .icon2 {
+          background-image: url(./assets/icon2.png);
+        }
+        .icon3 {
+          background-image: url(./assets/icon3.png);
+        }
+      }
+      .top-card-extra-wrapper {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        padding-bottom: 10px;
+        .top-card-extra-item {
+          padding: 0 10px;
+          display: flex;
+          align-items: center;
+          color: #ffffffdc;
+          font-size: 0.9rem;
+          justify-content: space-around;
+          span:nth-child(2) {
+            position: relative;
+            top: 2px;
+          }
+        }
+      }
     }
+  }
 }
 
 /**农机信息 */
 .nong-info-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  padding: 10px 14px;
+  .nong-info-item {
     display: flex;
     flex-direction: column;
-    justify-content: space-around;
-    padding: 10px 14px;
-    .nong-info-item {
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: center;
-        background-image: url(.//assets/nongInfo.png);
-        background-size: 80% auto;
-        background-repeat: no-repeat;
-        background-position: center bottom;
-        height: 24.5%;
-        color: white;
-        .nong-info-item-title {
-            font-family: "TitleFont";
-            color: #00D1FF;
-        }
-        .nong-info-item-value {
-            font-size: .7rem;
-        }
+    justify-content: flex-start;
+    align-items: center;
+    background-image: url(.//assets/nongInfo.png);
+    background-size: 80% auto;
+    background-repeat: no-repeat;
+    background-position: center bottom;
+    height: 24.5%;
+    color: white;
+    .nong-info-item-title {
+      font-family: "TitleFont";
+      color: #00d1ff;
     }
+    .nong-info-item-value {
+      font-size: 0.7rem;
+    }
+  }
 }
 
 /**农机监控 */
 .monitor-wrapper {
-    padding: 10px 0px;
-    .monitor-wrapper-side {
+  padding: 10px 0px;
+  .monitor-wrapper-side {
+    width: 100%;
+    height: 30px;
+    background-color: #1a5a76;
+  }
+  .monitor-wrapper-item {
+    height: 100%;
+    width: 100%;
+    padding: 16px;
+    display: flex;
+    justify-content: space-between;
+    .monitor-side-part {
+      width: calc(50% - 4px);
+      video {
         width: 100%;
-        height: 30px;
-        background-color: #1a5a76;
-    }
-    .monitor-wrapper-item {
         height: 100%;
-        width: 100%;
-        padding: 16px;
-        display: flex;
-        justify-content: space-between;
-        .monitor-side-part {
-            width: calc(50% - 4px);
-            video {
-                width: 100%;
-                height: 100%;
-                object-fit: contain;
-            }
-        }
-        .right-part {
-            background: linear-gradient(to right, #20ecff9d, #20EBFF00);
-            padding: 8px;
-            font-size: .9rem;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-            color: #ffffffdc;
-        }
+        object-fit: contain;
+      }
     }
+    .right-part {
+      background: linear-gradient(to right, #20ecff9d, #20ebff00);
+      padding: 8px;
+      font-size: 0.9rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      color: #ffffffdc;
+    }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/god-ui/src/views/cityManage/mapInfo/geography/index1.vue b/god-ui/src/views/cityManage/mapInfo/geography/index1.vue
index c711351c..07e0f2f3 100644
--- a/god-ui/src/views/cityManage/mapInfo/geography/index1.vue
+++ b/god-ui/src/views/cityManage/mapInfo/geography/index1.vue
@@ -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: {
diff --git a/god-ui/src/views/forest/firePosition/index.vue b/god-ui/src/views/forest/firePosition/index.vue
index 56c8d85d..b563bc1e 100644
--- a/god-ui/src/views/forest/firePosition/index.vue
+++ b/god-ui/src/views/forest/firePosition/index.vue
@@ -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"
@@ -37,26 +44,34 @@
         />
       </el-form-item>
 
-<!--      <el-form-item label="火情坐标" prop="coordinate">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.coordinate"-->
-<!--          placeholder="请输入火情坐标"-->
-<!--          clearable-->
-<!--          @keyup.enter.native="handleQuery"-->
-<!--        />-->
-<!--      </el-form-item>-->
-<!--      <el-form-item label="责任人" prop="chargePerson">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.chargePerson"-->
-<!--          placeholder="请输入责任人"-->
-<!--          clearable-->
-<!--          @keyup.enter.native="handleQuery"-->
-<!--        />-->
-<!--      </el-form-item>-->
+      <!--      <el-form-item label="火情坐标" prop="coordinate">-->
+      <!--        <el-input-->
+      <!--          v-model="queryParams.coordinate"-->
+      <!--          placeholder="请输入火情坐标"-->
+      <!--          clearable-->
+      <!--          @keyup.enter.native="handleQuery"-->
+      <!--        />-->
+      <!--      </el-form-item>-->
+      <!--      <el-form-item label="责任人" prop="chargePerson">-->
+      <!--        <el-input-->
+      <!--          v-model="queryParams.chargePerson"-->
+      <!--          placeholder="请输入责任人"-->
+      <!--          clearable-->
+      <!--          @keyup.enter.native="handleQuery"-->
+      <!--        />-->
+      <!--      </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,42 +119,66 @@
           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="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" />
       <el-table-column label="火情情况" align="center" prop="fireInfo" />
-<!--      <el-table-column label="上报时间" align="center" prop="reportTime" width="180">-->
-<!--        <template slot-scope="scope">-->
-<!--          <span>{{ parseTime(scope.row.reportTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
-<!--      <el-table-column label="上报人" align="center" prop="reportPerson" />-->
-<!--      <el-table-column label="上报来源" align="center" prop="reportSource" />-->
+      <!--      <el-table-column label="上报时间" align="center" prop="reportTime" width="180">-->
+      <!--        <template slot-scope="scope">-->
+      <!--          <span>{{ parseTime(scope.row.reportTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>-->
+      <!--        </template>-->
+      <!--      </el-table-column>-->
+      <!--      <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"/>
+          <image-preview :src="scope.row.photoInfo" :width="50" :height="50" />
         </template>
       </el-table-column>
       <el-table-column label="责任人" align="center" prop="chargePerson" />
       <el-table-column label="责任人电话" align="center" prop="chargePhone" />
-<!--      <el-table-column label="火情等级" align="center" prop="fireLevel" />-->
-<!--      <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" prop="fireLevel" />-->
+      <!--      <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"
+      >
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -144,34 +186,38 @@
             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>
 
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -185,38 +231,44 @@
           <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-->
-<!--            v-model="form.reportTime"-->
-<!--            type="datetime"-->
-<!--            value-format="yyyy-MM-dd HH:mm:ss"-->
-<!--            placeholder="请选择上报时间">-->
-<!--          </el-date-picker>-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="上报人" prop="reportPerson">-->
-<!--          <el-input v-model="form.reportPerson" placeholder="请输入上报人" />-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="上报来源" prop="reportSource">-->
-<!--          <el-input v-model="form.reportSource" placeholder="请输入上报来源" />-->
-<!--        </el-form-item>-->
+        <!--        <el-form-item label="上报时间" prop="reportTime">-->
+        <!--          <el-date-picker clearable-->
+        <!--            v-model="form.reportTime"-->
+        <!--            type="datetime"-->
+        <!--            value-format="yyyy-MM-dd HH:mm:ss"-->
+        <!--            placeholder="请选择上报时间">-->
+        <!--          </el-date-picker>-->
+        <!--        </el-form-item>-->
+        <!--        <el-form-item label="上报人" prop="reportPerson">-->
+        <!--          <el-input v-model="form.reportPerson" placeholder="请输入上报人" />-->
+        <!--        </el-form-item>-->
+        <!--        <el-form-item label="上报来源" prop="reportSource">-->
+        <!--          <el-input v-model="form.reportSource" placeholder="请输入上报来源" />-->
+        <!--        </el-form-item>-->
         <el-form-item label="火情坐标" prop="coordinate">
           <el-input v-model="form.coordinate" placeholder="请输入火情坐标" />
         </el-form-item>
         <el-form-item label="火情图片" prop="photoInfo">
-          <image-upload v-model="form.photoInfo"/>
+          <image-upload v-model="form.photoInfo" />
         </el-form-item>
         <el-form-item label="责任人" prop="chargePerson">
           <el-input v-model="form.chargePerson" placeholder="请输入责任人" />
@@ -224,18 +276,22 @@
         <el-form-item label="责任人电话" prop="chargePhone">
           <el-input v-model="form.chargePhone" placeholder="请输入责任人电话" />
         </el-form-item>
-<!--        <el-form-item label="火情等级" prop="fireLevel">-->
-<!--          <el-input v-model="form.fireLevel" placeholder="请输入火情等级" />-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="发布方式" prop="reportMethod">-->
-<!--          <el-input v-model="form.reportMethod" placeholder="请输入发布方式" />-->
-<!--        </el-form-item>-->
+        <!--        <el-form-item label="火情等级" prop="fireLevel">-->
+        <!--          <el-input v-model="form.fireLevel" placeholder="请输入火情等级" />-->
+        <!--        </el-form-item>-->
+        <!--        <el-form-item label="发布方式" prop="reportMethod">-->
+        <!--          <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="请输入数据类型" />-->
-<!--        </el-form-item>-->
+        <!--        <el-form-item label="数据类型" prop="dataType">-->
+        <!--          <el-input v-model="form.dataType" placeholder="请输入数据类型" />-->
+        <!--        </el-form-item>-->
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -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 {listFirePosition} 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(',')
-      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()}],`)
+      AMapLoader.load({
+        key: "e49669059fa36494531a82ed982f395c", // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
       })
-      this.addMapMarker(posiList)
+        .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.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() {
-        return delFire(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm('是否确认删除火情管理编号为"' + ids + '"的数据项？')
+        .then(function () {
+          return delFire(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .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>