水波纹示例完成

部分首页切图

minggao/src/assets/css/global.css

@@ -259,18 +259,18 @@ p {
 
 .el-button--primary {
   color: #fff !important;
-  background-color: #14a478 !important;
-  border-color: #14a478 !important;
+  background-color: #409eff !important;
+  border-color: #409eff !important;
 }
 
 .el-button--primary:hover {
   color: #fff !important;
-  background-color: #14a478 !important;
+  background-color: #409eff !important;
 }
 
 .el-button--primary:focus {
   color: #fff !important;
-  background-color: #14a478 !important;
+  background-color: #409eff !important;
 }
 
 /* 1111 */

minggao/src/page/home/newHome/deviceHome.vue

@@ -0,0 +1,47 @@
+<!--
+ * @Description:
+ * @Autor: lin
+ * @Date: 2024-04-09 14:26:43
+ * @LastEditors: lin
+ * @LastEditTime: 2024-04-09 14:26:58
+-->
+<template>
+    <div>
+        测报灯首页
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+
+    },
+    data() {
+        return {
+
+        };
+    },
+    computed: {
+
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    watch: {
+
+    },
+    methods: {
+
+    },
+    components: {
+
+    },
+};
+</script>
+
+<style scoped lang="less">
+
+</style>

minggao/src/page/home/newHome/index.vue

@@ -0,0 +1,117 @@
+<!--
+ * @Description:
+ * @Autor: lin
+ * @Date: 2024-04-09 14:29:42
+ * @LastEditors: lin
+ * @LastEditTime: 2024-04-09 15:46:11
+-->
+<template>
+  <div class="bigBox">
+    <div class="top">智网监测中心</div>
+    <div class="left"></div>
+    <div class="right"></div>
+    <div class="content">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+// 设置rem
+const setBaseFontSize = () => {
+  const baseFontSize = (window.innerWidth / 1920) * 10; // 根据屏幕宽度计算基准字体大小
+  document.documentElement.style.fontSize = `${baseFontSize}px`; // 设置根元素字体大小
+};
+setBaseFontSize(); // 初始化基准字体大小
+window.addEventListener("resize", setBaseFontSize); // 监听窗口大小变化，重新设置基准字体大小
+export default {
+  props: {
+
+  },
+  data() {
+    return {
+
+    };
+  },
+  computed: {
+
+  },
+  created() {
+
+  },
+  mounted() {
+
+  },
+  beforeDestroy() {
+    document.documentElement.removeAttribute("style");
+    window.removeEventListener("resize", setBaseFontSize);
+  },
+  watch: {
+
+  },
+  methods: {
+
+  },
+  components: {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+.bigBox {
+  position: relative;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  .content{
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100vw;
+    height: 100vh;
+  }
+  .top {
+    position: absolute;
+    color: #ffffff;
+    text-align: center;
+    text-shadow: 0 0 4px #FFF;
+    font-size: 2.8rem;
+    font-weight: 700;
+    letter-spacing: 5.6px;
+    padding-top: 1rem;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 21.4rem;
+    box-sizing: border-box;
+    background: url('../../../assets/images/newHome/topBanger.png') center center no-repeat;
+    background-size: 100% 100%;
+    z-index: 2;
+  }
+
+  .left {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 46.3vw;
+    height: 100vh;
+    background: url('../../../assets/images/newHome/leftBg.png') center center no-repeat;
+    pointer-events: none;
+    background-size: 100% 100%;
+    z-index: 3;
+  }
+  .right {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 46.3vw;
+    height: 100vh;
+    z-index: 3;
+    background: url('../../../assets/images/newHome/rightBg.png') center center no-repeat;
+    pointer-events: none;
+    background-size: 100% 100%;
+  }
+}
+</style>

minggao/src/page/home/newHome/newHome.vue

@@ -0,0 +1,169 @@
+<!--
+ * @Description:
+ * @Autor: lin
+ * @Date: 2024-04-09 14:26:07
+ * @LastEditors: lin
+ * @LastEditTime: 2024-04-09 16:50:25
+-->
+<template>
+  <div class="box">
+    <div class="mapBox" id="newHome"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+
+  },
+  data() {
+    return {
+
+    };
+  },
+  computed: {
+
+  },
+  created() {
+
+  },
+  mounted() {
+    this.initMap()
+  },
+  watch: {
+
+  },
+  methods: {
+    initMap() {
+      var map = new AMap.Map(document.getElementById('newHome'), {
+        // center: this.center,
+        resizeEnable: true,
+        zoom: 12.5,
+        // lang: 'en',
+        mapStyle: 'amap://styles/f2736173d4246171f1efaa1b61a15439',
+        layers: []
+      });
+      map.on('complete', function () {
+        import(`./geo.json`).then(res => {
+          console.log(res)
+          addGeo(res, map)
+        });
+        // 绘制圆
+        var circle = new AMap.Circle({
+          center: [114.34347, 23.889983], // 圆心位置
+          radius: 5000, // 半径，单位：米
+          strokeColor: "#FFFFFF", // 线颜色
+          strokeOpacity: 1, // 线透明度
+          strokeWeight: 2, // 线宽
+          fillColor: "#fff", // 填充颜色
+          fillOpacity: 1 // 填充透明度
+        });
+        circle.setMap(map);
+        // 添加水波纹效果的圆点
+        var rippleCircleMaker = new AMap.CircleMarker({
+          center: [114.34347, 23.889983], // 圆心位置
+          radius: 10, // 初始半径，单位：米
+          strokeColor: "#FFf", // 线颜色
+          strokeOpacity: 1, // 线透明度
+          strokeWeight: 10, // 线宽
+          fillColor: "#FF5951", // 填充颜色
+          fillOpacity: 0.9, // 填充透明度
+          zIndex: 10 // 层级
+        });
+        rippleCircleMaker.setMap(map);
+        // 添加水波纹效果的圆点
+        var rippleCircle = new AMap.Circle({
+          center: [114.34347, 23.889983], // 圆心位置
+          radius: 500, // 初始半径，单位：米
+          strokeColor: "#FF5951", // 线颜色
+          strokeOpacity: 0, // 线透明度
+          strokeWeight: 2, // 线宽
+          fillColor: "#FF5951", // 填充颜色
+          fillOpacity: 0.6, // 填充透明度
+          zIndex: 10 // 层级
+        });
+        rippleCircle.setMap(map);
+
+        // 定义水波纹动画
+        var animation;
+
+        // 添加水波纹动画效果
+        function addRippleAnimation() {
+          var startRadius = 500;
+          var startOpacity = 0.8;
+          var endRadius = 5500;
+          var step = 500;
+          var opacityStep = -0.05;
+          var currentRadius = startRadius;
+          var currentOpacity = startOpacity;
+          var increasing = true;
+
+          animation = setInterval(function () {
+            if (increasing) {
+              if (currentRadius < endRadius) {
+                rippleCircle.setRadius(currentRadius); // 设置水波纹半径
+                rippleCircle.setOptions({
+                  fillOpacity: currentOpacity > 0 ? currentOpacity : 0
+                });
+                currentRadius += step; // 每次半径增加 step
+                currentOpacity += opacityStep; // 每次透明度增加opacityStep
+              } else {
+                clearInterval(animation); // 清除动画
+                currentRadius = startRadius; // 重置水波纹半径为初始值
+                currentOpacity = startOpacity;
+                addRippleAnimation(); // 重新启动动画
+              }
+            }
+          }, 100); // 设置动画间隔时间，单位：毫秒
+        }
+
+        // 启动水波纹动画
+        addRippleAnimation();
+      });
+      function addGeo(Json, map) {
+        let cityList = [];
+        var geojson = new AMap.GeoJSON({
+          geoJSON: Json,
+          // 还可以自定义getMarker和getPolyline
+          getPolygon: function (geojson, lnglats) {
+            // 计算面积
+            // var area = AMap.GeometryUtil.ringArea(lnglats[0])
+            let PolygonObj = new AMap.Polygon({
+              path: lnglats,
+              fillOpacity: .3,// 面积越大透明度越高
+              strokeColor: '#B5F2FF',
+              fillColor: '#64AECE',
+              extData: geojson
+            });
+            cityList.push(PolygonObj);
+            return PolygonObj
+          }
+        })
+        map.add(geojson);
+        map.setFitView();
+        console.log(map.getZoom());
+      }
+    },
+  },
+  components: {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+.box {
+  position: relative;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+
+  .mapBox {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+  }
+}
+</style>

minggao/src/page/warning/warninglist.vue

@@ -0,0 +1,381 @@
+<template>
+  <div class="form-page">
+    <div class="form-page__search">
+      <el-row type="flex" justify="space-between">
+        <el-col :span="24">
+          <el-select v-model="queryInfo.group" placeholder="请选择组织" clearable filterable size="mini" @change="search">
+            <el-option v-for="item in organizationList" :label="item.org_name" :value="item.org_name"
+              :key="item.id"></el-option>
+          </el-select>
+          <el-select v-model="queryInfo.alarm_level" size="mini" placeholder="请选择等级">
+            <el-option v-for="typeItem in lavalList" :label="typeItem.label" :value="typeItem.value"
+              :key="typeItem.value"></el-option>
+          </el-select>
+          <el-date-picker v-model="queryInfo.time_range" type="monthrange" start-placeholder="开始日期"
+            end-placeholder="结束日期" @change="search" size="mini" :editable="false" value-format="timestamp">
+          </el-date-picker>
+          <el-button type="primary" @click="search" size="mini">查询</el-button>
+          <el-button type="primary" @click="addDialog=true" size="mini">发布告警</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <el-card style="margin-top: 15px">
+      <div class="form-page__table" v-loading="loading">
+        <el-table :data="dataList" style="width: 100%" :stripe="true" :height="48 * 13" ref="gridTable">
+          <el-table-column prop="index" label="编号" align="center" width="60px" fixed="left">
+            <template slot-scope="scope">
+              <span>{{ (queryInfo.page - 1) * 20 + (scope.$index + 1) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="group" label="组织" width="120" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="alarm_level" label="分类" show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column prop="name" label="有害生物名称" show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column prop="num" label="数量" show-overflow-tooltip width="80">
+          </el-table-column>
+          <el-table-column prop="occurs" label="是否检疫性" width="140" align="center" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row.is_quarantine ? '是' : '否' }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="occurs" label="是否外来物种" width="140" align="center" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row.is_export ? '是' : '否' }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="occurs" label="是否新物种" width="140" align="center" show-overflow-tooltip>
+            <template slot-scope="scope">
+              {{ scope.row.is_new ? '是' : '否' }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="addtime_format" label="发现时间" show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column label="操作" width="150" align="center" fixed="right">
+            <template slot-scope="scope">
+              <!-- <a class="reset" href="javascript:;" @click="handleEdit(scope.row)">编辑</a>
+              <i class="line"></i>
+              <a class="delete" href="javascript:;" @click="deleteData(scope.row.id)">删除</a> -->
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <el-pagination background layout="prev, pager, next,jumper" :total="total" :page-size="20"
+        @current-change="pageChange" :current-page="queryInfo.page">
+      </el-pagination>
+    </el-card>
+    <!-- 新增/修改弹框 -->
+    <el-dialog title="发布告警" :visible.sync="addDialog" width="600px" :close-on-click-modal="false">
+      <el-form :model="baseForm" :rules="rules" size="mini" ref="upDateForm" label-width="120px" class="updateForm">
+        <el-form-item label="分类" prop="category">
+          <el-select v-model="baseForm.category" placeholder="请选择">
+            <el-option v-for="typeItem in typeList" :label="typeItem.label" :value="typeItem.value"
+              :key="typeItem.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="组织(可多选)" prop="group">
+          <el-select v-model="baseForm.group" filterable multiple  placeholder="请选择">
+            <el-option v-for="item in organizationList" :label="item.org_name" :value="item.org_name"
+              :key="`group${item.id}`"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="预警等级" prop="alarm_level">
+          <el-select v-model="baseForm.alarm_level" filterable  placeholder="请选择">
+            <el-option v-for="item in lavalList" :label="item.label" :value="item.value"
+              :key="`laval${item.value}`"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="预警内容" prop="content_alias">
+          <el-row type="flex" justify="space-between" v-for="(item, index) in pestInfoList" :key="`pestList${index}`" class="pestRow">
+            <el-col :span="8">
+              <el-select v-model="item.name" filterable placeholder="请选择" @change="changePestName(item, 'name')">
+                <el-option v-for="pest in pestLibrary" :label="pest.pest_name" :value="pest.pest_name"
+              :key="pest.id"></el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="6">
+              <el-input type="number" v-model="item.num" placeholder="请输入数量" @input="changePestName(item, 'num')"></el-input>
+            </el-col>
+            <el-col :span="7">
+              <el-checkbox v-model="item.is_new" @change="changePestName(item, 'is_new')">是否新记录物种</el-checkbox>
+            </el-col>
+            <el-col :span="2">
+              <el-button type="primary" v-if="index == pestInfoList.length - 1" @click="addPestFun" circle icon="el-icon-plus"></el-button>
+              <el-button type="danger" v-else @click="delPestFun(index)" circle icon="el-icon-delete"></el-button>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item prop="content_alias">
+          <el-input type="textarea" placeholder="请输入"  v-model="baseForm.content_alias"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="addDialog = false" size="mini">取 消</el-button>
+        <el-button type="primary" @click="confirmUpdate('upDateForm')" size="mini">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { assign, omit } from 'lodash-es';
+export default {
+  props: {
+
+  },
+  data() {
+    return {
+      dataList: [],
+      loading: true,
+      total: 0,
+      typeList: [{
+        label: '林木害虫',
+        value: '林木害虫',
+      },
+      {
+        label: '实蝇',
+        value: '实蝇',
+      },
+      {
+        label: '外来有害杂草',
+        value: '外来有害杂草',
+      }],
+      lavalList: [{
+        label: 'Ⅰ级(红)',
+        value: '1',
+      },
+      {
+        label: 'Ⅱ级(橙)',
+        value: '2',
+      },
+      {
+        label: 'Ⅲ级(蓝)',
+        value: '3',
+      },
+      {
+        label: 'Ⅳ级(黄)',
+        value: '4',
+      }],
+      queryInfo: {
+        page: 1,
+        time_range: null, //
+        group: '', //
+        alarm_level: '', //
+      },
+      pestLibrary:[], //害虫列表
+      organizationList: [], // 组织列表
+      addDialog: true,
+      baseForm: {
+        category: '', // 类别
+        group: '', // 组织,
+        alarm_level: '', // 预警等级
+        content_alias:'', // 预警内容
+      },
+      pestInfoList: [{
+        name: '',
+        num: '',
+        is_new: false
+      }],// 害虫列表
+      rules: {
+        category: [
+          { required: true, message: '请选择分类', trigger: 'blur' }
+          // { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
+        ],
+
+        group: [
+          { required: true, message: '请选择组织', trigger: 'blur' }
+          // { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
+        ],
+
+        alarm_level: [
+          { required: true, message: '请选择预警等级', trigger: 'blur' }
+          // { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
+        ],
+
+        content_alias: [
+          { required: true, message: '请输入预警内容', trigger: 'blur' }
+          // { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
+        ]
+      },
+    };
+  },
+  computed: {
+
+  },
+  created() {
+
+  },
+  mounted() {
+    this.getOrganizationList();
+    this.getDataList();
+  },
+  watch: {
+
+  },
+  methods: {
+    // 新增害虫预警
+    addPestFun() {
+      this.pestInfoList.push({
+        name: '',
+        num: '',
+        is_new: false
+      })
+    },
+    // 删除一列害虫预警
+    delPestFun(index) {
+      this.pestInfoList.splice(index, 1)
+    },
+    // 害虫预警变化
+    changePestName(item, key) {
+      console.log(this.pestInfoList)
+      let pestStr = ''; //害虫详情字段
+      let is_newNum = 0;
+      this.pestInfoList.forEach(pest => {
+        if(pest.is_new) {
+          is_newNum ++
+        }
+        pestStr = `${pestStr}【${pest.name}】${pest.num}头;`
+      });
+      this.baseForm.content_alias = `${is_newNum == 0 ? '' : `发现新物种【${is_newNum}】种;`}${pestStr}`;
+    },
+    search() {
+      this.queryInfo.page = 1;
+      this.getDataList();
+    },
+    pageChange(e) {
+      this.queryInfo.page = e;
+      this.getDataList();
+    },
+    getDataList() {
+      //获取列表
+      this.loading = true;
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=data_report.alerm.alerm_list',
+        data: this.qs.stringify({
+          page: this.queryInfo.page,
+          user_id: this.queryInfo.user_id, //
+          group: this.queryInfo.group, //
+          alarm_level: this.queryInfo.alarm_level,
+          time_range: this.queryInfo.time_range //
+        })
+      }).then(res => {
+        this.loading = false;
+        console.log(res.data.data);
+        if (!res.data.data) {
+          return;
+        }
+
+        this.total = res.data.data.total;
+        this.dataList = res.data.data.data;
+
+        this.$nextTick(() => {
+          this.$refs.gridTable.bodyWrapper.scrollTop = 0;
+        });
+      });
+    },
+    // 发布预警
+    confirmUpdate(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.dialogSubmitLoading = true;
+            // 添加
+            const payload = omit(this.baseForm, []);
+            this.$axios({
+              method: 'POST',
+              url: '/api/api_gateway?method=data_report.alerm.change_pest',
+              data: this.qs.stringify(payload)
+            })
+              .then(res => {
+                this.$message({
+                  type: 'success',
+                  message: '新增成功!',
+                  duration: 1500
+                });
+                this.resetForm(formName);
+                this.search();
+              })
+              .finally(() => {
+                this.dialogSubmitLoading = false;
+              });
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.baseForm = {
+        category: '', // 类别
+        group: '', // 组织,
+        alarm_level: '', // 预警等级
+        content_alias:'', // 预警内容
+      },
+      this.addDialog = false;
+    },
+
+    getOrganizationList() {
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=sysmenage.usermanager.org_list'
+      }).then(res => {
+        this.organizationList = res.data.data.page_list[0].childrens;
+      });
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=data_report.alerm.pests_list_info'
+      }).then(res => {
+        this.pestLibrary = res.data.data.data;
+      });
+    }
+  },
+  components: {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+.updateForm {
+
+/deep/ .el-select,
+/deep/ .el-date-editor {
+  width: 100%;
+}
+}
+.form-page {
+  .pestRow{
+    margin-bottom: 10px;
+  }
+  &__search {
+    overflow: hidden;
+
+    // height: 40px;
+    /deep/.el-select {
+      width: 220px;
+      margin-right: 15px;
+    }
+
+    /deep/.el-input {
+      width: 220px;
+      margin-right: 15px;
+    }
+
+    /deep/.el-date-editor {
+      width: 250px !important;
+      margin-right: 15px;
+    }
+  }
+
+  &__table {
+    margin-top: 15px;
+
+    /deep/.el-table__header-wrapper {
+      th {
+        // background-color: #fafafa;
+      }
+    }
+  }
+}
+</style>

minggao/src/router/index.js

@@ -98,6 +98,21 @@ export default new Router({
       component: Login
     },
     {
+      path: '/newHome',
+      name: 'newHome',
+      component: () => import('@/page/home/newHome'),
+      children:[
+        {
+          path: 'home',
+          component: () => import('@/page/home/newHome/newHome.vue'),
+        },
+        {
+          path: 'device',
+          component: () => import('@/page/home/newHome/deviceHome.vue'),
+        },
+      ]
+    },
+    {
       path: '/Index',
       name: 'Index',
       component: Index,
@@ -408,6 +423,13 @@ export default new Router({
           meta: {
             title: '有害生物记录表'
           }
+        },
+        {
+          path:'alermRecord',
+          component:() => import('@/page/warning/warninglist'),
+          meta: {
+            title: '告警列表'
+          }
         }
       ]
     }