111

src/assets/styles/animal.scss

@@ -0,0 +1,37 @@
+//动物保护
+.icon-animal-con{
+  width: 100%;
+  display: block!important;
+}
+.icon-animal{
+  display: block;
+  margin: 2px auto;
+  background: none!important;
+}
+.icon-animal-text{
+  display: block!important;
+  text-align: center!important;
+  padding: 0.5rem 0.5rem 0rem 0.5rem;
+}
+.animal-text{
+  background: #f5ad1b;
+  border: 0.2px solid rgba(19, 64, 64, 0.7);
+  height: 4rem;
+  width: 4rem;
+  text-align: center;
+  margin: 0px auto;
+  border-radius: 0.5rem;
+  color: #fff !important;
+}
+.animal-text h6{
+  color: #fff!important;
+}
+.w100{
+  width:100%!important;
+}
+.animal-img{
+  height: 3rem!important;
+}
+.w-6{
+  width: 6rem!important;
+}

src/views/animal.vue

@@ -1,15 +1,241 @@
 <template>
-  <div>
-    1111111111
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar w-6" :class="indentleft" ref="left">
+        <div class="forthis">
+          <div class="i-list-con h-78">
+            <div class="d-l-con-icon">
+              <div class="icon-con  m-btm-no"><!--   -->
+                <!--<div class="icon icon-dot"></div>-->
+                <div class="icon-text animal-text">
+                  <h6>9</h6>
+                  <h5>总数</h5>
+                </div>
+              </div>
+            </div>
+            <div class="d-l-con-icon">
+              <div class="icon-con icon-animal-con" v-for="(item,index) in animalDwfb">
+                <div class="iconfont icon icon-normal icon-animal">
+                  <img :src="item.src">
+                </div>
+                <div class="icon-text icon-animal-text">
+                  <h5>{{item.name}}</h5>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'"
+                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>
+      <!--      <button @click="showEventInfo1" style="position: absolute; right: 50%;top: 45%;z-index: 1000;">弹层事件演示用按钮-->
+      <!--      </button>-->
+      <!-- 右侧 -->
+      <div class="rightbar" :class="indentright" ref="right">
+        <div class="forthis">
+          <div class="this-title">
+            <span>事件分布</span>
+            <!-- <span>23</span> -->
+          </div>
+          <div class="i-list-con h-73">
+            <div class="d-l-con-icon">
+              <div class="h-19 overflow-y w100">
+                <div class="d-l-con" v-for="(item,index) in animalSjfb">
+                  <div class="d-l-l-text">
+                    <i class="i-small"></i>
+                    <h4>{{item.address}}</h4>
+                  </div>
+                  <div class="d-l-l-count">{{item.count}}</div>
+                </div>
+              </div>
+            </div>
+            <div class="d-l-con">
+              <div id="animal-chart" style="width: 100%;height:26.2vh;"></div>
+            </div>
+
+            <div class="d-l-con d-evnet-list-con" v-for="(item,index) in animalSjlb">
+              <img src="@/assets/images/visual/img-sample.png" class="event-list-img animal-img">
+              <div class="event-list-text">
+                <h3>{{item.eventTitle}}</h3>
+                <h4>{{item.phoneNum}}</h4>
+                <h4><span>{{item.qx}}</span><span>{{item.source}}</span><span>{{item.time}}</span>
+                </h4>
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">
+        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img
+          src="@/assets/images/mascot.png"/>
+        </div>
+      </el-tooltip>
+
+    </div>
+    <eventLocation ref="eventLocation"></eventLocation>
   </div>
 </template>
 
 <script>
-    export default {
-        name: "animal"
+  import {selectDeviceType, selectCameraByDeptId} from '@/api/monitor'
+
+  import supermap from '@/components/supermap' //超图
+  import vheader from '@/components/v-header.vue' //一体化共用头部
+  import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
+
+
+  let echarts = require('echarts')
+  export default {
+    components: {
+      supermap,
+      vheader,
+      vBottomMenu,
+    }, data() {
+      return {
+        animalDwfb: [
+          {
+
+            name: '虎',
+            src: require('../assets/images/dwbh/hu-1.png')
+          }, {
+
+            name: '豹',
+            src: require('../assets/images/dwbh/bao-1.png')
+          }, {
+            name: '蛇',
+            src: require('../assets/images/dwbh/she-1.png')
+          }, {
+            name: '鹰',
+            src: require('../assets/images/dwbh/ying-1.png')
+          }, {
+            name: '兔',
+            src: require('../assets/images/dwbh/tuzi-1.png')
+          }, {
+            name: '狐狸',
+            src: require('../assets/images/dwbh/huli-1.png')
+          }, {
+            name: '狗熊',
+            src: require('../assets/images/dwbh/gouxiong-1.png')
+          }, {
+            name: '野鸡',
+            src: require('../assets/images/dwbh/yeji-1.png')
+          }, {
+            name: '狍子',
+            src: require('../assets/images/dwbh/paozi-1.png')
+          }
+        ],
+        animalSjfb: [
+          {
+            address: '双辽',
+            count: '11'
+          }, {
+            address: '梨树',
+            count: '11'
+          }, {
+            address: '伊通',
+            count: '11'
+          }, {
+            address: '铁东',
+            count: '11'
+          }, {
+            address: '铁西',
+            count: '11'
+          }
+        ],
+        animalSjlb: [
+          {
+            eventTitle: '火险事件-XXXX地摄像头',
+            phoneNum: '15635652525',
+            qx: '摄像头',
+            source: '新上报',
+            time: '2022-05-06 20:52:20'
+          }, {
+            eventTitle: '火险事件-XXXX地摄像头2',
+            phoneNum: '15635652525',
+            qx: '摄像头',
+            source: '新上报',
+            time: '2022-05-06 20:52:20'
+          }, {
+            eventTitle: '火险事件-XXXX地摄像头3',
+            phoneNum: '15635652525',
+            qx: '摄像头',
+            source: '新上报',
+            time: '2022-05-06 20:52:20'
+          }, {
+            eventTitle: '火险事件-XXXX地摄像头4',
+            phoneNum: '15635652525',
+            qx: '摄像头',
+            source: '新上报',
+            time: '2022-05-06 20:52:20'
+          }
+        ]
+      }
+    },
+    model: {},
+    methods: {
+
+      //事件chart
+      eventChart() {
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = echarts.init(document.getElementById('animal-chart'))
+        myChart.setOption({
+          color: ['#2EACFF', '#FFA61C', '#2EC054', '#8C64D7'],
+          tooltip: {
+            trigger: 'item',
+            formatter: "{a} <br/>{b} : {c} ({d}%)"
+          },
+          toolbox: {
+            show: true,
+          },
+          series: [
+            {
+              name: '事件分类',
+              type: 'pie',
+              roseType: true,
+              radius: [30, 70],
+              label: {
+                show: true,
+                formatter: "{b}\n{c} "
+              },
+              data: this.eventChartData
+            }
+          ]
+        })
+
+      },
+      //吉祥物收起左右框
+      indent() {
+        let list = document.getElementsByClassName('el-tooltip__popper')
+        list[list.length - 1].style.display = 'none'
+        if (this.indentStyle == '') {
+          this.indentStyle = 'indent-style'
+          this.indentleft = 'indent-left'
+          this.indentright = 'indent-right'
+          this.indentText = '展开左右栏'
+        } else if (this.indentText == '展开左右栏') {
+          this.indentStyle = ''
+          this.indentleft = ''
+          this.indentright = ''
+          this.indentText = '收起左右栏'
+        }
+      },
     }
+
+  }
+
 </script>
 
-<style scoped>
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import '@/assets/styles/base.scss';
+  @import '@/assets/styles/animal.scss';
 
 </style>