Skip to content

Y
yuji-dataview
Commit cedc12b4 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

修改海洋牧场左右移出效果

parent 28ea071b
Show whitespace changes
Inline Side-by-side
Showing with 458 additions and 18 deletions
src/views/components/seedling/place-list.vue
View file @ cedc12b4
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
</i-col> </i-col>
</Row> </Row>
<m-scroll :length="model.length" :limit="12"> <m-scroll :length="model.length" :limit="12">
<Row class="row" v-for="(row, rowIndex) in model" :key="rowIndex" :style="`${row.count >= 15 ? 'color:#d04e4b': ''}`"> <Row @click.native="$emit('select')" class="row item" v-for="(row, rowIndex) in model" :key="rowIndex" :style="`${row.count >= 15 ? 'color:#d04e4b': ''}`">
<i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0"> <i-col class="col" v-for="col in layout" :key="col.key" :span="col.width" :offset="col.offset || 0">
<!-- <div v-if="typeof row[col.key] === 'number'" :style="`text-align: ${col.align || 'left'};color: ${col.color};width:100%;`"> <!-- <div v-if="typeof row[col.key] === 'number'" :style="`text-align: ${col.align || 'left'};color: ${col.color};width:100%;`">
<m-count :value="row[col.key]" :decimal="0"/> <m-count :value="row[col.key]" :decimal="0"/>
...@@ -73,6 +73,10 @@ export default { ...@@ -73,6 +73,10 @@ export default {
font-size 1rem font-size 1rem
&:nth-child(2n) &:nth-child(2n)
background-color $color-map(0.15) background-color $color-map(0.15)
&.item
cursor pointer
&:hover
color $edgeColor
.col .col
padding 0 .5rem padding 0 .5rem
display flex display flex
......
src/views/ocean-farm copy.vue 0 → 100644
View file @ cedc12b4
<template>
<m-grid
area="grid"
:template="[
'left . right',
]"
columns="1fr 2fr 1fr"
rows="1fr"
gap="0.5rem">
<div id="oceanMap"/>
<div v-if="showDetail" class="back-btn" @click="handleBack">
<Icon type="md-arrow-round-back" /> 返回
</div>
<img @click="isFull = !isFull" :class="`full-btn ${isFull ? 'on' : ''}`" src="@/assets/images/right-btn.png"/>
<div v-if="!showDetail && !isFull" class="sum-wrapper">
<BorderBox class="sum">
<p>海洋牧场数量</p>
<h2><m-count class="count" :value="42" :decimal="0"/> 个</h2>
</BorderBox>
<BorderBox class="sum">
<p>人工鱼礁数量</p>
<h2><m-count class="count" :value="586" :decimal="0"/> 个</h2>
</BorderBox>
</div>
<m-animate enter="fadeInLeft" leave="fadeOutLeft">
<div v-show="!showDetail && !isFull" area="left" class="content part-left">
<m-card title="近5年面积与数量对比">
<AreaCount />
</m-card>
<m-card title="各地区海洋牧场建设情况">
<FarmBuild :model="farmList" :sum="farmSum" />
</m-card>
</div>
</m-animate>
<m-animate enter="fadeInRight" leave="fadeOutRight">
<div v-show="!showDetail && !isFull" area="right" class="content part-right">
<m-card title="各类海洋牧场占比">
<FarmRate />
</m-card>
<m-card title="各地区人工鱼礁建设情况">
<FarmBuild :model="reefList" :sum="reefSum" />
</m-card>
</div>
</m-animate>
<m-animate enter="fadeInLeft" leave="fadeOutLeft">
<div v-show="showDetail && !isFull" area="left" class="content part-left2">
<m-card title="文字介绍">
<p style="text-indent:2rem;line-height:2;">
2016年11月15日，随着最后一船构件礁投放入海，辽宁省在锦州近岸海域又建设完成了一座新的人工鱼礁示范区。该人工鱼礁区内共投放“M”型人工构件礁1000座，14.5空立方米/座，合计14500空立方米，建成鱼礁示范区总面积2000亩。
</p>
</m-card>
<m-card title="图片介绍">
<Carousel v-if="showDetail && !isFull" autoplay loop>
<CarouselItem>
<img style="width:100%;height:100%;" src="@/assets/images/intro1.jpg"/>
</CarouselItem>
<CarouselItem>
<img style="width:100%;height:100%;" src="@/assets/images/intro2.jpg"/>
</CarouselItem>
<CarouselItem>
<img style="width:100%;height:100%;" src="@/assets/images/intro3.jpg"/>
</CarouselItem>
</Carousel>
</m-card>
<m-card title="视频介绍">
<img @click="showVideo('intro.mp4')" style="width:100%;height:92%;cursor:pointer;" src="@/assets/images/img2.png"/>
</m-card>
</div>
</m-animate>
<m-modal v-model="videoModal" title="视频">
<video v-if="videoModal" style="width:100%;height:100%;" controls autoplay>
<source :src="require(`@/assets/images/${curVideo}`)" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
</m-modal>
<m-animate enter="fadeInRight" leave="fadeOutRight">
<div v-show="showDetail && !isFull" area="right" class="content part-right">
<m-card title="视频监控">
<Select class="custom-select" value="线路1" transfer>
<Option v-for="item in ['线路1']" :key="item" :value="item">{{item}}</Option>
</Select>
<img @click="showVideo('reef.mp4')" style="width:100%;height:92%;cursor:pointer;" src="@/assets/images/img3.png"/>
</m-card>
<m-card title="数据识别">
<DataIdentify v-if="showDetail && !isFull"/>
</m-card>
</div>
</m-animate>
</m-grid>
</template>
<script>
const mockFarms = [
{name: '天津市大神堂海域国家级海洋牧场示范区', year: 2018, address: '天津市', type: '养护型', path: [[117.837104, 39.147251], [117.854927, 39.146132], [117.844866, 39.136058], [117.825606, 39.139416]]},
{name: '河北省山海关海域国家级海洋牧场示范区', year: 2018, address: '河北省', type: '增殖型', path: [[119.833562, 39.960252], [119.85081, 39.944323], [119.824363, 39.93016], [119.797917, 39.951403]]},
{name: '河北省祥云湾海域国家级海洋牧场示范区', year: 2018, address: '河北省', type: '养护型', path: [[118.99328, 39.18115], [118.99788, 39.178298], [118.992705, 39.176732], [118.990118, 39.179053]]},
{name: '河北省新开口海域国家级海洋牧场示范区', year: 2018, address: '河北省', type: '休闲型', path: [[119.51464, 39.783741], [119.493368, 39.756234], [119.443925, 39.758009], [119.430702, 39.775313]]},
{name: '河北省北戴河海域国家级海洋牧场示范区', year: 2019, address: '河北省', type: '增殖型', path: [[119.514809, 39.822785], [119.515941, 39.819141], [119.511647, 39.819072], [119.512096, 39.821995]]},
{name: '河北省北戴河新区外侧海域国家级海洋牧场示范区', year: 2019, address: '河北省', type: '休闲型', path: [[119.556369, 39.899606], [119.565855, 39.886763], [119.551194, 39.864835], [119.539121, 39.875246]]},
{name: '河北省乐亭县海域兴乐国家级海洋牧场示范区', year: 2019, address: '河北省', type: '增殖型', path: [[119.064852, 39.22912], [119.058241, 39.21056], [119.047605, 39.199377], [119.030357, 39.205863]]},
{name: '河北省新开口海域通源国家级海洋牧场示范区', year: 2019, address: '河北省', type: '养护型', path: [[119.411753, 39.757635], [119.431875, 39.750756], [119.413478, 39.742102], [119.395368, 39.744987]]},
{name: '辽宁省丹东海域国家级海洋牧场示范区', year: 2018, address: '辽宁省', type: '养护型', path: [[124.270658, 39.926747], [124.296241, 39.886011], [124.252835, 39.872722], [124.230988, 39.905054]]},
{name: '辽宁省盘山县海域国家级海洋牧场示范区', year: 2018, address: '辽宁省', type: '增殖型', path: [[121.827887, 40.906897], [121.83881, 40.876356], [121.785056, 40.88312], [121.794254, 40.909078]]},
{name: '辽宁省锦州市海域国家级海洋牧场示范区', year: 2019, address: '辽宁省', type: '养护型', path: [[121.11918, 40.877052], [121.151016, 40.865705], [121.134918, 40.840603], [121.107322, 40.847152]]},
{name: '大连市獐子岛海域国家级海洋牧场示范区', year: 2018, address: '辽宁省大连市', type: '休闲型', path: [[122.746401, 39.005705], [122.717943, 38.984169], [122.680573, 39.009294], [122.71823, 39.024544]]},
{name: '大连市海洋岛海域国家级海洋牧场示范区', year: 2018, address: '辽宁省大连市', type: '养护型', path: [[121.694959, 38.869911], [121.694527, 38.841814], [121.647528, 38.842039], [121.655146, 38.864405]]},
{name: '大连市财神岛海域国家级海洋牧场示范区', year: 2019, address: '辽宁省大连市', type: '增殖型', path: [[121.504229, 39.156978], [121.574369, 39.090698], [121.454787, 39.040498], [121.385797, 39.127428]]},
{name: '大连市大长山岛海域金茂国家级海洋牧场示范区', year: 2019, address: '辽宁省大连市', type: '养护型', path: [[122.665053, 39.264695], [122.653555, 39.250615], [122.629121, 39.258214], [122.648237, 39.269499]]},
{name: '大连蚂蚁岛海域国家级海洋牧场示范区', year: 2019, address: '辽宁省大连市', type: '休闲型', path: [[122.432074, 39.400661], [122.438254, 39.386608], [122.419569, 39.386274], [122.419569, 39.386274]]},
{name: '大连市小长山岛海域经典国家级海洋牧场示范区', year: 2019, address: '辽宁省大连市', type: '增殖型', path: [[122.726354, 39.275388], [122.726497, 39.254494], [122.688266, 39.256505], [122.697033, 39.274382]]},
{name: '山东省芙蓉岛西部海域国家级海洋牧场示范区', year: 2018, address: '山东省', type: '养护型', path: [[120.691928, 36.28805], [120.689269, 36.283308], [120.684957, 36.28581], [120.685892, 36.289534]]},
{name: '山东省荣成北部海域国家级海洋牧场示范区', year: 2018, address: '山东省', type: '休闲型', path: [[122.724006, 37.373536], [122.787247, 37.348754], [122.713657, 37.248624], [122.621671, 37.317535]]},
{name: '山东省牟平北部海域国家级海洋牧场示范区', year: 2018, address: '山东省', type: '增殖型', path: [[119.916559, 37.660068], [120.013144, 37.488007], [119.718788, 37.379807], [119.629101, 37.559443]]},
{name: '山东省爱莲湾海域国家级海洋牧场示范区', year: 2018, address: '山东省', type: '增殖型', path: [[122.626261, 37.20221], [122.635459, 37.193587], [122.618212, 37.186227], [122.607863, 37.195657]]},
{name: '山东省岚山东部海域万泽丰国家级海洋牧场示范区', year: 2019, address: '山东省', type: '养护型', path: [[119.3698, 35.087037], [119.376412, 35.060095], [119.319783, 35.047093], [119.305697, 35.075694]]},
{name: '山东省莱州市太平湾海域明波国家级海洋牧场示范区', year: 2019, address: '山东省莱州市', type: '休闲型', path: [[119.837078, 37.375426], [119.84139, 37.330906], [119.810632, 37.33366], [119.795396, 37.359136]]},
{name: '山东省荣成市南部海域好当家国家级海洋牧场示范区', year: 2019, address: '山东省荣成市', type: '养护型', path: [[122.626489, 37.283814], [122.698353, 37.262219], [122.674782, 37.214412], [122.621315, 37.236481]]},
{name: '山东省庙岛群岛北部海域国家级海洋牧场示范区', year: 2019, address: '山东省', type: '养护型', path: [[120.766245, 37.958891], [120.76682, 37.950868], [120.758771, 37.948193], [120.754099, 37.95781]]},
{name: '山东省荣成市桑沟湾海域国家级海洋牧场示范区', year: 2019, address: '山东省荣成市', type: '增殖型', path: [[122.579934, 37.035138], [122.639725, 37.028685], [122.620753, 36.983497], [122.559812, 37.001022]]},
{name: '青岛市石雀滩海域国家级海洋牧场示范区', year: 2018, address: '山东省青岛市', type: '养护型', path: [[120.234654, 35.941782], [120.241122, 35.936405], [120.232785, 35.930034], [120.228402, 35.934067]]},
{name: '青岛市崂山湾海域国家级海洋牧场示范区', year: 2018, address: '山东省青岛市', type: '增殖型', path: [[120.695613, 36.283635], [120.710848, 36.281773], [120.703086, 36.26769], [120.690007, 36.270251]]},
{name: '青岛市崂山湾海域龙盘国家级海洋牧场示范区', year: 2019, address: '山东省青岛市', type: '休闲型', path: [[120.552854, 36.096153], [120.554579, 36.084487], [120.507436, 36.081687], [120.513185, 36.094287]]},
{name: '青岛市灵山湾海域灵山国家级海洋牧场示范区', year: 2019, address: '山东省青岛市', type: '增殖型', path: [[120.790143, 36.333611], [120.889028, 36.275906], [120.844185, 36.259145], [120.745299, 36.254488]]},
{name: '青岛市灵山湾海域西海岸国家级海洋牧场示范区', year: 2019, address: '山东省青岛市', type: '养护型', path: [[120.772895, 36.308487], [120.866032, 36.281492], [120.80624, 36.172488], [120.729202, 36.168759]]},
{name: '上海市长江口海域国家级海洋牧场示范区', year: 2019, address: '上海市', type: '休闲型', path: [[122.03311, 31.604279], [122.143494, 31.535364], [122.067605, 31.43288], [121.998615, 31.444711]]},
{name: '江苏省海州湾海域国家级海洋牧场示范区', year: 2018, address: '江苏省', type: '养护型', path: [[120.87638, 30.322077], [120.972966, 30.304119], [120.900527, 30.243237], [120.837286, 30.27518]]},
{name: '浙江省中街山列岛海域国家级海洋牧场示范区', year: 2018, address: '浙江省', type: '增殖型', path: [[122.870732, 30.347152], [123.066203, 30.241379], [122.900628, 30.115499], [122.900628, 30.115499]]},
{name: '浙江省马鞍列岛海域国家级海洋牧场示范区', year: 2018, address: '浙江省', type: '增殖型', path: [[122.234814, 30.792457], [122.40154, 30.712014], [122.360721, 30.65288], [122.328526, 30.706549]]},
{name: '浙江省南麂列岛海域国家级海洋牧场示范区', year: 2019, address: '浙江省', type: '休闲型', path: [[120.959928, 27.528351], [121.026618, 27.494517], [121.035242, 27.468878], [120.983499, 27.46375]]},
{name: '宁波市渔山列岛海域国家级海洋牧场示范区', year: 2018, address: '浙江省宁波市', type: '养护型', path: [[122.406368, 29.624205], [122.765115, 29.15291], [122.493755, 28.938694], [122.056819, 28.89013]]},
{name: '广东省万山海域国家级海洋牧场示范区', year: 2018, address: '广东省', type: '增殖型', path: [[114.778017, 22.484846], [114.975788, 22.457059], [114.8907, 22.339439], [114.730874, 22.424991]]},
{name: '广东省龟龄岛东海域国家级海洋牧场示范区', year: 2018, address: '广东省', type: '增殖型', path: [[108.398497, 21.648597], [108.420631, 21.642684], [108.40827, 21.623869], [108.387861, 21.630858]]},
{name: '广东省南澳岛海域国家级海洋牧场示范区', year: 2019, address: '广东省', type: '休闲型', path: [[117.081474, 23.393655], [117.147589, 23.383571], [117.126892, 23.367649], [117.078599, 23.381449]]},
{name: '广东省汕尾遮浪角西海域国家级海洋牧场示范区', year: 2019, address: '广东省', type: '养护型', path: [[115.56757, 22.672755], [115.568415, 22.672363], [115.567499, 22.672459], [115.56753, 22.672418]]},
{name: '广西壮族自治区防城港市白龙珍珠湾海域国家级海洋牧场示范区', year: 2019, address: '广西壮族自治区', type: '养护型', path: [[108.338204, 21.582065], [108.378448, 21.569696], [108.3681, 21.544955], [108.316932, 21.554637]]},
]
const mockReefs = [
{year: 2015, type: '建设项目', name: '1号鱼礁', location: [121.123779, 40.870778]},
{year: 2015, type: '建设项目', name: '2号鱼礁', location: [121.130966, 40.864341]},
{year: 2015, type: '建设项目', name: '3号鱼礁', location: [121.122486, 40.867396]},
{year: 2015, type: '建设项目', name: '4号鱼礁', location: [121.13959, 40.86074]},
{year: 2019, type: '创建项目', name: '5号鱼礁', location: [121.115731, 40.859867]},
{year: 2019, type: '创建项目', name: '6号鱼礁', location: [121.127085, 40.861067]},
{year: 2019, type: '创建项目', name: '7号鱼礁', location: [121.117886, 40.855174]},
{year: 2019, type: '创建项目', name: '8号鱼礁', location: [121.130822, 40.852664]},
{year: 2019, type: '建设项目', name: '9号鱼礁', location: [121.122773, 40.849499]},
]
const {AMap} = window
import yj1 from '@/assets/images/yj1.png'
import yj2 from '@/assets/images/yj2.png'
import AreaCount from './components/ocean-farm/area-count'
import FarmRate from './components/ocean-farm/farm-rate'
import FarmBuild from './components/ocean-farm/farm-build'
import BorderBox from './components/border-box'
import DataIdentify from './components/ocean-farm/data-identify'
export default {
name: 'OceanFarm',
components: {
AreaCount,
FarmRate,
FarmBuild,
BorderBox,
DataIdentify,
},
data() {
return {
map: null,
isFull: false,
showDetail: false,
curVideo: null,
videoModal: false,
mapConfig: {
zoom: 7,
zooms: [6, 15],
center: [121.973849, 28.142576], // 钓鱼岛附近
mapStyle: 'amap://styles/blue',
features: ['bg', 'road', 'point'],
},
mapPolygon: null,
polygonInfo: null,
mapMarker: null,
markerInfo: null,
farmList: [
{province: '天津市', number: 1, area: 421.94, invest: 6416.46},
{province: '河北省', number: 7, area: 2953.59, invest: 44915.37},
{province: '辽宁省', number: 9, area: 3797.47, invest: 57748.29},
{province: '山东省', number: 14, area: 5890, invest: 89569},
{province: '上海市', number: 1, area: 417.25, invest: 6345.139},
{province: '江苏省', number: 1, area: 467.24, invest: 7105.339},
{province: '浙江省', number: 4, area: 1687.76, invest: 25665.84},
{province: '广东省', number: 4, area: 1859.28, invest: 28274.15},
{province: '广西', number: 1, area: 328.58, invest: 4996.73},
{province: '天津市', number: 1, area: 421.94, invest: 6416.46},
{province: '河北省', number: 7, area: 2953.59, invest: 44915.37},
{province: '辽宁省', number: 9, area: 3797.47, invest: 57748.29},
{province: '山东省', number: 14, area: 5890, invest: 89569},
{province: '上海市', number: 1, area: 417.25, invest: 6345.139},
{province: '江苏省', number: 1, area: 467.24, invest: 7105.339},
{province: '浙江省', number: 4, area: 1687.76, invest: 25665.84},
{province: '广东省', number: 4, area: 1859.28, invest: 28274.15},
{province: '广西', number: 1, area: 328.58, invest: 4996.73},
],
farmSum: [42, 17823.11, 271036.32],
reefList: [
{province: '天津市', number: 2512, area: 13878.45, invest: 1957.401},
{province: '河北省', number: 17289, area: 95519.34, invest: 13471.93},
{province: '辽宁省', number: 22489, area: 124248.6, invest: 17523.88},
{province: '山东省', number: 35412, area: 195646.4, invest: 27593.74},
{province: '上海市', number: 2178, area: 12033.15, invest: 1697.141},
{province: '江苏省', number: 2614, area: 14441.99, invest: 2036.881},
{province: '浙江省', number: 9856, area: 54453.04, invest: 7679.992},
{province: '广东省', number: 8992, area: 49679.56, invest: 7006.746},
{province: '广西', number: 2213, area: 12226.52, invest: 1724.414},
{province: '天津市', number: 2512, area: 13878.45, invest: 1957.401},
{province: '河北省', number: 17289, area: 95519.34, invest: 13471.93},
{province: '辽宁省', number: 22489, area: 124248.6, invest: 17523.88},
{province: '山东省', number: 35412, area: 195646.4, invest: 27593.74},
{province: '上海市', number: 2178, area: 12033.15, invest: 1697.141},
{province: '江苏省', number: 2614, area: 14441.99, invest: 2036.881},
{province: '浙江省', number: 9856, area: 54453.04, invest: 7679.992},
{province: '广东省', number: 8992, area: 49679.56, invest: 7006.746},
{province: '广西', number: 2213, area: 12226.52, invest: 1724.414},
],
reefSum: [105000, 13912.5, 80692.5],
}
},
mounted() {
setTimeout(this.initMap, 100)
},
beforeDestroy() {
this.map && this.map.destroy()
this.map = null
},
computed: {
sizeRate() {
return Number((screen.height / 800).toFixed(1))
},
preIcon() {
return new AMap.Icon({
size: [20 * this.sizeRate, 20 * this.sizeRate],
image: yj2,
})
},
clickIcon() {
return new AMap.Icon({
size: [40 * this.sizeRate, 40 * this.sizeRate],
// offset: new AMap.Pixel(-60, -35),
image: yj1,
})
},
},
methods: {
initMap() {
this.map = new AMap.Map('oceanMap', this.mapConfig)
this.addPollygon()
this.addMarker()
},
addPollygon() {
this.mapPolygon = mockFarms.map(item => {
const polygon = new AMap.Polygon({
fillColor: 'gold',
fillOpacity: 0.1,
strokeWeight: 1,
strokeColor: 'gold',
cursor: 'pointer',
path: item.path,
extData: {...item},
})
.on('click', this.polygonListener)
// .on('mouseout', () => this.polygonInfo.close())
return polygon
})
this.map.add(this.mapPolygon)
},
addMarker() {
this.mapMarker = mockReefs.map(item => {
const marker = new AMap.Marker({
position: item.location,
zIndex: 99,
icon: this.preIcon,
extData: {...item},
}).on('click', e => {
if (this.mapMarker.length > 0) {
this.mapMarker.forEach(marker => {
marker.setIcon(this.preIcon)
})
e.target.setIcon(this.clickIcon)
}
this.showDetail = true
const {name, year, type, location} = e.target.getExtData()
this.map.setZoomAndCenter(14, location)
this.markerInfo = new AMap.InfoWindow({
content: `
<div class="map-tooltip-info">
<h3>${name}</h3>
<p><span>申请年份：</span>${year}年</p>
<p><span>建设类型：</span>${type}</p>
</div>
`
}).open(this.map, location)
})
return marker
})
this.map.add(this.mapMarker)
},
handleBack() {
this.showDetail = false
this.polygonInfo && this.polygonInfo.close()
this.markerInfo && this.markerInfo.close()
if (this.mapMarker.length > 0) {
this.mapMarker.forEach(marker => {
marker.setIcon(this.preIcon)
})
}
const {zoom} = this.mapConfig
this.map.setZoom(zoom)
},
polygonListener(e) {
const location = [e.lnglat.getLng(), e.lnglat.getLat()]
const {name, address, year, type} = e.target.getExtData()
this.polygonInfo = new AMap.InfoWindow({
content: `
<div class="map-tooltip-info">
<h3>${name}</h3>
<p><span>地址：</span>${address}</p>
<p><span>申请年份：</span>${year}年</p>
<p><span>建设类型：</span>${type}</p>
</div>
`
}).open(this.map, location)
},
showVideo(src) {
this.curVideo = src
this.videoModal = true
}
}
}
</script>
<style lang="stylus" scoped>
#oceanMap
z-index 9
width 100%
height 100%
position absolute
.full-btn
position absolute
right calc(25% + 1rem)
bottom 1.5rem
width 2.5rem
height @width
cursor pointer
z-index 9999
transition all 1s ease-in-out
transform-origin center
&.on
right 1rem
transform rotate(180deg)
.monitor-card
z-index 10
.sum-wrapper
z-index 99
position absolute
left 0
right 0
width 35%
margin 2rem auto 0
display flex
justify-content space-around
.sum
width 45%
text-align center
font-weight bold
h2,.count
color $edgeColor !important
font-family $font-pang !important
font-size 1.5rem !important
.content
display flex
flex-direction column
width 100%
height 100%
overflow hidden
>div
margin-top .5rem
&.part-left,
&.part-right
>div
&:nth-child(1)
flex 1
&:nth-child(2)
flex 2
&.part-left2
>div
flex 1
</style>
<style lang="stylus">
.amap-logo
.amap-copyright
display none !important
.amap-icon
img
width 100%
height 100%
.menu
.ivu-collapse-content
max-height 80vh
overflow-y auto
overflow-x hidden
padding 0 1rem
.ivu-collapse-content-box
padding 1rem 0
button
text-align left
font-size 1rem
.tab-menu
.ivu-tabs-bar
margin-bottom 0
.ivu-tabs-nav
.ivu-tabs-tab
&:last-child
margin-right 0
.amap-info-content.amap-info-outer
background rgba(0,0,0,0.5)
padding 0 !important
.map-tooltip-info
color $edgeColor
padding 1rem
border .1rem solid $edgeColor
span
color #fff
</style>
src/views/ocean-farm.vue
View file @ cedc12b4
<template> <template>
<m-grid <div class="ocean-farm">
area="grid"
:template="[
'left . right',
]"
columns="1fr 2fr 1fr"
rows="1fr"
gap="0.5rem">
<div id="oceanMap"/> <div id="oceanMap"/>
<div v-if="showDetail" class="back-btn" @click="handleBack"> <div v-if="showDetail" class="back-btn" @click="handleBack">
<Icon type="md-arrow-round-back" /> 返回 <Icon type="md-arrow-round-back" /> 返回
...@@ -86,7 +79,7 @@ ...@@ -86,7 +79,7 @@
</m-card> </m-card>
</div> </div>
</m-animate> </m-animate>
</m-grid> </div>
</template> </template>
<script> <script>
...@@ -297,16 +290,16 @@ export default { ...@@ -297,16 +290,16 @@ export default {
<p><span>建设类型：</span>${type}</p> <p><span>建设类型：</span>${type}</p>
</div> </div>
` `
}).open(this.map, location) })
this.markerInfo.open(this.map, location)
}) })
return marker return marker
}) })
this.map.add(this.mapMarker) this.map.add(this.mapMarker)
}, },
handleBack() { handleBack() {
this.showDetail = false
this.polygonInfo && this.polygonInfo.close()
this.markerInfo && this.markerInfo.close() this.markerInfo && this.markerInfo.close()
this.showDetail = false
if (this.mapMarker.length > 0) { if (this.mapMarker.length > 0) {
this.mapMarker.forEach(marker => { this.mapMarker.forEach(marker => {
marker.setIcon(this.preIcon) marker.setIcon(this.preIcon)
...@@ -338,6 +331,8 @@ export default { ...@@ -338,6 +331,8 @@ export default {
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.ocean-farm
position relative
#oceanMap #oceanMap
z-index 9 z-index 9
width 100% width 100%
...@@ -351,7 +346,7 @@ export default { ...@@ -351,7 +346,7 @@ export default {
height @width height @width
cursor pointer cursor pointer
z-index 9999 z-index 9999
transition all 1s ease-in-out transition all .5s ease-in-out
transform-origin center transform-origin center
&.on &.on
right 1rem right 1rem
...@@ -376,13 +371,17 @@ export default { ...@@ -376,13 +371,17 @@ export default {
font-family $font-pang !important font-family $font-pang !important
font-size 1.5rem !important font-size 1.5rem !important
.content .content
width 25%
height auto
display flex display flex
flex-direction column flex-direction column
width 100%
height 100%
overflow hidden overflow hidden
position absolute
z-index 10
top .5rem
bottom 0
>div >div
margin-top .5rem margin-bottom .5rem
&.part-left, &.part-left,
&.part-right &.part-right
>div >div
...@@ -390,7 +389,11 @@ export default { ...@@ -390,7 +389,11 @@ export default {
flex 1 flex 1
&:nth-child(2) &:nth-child(2)
flex 2 flex 2
&.part-right
right .5rem
&.part-left,
&.part-left2 &.part-left2
left .5rem
>div >div
flex 1 flex 1
</style> </style>
......
src/views/seedling.vue
View file @ cedc12b4
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<AreaCount v-if="showProvince" :data="areaData"/> <AreaCount v-if="showProvince" :data="areaData"/>
</m-card> </m-card>
<m-card title="良种场列表"> <m-card title="良种场列表">
<PlaceList v-if="showProvince" /> <PlaceList @select="handleMapChoice" v-if="showProvince" />
</m-card> </m-card>
</div> </div>
</m-animate> </m-animate>
...@@ -189,6 +189,7 @@ export default { ...@@ -189,6 +189,7 @@ export default {
}, },
handleMapChoice() { handleMapChoice() {
this.showCompany = true this.showCompany = true
this.showProvince = false
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment