|
|
@@ -1,281 +1,376 @@
|
|
|
<template>
|
|
|
- <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 icon-animal-con">
|
|
|
- <!-- -->
|
|
|
- <!--<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="'animalMap'"
|
|
|
- :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="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 icon-animal-con">
|
|
|
+ <!-- -->
|
|
|
+ <!--<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" @click="selectForestAnimalListByType(item.type)">
|
|
|
+ <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="'animalMap'"
|
|
|
+ :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.deptName}}</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" @click="dropLocation(item.latitude,item.longitude)">
|
|
|
+ <img src="@/assets/images/visual/img-sample.png" class="event-list-img animal-img">
|
|
|
+ <div class="event-list-text">
|
|
|
+ <h3>{{item.eventTitle}}</h3>
|
|
|
+ <h4><span>摄像头</span><span>新上报</span><span>{{item.reportTime}}</span>
|
|
|
+ </h4>
|
|
|
+ </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>
|
|
|
|
|
|
- </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>
|
|
|
- <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>
|
|
|
+ </div>
|
|
|
+ <eventLocation ref="eventLocation"></eventLocation>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- selectDeviceType,
|
|
|
- selectCameraByDeptId
|
|
|
- } from '@/api/animal'
|
|
|
-
|
|
|
- import supermap from '@/components/supermap' //超图
|
|
|
- import vheader from '@/components/v-header.vue' //一体化共用头部
|
|
|
- import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
|
|
|
+ import {
|
|
|
+ getInit,selectForestAnimalListByType
|
|
|
+ } from '@/api/animal'
|
|
|
|
|
|
+ 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 {
|
|
|
- //左右缩进
|
|
|
- indentStyle: '',
|
|
|
- indentleft: '',
|
|
|
- indentright: '',
|
|
|
- indentText: '收起左右栏',
|
|
|
- indentdisabled: false,
|
|
|
+ let echarts = require('echarts')
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ supermap,
|
|
|
+ vheader,
|
|
|
+ vBottomMenu
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //左右缩进
|
|
|
+ indentStyle: '',
|
|
|
+ indentleft: '',
|
|
|
+ indentright: '',
|
|
|
+ indentText: '收起左右栏',
|
|
|
+ indentdisabled: false,
|
|
|
|
|
|
- //虚拟数据
|
|
|
- animalDwfb: [{
|
|
|
+ //虚拟数据
|
|
|
+ animalDwfb: [{
|
|
|
+ name: '虎',
|
|
|
+ src: require('../assets/images/dwbh/hu-1.png'),
|
|
|
+ type:'forest_animal_hu'
|
|
|
+ }, {
|
|
|
+ name: '豹',
|
|
|
+ src: require('../assets/images/dwbh/bao-1.png'),
|
|
|
+ type:'forest_animal_bao'
|
|
|
+ }, {
|
|
|
+ name: '蛇',
|
|
|
+ src: require('../assets/images/dwbh/she-1.png'),
|
|
|
+ type:'forest_animal_she'
|
|
|
+ }, {
|
|
|
+ name: '鹰',
|
|
|
+ src: require('../assets/images/dwbh/ying-1.png'),
|
|
|
+ type:'forest_animal_ying'
|
|
|
+ }, {
|
|
|
+ name: '兔',
|
|
|
+ src: require('../assets/images/dwbh/tuzi-1.png'),
|
|
|
+ type:'forest_animal_tu'
|
|
|
+ }, {
|
|
|
+ name: '狐狸',
|
|
|
+ src: require('../assets/images/dwbh/huli-1.png'),
|
|
|
+ type:'forest_animal_huli'
|
|
|
+ }, {
|
|
|
+ name: '狗熊',
|
|
|
+ src: require('../assets/images/dwbh/gouxiong-1.png'),
|
|
|
+ type:'forest_animal_gouxiong'
|
|
|
+ }, {
|
|
|
+ name: '野鸡',
|
|
|
+ src: require('../assets/images/dwbh/yeji-1.png'),
|
|
|
+ type:'forest_animal_yeji'
|
|
|
+ }, {
|
|
|
+ name: '狍子',
|
|
|
+ src: require('../assets/images/dwbh/paozi-1.png'),
|
|
|
+ type:'forest_animal_paozi'
|
|
|
+ }],
|
|
|
+ animalSjfb: [],
|
|
|
+ animalSjlb: [],
|
|
|
+ markersList:[],//点位列表
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getInit()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ dropLocation(lat,lng) {
|
|
|
+ this.$refs.supermap.dropLocation(lat,lng)
|
|
|
+ },
|
|
|
+ //初始化
|
|
|
+ getInit() {
|
|
|
+ let that = this
|
|
|
+ //获取左侧菜单列表
|
|
|
+ getInit().then(res => {
|
|
|
+ this.animalSjfb = res.data.visuForestAnimalBOList
|
|
|
+ this.animalSjlb = res.data.visuForestVgdEventBOList
|
|
|
|
|
|
- name: '虎',
|
|
|
- src: require('../assets/images/dwbh/hu-1.png')
|
|
|
- }, {
|
|
|
+ that.markersList = [];
|
|
|
+ if (res.data.visuForestVgdEventBOList != null && res.data.visuForestVgdEventBOList.length > 0) {
|
|
|
+ for (let i = 0; i < res.data.visuForestVgdEventBOList.length; i++) {
|
|
|
+ let markersMap = {
|
|
|
+ lng: 124.59,
|
|
|
+ lat: 43.02,
|
|
|
+ icon: 'marker',
|
|
|
+ bindPopupHtml: '',
|
|
|
+ click: '',
|
|
|
+ parameter: '',
|
|
|
+ keepBindPopup: false,
|
|
|
+ isAggregation: false
|
|
|
+ }
|
|
|
+ if (res.data.visuForestVgdEventBOList.length > 50) {
|
|
|
+ markersMap.isAggregation = true
|
|
|
+ }
|
|
|
+ markersMap.lng = res.data.visuForestVgdEventBOList[i].longitude
|
|
|
+ markersMap.lat = res.data.visuForestVgdEventBOList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度：' + res.data.visuForestVgdEventBOList[i].longitude + ',' + res.data.visuForestVgdEventBOList[i]
|
|
|
+ .latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>事件名称：' + res.data.visuForestVgdEventBOList[i].eventTitle + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>事件时间：' + res.data.visuForestVgdEventBOList[i].reportTime + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '</div>';
|
|
|
+ that.markersList.push(markersMap)
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.supermap.clearM(false)
|
|
|
+ that.$refs.supermap.clearM(true)
|
|
|
+ that.$refs.supermap.setMarkers(that.markersList)
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
- 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: {
|
|
|
+ selectForestAnimalListByType(type){
|
|
|
+ let that = this
|
|
|
+ //获取左侧菜单列表
|
|
|
+ selectForestAnimalListByType(type).then(res => {
|
|
|
+ this.animalSjlb = res.data.visuForestAnimalBOList
|
|
|
+ that.markersList = [];
|
|
|
+ if (res.data.visuForestAnimalBOList != null && res.data.visuForestAnimalBOList.length > 0) {
|
|
|
+ for (let i = 0; i < res.data.visuForestAnimalBOList.length; i++) {
|
|
|
+ let markersMap = {
|
|
|
+ lng: 124.59,
|
|
|
+ lat: 43.02,
|
|
|
+ icon: 'marker',
|
|
|
+ bindPopupHtml: '',
|
|
|
+ click: '',
|
|
|
+ parameter: '',
|
|
|
+ keepBindPopup: false,
|
|
|
+ isAggregation: false
|
|
|
+ }
|
|
|
+ if (res.data.visuForestAnimalBOList.length > 50) {
|
|
|
+ markersMap.isAggregation = true
|
|
|
+ }
|
|
|
+ markersMap.lng = res.data.visuForestAnimalBOList[i].longitude
|
|
|
+ markersMap.lat = res.data.visuForestAnimalBOList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度：' + res.data.visuForestAnimalBOList[i].longitude + ',' + res.data.visuForestAnimalBOList[i]
|
|
|
+ .latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>事件名称：' + res.data.visuForestAnimalBOList[i].eventTitle + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>事件时间：' + res.data.visuForestAnimalBOList[i].reportTime + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '</div>';
|
|
|
+ that.markersList.push(markersMap)
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$refs.supermap.clearM(false)
|
|
|
+ that.$refs.supermap.clearM(true)
|
|
|
+ that.$refs.supermap.setMarkers(that.markersList)
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
- //事件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
|
|
|
- }]
|
|
|
- })
|
|
|
+ //事件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 = '收起左右栏'
|
|
|
- }
|
|
|
- },
|
|
|
- }
|
|
|
+ },
|
|
|
+ //吉祥物收起左右框
|
|
|
+ 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 rel="stylesheet/scss" lang="scss" scoped>
|
|
|
- @import '@/assets/styles/base.scss';
|
|
|
- //动物保护
|
|
|
- .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: 3.2rem;
|
|
|
- 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;
|
|
|
- }
|
|
|
+ @import '@/assets/styles/base.scss';
|
|
|
+ //动物保护
|
|
|
+ .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: 3.2rem;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
|
|
|
</style>
|
