64 changed files with 1130 additions and 9580 deletions
File diff suppressed because it is too large
|
After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 7.3 KiB |
|
Before Width: | Height: | Size: 73 KiB |
|
Before Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 438 KiB |
|
Before Width: | Height: | Size: 548 KiB |
|
Before Width: | Height: | Size: 414 KiB |
|
Before Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 4.8 KiB |
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -1,38 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.left,.right{ |
|
||||
width:586px; |
|
||||
display:flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: space-evenly; |
|
||||
} |
|
||||
.left{ |
|
||||
margin-left:20px; |
|
||||
} |
|
||||
.right{ |
|
||||
margin-right:20px; |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<div class="left"> |
|
||||
<left1 :base="base" :year="year"/> |
|
||||
<left2 :base="base" :year="year"/> |
|
||||
<left3 :base="base" :year="year"/> |
|
||||
</div> |
|
||||
<center v-model:base="base" v-model:year="year"/> |
|
||||
<div class="right"> |
|
||||
<right1 :base="base" :year="year"/> |
|
||||
<right2 :base="base" :year="year"/> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import { ref, shallowRef } from 'vue' |
|
||||
import left1 from './left_1.vue' |
|
||||
import left2 from './left_2.vue' |
|
||||
import left3 from './left_3.vue' |
|
||||
import center from './center.vue' |
|
||||
import right1 from './right_1.vue' |
|
||||
import right2 from './right_2.vue' |
|
||||
|
|
||||
var base=ref("") |
|
||||
var year=ref("") |
|
||||
</script> |
|
||||
File diff suppressed because one or more lines are too long
@ -1,174 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.content{ |
|
||||
display:flex; |
|
||||
align-items: center; |
|
||||
.echarts{ |
|
||||
position: relative; |
|
||||
&:before{ |
|
||||
content:""; |
|
||||
position:absolute; |
|
||||
top:11px; |
|
||||
left:11px; |
|
||||
width:117px; |
|
||||
height:117px; |
|
||||
background-image: url(@/assets/img/echarts_bg.png); |
|
||||
background-repeat: no-repeat; |
|
||||
background-position: center; |
|
||||
animation: BGrotate 6s linear infinite; |
|
||||
} |
|
||||
flex-shrink: 0; |
|
||||
} |
|
||||
.items{ |
|
||||
flex-grow: 1; |
|
||||
margin-left:28px; |
|
||||
&>div{ |
|
||||
display:flex; |
|
||||
align-items: center; |
|
||||
font-size:16px; |
|
||||
height:30px; |
|
||||
position:relative; |
|
||||
&:before{ |
|
||||
content:""; |
|
||||
width:6px; |
|
||||
height:14px; |
|
||||
background:var(--c); |
|
||||
margin-right:14px; |
|
||||
margin-bottom:5px; |
|
||||
position:relative; |
|
||||
z-index: 10; |
|
||||
} |
|
||||
&:after{ |
|
||||
content:""; |
|
||||
border:1px solid transparent; |
|
||||
border-bottom-color:rgba(12, 129, 239, 0.3); |
|
||||
border-left-color:rgba(12, 129, 239, 0.3); |
|
||||
position:absolute; |
|
||||
width:100%; |
|
||||
height:10px; |
|
||||
top: 18px; |
|
||||
left: 2px; |
|
||||
} |
|
||||
|
|
||||
.name,.percent{ |
|
||||
color:#99A4AE; |
|
||||
} |
|
||||
.value{ |
|
||||
margin-left:auto; |
|
||||
color:#fff; |
|
||||
&:after{ |
|
||||
content:"亩"; |
|
||||
} |
|
||||
} |
|
||||
.lastYear{ |
|
||||
margin-left: 10px; |
|
||||
color:#99A4AE; |
|
||||
} |
|
||||
.TB{ |
|
||||
color:#FD2100; |
|
||||
min-width:83px; |
|
||||
margin-left:10px; |
|
||||
text-align: right; |
|
||||
&:before{ |
|
||||
content:"+"; |
|
||||
} |
|
||||
&.below{ |
|
||||
color:#10CC40; |
|
||||
&:before{ |
|
||||
content:""; |
|
||||
} |
|
||||
.plantBS-shangsheng{ |
|
||||
display:inline-block; |
|
||||
transform: rotateX(180deg); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
<template> |
|
||||
<div class="left_2"> |
|
||||
<dTitle title="种植概况" icon="2"/> |
|
||||
<div class="content"> |
|
||||
<v-echarts :option="pie" style="height:138px;width:138px;pointer-events: all;" autoresize/> |
|
||||
<div class="items"> |
|
||||
<div v-for="(v,k) in list" :key="k" :style="{'--c':v.color}"> |
|
||||
<span class="name">{{v.name}}</span><span class="percent">({{v.percent}}%)</span> |
|
||||
<span class="value">{{v.value}}</span> |
|
||||
<span class="lastYear">较上一年度</span> |
|
||||
<span class="TB" :class="{below:v.TB<=0}">{{v.TB}} <span class="plantBS-shangsheng"/></span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import request from '@/config/request' |
|
||||
import { computed, inject, onMounted, shallowRef, watch } from 'vue' |
|
||||
import dTitle from '../title.vue' |
|
||||
|
|
||||
var props=defineProps({ |
|
||||
base:{ |
|
||||
type:String, |
|
||||
default:"" |
|
||||
}, |
|
||||
year:{ |
|
||||
type:String, |
|
||||
default:"" |
|
||||
}, |
|
||||
}) |
|
||||
var msg=inject("msg") |
|
||||
|
|
||||
var colors=['#029DFD','#00E4FF','#10CC40','#6ACBFA','#F66E97'] |
|
||||
var pie=computed(()=>({ |
|
||||
title:{ |
|
||||
text:"种植情况", |
|
||||
textStyle:{ |
|
||||
color:"#fff", |
|
||||
fontSize:16, |
|
||||
width:32, |
|
||||
overflow:"breakAll", |
|
||||
lineHeight:27, |
|
||||
}, |
|
||||
left:'center', |
|
||||
top:"center", |
|
||||
}, |
|
||||
series: [ |
|
||||
{ |
|
||||
type: "pie", |
|
||||
radius:[56,64], |
|
||||
label:{show:false}, |
|
||||
data: [ |
|
||||
{ value: 335, name: "Apple"}, |
|
||||
{ value: 310, name: "Grapes"}, |
|
||||
{ value: 234, name: "Pineapples"}, |
|
||||
{ value: 135, name: "Oranges"}, |
|
||||
{ value: 1548, name: "Bananas"} |
|
||||
] |
|
||||
} |
|
||||
] |
|
||||
})) |
|
||||
var list=shallowRef([]) |
|
||||
watch([()=>props.base,()=>props.year], async n=>{ |
|
||||
var res=await request("/api/company/leftcenter",{ |
|
||||
method:"post", |
|
||||
data:{ |
|
||||
categoryId: "", |
|
||||
date: n[1], |
|
||||
region: n[0], |
|
||||
} |
|
||||
}) |
|
||||
if(res.statu){ |
|
||||
var total=res.data.reduce((a,b)=>a+b.plantArea,0) |
|
||||
list.value=res.data.map(v=>({ |
|
||||
name:v.plantName, |
|
||||
value:v.plantArea, |
|
||||
percent:Math.round(v.plantArea/total*10000)/100, |
|
||||
TB: v.lastArea==0?0:Math.round((v.plantArea-v.lastArea)/v.lastArea*10000)/100 |
|
||||
})) |
|
||||
}else{ |
|
||||
msg.error(res.msg||"获取种植概况失败！") |
|
||||
} |
|
||||
}) |
|
||||
</script> |
|
||||
@ -1,121 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.left_3{ |
|
||||
.title{ |
|
||||
margin-top:22px; |
|
||||
color:#fff; |
|
||||
font-size:18px; |
|
||||
font-weight: bold; |
|
||||
background:rgba(12, 137, 254, 0.1); |
|
||||
box-shadow: inset 0 0 5px 1px #0C89FE; |
|
||||
height:42px; |
|
||||
line-height: 42px; |
|
||||
padding-left:13px+12px; |
|
||||
display:flex; |
|
||||
align-items: center; |
|
||||
span{ |
|
||||
padding:0 4px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
} |
|
||||
.item{ |
|
||||
height:100%; |
|
||||
color:#A2B4C5; |
|
||||
display:flex; |
|
||||
align-items: center; |
|
||||
font-size:16px; |
|
||||
.kuang{ |
|
||||
width:12px; |
|
||||
height:12px; |
|
||||
border:1px solid #0C80EF; |
|
||||
background-image:linear-gradient(#0C80EF,#0C80EF); |
|
||||
background-size:6px 6px; |
|
||||
background-position: center; |
|
||||
background-repeat: no-repeat; |
|
||||
margin-left:13px; |
|
||||
} |
|
||||
span{ |
|
||||
padding:0 4px; |
|
||||
text-align: center; |
|
||||
&.state{ |
|
||||
color:#fff; |
|
||||
&:deep span{ |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
&.egg{ |
|
||||
background:rgba(12, 137, 254, 0.2); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<div class="left_3"> |
|
||||
<dTitle title="农事记录" icon='3'/> |
|
||||
<div class="title"> |
|
||||
<span style="width:110px;text-align:left;">品种</span> |
|
||||
<span style="width:50px;">事件</span> |
|
||||
<span style="width:120px;">操作日期</span> |
|
||||
<span style="width:80px;">负责人</span> |
|
||||
<span style="width:225px;">农资使用情况</span> |
|
||||
</div> |
|
||||
<dScrollBoard :data="list" :num="5" style="height:208px;pointer-events: all;" :delay="2000" ref="scrollBoard"> |
|
||||
<template #default="{row,index}"> |
|
||||
<div class="item" :class="{egg:index%2}" > |
|
||||
<span class="kuang"/> |
|
||||
<span class="name" style="width:110px;text-align:left;">{{row.plantType}}</span> |
|
||||
<span class="event" style="width:50px;">{{row.event}}</span> |
|
||||
<span class="date" style="width:120px;">{{new Date(row.operaDate).format('yyyy-MM-dd')}}</span> |
|
||||
<span class="people over" style="width:80px;">{{row.head}}</span> |
|
||||
<span class="state" style="width:225px;"> |
|
||||
<popover @show="scrollBoard.stop()" @hide="scrollBoard.play()" :position="row.buwei" :content="row.materialsUse"> |
|
||||
<span class="over" style="display:block">{{row.materialsUse}}</span> |
|
||||
</popover> |
|
||||
</span> |
|
||||
</div> |
|
||||
</template> |
|
||||
</dScrollBoard> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import request from '@/config/request' |
|
||||
import { inject, onMounted, ref, shallowRef, watch } from 'vue' |
|
||||
import dTitle from '../title.vue' |
|
||||
import {dScrollBoard} from 'black-knight/lib/components' |
|
||||
import popover from './popover.vue' |
|
||||
|
|
||||
var props=defineProps({ |
|
||||
base:{ |
|
||||
type:String, |
|
||||
default:"" |
|
||||
}, |
|
||||
year:{ |
|
||||
type:String, |
|
||||
default:"" |
|
||||
}, |
|
||||
}) |
|
||||
var msg=inject("msg") |
|
||||
|
|
||||
var scrollBoard=ref() |
|
||||
var list=shallowRef([]) |
|
||||
|
|
||||
watch([()=>props.base,()=>props.year], async n=>{ |
|
||||
var res=await request("/api/company/leftbelow",{ |
|
||||
method:"post", |
|
||||
data:{ |
|
||||
categoryId: "", |
|
||||
date: n[1], |
|
||||
region: n[0], |
|
||||
} |
|
||||
}) |
|
||||
if(res.statu){ |
|
||||
list.value=res.data |
|
||||
}else{ |
|
||||
msg.error(res.msg||'') |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
onMounted(async()=>{ |
|
||||
|
|
||||
}) |
|
||||
</script> |
|
||||
@ -1,311 +0,0 @@ |
|||||
<style lang="less"> |
|
||||
.el-popover.mapPopover{ |
|
||||
border-radius: 0; |
|
||||
background-size:100% 100%; |
|
||||
padding:0!important; |
|
||||
background-color:transparent; |
|
||||
border:none; |
|
||||
position:relative; |
|
||||
&.company{ |
|
||||
height:245px; |
|
||||
box-shadow: 0 0 6px 0 #48b4ff; |
|
||||
.title{ |
|
||||
position:absolute; |
|
||||
color:#fff; |
|
||||
font-weight: bold; |
|
||||
top:7px; |
|
||||
left:50%; |
|
||||
transform: translateX(-50%); |
|
||||
} |
|
||||
} |
|
||||
&>.content{ |
|
||||
position:absolute; |
|
||||
top:0; |
|
||||
left:0; |
|
||||
width:100%; |
|
||||
height:100%; |
|
||||
} |
|
||||
.plantBS-shangjiantou{ |
|
||||
position:absolute; |
|
||||
font-weight: bold; |
|
||||
font-size:18px; |
|
||||
background-image:-webkit-linear-gradient(top, #fff,rgb(var(--c))); |
|
||||
-webkit-background-clip:text; |
|
||||
-webkit-text-fill-color:transparent; |
|
||||
top:46px; |
|
||||
cursor: pointer; |
|
||||
&:hover{ |
|
||||
opacity: 0.7; |
|
||||
} |
|
||||
&:before{ |
|
||||
text-shadow:1px -1px 2px rgba(var(--c),0.8); |
|
||||
margin-right:5px; |
|
||||
} |
|
||||
&.current{ |
|
||||
left:80px; |
|
||||
} |
|
||||
&.past{ |
|
||||
right:80px; |
|
||||
} |
|
||||
} |
|
||||
.dv-scroll-board{ |
|
||||
position:absolute; |
|
||||
top:75px; |
|
||||
left:10px; |
|
||||
width:calc(100% - 20px); |
|
||||
height:154px; |
|
||||
.ceil,.header-item{ |
|
||||
padding:0 3px; |
|
||||
font-size:16px; |
|
||||
} |
|
||||
.header-item{ |
|
||||
color:#F1F5F9; |
|
||||
} |
|
||||
.ceil{ |
|
||||
color:#A2B4C5; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<el-popover :visible="show" ref="popover" width="466px" :show-arrow="false" popper-class="mapPopover company" trigger="focus" placement="top" :virtual-ref="markerTarget"> |
|
||||
<svg width="466.000000" height="245.000000" viewBox="0 0 466 245" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
|
||||
<rect id="画板 1" width="466.000000" height="245.000000" fill="#020920"/> |
|
||||
<g filter="url(#filter_7_15_dd)"> |
|
||||
<path id="矢量 7" d="M12.5 0L0 11.5L0 232.5L12.5 244L452.5 244L465 232.5L465 11.5L452.5 0L12.5 0Z" fill-rule="evenodd" fill="#0C80EF" fill-opacity="0.100000"/> |
|
||||
<path id="矢量 7" d="M1 11.5L1 232.5L12.5 244L452.5 244L465 232.5L465 11.5L452.5 1L12.5 1L1 11.5Z" stroke="#0C80EF" stroke-opacity="0.300000"/> |
|
||||
</g> |
|
||||
<path id="矢量 1" d="M12 0L0 0L0 11L12 0Z" fill-rule="evenodd" fill="#0C80EF"/> |
|
||||
<path id="矢量 3" d="M454 0L466 0L466 11L454 0Z" fill-rule="evenodd" fill="#0C80EF"/> |
|
||||
<path id="矢量 2" d="M12 245L0 245L0 234L12 245Z" fill-rule="evenodd" fill="#0C80EF"/> |
|
||||
<path id="矢量 4" d="M454 245L466 245L466 234L454 245Z" fill-rule="evenodd" fill="#0C80EF"/> |
|
||||
<path id="矢量 8" d="M13.5 0.5C8.625 4.98499 5.875 7.51501 1 12" stroke="#0C80EF" stroke-linejoin="bevel" stroke-linecap="round" stroke-dasharray="0 0"/> |
|
||||
<path id="矢量 10" d="M453 0C457.875 4.48499 460.625 7.01501 465.5 11.5" stroke="#0C80EF" stroke-linejoin="bevel" stroke-linecap="round" stroke-dasharray="0 0"/> |
|
||||
<path id="矢量 9" d="M0 232C4.875 236.485 7.625 239.015 12.5 243.5" stroke="#0C80EF" stroke-linejoin="bevel" stroke-linecap="round" stroke-dasharray="0 0"/> |
|
||||
<path id="矢量 11" d="M466 233C461.125 237.485 458.375 240.015 453.5 244.5" stroke="#0C80EF" stroke-linejoin="bevel" stroke-linecap="round" stroke-dasharray="0 0"/> |
|
||||
<path id="矢量 8" d="M16.3118 3.47647C11.5102 7.75052 8.80164 10.1615 4 14.4356" stroke="#0C80EF" stroke-width="2.000000" stroke-linejoin="bevel" stroke-linecap="round" stroke-dasharray="0 0"/> |
|
||||
<path id="矢量 10" d="M449.196 3C453.997 7.27405 456.706 9.68506 461.507 13.9591" stroke="#0C80EF" stroke-width="2.000000" stroke-linejoin="bevel" stroke-linecap="round" stroke-dasharray="0 0"/> |
|
||||
<path id="矢量 9" d="M4 231.041C8.80164 235.315 11.5102 237.726 16.3118 242" stroke="#0C80EF" stroke-width="2.000000" stroke-linejoin="bevel" stroke-linecap="round" stroke-dasharray="0 0"/> |
|
||||
<path id="矢量 11" d="M462 231.041C457.198 235.315 454.49 237.726 449.688 242" stroke="#0C80EF" stroke-width="2.000000" stroke-linejoin="bevel" stroke-linecap="round" stroke-dasharray="0 0"/> |
|
||||
<path id="矢量 13" d="M113 0L352 0" stroke="#0C80EF"/> |
|
||||
<path id="矢量 14" d="M113 244L352 244" stroke="#0C80EF"/> |
|
||||
<path id="矢量 15" d="M44.5 4.5L50 10.5L55.5 4.5L44.5 4.5Z" fill-rule="evenodd" fill="#0C80EF"/> |
|
||||
<path id="矢量 17" d="M44.5 238L50 232L55.5 238L44.5 238Z" fill-rule="evenodd" fill="#0C80EF"/> |
|
||||
<path id="矢量 16" d="M409 4.5L414.5 10.5L420 4.5L409 4.5Z" fill-rule="evenodd" fill="#0C80EF"/> |
|
||||
<path id="矢量 18" d="M409 238L414.5 232L420 238L409 238Z" fill-rule="evenodd" fill="#0C80EF"/> |
|
||||
<path id="矢量 19" d="M119.789 43.114L123.289 38.614C123.633 38.1719 123.556 37.5544 123.114 37.2107C122.672 36.8669 122.054 36.944 121.711 37.386L118.511 41.5L1 41.5L1 43.5L119 43.5L119.789 43.114Z" stroke="url(#paint_linear_7_35_0)" stroke-width="2.000000" stroke-linejoin="bevel"/> |
|
||||
<path id="矢量 20" d="M347.211 43.114L343.711 38.614C343.367 38.1719 343.444 37.5544 343.886 37.2107C344.328 36.8669 344.946 36.944 345.289 37.386L348.489 41.5L466 41.5L466 43.5L348 43.5L347.211 43.114Z" stroke="url(#paint_linear_7_36_0)" stroke-width="2.000000" stroke-linejoin="bevel" stroke-linecap="round"/> |
|
||||
<path id="矢量 21" d="M128.636 36.4961L125.136 42.4961L126.864 43.5039L130.074 38L336.54 38L339.241 41.1508C339.605 41.576 340.226 41.6237 340.651 41.2592C341.076 40.8948 341.124 40.2744 340.759 39.8492L337.759 36.3492C337.56 36.1164 337.307 36 337 36L129.5 36C129.117 36 128.829 36.1654 128.636 36.4961Z" fill-rule="evenodd" fill="#0C80EF"/> |
|
||||
<path id="矢量 22" d="M31 1L6 28.5L19 28.5L46.5 1L31 1Z" fill-rule="evenodd" fill="url(#paint_linear_7_39_0)"/> |
|
||||
<path id="矢量 23" d="M56 1L31 28.5L44 28.5L71.5 1L56 1Z" fill-rule="evenodd" fill="url(#paint_linear_7_40_0)"/> |
|
||||
<path id="矢量 24" d="M81 1L56 28.5L69 28.5L96.5 1L81 1Z" fill-rule="evenodd" fill="url(#paint_linear_7_41_0)"/> |
|
||||
<path id="矢量 25" d="M106 1L81 28.5L94 28.5L121.5 1L106 1Z" fill-rule="evenodd" fill="url(#paint_linear_7_42_0)"/> |
|
||||
<path id="矢量 26" d="M131 1L106 28.5L119 28.5L146.5 1L131 1Z" fill-rule="evenodd" fill="url(#paint_linear_7_43_0)"/> |
|
||||
<path id="矢量 27" d="M156 1L131 28.5L144 28.5L171.5 1L156 1Z" fill-rule="evenodd" fill="url(#paint_linear_7_44_0)"/> |
|
||||
<path id="矢量 28" d="M181 1L156 28.5L169 28.5L196.5 1L181 1Z" fill-rule="evenodd" fill="url(#paint_linear_7_45_0)"/> |
|
||||
<path id="矢量 29" d="M206 1L181 28.5L194 28.5L221.5 1L206 1Z" fill-rule="evenodd" fill="url(#paint_linear_7_46_0)"/> |
|
||||
<path id="矢量 30" d="M231 1L206 28.5L219 28.5L246.5 1L231 1Z" fill-rule="evenodd" fill="url(#paint_linear_7_47_0)"/> |
|
||||
<path id="矢量 31" d="M256 1L231 28.5L244 28.5L271.5 1L256 1Z" fill-rule="evenodd" fill="url(#paint_linear_7_48_0)"/> |
|
||||
<path id="矢量 32" d="M281 1L256 28.5L269 28.5L296.5 1L281 1Z" fill-rule="evenodd" fill="url(#paint_linear_7_49_0)"/> |
|
||||
<path id="矢量 33" d="M306 1L281 28.5L294 28.5L321.5 1L306 1Z" fill-rule="evenodd" fill="url(#paint_linear_7_50_0)"/> |
|
||||
<path id="矢量 34" d="M331 1L306 28.5L319 28.5L346.5 1L331 1Z" fill-rule="evenodd" fill="url(#paint_linear_7_51_0)"/> |
|
||||
<path id="矢量 35" d="M356 1L331 28.5L344 28.5L371.5 1L356 1Z" fill-rule="evenodd" fill="url(#paint_linear_7_52_0)"/> |
|
||||
<path id="矢量 36" d="M381 1L356 28.5L369 28.5L396.5 1L381 1Z" fill-rule="evenodd" fill="url(#paint_linear_7_53_0)"/> |
|
||||
<path id="矢量 37" d="M406 1L381 28.5L394 28.5L421.5 1L406 1Z" fill-rule="evenodd" fill="url(#paint_linear_7_54_0)"/> |
|
||||
<path id="矢量 38" d="M431 1L406 28.5L419 28.5L446.5 1L431 1Z" fill-rule="evenodd" fill="url(#paint_linear_7_55_0)"/> |
|
||||
<path id="矢量 39" d="M456 1L431 28.5L444 28.5L471.5 1L456 1Z" fill-rule="evenodd" fill="url(#paint_linear_7_56_0)"/> |
|
||||
<path id="矢量 40" d="M81 0L101.5 30L359.5 30L385 0.5L81 0Z" fill-rule="evenodd" fill="url(#paint_linear_7_58_0)" fill-opacity="0.300000"/> |
|
||||
<rect id="矩形 3" y="38.000000" width="465.000000" height="37.000000" fill="#0C80EF" fill-opacity="0.1"/> |
|
||||
<use xlink:href="#line"> |
|
||||
<animate attributeName="opacity" values="0;1;1;0" begin="0s" dur="4s" repeatCount="indefinite"/> |
|
||||
<animateTransform attributeName="transform" begin="0s" dur="4s" type="translate" from="-130" to="130" repeatCount="indefinite" /> |
|
||||
</use> |
|
||||
<path id="矢量 123" d="M1 11.5L1 232.5L12.5 244L452.5 244L465 232.5L465 11.5L452.5 1L12.5 1L1 11.5Z" stroke="#0C80EF" mask="url(#mask)" stroke-dasharray="20 1367"> |
|
||||
<animate attributeName="stroke-dashoffset" begin="0s" dur="20s" from="0" to="1386" repeatCount="indefinite"/> |
|
||||
</path> |
|
||||
<defs> |
|
||||
<mask id="mask"> |
|
||||
<circle cx="1" cy="1" r="20" fill="url(#RadialGradient2)"> |
|
||||
<animateMotion path="M1 11.5L12.5 1L452.5 1L465 11.5L465 232.5L452.5 244L12.5 244L1 232.5L1 11.5Z" begin="0s" dur="20s" repeatCount="indefinite" /> |
|
||||
</circle> |
|
||||
</mask> |
|
||||
<radialGradient id="RadialGradient2" > |
|
||||
<stop offset="10%" stop-color="#fff"/> |
|
||||
<stop offset="100%" stop-color="transparent"/> |
|
||||
</radialGradient> |
|
||||
<g id="line"> |
|
||||
<path id="矢量 41" d="M105 74L360 74" stroke="url(#paint_linear_7_60_0)" stroke-width="2.000000"/> |
|
||||
<g filter="url(#filter_7_61_dd)"> |
|
||||
<ellipse id="椭圆 1" cx="220.500000" cy="74.100006" rx="17.500000" ry="1.100000" fill="url(#paint_linear_7_61_0)"/> |
|
||||
</g> |
|
||||
</g> |
|
||||
<filter id="filter_7_15_dd" x="-0.500000" y="-0.500000" width="466.000000" height="245.000000" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> |
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/> |
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/> |
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> |
|
||||
<feOffset dx="0" dy="0"/> |
|
||||
<feGaussianBlur stdDeviation="15"/> |
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/> |
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.047059 0 0 0 0 0.50196 0 0 0 0 0.93725 0 0 0 0.6 0"/> |
|
||||
<feBlend mode="normal" in2="shape" result="effect_innerShadow_1"/> |
|
||||
</filter> |
|
||||
<filter id="filter_7_61_dd" x="198.000000" y="68.000000" width="45.000000" height="12.200012" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> |
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/> |
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> |
|
||||
<feOffset dx="0" dy="0"/> |
|
||||
<feGaussianBlur stdDeviation="1.66667"/> |
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.047059 0 0 0 0 0.50196 0 0 0 0 0.93725 0 0 0 1 0"/> |
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect_dropShadow_1"/> |
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect_dropShadow_1" result="shape"/> |
|
||||
</filter> |
|
||||
<linearGradient id="paint_linear_7_35_0" x1="122.500000" y1="36.772705" x2="1.000000" y2="40.250000" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_36_0" x1="344.500000" y1="36.772705" x2="466.000031" y2="40.250000" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_39_0" x1="9.499996" y1="28.499994" x2="46.500000" y2="1.000008" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF" stop-opacity="0.301961"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_40_0" x1="34.499996" y1="28.499994" x2="71.500000" y2="1.000008" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF" stop-opacity="0.301961"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_41_0" x1="59.500000" y1="28.499994" x2="96.500000" y2="1.000008" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF" stop-opacity="0.301961"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_42_0" x1="84.500000" y1="28.499994" x2="121.500000" y2="1.000008" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF" stop-opacity="0.301961"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_43_0" x1="109.500000" y1="28.499994" x2="146.500000" y2="1.000008" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF" stop-opacity="0.301961"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_44_0" x1="134.500000" y1="28.499994" x2="171.500000" y2="1.000008" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF" stop-opacity="0.301961"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_45_0" x1="159.500000" y1="28.499994" x2="196.500000" y2="1.000008" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF" stop-opacity="0.301961"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_46_0" x1="184.500000" y1="28.499994" x2="221.500000" y2="1.000008" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF" stop-opacity="0.301961"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_47_0" x1="209.500000" y1="28.499994" x2="246.500015" y2="1.000008" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF" stop-opacity="0.301961"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_48_0" x1="234.500000" y1="28.499994" x2="271.500000" y2="1.000008" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF" stop-opacity="0.301961"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_49_0" x1="259.500000" y1="28.499994" x2="296.500000" y2="1.000008" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF" stop-opacity="0.301961"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_50_0" x1="284.500000" y1="28.499994" x2="321.500000" y2="1.000008" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF" stop-opacity="0.301961"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_51_0" x1="309.500000" y1="28.499994" x2="346.500000" y2="1.000008" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF" stop-opacity="0.301961"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_52_0" x1="334.500000" y1="28.499994" x2="371.500000" y2="1.000008" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF" stop-opacity="0.301961"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_53_0" x1="359.500000" y1="28.499994" x2="396.500000" y2="1.000008" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF" stop-opacity="0.301961"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_54_0" x1="384.500000" y1="28.499994" x2="421.500000" y2="1.000008" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF" stop-opacity="0.301961"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_55_0" x1="409.500000" y1="28.499994" x2="446.500000" y2="1.000008" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF" stop-opacity="0.301961"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_56_0" x1="434.500000" y1="28.499994" x2="471.500000" y2="1.000008" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF" stop-opacity="0.301961"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_58_0" x1="232.999847" y1="-34.999985" x2="232.999847" y2="29.999985" gradientUnits="userSpaceOnUse"> |
|
||||
<stop stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_60_0" x1="nan" y1="-nan" x2="nan" y2="-nan" gradientUnits="userSpaceOnUse"> |
|
||||
<stop offset="0.001147" stop-color="#0C80F0" stop-opacity="0.000000"/> |
|
||||
<stop offset="0.555046" stop-color="#0C80EE"/> |
|
||||
<stop offset="0.998039" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF" stop-opacity="0.000000"/> |
|
||||
</linearGradient> |
|
||||
<linearGradient id="paint_linear_7_61_0" x1="236.500000" y1="73.000000" x2="204.500000" y2="73.000000" gradientUnits="userSpaceOnUse"> |
|
||||
<stop offset="0.001147" stop-color="#0C80EF"/> |
|
||||
<stop offset="0.426411" stop-color="#79CEF6"/> |
|
||||
<stop offset="0.522177" stop-color="#E2F3FF" stop-opacity="0.800000"/> |
|
||||
<stop offset="0.631048" stop-color="#AAE0F6" stop-opacity="0.941176"/> |
|
||||
<stop offset="0.772176" stop-color="#79CEF6"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF"/> |
|
||||
<stop offset="1.000000" stop-color="#0C80EF"/> |
|
||||
</linearGradient> |
|
||||
</defs> |
|
||||
</svg> |
|
||||
<div class="content" @click="$emit('click')"> |
|
||||
<span class="title">{{detail.plotName}}</span> |
|
||||
<span class="plantBS-shangjiantou current" style="--c:16, 203, 65;" @click="trigger(true)">当前种植</span> |
|
||||
<span class="plantBS-shangjiantou past" style="--c:12, 129, 239;" @click="trigger(false)">往期种植</span> |
|
||||
<dvScrollBoard ref="scrollBoard" :config="config"/> |
|
||||
</div> |
|
||||
</el-popover> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import { inject, nextTick, reactive, ref, shallowRef, unref, watch } from "vue" |
|
||||
|
|
||||
var route=inject("route") |
|
||||
|
|
||||
var show=ref(false) |
|
||||
var markerTarget=ref() |
|
||||
var popover=ref() |
|
||||
var config=reactive({ |
|
||||
header:['作物','种植面积','预估采收时间',"预估产量","已采收"], |
|
||||
data:[], |
|
||||
rowNum:4, |
|
||||
headerBGC:"transpatent", |
|
||||
oddRowBGC:"transpatent", |
|
||||
evenRowBGC:"transpatent", |
|
||||
columnWidth:[103.4,75,89.4+24,89.2,65], |
|
||||
align:['center','center','center','center','center'], |
|
||||
}) |
|
||||
var scrollBoard=ref() |
|
||||
var detail=shallowRef({}) |
|
||||
|
|
||||
async function trigger(isNow){ |
|
||||
config.data=[] |
|
||||
if(isNow){ |
|
||||
scrollBoard.value.updateRows(detail.value.currentPlant.map(v=>[v.plantType, `${v.plantArea}面积`, new Date(v.harvestTime).format('yyyy/MM/dd'), `${v.estimateOutput}kg`, `${v.harvest}kg`])) |
|
||||
}else{ |
|
||||
scrollBoard.value.updateRows(detail.value.beforPlant.map(v=>[v.plantType, `${v.plantArea}面积`, new Date(v.harvestTime).format('yyyy/MM/dd'), `${v.estimateOutput}kg`, `${v.harvest}kg`])) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
defineExpose({ |
|
||||
show: (dom,val)=>{ |
|
||||
detail.value=val |
|
||||
markerTarget.value=dom |
|
||||
show.value=true |
|
||||
trigger(true) |
|
||||
}, |
|
||||
hide:()=>{ |
|
||||
show.value=false |
|
||||
} |
|
||||
}) |
|
||||
</script> |
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,128 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.right_2{ |
|
||||
.d-title{ |
|
||||
margin-bottom:10px; |
|
||||
.right{ |
|
||||
span{ |
|
||||
display:inline-flex; |
|
||||
align-items: center; |
|
||||
color:#fff; |
|
||||
font-size: 16px; |
|
||||
&+span{ |
|
||||
margin-left:10px; |
|
||||
} |
|
||||
&:before{ |
|
||||
content:""; |
|
||||
width:18px; |
|
||||
height:4px; |
|
||||
background:var(--c); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<div class="right_2"> |
|
||||
<dTitle title="产量预估" icon="5"> |
|
||||
<span style="--c:#0C81EF">预估产量</span> |
|
||||
<span style="--c:#10CC40">实际产量</span> |
|
||||
</dTitle> |
|
||||
<v-echarts :option="opt" style="height:260px;pointer-events: all;" autoresize/> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import request from '@/config/request' |
|
||||
import { computed, inject, onMounted, shallowRef, watch } from 'vue' |
|
||||
import dTitle from '../title.vue' |
|
||||
|
|
||||
var props=defineProps({ |
|
||||
base:{ |
|
||||
type:String, |
|
||||
default:"" |
|
||||
}, |
|
||||
year:{ |
|
||||
type:String, |
|
||||
default:"" |
|
||||
}, |
|
||||
}) |
|
||||
var msg=inject('msg') |
|
||||
var {getters}=inject("store") |
|
||||
|
|
||||
var list=shallowRef([]) |
|
||||
var opt=computed(()=>({ |
|
||||
tooltip: { |
|
||||
trigger: 'axis' |
|
||||
}, |
|
||||
grid: { |
|
||||
left: 10, |
|
||||
right: 20, |
|
||||
bottom: 10, |
|
||||
top:35, |
|
||||
containLabel: true |
|
||||
}, |
|
||||
xAxis: { |
|
||||
type: 'category', |
|
||||
boundaryGap: false, |
|
||||
axisLine:{show:false}, |
|
||||
axisTick:{show:false}, |
|
||||
axisLabel:{ |
|
||||
color:"#E2EFFA", |
|
||||
fontSize:16, |
|
||||
}, |
|
||||
data: list.value.map(v=>v.plantName) |
|
||||
}, |
|
||||
yAxis: { |
|
||||
type: 'value', |
|
||||
name:"单位/kg", |
|
||||
nameTextStyle:{ |
|
||||
color:"#E2EFFA", |
|
||||
fontSize:16, |
|
||||
}, |
|
||||
axisLabel:{ |
|
||||
color:"#E2EFFA", |
|
||||
fontSize:16, |
|
||||
}, |
|
||||
splitLine:{ |
|
||||
lineStyle:{ |
|
||||
color:"#4E7C98", |
|
||||
type:"dashed", |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
series: [ |
|
||||
{ |
|
||||
name: '预估产量', |
|
||||
type: 'line', |
|
||||
itemStyle:{color:"#0C81EF"}, |
|
||||
symbol: list.value.length>1?"none":'emptyCircle', |
|
||||
data: list.value.map(v=>v.output) |
|
||||
}, |
|
||||
{ |
|
||||
name: '实际产量', |
|
||||
type: 'line', |
|
||||
itemStyle:{color:"#10CC40"}, |
|
||||
symbol: list.value.length>1?"none":'emptyCircle', |
|
||||
data: list.value.map(v=>v.realityPut) |
|
||||
}, |
|
||||
] |
|
||||
})) |
|
||||
|
|
||||
watch([()=>props.base,()=>props.year], async n=>{ |
|
||||
var res=await request("/api/company/rightbelow",{ |
|
||||
method:"post", |
|
||||
data:{ |
|
||||
date: n[1], |
|
||||
region: n[0], |
|
||||
} |
|
||||
}) |
|
||||
if(res.statu){ |
|
||||
list.value=res.data |
|
||||
}else{ |
|
||||
msg.error(res.msg||"获取产能预估失败！") |
|
||||
} |
|
||||
}) |
|
||||
onMounted(async ()=>{ |
|
||||
|
|
||||
}) |
|
||||
</script> |
|
||||
File diff suppressed because one or more lines are too long
@ -1,45 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.left,.right{ |
|
||||
width:586px; |
|
||||
display:flex; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
.left{ |
|
||||
flex-shrink: 0; |
|
||||
margin-left:20px; |
|
||||
justify-content: space-evenly; |
|
||||
} |
|
||||
.right{ |
|
||||
flex-shrink: 0; |
|
||||
margin-right:20px; |
|
||||
justify-content: center; |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<div class="left"> |
|
||||
<left1 :breed="breed" :year="year"/> |
|
||||
<left2 :breed="breed" :year="year"/> |
|
||||
<left3 :breed="breed" :year="year"/> |
|
||||
</div> |
|
||||
<center v-model:breed="breed" v-model:year="year"/> |
|
||||
<div class="right"> |
|
||||
<dTitle title="病虫害分析" icon="7"/> |
|
||||
<right1 :breed="breed" :year="year"/> |
|
||||
<right2 :breed="breed" :year="year"/> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import left1 from './left_1.vue' |
|
||||
import left2 from './left_2.vue' |
|
||||
import left3 from './left_3.vue' |
|
||||
import center from './center.vue' |
|
||||
import right1 from './right_1.vue' |
|
||||
import right2 from './right_2.vue' |
|
||||
|
|
||||
import dTitle from '../title.vue' |
|
||||
import { inject, ref } from 'vue' |
|
||||
|
|
||||
var breed=ref('') |
|
||||
var year=ref('') |
|
||||
|
|
||||
</script> |
|
||||
File diff suppressed because one or more lines are too long
@ -1,141 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.content{ |
|
||||
display:flex; |
|
||||
align-items: center; |
|
||||
.echarts{ |
|
||||
flex-shrink: 0; |
|
||||
position:relative; |
|
||||
&:before{ |
|
||||
content:""; |
|
||||
position:absolute; |
|
||||
top:11px; |
|
||||
left:11px; |
|
||||
width:117px; |
|
||||
height:117px; |
|
||||
background-image: url(@/assets/img/echarts_bg.png); |
|
||||
background-repeat: no-repeat; |
|
||||
background-position: center; |
|
||||
animation: BGrotate 6s linear infinite; |
|
||||
} |
|
||||
} |
|
||||
.items{ |
|
||||
flex-grow: 1; |
|
||||
margin-left:28px; |
|
||||
&>div{ |
|
||||
display:flex; |
|
||||
align-items: center; |
|
||||
font-size:16px; |
|
||||
height:30px; |
|
||||
position:relative; |
|
||||
&:before{ |
|
||||
content:""; |
|
||||
width:6px; |
|
||||
height:14px; |
|
||||
background:var(--c); |
|
||||
margin-right:14px; |
|
||||
margin-bottom:5px; |
|
||||
position:relative; |
|
||||
z-index: 10; |
|
||||
} |
|
||||
&:after{ |
|
||||
content:""; |
|
||||
border:1px solid transparent; |
|
||||
border-bottom-color:rgba(12, 129, 239, 0.3); |
|
||||
border-left-color:rgba(12, 129, 239, 0.3); |
|
||||
position:absolute; |
|
||||
width:100%; |
|
||||
height:10px; |
|
||||
top: 18px; |
|
||||
left: 2px; |
|
||||
} |
|
||||
.name{ |
|
||||
color:#fff; |
|
||||
margin-right:auto; |
|
||||
} |
|
||||
.percent{ |
|
||||
margin-left:20px; |
|
||||
color:var(--c); |
|
||||
font-weight: bold; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<div class="left_2"> |
|
||||
<dTitle title="种植面积" icon="6"/> |
|
||||
<div class="content"> |
|
||||
<v-echarts :option="pie" style="height:138px;width:138px;pointer-events: all;" autoresize/> |
|
||||
<div class="items"> |
|
||||
<div v-for="(v,k) in list" :key="k" :style="{'--c':colors[k%colors.length]}"> |
|
||||
<span class="name over">{{v.name}}({{v.value}}亩)</span> |
|
||||
<span class="percent">{{v.percent}}%</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import request from '@/config/request' |
|
||||
import { computed, inject, shallowRef, watch } from 'vue' |
|
||||
import dTitle from '../title.vue' |
|
||||
|
|
||||
var msg=inject("msg") |
|
||||
var props=defineProps({ |
|
||||
breed:{ |
|
||||
type:String, |
|
||||
default:"" |
|
||||
}, |
|
||||
year:{ |
|
||||
type:String, |
|
||||
default:"" |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
var colors=["#029DFD","#00E4FF","#10CC40","#6ACBFA","#F66E97"] |
|
||||
var pie=computed(()=>({ |
|
||||
color:colors, |
|
||||
title:{ |
|
||||
text:"种植情况", |
|
||||
textStyle:{ |
|
||||
color:"#fff", |
|
||||
fontSize:16, |
|
||||
width:32, |
|
||||
overflow:"breakAll", |
|
||||
lineHeight:27, |
|
||||
}, |
|
||||
left:'center', |
|
||||
top:"center", |
|
||||
}, |
|
||||
series: [ |
|
||||
{ |
|
||||
type: "pie", |
|
||||
radius:[56,64], |
|
||||
label:{show:false}, |
|
||||
data: list.value |
|
||||
} |
|
||||
] |
|
||||
})) |
|
||||
var list=shallowRef([]) |
|
||||
|
|
||||
watch([()=>props.breed,()=>props.year], async n=>{ |
|
||||
var res=await request("/api/variety/leftcenter",{ |
|
||||
method:"post", |
|
||||
data:{ |
|
||||
varietyName:n[0], |
|
||||
date:n[1], |
|
||||
region:"", |
|
||||
} |
|
||||
}) |
|
||||
if(res.statu){ |
|
||||
var total=res.data.reduce((a,b)=>a+parseFloat(b.area),0) |
|
||||
list.value=res.data.map(v=>({ |
|
||||
name:v.companyName, |
|
||||
value:parseFloat(v.area), |
|
||||
percent: Math.round(parseFloat(v.area)/total*10000)/100 |
|
||||
})) |
|
||||
}else{ |
|
||||
msg.error(res.msg||"获取种植面积失败！") |
|
||||
} |
|
||||
}) |
|
||||
</script> |
|
||||
@ -1,129 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.right_2{ |
|
||||
.d-title{ |
|
||||
margin-bottom:10px; |
|
||||
.right{ |
|
||||
span{ |
|
||||
display:inline-flex; |
|
||||
align-items: center; |
|
||||
color:#fff; |
|
||||
font-size: 16px; |
|
||||
&+span{ |
|
||||
margin-left:10px; |
|
||||
} |
|
||||
&:before{ |
|
||||
content:""; |
|
||||
width:18px; |
|
||||
height:4px; |
|
||||
background:var(--c); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<div class="right_2"> |
|
||||
<dTitle title="产量预估" icon="5"> |
|
||||
<span style="--c:#0C81EF">预估产量</span> |
|
||||
<span style="--c:#10CC40">实际产量</span> |
|
||||
</dTitle> |
|
||||
<v-echarts autoresize :option="opt" style="height:260px;pointer-events: all;"/> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import request from '@/config/request' |
|
||||
import { computed, inject, shallowRef, watch } from 'vue' |
|
||||
import dTitle from '../title.vue' |
|
||||
|
|
||||
var msg=inject("msg") |
|
||||
var props=defineProps({ |
|
||||
breed:{ |
|
||||
type:String, |
|
||||
default:"" |
|
||||
}, |
|
||||
year:{ |
|
||||
type:String, |
|
||||
default:"" |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
var list=shallowRef([]) |
|
||||
var opt=computed(()=>({ |
|
||||
tooltip: { |
|
||||
trigger: 'axis', |
|
||||
axisPointer:{ |
|
||||
type:"cross" |
|
||||
} |
|
||||
}, |
|
||||
grid: { |
|
||||
left: 10, |
|
||||
right: 10, |
|
||||
bottom: 10, |
|
||||
top:35, |
|
||||
containLabel: true |
|
||||
}, |
|
||||
xAxis: { |
|
||||
type: 'category', |
|
||||
boundaryGap: false, |
|
||||
axisLine:{show:false}, |
|
||||
axisTick:{show:false}, |
|
||||
axisLabel:{ |
|
||||
color:"#E2EFFA", |
|
||||
fontSize:16, |
|
||||
}, |
|
||||
data: list.value.map(v=>v.companyName), |
|
||||
}, |
|
||||
yAxis: { |
|
||||
type: 'value', |
|
||||
name:"单位/kg", |
|
||||
nameTextStyle:{ |
|
||||
color:"#E2EFFA", |
|
||||
fontSize:16, |
|
||||
}, |
|
||||
axisLabel:{ |
|
||||
color:"#E2EFFA", |
|
||||
fontSize:16, |
|
||||
}, |
|
||||
splitLine:{ |
|
||||
lineStyle:{ |
|
||||
color:"#4E7C98", |
|
||||
type:"dashed", |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
series: [ |
|
||||
{ |
|
||||
name: '预估产量', |
|
||||
type: 'line', |
|
||||
itemStyle:{color:"#0C81EF"}, |
|
||||
symbol:"path://M150.11839294433594,150.11839294433594C250.26559448242188,50.07360076904297,370.8927917480469,0,512,0c141.107177734375,0,261.734375,50.07360076904297,361.881591796875,150.11839294433594C973.9263916015625,250.26559448242188,1024,370.8927917480469,1024,512c0,141.2095947265625,-50.0736083984375,261.8367919921875,-150.118408203125,361.881591796875C773.734375,973.9263916015625,653.107177734375,1024,512,1024c-141.10720825195312,0,-261.7344055175781,-50.0736083984375,-361.88160705566406,-150.118408203125C50.07360076904297,773.8367919921875,0,653.2095947265625,0,512C0,370.8927917480469,50.07360076904297,250.26559448242188,150.11839294433594,150.11839294433594ZM512,41.88159942626953c-85.2991943359375,0,-164.14718627929688,20.889598846435547,-236.33920288085938,62.771202087402344C203.4687957763672,146.4320068359375,146.4320068359375,203.4687957763672,104.65280151367188,275.6607971191406C62.77119827270508,347.9552001953125,41.88159942626953,426.7008056640625,41.88159942626953,512c0,129.638427734375,45.97760009765625,240.4351806640625,137.83040618896484,332.28802490234375C271.5647888183594,936.2432250976562,382.3616027832031,982.118408203125,512,982.118408203125c129.638427734375,0,240.4351806640625,-45.87518310546875,332.28802490234375,-137.83038330078125C936.2432250976562,752.4351806640625,982.118408203125,641.638427734375,982.118408203125,512c0,-129.63839721679688,-45.97760009765625,-240.33279418945312,-137.83038330078125,-332.2879943847656C752.4351806640625,87.75679779052734,641.638427734375,41.88159942626953,512,41.88159942626953ZM512,256c-36.147186279296875,0,-70.14401245117188,7.06561279296875,-102.1951904296875,20.88958740234375C377.8559875488281,290.91839599609375,349.4912109375,309.35040283203125,324.9151916503906,332.2879943847656c-22.937591552734375,24.576019287109375,-41.47198486328125,52.9407958984375,-55.39837646484375,84.88961791992188S248.627197265625,483.3280029296875,248.627197265625,519.372802734375c0,36.147216796875,6.96319580078125,70.14398193359375,20.889617919921875,102.1951904296875s32.460784912109375,60.3135986328125,55.39837646484375,84.88958740234375C349.4912109375,729.4976196289062,377.8559875488281,747.9296264648438,409.8048095703125,761.8560180664062C441.8559875488281,775.7824096679688,475.8528137207031,782.74560546875,512,782.74560546875c36.147216796875,0,70.14398193359375,-6.96319580078125,102.1951904296875,-20.88958740234375C646.1439819335938,747.9296264648438,674.5087890625,729.4976196289062,699.0847778320312,706.4575805664062c22.9376220703125,-24.57598876953125,41.4720458984375,-52.9407958984375,55.3984375,-84.88958740234375s20.88958740234375,-66.0479736328125,20.88958740234375,-102.1951904296875c0,-36.0447998046875,-6.96319580078125,-70.14401245117188,-20.88958740234375,-102.1951904296875S722.0223999023438,356.9664001464844,699.0847778320312,332.2879943847656C674.5087890625,309.35040283203125,646.1439819335938,290.91839599609375,614.1951904296875,276.88958740234375C582.1439819335938,263.06561279296875,548.147216796875,256,512,256Z", |
|
||||
symbolSize:13, |
|
||||
data: list.value.map(v=>v.estimateOutput) |
|
||||
}, |
|
||||
{ |
|
||||
name: '实际产量', |
|
||||
type: 'line', |
|
||||
itemStyle:{color:"#10CC40"}, |
|
||||
symbol:"path://M150.11839294433594,150.11839294433594C250.26559448242188,50.07360076904297,370.8927917480469,0,512,0c141.107177734375,0,261.734375,50.07360076904297,361.881591796875,150.11839294433594C973.9263916015625,250.26559448242188,1024,370.8927917480469,1024,512c0,141.2095947265625,-50.0736083984375,261.8367919921875,-150.118408203125,361.881591796875C773.734375,973.9263916015625,653.107177734375,1024,512,1024c-141.10720825195312,0,-261.7344055175781,-50.0736083984375,-361.88160705566406,-150.118408203125C50.07360076904297,773.8367919921875,0,653.2095947265625,0,512C0,370.8927917480469,50.07360076904297,250.26559448242188,150.11839294433594,150.11839294433594ZM512,41.88159942626953c-85.2991943359375,0,-164.14718627929688,20.889598846435547,-236.33920288085938,62.771202087402344C203.4687957763672,146.4320068359375,146.4320068359375,203.4687957763672,104.65280151367188,275.6607971191406C62.77119827270508,347.9552001953125,41.88159942626953,426.7008056640625,41.88159942626953,512c0,129.638427734375,45.97760009765625,240.4351806640625,137.83040618896484,332.28802490234375C271.5647888183594,936.2432250976562,382.3616027832031,982.118408203125,512,982.118408203125c129.638427734375,0,240.4351806640625,-45.87518310546875,332.28802490234375,-137.83038330078125C936.2432250976562,752.4351806640625,982.118408203125,641.638427734375,982.118408203125,512c0,-129.63839721679688,-45.97760009765625,-240.33279418945312,-137.83038330078125,-332.2879943847656C752.4351806640625,87.75679779052734,641.638427734375,41.88159942626953,512,41.88159942626953ZM512,256c-36.147186279296875,0,-70.14401245117188,7.06561279296875,-102.1951904296875,20.88958740234375C377.8559875488281,290.91839599609375,349.4912109375,309.35040283203125,324.9151916503906,332.2879943847656c-22.937591552734375,24.576019287109375,-41.47198486328125,52.9407958984375,-55.39837646484375,84.88961791992188S248.627197265625,483.3280029296875,248.627197265625,519.372802734375c0,36.147216796875,6.96319580078125,70.14398193359375,20.889617919921875,102.1951904296875s32.460784912109375,60.3135986328125,55.39837646484375,84.88958740234375C349.4912109375,729.4976196289062,377.8559875488281,747.9296264648438,409.8048095703125,761.8560180664062C441.8559875488281,775.7824096679688,475.8528137207031,782.74560546875,512,782.74560546875c36.147216796875,0,70.14398193359375,-6.96319580078125,102.1951904296875,-20.88958740234375C646.1439819335938,747.9296264648438,674.5087890625,729.4976196289062,699.0847778320312,706.4575805664062c22.9376220703125,-24.57598876953125,41.4720458984375,-52.9407958984375,55.3984375,-84.88958740234375s20.88958740234375,-66.0479736328125,20.88958740234375,-102.1951904296875c0,-36.0447998046875,-6.96319580078125,-70.14401245117188,-20.88958740234375,-102.1951904296875S722.0223999023438,356.9664001464844,699.0847778320312,332.2879943847656C674.5087890625,309.35040283203125,646.1439819335938,290.91839599609375,614.1951904296875,276.88958740234375C582.1439819335938,263.06561279296875,548.147216796875,256,512,256Z", |
|
||||
symbolSize:13, |
|
||||
data: list.value.map(v=>v.realityPut) |
|
||||
}, |
|
||||
] |
|
||||
})) |
|
||||
watch([()=>props.breed,()=>props.year],async n=>{ |
|
||||
var res=await request("/api/variety/leftbelow",{ |
|
||||
method:"post", |
|
||||
data:{ |
|
||||
varietyName:n[0], |
|
||||
date:n[1], |
|
||||
region:"", |
|
||||
} |
|
||||
}) |
|
||||
if(res.statu){ |
|
||||
list.value=res.data |
|
||||
}else{ |
|
||||
msg.error(res.msg||"获取产量预估失败！") |
|
||||
} |
|
||||
}) |
|
||||
</script> |
|
||||
@ -1,230 +0,0 @@ |
|||||
<style lang="less"> |
|
||||
.el-popover.mapPopover{ |
|
||||
border-radius: 0; |
|
||||
background-size:100% 100%; |
|
||||
padding:0!important; |
|
||||
background-color:transparent; |
|
||||
border:none; |
|
||||
position:relative; |
|
||||
&.goods{ |
|
||||
height:189px; |
|
||||
.name{ |
|
||||
position:absolute; |
|
||||
color:#057FFB; |
|
||||
font-size:18px; |
|
||||
top: 23px; |
|
||||
left: 82px; |
|
||||
} |
|
||||
.address{ |
|
||||
color:#fff; |
|
||||
font-size:16px; |
|
||||
position: absolute; |
|
||||
top: 53px; |
|
||||
left: 124px; |
|
||||
width: 139px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
.vegetable{ |
|
||||
position:absolute; |
|
||||
top: 79px; |
|
||||
left: 27px; |
|
||||
width: 277px; |
|
||||
display:flex; |
|
||||
justify-content: space-between; |
|
||||
span{ |
|
||||
&:first-child{ |
|
||||
color:#99A4AE; |
|
||||
font-size:16px; |
|
||||
} |
|
||||
&:nth-child(2){ |
|
||||
color:#fff; |
|
||||
font-weight: bold; |
|
||||
font-size:18px; |
|
||||
&:after{ |
|
||||
content:"亩"; |
|
||||
color:#99A4AE; |
|
||||
font-size:16px; |
|
||||
font-weight: normal; |
|
||||
} |
|
||||
} |
|
||||
&:nth-child(3){ |
|
||||
font-size:16px; |
|
||||
font-weight: bold; |
|
||||
color:#0C7EF0; |
|
||||
&:after{ |
|
||||
content:"%"; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.value{ |
|
||||
position:absolute; |
|
||||
display: flex; |
|
||||
justify-content: space-around; |
|
||||
top: 113px; |
|
||||
left: 27px; |
|
||||
width: 277px; |
|
||||
&>div{ |
|
||||
color:var(--c); |
|
||||
display:flex; |
|
||||
align-items: center; |
|
||||
.svg-icon{ |
|
||||
margin-right:7px; |
|
||||
} |
|
||||
.num{ |
|
||||
display:flex; |
|
||||
flex-direction: column; |
|
||||
span{ |
|
||||
&:nth-child(2){ |
|
||||
font-size:18px; |
|
||||
&:after{ |
|
||||
content:"kg"; |
|
||||
color:#99A4AE; |
|
||||
font-size:16px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
&>.content{ |
|
||||
position:absolute; |
|
||||
top:0; |
|
||||
left:0; |
|
||||
width:100%; |
|
||||
height:100%; |
|
||||
} |
|
||||
.plantBS-shangjiantou{ |
|
||||
position:absolute; |
|
||||
font-weight: bold; |
|
||||
font-size:18px; |
|
||||
background-image:-webkit-linear-gradient(top, #fff,rgb(var(--c))); |
|
||||
-webkit-background-clip:text; |
|
||||
-webkit-text-fill-color:transparent; |
|
||||
top:46px; |
|
||||
cursor: pointer; |
|
||||
&:hover{ |
|
||||
opacity: 0.7; |
|
||||
} |
|
||||
&:before{ |
|
||||
text-shadow:1px -1px 2px rgba(var(--c),0.8); |
|
||||
margin-right:5px; |
|
||||
} |
|
||||
&.current{ |
|
||||
left:80px; |
|
||||
} |
|
||||
&.past{ |
|
||||
right:80px; |
|
||||
} |
|
||||
} |
|
||||
.dv-scroll-board{ |
|
||||
position:absolute; |
|
||||
top:75px; |
|
||||
left:10px; |
|
||||
width:calc(100% - 20px); |
|
||||
height:154px; |
|
||||
.ceil,.header-item{ |
|
||||
padding:0 3px; |
|
||||
font-size:16px; |
|
||||
} |
|
||||
.header-item{ |
|
||||
color:#F1F5F9; |
|
||||
} |
|
||||
.ceil{ |
|
||||
color:#A2B4C5; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<el-popover :visible="show" ref="popover" width="328px" :show-arrow="false" :popper-class="`mapPopover ${$route.path.match(/(\w+)$/)[1]}`" trigger="focus" placement="top" :virtual-ref="markerTarget"> |
|
||||
<svg width="324.000000" height="186.000000" viewBox="0 0 324 186" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
|
||||
<path id="矢量 42" d="M6 5.5L6 178M0 171L317 171" stroke="#057FFB"/> |
|
||||
<g filter="url(#filter_17_4_dd)"> |
|
||||
<path id="矢量 43" d="M12.5 8L12.5 166.5L317 166.5L317 8L120.5 8L115 15.5L38 15.5L32.5 8L12.5 8Z" fill-rule="evenodd" fill="#001625"/> |
|
||||
<path id="矢量 43" d="M12.5 166.5L317 166.5L317 8L120.5 8L115 15.5L38 15.5L32.5 8L12.5 8L12.5 166.5Z" stroke="#057FFB"/> |
|
||||
</g> |
|
||||
<path id="矢量 44" d="M9 9.5L9 4.5L35.5 4.5L39 11.5L112.5 11.5L116 4.5L313 4.5" stroke="#057FFB"/> |
|
||||
<circle id="椭圆 2" cx="319.500000" cy="4.000000" r="3.500000" stroke="#057FFB"/> |
|
||||
<rect id="矩形 4" x="28.500000" y="36.000000" width="41.000000" height="33.000000" fill="#057FFB"/> |
|
||||
<path id="矢量 45" d="M32.5 33L26.5 33L26.5 39" stroke="#057FFB"/> |
|
||||
<path id="矢量 46" d="M66.5 71L72.5 71L72.5 65" stroke="#057FFB"/> |
|
||||
<path id="矢量 47" d="M57 28L77.5 28L77.5 51L303 51L303 61.5" stroke="#057FFB"/> |
|
||||
<path id="矢量 48" d="M98.5 60L103 65L98.5 70" stroke="#10C945" stroke-width="2.000000" stroke-linejoin="round" stroke-linecap="round"/> |
|
||||
<path id="矢量 49" d="M107.5 60L112 65L107.5 70" stroke="#10C945" stroke-width="2.000000" stroke-linejoin="round" stroke-linecap="round"/> |
|
||||
<path id="矢量 50" d="M116.5 60L121 65L116.5 70" stroke="#10C945" stroke-width="2.000000" stroke-linejoin="round" stroke-linecap="round"/> |
|
||||
<path id="矢量 50" d="M270 60L265.5 65L270 70" stroke="#10C945" stroke-width="2.000000" stroke-linejoin="round" stroke-linecap="round"/> |
|
||||
<path id="矢量 48" d="M288 60L283.5 65L288 70" stroke="#10C945" stroke-width="2.000000" stroke-linejoin="round" stroke-linecap="round"/> |
|
||||
<path id="矢量 49" d="M279 60L274.5 65L279 70" stroke="#10C945" stroke-width="2.000000" stroke-linejoin="round" stroke-linecap="round"/> |
|
||||
<path id="多边形 3" d="M164.601 180.471L158.244 172.051C157.995 171.722 158.23 171.25 158.643 171.25L171.357 171.25C171.77 171.25 172.005 171.722 171.756 172.051L165.399 180.471C165.199 180.736 164.801 180.736 164.601 180.471Z" fill-rule="evenodd" fill="#0C7EF0" fill-opacity="0.300000"/> |
|
||||
<path id="多边形 2" d="M164.601 185.471L158.244 177.051C157.995 176.722 158.23 176.25 158.643 176.25L171.357 176.25C171.77 176.25 172.005 176.722 171.756 177.051L165.399 185.471C165.199 185.736 164.801 185.736 164.601 185.471Z" fill-rule="evenodd" fill="#0C7EF0"/> |
|
||||
<path transform="scale(0.03)" transform-origin="34 38" d="M884.224 834.048h-20.992V381.952c0-17.408-14.336-32.256-32.256-32.256h-157.696c-4.608 0-7.68 3.584-7.68 7.68v476.16h-34.304V172.544c0-24.576-20.48-45.056-45.056-45.056h-373.76c-24.576 0-45.056 20.48-45.056 45.056v661.504h-19.456c-15.872 0-28.672 12.8-28.672 28.672s12.8 28.672 28.672 28.672h736.768c15.872 0 28.672-12.8 28.672-28.672s-13.312-28.672-29.184-28.672zM312.32 310.272h174.592c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6H312.32c-14.336 0-25.6-11.264-25.6-25.6 0.512-14.336 11.776-25.6 25.6-25.6zM312.32 450.56h174.592c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6H312.32c-14.336 0-25.6-11.264-25.6-25.6s11.776-25.6 25.6-25.6z m0 141.312h174.592c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6H312.32c-14.336 0-25.6-11.264-25.6-25.6s11.776-25.6 25.6-25.6z" fill="#fff"></path> |
|
||||
<defs> |
|
||||
<filter id="filter_17_4_dd" x="2.000000" y="-2.500000" width="325.500000" height="179.500000" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> |
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/> |
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/> |
|
||||
<feOffset dx="0" dy="0"/> |
|
||||
<feGaussianBlur stdDeviation="3.33333"/> |
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.047059 0 0 0 0 0.49412 0 0 0 0 0.94118 0 0 0 0.25 0"/> |
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect_dropShadow_1"/> |
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect_dropShadow_1" result="shape"/> |
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> |
|
||||
<feOffset dx="0" dy="0"/> |
|
||||
<feGaussianBlur stdDeviation="10"/> |
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/> |
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.047059 0 0 0 0 0.49412 0 0 0 0 0.94118 0 0 0 0.4 0"/> |
|
||||
<feBlend mode="normal" in2="shape" result="effect_innerShadow_2"/> |
|
||||
</filter> |
|
||||
</defs> |
|
||||
</svg> |
|
||||
<div class="content" @click="$emit('click')"> |
|
||||
<span class="name">{{detail.companyName}}</span> |
|
||||
<span class="address over">{{detail.baseName}}</span> |
|
||||
<div class="vegetable"> |
|
||||
<span>{{detail.varietyName}}</span> <span>{{detail.plantArea}}</span> <span>{{detail.totalArea==0?0:Math.round(detail.plantArea/detail.totalArea*10000)/100}}</span> |
|
||||
</div> |
|
||||
<div class="value"> |
|
||||
<div style="--c:#0C7EF0;"> |
|
||||
<svg-icon name="bar"/> |
|
||||
<div class="num"> |
|
||||
<span>预估产量</span> |
|
||||
<span>{{detail.estimateOutput}}</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div style="--c:#10C945;"> |
|
||||
<svg-icon name="bar"/> |
|
||||
<div class="num"> |
|
||||
<span>已采收</span> |
|
||||
<span>{{detail.realityPut}}</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-popover> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import { inject, nextTick, reactive, ref, shallowRef, unref, watch } from "vue" |
|
||||
|
|
||||
var route=inject("route") |
|
||||
|
|
||||
var show=ref(false) |
|
||||
var markerTarget=ref() |
|
||||
var popover=ref() |
|
||||
var detail=shallowRef({}) |
|
||||
|
|
||||
watch(route,n=>{ |
|
||||
show.value=false |
|
||||
}) |
|
||||
|
|
||||
defineExpose({ |
|
||||
show:(dom,val)=>{ |
|
||||
detail.value=val |
|
||||
markerTarget.value=dom |
|
||||
show.value=true |
|
||||
}, |
|
||||
hide:()=>{ |
|
||||
show.value=false |
|
||||
} |
|
||||
}) |
|
||||
</script> |
|
||||
@ -1,221 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.right_1{ |
|
||||
.data{ |
|
||||
display:flex; |
|
||||
align-items: center; |
|
||||
margin-top:16px; |
|
||||
.echarts{ |
|
||||
flex-shrink: 0; |
|
||||
} |
|
||||
.items{ |
|
||||
flex-grow: 1; |
|
||||
div{ |
|
||||
display:flex; |
|
||||
align-items: center; |
|
||||
position:relative; |
|
||||
&+div{ |
|
||||
margin-top:23px; |
|
||||
} |
|
||||
&:before{ |
|
||||
content:""; |
|
||||
position:relative; |
|
||||
z-index: 10; |
|
||||
width:10px; |
|
||||
height:10px; |
|
||||
background:var(--c); |
|
||||
margin-right:18px; |
|
||||
} |
|
||||
&:after{ |
|
||||
content:""; |
|
||||
position:absolute; |
|
||||
width:100%; |
|
||||
height:11px; |
|
||||
top:14px; |
|
||||
left:5px; |
|
||||
border-left:1px solid rgba(5, 128, 251, 0.3); |
|
||||
border-bottom:1px solid rgba(5, 128, 251, 0.3); |
|
||||
} |
|
||||
span{ |
|
||||
font-size:16px; |
|
||||
&:first-child{ |
|
||||
color:#FFFFFF; |
|
||||
} |
|
||||
&:nth-child(2){ |
|
||||
margin-left:auto; |
|
||||
color:var(--c); |
|
||||
font-weight: bold; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
&>.detail{ |
|
||||
margin-top:20px; |
|
||||
&>div{ |
|
||||
display:flex; |
|
||||
align-items: center; |
|
||||
&+div{ |
|
||||
margin-top:10px; |
|
||||
} |
|
||||
.number{ |
|
||||
flex-shrink: 0; |
|
||||
color:#fff; |
|
||||
width:30px; |
|
||||
height:20px; |
|
||||
line-height: 20px; |
|
||||
text-align: center; |
|
||||
margin-right:9px; |
|
||||
background:var(--c); |
|
||||
} |
|
||||
.img{ |
|
||||
flex-shrink: 0; |
|
||||
width:39px; |
|
||||
height:39px; |
|
||||
line-height: 39px; |
|
||||
text-align: center; |
|
||||
border:2px solid var(--c); |
|
||||
background:rgba(0,0,0,0.4); |
|
||||
position:relative; |
|
||||
margin-right:10px; |
|
||||
&:before{ |
|
||||
content:""; |
|
||||
position:absolute; |
|
||||
top:-4px; |
|
||||
left:-4px; |
|
||||
width:4px; |
|
||||
height:4px; |
|
||||
border-top:1px solid var(--c); |
|
||||
border-left:1px solid var(--c); |
|
||||
|
|
||||
} |
|
||||
&:after{ |
|
||||
content:""; |
|
||||
position:absolute; |
|
||||
bottom:-4px; |
|
||||
right:-4px; |
|
||||
width:4px; |
|
||||
height:4px; |
|
||||
border-bottom:1px solid var(--c); |
|
||||
border-right:1px solid var(--c); |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
.info{ |
|
||||
color:#fff; |
|
||||
font-size:16px; |
|
||||
span{ |
|
||||
color:var(--c); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<view class="right_1"> |
|
||||
<subTitle color="12, 128, 239" text="病害分析"> |
|
||||
<el-date-picker class="default" popper-class="monthRange" type="monthrange" :modelValue="['2023-09','2023-10']"/> |
|
||||
</subTitle> |
|
||||
<div class="data"> |
|
||||
<v-echarts :option="opt" style="height:165px;width:165px;margin-right:40px;pointer-events: all;"/> |
|
||||
<div class="items"> |
|
||||
<div v-for="(v,k) in list" :key="k" :style="{'--c':colors[k%colors.length]}"> |
|
||||
<span>{{v.name}}</span> <span>{{v.value}}次</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="detail"> |
|
||||
<div style="--c:#0C7EF0;"> |
|
||||
<span class="number">01</span> |
|
||||
<span class="img"> |
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAg5JREFUOE99kz1rFFEYhZ9zd3ajEk1U1Ihi7GxEg6BERFH/gpWV/0AQu0DYVQvBwhSCjQT0ByhoYWUnqCB+NOlSmBi/iEk0RGMyM/fIzKxhNwSnmrn3vM993znniuK54s00aCQ92THE2YxknFnm6UXl/hZMutyXJPVLiLcZySt+ssKYltVo+bBjesqhtpU8RtV0JEaeK3g7plECTGr0PYhhW5MEcsEf8vy1klb2iOgziFTWY/BvAkOODCFqJQCizITES0s9ti8AmxBvlDSzj7J3InKbCcQnpJOy+9rF7SZYAl5gCu1RmbphUfVWdtdml0ROdEDKy5NN3glArhEdEcLBDk5kzykZTUcI7MCUmwK5encXwEiiZogYIwIwX3Qwaegnduu7iv99BLGmC0Ur/FDSTL8IBjYs6Fg0WhL+bDQgvK0yh6+qN7MP4MH/AQy/bN1HPA2OLaTjlV5TqjdXp0AH2oBV7G9W6JXcX05qUuSHwjdtnbM0Ithd6T3dBbCZA8YKS5Euy95jeCZ5lBgOIa5jD5ZObAQAlkEPtJrfiY1wEXGayDWj3iDfwhSQdvEGHRT2WCwg7mVZMk6y4oTaQZkbwAkorev8tdNVEvH+rmUzi7iNeQdcFZzviPWa1GimuAszsvetd8FoQY6LSHuhfanWiUobk2b2BHu4nK2IcWWwsHuq2JISlK1LZTWKeP8X55v8Dg5d8ZAAAAAASUVORK5CYII="/> |
|
||||
</span> |
|
||||
<span class="info over">一年中<span>高发时段</span>：6、7、8月份</span> |
|
||||
</div> |
|
||||
<div style="--c:#10C945;"> |
|
||||
<span class="number">02</span> |
|
||||
<span class="img"> |
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAAXNSR0IArs4c6QAAAZVJREFUOE+d0jtrVFEUxfH/OnOTWEUiRifXQrESP4EIVgEzN136fAEVFHzg+MBCEMRe8YGVRTobYcJMCGn0A1iqYJegE41RIjoz954lN1MZBjNxNxsO5/zYe3HEgDrQyMZHEy4FMY95k+fca2eLHxHeeV2DgOpK7Zh6PBaaAX+N+IHth59nWj+HAtLm2RNW5YngjCHKfhkLXfg0u7g+FFBtTJ8Mycgz0GmgCyxoq3tldW55A+hPLWK/7axGNpZWPEfQfcxRTMfilfCLCHlwHLWCovU9TzrvNLkyWw05k7+KYnVfJx9JxpJph3AOOCVIwLa0BWzvLzuU3eg3pqm0mT1HPgI8QjpIpG44LlEZFPDfZ15T2qp9Mcpl3zJMIV0V7B/isUEfygk2LLrG9YAOY64jJnYHynC9pLSVrVvkjq4HbQP1YQCbH8JP/x/AbZmbJdC2KPY6AfC+wOf7IUq9PQLGft1TcVFTrdqmUA/iDVtVpGuC8X+FaJyXvxPlt5UuZW+xJwR3CnxIhMvSLoBpS9xd+7a58AdsX8afVzq8owAAAABJRU5ErkJggg=="/> |
|
||||
</span> |
|
||||
<span class="info over"><span>推荐使用肥料</span>：xxx化肥、xxx水溶性肥料</span> |
|
||||
</div> |
|
||||
<div style="--c:#00E4FF;"> |
|
||||
<span class="number">03</span> |
|
||||
<span class="img"> |
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAATCAYAAACgADyUAAAAAXNSR0IArs4c6QAAAi5JREFUOE+Nkd9rzXEcxl/P55ydnfM14QKNlmlk2WTGFREuRFKr1cqdKX8A7Wa0P0Bu3Ai1S1xwwYXkUsKIdhSTH0XKnDNEZDvb2TnfR9+zuLDleK4+9en1fj/v5xF2iPKFbktHhHYactjPSIUrpcnyLba3lFhAyjwtdKTsQaFDmMhyDFjWaJzS0PSru3fo66v+zSqbL54K+LhNJOmViSeF1huWgK+VrBN0N3+eB+byhasyh4DXlsewJLHYsFvmbVWV3pktLW8WAMfPyKHf0ktBCbzE8F54L2iExvSxqY3LC/Otjn7cFYIGDMsUEyUWBS/AWQcNlxq+3qCjozwPZMyZqFzcbNgj04doNlx2yjenf1Yf11K1Qw2U4iQ3DJqbZGWeFdpTFYaF1iENVirxg3Sgaaox/SFXdpuDs9NBz6PZaksMkRblP3ThBpczkJ6NzwrWEjiNvRWzJkaXJO3HrERcxO4FtyoaLdwmydHxdVCPRSvoArhXpg3CeSveJ1htc06i39CqXL7wQzBje1gKncbdwH3sTRIrsO5ZbhdaargrtB3coChf/AaeIeYCcqelA8nRQFombTENZGRC8pbJIiZ+gyXMeQc2Awdrn/+UxhPwu4VkHoJXYTYg0nXB3GhhRGKboSqTQqSSxv4DLB4WHkB0AXNF15XHxZOPUS5FD9KQEpt1t9WmTsxZGvvUlKvER2WfrBVdX1/+3JJ9VFwbMh4y3iGriqjOX+6kkiDz7heTQAYBNpj7bQAAAABJRU5ErkJggg=="/> |
|
||||
</span> |
|
||||
<span class="info over"><span>发生部位</span>：大多发生在根、茎部位，症状多为变色烂叶以及根大多发生在根、茎部位，症状多为变色烂叶以及根</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</view> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import request from '@/config/request' |
|
||||
import { computed, inject, shallowRef, watch } from 'vue' |
|
||||
import subTitle from '../subTitle.vue' |
|
||||
|
|
||||
var msg=inject("msg") |
|
||||
var props=defineProps({ |
|
||||
breed:{ |
|
||||
type:String, |
|
||||
default:"" |
|
||||
}, |
|
||||
year:{ |
|
||||
type:String, |
|
||||
default:"" |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
var colors=["#10C945","#057FFB","#fff","#00E4FF"] |
|
||||
var list=shallowRef([]) |
|
||||
var opt=computed(()=>({ |
|
||||
color:colors, |
|
||||
series: list.value.reverse().map((v,k)=>({ |
|
||||
type: 'gauge', |
|
||||
startAngle: 90, |
|
||||
endAngle: -270, |
|
||||
radius:`${40+60/3*k}%`, |
|
||||
progress: { |
|
||||
show: true, |
|
||||
overlap: false, |
|
||||
roundCap: true, |
|
||||
clip: false, |
|
||||
}, |
|
||||
axisLine: { |
|
||||
show:false, |
|
||||
lineStyle: { |
|
||||
width: 10 |
|
||||
} |
|
||||
}, |
|
||||
pointer: { show: false }, |
|
||||
splitLine: { show: false }, |
|
||||
axisTick: { show: false }, |
|
||||
axisLabel: { show: false }, |
|
||||
title: { show:false }, |
|
||||
detail: { show:false }, |
|
||||
data: [{ |
|
||||
value: Math.round(v.value/list.value.reduce((a,b)=>a+b.value,0)*10000)/100, |
|
||||
itemStyle:{color:v.color}, |
|
||||
name: v.name, |
|
||||
}], |
|
||||
})) |
|
||||
})) |
|
||||
watch([()=>props.breed,()=>props.year], async n=>{ |
|
||||
var res=await request("/api/variety/righttop",{ |
|
||||
method:"post", |
|
||||
data:{ |
|
||||
varietyName:n[0], |
|
||||
date:n[1], |
|
||||
region:"", |
|
||||
} |
|
||||
}) |
|
||||
if(res.statu){ |
|
||||
list.value=res.data.map(v=>({ |
|
||||
name:v.pestName, |
|
||||
value:v.pestNum |
|
||||
})) |
|
||||
}else{ |
|
||||
msg.error(res.msg||"病害分析失败") |
|
||||
} |
|
||||
}) |
|
||||
</script> |
|
||||
@ -1,251 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.right_2{ |
|
||||
margin-top:10px; |
|
||||
.data{ |
|
||||
display:flex; |
|
||||
align-items: center; |
|
||||
margin-top:16px; |
|
||||
.echarts{ |
|
||||
flex-shrink: 0; |
|
||||
} |
|
||||
} |
|
||||
&>.detail{ |
|
||||
margin-top:20px; |
|
||||
&>div{ |
|
||||
display:flex; |
|
||||
align-items: center; |
|
||||
&+div{ |
|
||||
margin-top:10px; |
|
||||
} |
|
||||
.number{ |
|
||||
flex-shrink: 0; |
|
||||
width:30px; |
|
||||
height:20px; |
|
||||
line-height: 20px; |
|
||||
text-align: center; |
|
||||
margin-right:9px; |
|
||||
color:#fff; |
|
||||
background:var(--c); |
|
||||
} |
|
||||
.img{ |
|
||||
flex-shrink: 0; |
|
||||
width:39px; |
|
||||
height:39px; |
|
||||
line-height: 39px; |
|
||||
text-align: center; |
|
||||
border:2px solid var(--c); |
|
||||
background:rgba(0,0,0,0.4); |
|
||||
position:relative; |
|
||||
margin-right:10px; |
|
||||
&:before{ |
|
||||
content:""; |
|
||||
position:absolute; |
|
||||
top:-4px; |
|
||||
left:-4px; |
|
||||
width:4px; |
|
||||
height:4px; |
|
||||
border-top:1px solid var(--c); |
|
||||
border-left:1px solid var(--c); |
|
||||
|
|
||||
} |
|
||||
&:after{ |
|
||||
content:""; |
|
||||
position:absolute; |
|
||||
bottom:-4px; |
|
||||
right:-4px; |
|
||||
width:4px; |
|
||||
height:4px; |
|
||||
border-bottom:1px solid var(--c); |
|
||||
border-right:1px solid var(--c); |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
.info{ |
|
||||
color:#fff; |
|
||||
font-size:16px; |
|
||||
span{ |
|
||||
color:var(--c); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<div class="right_2"> |
|
||||
<subTitle color="16, 201, 69" text="虫害频率"> |
|
||||
<el-date-picker class="default" popper-class="monthRange" type="monthrange" :modelValue="['2023-09','2023-10']"/> |
|
||||
</subTitle> |
|
||||
<div class="data" @mouseenter="isEnter=true" @mouseout="isEnter=false"> |
|
||||
<v-echarts autoresize ref="echart" :option="opt" style="height:240px;pointer-events: all;"/> |
|
||||
</div> |
|
||||
<div class="detail"> |
|
||||
<div style="--c:#0C7EF0;"> |
|
||||
<span class="number">01</span> |
|
||||
<span class="img"> |
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAg5JREFUOE99kz1rFFEYhZ9zd3ajEk1U1Ihi7GxEg6BERFH/gpWV/0AQu0DYVQvBwhSCjQT0ByhoYWUnqCB+NOlSmBi/iEk0RGMyM/fIzKxhNwSnmrn3vM993znniuK54s00aCQ92THE2YxknFnm6UXl/hZMutyXJPVLiLcZySt+ssKYltVo+bBjesqhtpU8RtV0JEaeK3g7plECTGr0PYhhW5MEcsEf8vy1klb2iOgziFTWY/BvAkOODCFqJQCizITES0s9ti8AmxBvlDSzj7J3InKbCcQnpJOy+9rF7SZYAl5gCu1RmbphUfVWdtdml0ROdEDKy5NN3glArhEdEcLBDk5kzykZTUcI7MCUmwK5encXwEiiZogYIwIwX3Qwaegnduu7iv99BLGmC0Ur/FDSTL8IBjYs6Fg0WhL+bDQgvK0yh6+qN7MP4MH/AQy/bN1HPA2OLaTjlV5TqjdXp0AH2oBV7G9W6JXcX05qUuSHwjdtnbM0Ithd6T3dBbCZA8YKS5Euy95jeCZ5lBgOIa5jD5ZObAQAlkEPtJrfiY1wEXGayDWj3iDfwhSQdvEGHRT2WCwg7mVZMk6y4oTaQZkbwAkorev8tdNVEvH+rmUzi7iNeQdcFZzviPWa1GimuAszsvetd8FoQY6LSHuhfanWiUobk2b2BHu4nK2IcWWwsHuq2JISlK1LZTWKeP8X55v8Dg5d8ZAAAAAASUVORK5CYII="/> |
|
||||
</span> |
|
||||
<span class="info over">一年中<span>高发时段</span>：6、7、8月份</span> |
|
||||
</div> |
|
||||
<div style="--c:#10C945;"> |
|
||||
<span class="number">02</span> |
|
||||
<span class="img"> |
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAAXNSR0IArs4c6QAAAZVJREFUOE+d0jtrVFEUxfH/OnOTWEUiRifXQrESP4EIVgEzN136fAEVFHzg+MBCEMRe8YGVRTobYcJMCGn0A1iqYJegE41RIjoz954lN1MZBjNxNxsO5/zYe3HEgDrQyMZHEy4FMY95k+fca2eLHxHeeV2DgOpK7Zh6PBaaAX+N+IHth59nWj+HAtLm2RNW5YngjCHKfhkLXfg0u7g+FFBtTJ8Mycgz0GmgCyxoq3tldW55A+hPLWK/7axGNpZWPEfQfcxRTMfilfCLCHlwHLWCovU9TzrvNLkyWw05k7+KYnVfJx9JxpJph3AOOCVIwLa0BWzvLzuU3eg3pqm0mT1HPgI8QjpIpG44LlEZFPDfZ15T2qp9Mcpl3zJMIV0V7B/isUEfygk2LLrG9YAOY64jJnYHynC9pLSVrVvkjq4HbQP1YQCbH8JP/x/AbZmbJdC2KPY6AfC+wOf7IUq9PQLGft1TcVFTrdqmUA/iDVtVpGuC8X+FaJyXvxPlt5UuZW+xJwR3CnxIhMvSLoBpS9xd+7a58AdsX8afVzq8owAAAABJRU5ErkJggg=="/> |
|
||||
</span> |
|
||||
<span class="info over"><span>推荐使用肥料</span>：xxx化肥、xxx水溶性肥料</span> |
|
||||
</div> |
|
||||
<div style="--c:#00E4FF;"> |
|
||||
<span class="number">03</span> |
|
||||
<span class="img"> |
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAATCAYAAACgADyUAAAAAXNSR0IArs4c6QAAAi5JREFUOE+Nkd9rzXEcxl/P55ydnfM14QKNlmlk2WTGFREuRFKr1cqdKX8A7Wa0P0Bu3Ai1S1xwwYXkUsKIdhSTH0XKnDNEZDvb2TnfR9+zuLDleK4+9en1fj/v5xF2iPKFbktHhHYactjPSIUrpcnyLba3lFhAyjwtdKTsQaFDmMhyDFjWaJzS0PSru3fo66v+zSqbL54K+LhNJOmViSeF1huWgK+VrBN0N3+eB+byhasyh4DXlsewJLHYsFvmbVWV3pktLW8WAMfPyKHf0ktBCbzE8F54L2iExvSxqY3LC/Otjn7cFYIGDMsUEyUWBS/AWQcNlxq+3qCjozwPZMyZqFzcbNgj04doNlx2yjenf1Yf11K1Qw2U4iQ3DJqbZGWeFdpTFYaF1iENVirxg3Sgaaox/SFXdpuDs9NBz6PZaksMkRblP3ThBpczkJ6NzwrWEjiNvRWzJkaXJO3HrERcxO4FtyoaLdwmydHxdVCPRSvoArhXpg3CeSveJ1htc06i39CqXL7wQzBje1gKncbdwH3sTRIrsO5ZbhdaargrtB3coChf/AaeIeYCcqelA8nRQFombTENZGRC8pbJIiZ+gyXMeQc2Awdrn/+UxhPwu4VkHoJXYTYg0nXB3GhhRGKboSqTQqSSxv4DLB4WHkB0AXNF15XHxZOPUS5FD9KQEpt1t9WmTsxZGvvUlKvER2WfrBVdX1/+3JJ9VFwbMh4y3iGriqjOX+6kkiDz7heTQAYBNpj7bQAAAABJRU5ErkJggg=="/> |
|
||||
</span> |
|
||||
<span class="info over"><span>发生部位</span>：大多发生在根、茎部位，症状多为变色烂叶以及根大多发生在根、茎部位，症状多为变色烂叶以及根</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import request from "@/config/request" |
|
||||
import { computed, inject, ref, shallowRef, watch, onUnmounted } from 'vue' |
|
||||
import subTitle from '../subTitle.vue' |
|
||||
|
|
||||
var msg=inject("msg") |
|
||||
var props=defineProps({ |
|
||||
breed:{ |
|
||||
type:String, |
|
||||
default:"" |
|
||||
}, |
|
||||
year:{ |
|
||||
type:String, |
|
||||
default:"" |
|
||||
} |
|
||||
}) |
|
||||
var event=inject("event") |
|
||||
|
|
||||
var list=shallowRef([]) |
|
||||
var max=4 |
|
||||
var opt=computed(()=>({ |
|
||||
tooltip: { |
|
||||
trigger: 'axis', |
|
||||
formatter(params){ |
|
||||
return ` ${params[0].marker} ${params[0].name} ${params[0].value} ` |
|
||||
} |
|
||||
}, |
|
||||
grid: { |
|
||||
left: 10, |
|
||||
right: 10, |
|
||||
bottom: 10, |
|
||||
top:35, |
|
||||
containLabel: true |
|
||||
}, |
|
||||
dataZoom:{ |
|
||||
type:"inside", |
|
||||
startValue:0, |
|
||||
endValue: max, |
|
||||
zoomOnMouseWheel:false, |
|
||||
moveOnMouseMove:true, |
|
||||
moveOnMouseWheel:true, |
|
||||
}, |
|
||||
xAxis: { |
|
||||
type: 'category', |
|
||||
axisLine:{show:false}, |
|
||||
axisTick:{show:false}, |
|
||||
axisLabel:{ |
|
||||
color:"#E2EFFA", |
|
||||
fontSize:16, |
|
||||
interval:0, |
|
||||
}, |
|
||||
data: list.value.map(v=>v.name) |
|
||||
}, |
|
||||
yAxis: { |
|
||||
type: 'value', |
|
||||
name:"频率/次", |
|
||||
nameTextStyle:{ |
|
||||
color:"#E2EFFA", |
|
||||
fontSize:16, |
|
||||
}, |
|
||||
axisLabel:{ |
|
||||
color:"#E2EFFA", |
|
||||
fontSize:16, |
|
||||
}, |
|
||||
splitLine:{ |
|
||||
lineStyle:{ |
|
||||
color:"#4E7C98", |
|
||||
type:"dashed", |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
series: [ |
|
||||
{ |
|
||||
type: 'bar', |
|
||||
itemStyle:{color:{ |
|
||||
type: 'linear', |
|
||||
x: 0, y: 0, x2: 0, y2: 1, |
|
||||
colorStops: [ |
|
||||
{offset: 0, color: '#10C945'}, |
|
||||
{offset: 1, color: '#0C7FEF'} |
|
||||
], |
|
||||
global: false |
|
||||
}}, |
|
||||
barWidth:20, |
|
||||
data: list.value.map(v=>v.value) |
|
||||
}, |
|
||||
{ |
|
||||
type:"pictorialBar", |
|
||||
symbolRepeat:"fixed", |
|
||||
itemStyle:{color:"rgba(0,0,0,0.6)"}, |
|
||||
symbol:"rect", |
|
||||
symbolClip:true, |
|
||||
symbolMargin:3, |
|
||||
symbolSize:[20,2], |
|
||||
symbolPosition:"start", |
|
||||
z:5, |
|
||||
data:list.value.map(v=>v.value) |
|
||||
|
|
||||
} |
|
||||
] |
|
||||
})) |
|
||||
var isEnter=ref(false) |
|
||||
var echart=ref() |
|
||||
|
|
||||
watch([()=>props.breed,()=>props.year], async n=>{ |
|
||||
var res=await request("/api/variety/rightbelow",{ |
|
||||
method:"post", |
|
||||
data:{ |
|
||||
varietyName:n[0], |
|
||||
date:n[1], |
|
||||
region:"", |
|
||||
} |
|
||||
}) |
|
||||
if(res.statu){ |
|
||||
list.value=res.data.map(v=>({ |
|
||||
name:v.pestName, |
|
||||
value:v.pestNum |
|
||||
})) |
|
||||
}else{ |
|
||||
msg.error(res.msg||"获取虫害频率失败！") |
|
||||
} |
|
||||
}) |
|
||||
event.on("updateData",()=>{ |
|
||||
if(list.value.length>max && !isEnter.value && echart.value){ |
|
||||
var start=echart.value.getOption().dataZoom[0].startValue+1 |
|
||||
if(start+max+1>list.value.length){ |
|
||||
echart.value.dispatchAction({ |
|
||||
type:"dataZoom", |
|
||||
startValue:0, |
|
||||
endValue:max, |
|
||||
}) |
|
||||
}else{ |
|
||||
echart.value.dispatchAction({ |
|
||||
type:"dataZoom", |
|
||||
startValue:start, |
|
||||
endValue:max+start, |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
onUnmounted(()=>{ |
|
||||
event.off('updateData') |
|
||||
}) |
|
||||
</script> |
|
||||
@ -1,137 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.content{ |
|
||||
position:absolute; |
|
||||
top:50%; |
|
||||
left:50%; |
|
||||
transform: translate(-50%,-50%); |
|
||||
width:800px+608px; |
|
||||
padding:144px 242px 140px 747px; |
|
||||
height:772px; |
|
||||
background-image:url(@/assets/img/login_bg2.png),url(@/assets/img/login_bg1.png); |
|
||||
background-repeat: no-repeat; |
|
||||
background-position:513px center,left center; |
|
||||
display:flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: space-evenly; |
|
||||
.name{ |
|
||||
color:#fff; |
|
||||
font-weight: bold; |
|
||||
position:absolute; |
|
||||
font-size:50px; |
|
||||
top:10px; |
|
||||
} |
|
||||
.title{ |
|
||||
height:101px; |
|
||||
width:404px; |
|
||||
background-image:url(@/assets/img/login_form1.png); |
|
||||
font-weight: bold; |
|
||||
font-size:38px; |
|
||||
color:#fff; |
|
||||
line-height: 80px; |
|
||||
text-align: center; |
|
||||
text-indent: 28px; |
|
||||
letter-spacing: 15px; |
|
||||
} |
|
||||
.account{ |
|
||||
background-image:url(@/assets/img/login_form2.png); |
|
||||
} |
|
||||
.password{ |
|
||||
background-image:url(@/assets/img/login_form3.png); |
|
||||
} |
|
||||
.account,.password{ |
|
||||
width:404px; |
|
||||
height:80px; |
|
||||
line-height: 80px; |
|
||||
padding: 0 23px 0 101px; |
|
||||
margin-bottom:20px; |
|
||||
input{ |
|
||||
background: transparent; |
|
||||
border: none; |
|
||||
outline: none; |
|
||||
width: 100%; |
|
||||
height: 65%; |
|
||||
color:#1983fc; |
|
||||
font-size:24px; |
|
||||
&::-webkit-input-placeholder{ |
|
||||
color:#034B9B; |
|
||||
font-family:MicrosoftYaHei; |
|
||||
} |
|
||||
&::-ms-reveal{ |
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='200' height='200'%3E%3Cpath d='M512.01228 775.73773c-176.824241 0-341.012697-96.55201-428.502308-251.965615l-6.616698-11.773138 6.616698-11.773138C170.998559 344.81428 335.188039 248.26227 512.01228 248.26227c176.847777 0 341.036233 96.55201 428.476724 251.989152l6.616698 11.748578-6.616698 11.747555c-87.440491 155.461701-251.628948 251.990175-428.476724 251.990175zM132.182508 512c80.536244 133.427872 224.824465 215.784578 379.853308 215.784578 155.054425 0 299.341622-82.33317 379.853307-215.784578-80.488149-133.451408-224.800929-215.784578-379.853307-215.784578-155.029866 0-299.341622 82.356706-379.853308 215.784578z' fill='%23034B9B' p-id='1909'%3E%3C/path%3E%3Cpath d='M364.582509 511.615237c0 80.999802 65.663512 146.662291 146.662291 146.662291s146.662291-65.663512 146.662291-146.662291-65.663512-146.662291-146.662291-146.662291-146.662291 65.663512-146.662291 146.662291z' fill='%23034B9B' p-id='1910'%3E%3C/path%3E%3C/svg%3E"); |
|
||||
} |
|
||||
&:-webkit-autofill{ |
|
||||
box-shadow:inset 0 0 0 1000px #06255A !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
button{ |
|
||||
width:414px; |
|
||||
height:84px; |
|
||||
color:#0091FF; |
|
||||
font-size:30px; |
|
||||
border-radius: 90px; |
|
||||
box-shadow: inset 0 0 1px 4px #0091FF; |
|
||||
background:transparent; |
|
||||
border:none; |
|
||||
cursor: pointer; |
|
||||
&:active{ |
|
||||
transform: translate(2px, 2px); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<container :bg="require('@/assets/img/login_bg.png')"> |
|
||||
<template #ready> |
|
||||
<div class="content"> |
|
||||
<div class="name">元谋县国家现代农业产业园</div> |
|
||||
<div class="title">登录</div> |
|
||||
<div class="account"> |
|
||||
<input placeholder="请输入账号" v-model="formData.username" autocomplete="off"/> |
|
||||
</div> |
|
||||
<div class="password"> |
|
||||
<input type="password" v-model="formData.password" placeholder="请输入密码" autocomplete="new-password"/> |
|
||||
</div> |
|
||||
<button @click="login">登录</button> |
|
||||
</div> |
|
||||
</template> |
|
||||
</container> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import request from '@/config/request' |
|
||||
import { inject, onMounted, reactive } from 'vue' |
|
||||
|
|
||||
var msg=inject('msg') |
|
||||
var {commit} = inject("store") |
|
||||
|
|
||||
var formData=reactive({ |
|
||||
captcha: "", |
|
||||
checkKey: "", |
|
||||
loginType: "screen", |
|
||||
password: "", |
|
||||
username: "" |
|
||||
}) |
|
||||
async function login(){ |
|
||||
if(!formData.username){ |
|
||||
msg.error("请输入账号！") |
|
||||
}else if(!formData.password){ |
|
||||
msg.error("请输入密码！") |
|
||||
}else{ |
|
||||
var res= await request("/sys/login",{ |
|
||||
method:"post", |
|
||||
data: formData |
|
||||
}) |
|
||||
if(res.statu){ |
|
||||
msg.success("登录成功！") |
|
||||
commit("data/setToken",res.data.token) |
|
||||
commit("data/setUserInfo",res.data.userInfo) |
|
||||
}else{ |
|
||||
msg.error(res.msg||"登录失败！") |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
onMounted(()=>{ |
|
||||
|
|
||||
}) |
|
||||
</script> |
|
||||
@ -1,71 +0,0 @@ |
|||||
import * as THREE from 'three' |
|
||||
|
|
||||
export default class Label extends THREE.Object3D{ |
|
||||
#imgMesh |
|
||||
#pos |
|
||||
#nameMesh |
|
||||
#nameObj |
|
||||
constructor(pos,nameObj={}){ |
|
||||
super() |
|
||||
this.#pos=pos |
|
||||
this.#nameObj=nameObj |
|
||||
this.refesh() |
|
||||
} |
|
||||
#update(){ |
|
||||
var geometry=new THREE.PlaneGeometry(3,3) |
|
||||
var material=new THREE.MeshBasicMaterial({ |
|
||||
transparent:true, |
|
||||
opacity:0, |
|
||||
side:THREE.DoubleSide, |
|
||||
map:new THREE.TextureLoader().load("data:image/svg+xml,%3Csvg width='32.000000' height='37.000000' viewBox='0 0 32 37' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cellipse id='椭圆 1' cx='15.500000' cy='26.000000' rx='4.500000' ry='3.000000' filter='url(%23filter_38_6_dd)' fill='%23FED44C'/%3E %3Cellipse id='椭圆 1' cx='15.500000' cy='26.500000' rx='10.000000' ry='6.000000' stroke='%23FED44C'/%3E %3Cellipse id='椭圆 1' cx='16.000000' cy='27.000000' rx='14.500000' ry='9.500000' stroke='%23FED44C'/%3E %3Cpath id='path' d='M7.32259 17.6772C7.05646 17.4381 6.80397 17.1877 6.56514 16.926C6.32631 16.6644 6.10229 16.3927 5.89308 16.111C5.68388 15.8292 5.49051 15.5389 5.31296 15.2399C5.13542 14.9409 4.97458 14.6347 4.83041 14.3213C4.68626 14.0079 4.55951 13.6888 4.45015 13.3641C4.34079 13.0393 4.24936 12.7105 4.17586 12.3776C4.10236 12.0447 4.04713 11.7093 4.01021 11.3714C3.97327 11.0336 3.9548 10.6949 3.9548 10.3554C3.9548 10.0159 3.97327 9.67717 4.01021 9.33931C4.04713 9.00145 4.10236 8.66606 4.17586 8.33315C4.24936 8.00023 4.34079 7.6714 4.45015 7.34666C4.55951 7.02192 4.68626 6.70286 4.83041 6.38946C4.97458 6.07606 5.13542 5.76985 5.31296 5.47084C5.49051 5.17183 5.68388 4.88147 5.89308 4.59976C6.10229 4.31805 6.32631 4.04636 6.56514 3.7847C6.80397 3.52303 7.05646 3.27264 7.32259 3.03357C11.8135 -1.01118 19.0955 -1.01118 23.5864 3.03357C23.8526 3.27264 24.1051 3.52304 24.344 3.78471C24.5829 4.04639 24.8069 4.3181 25.0162 4.59982C25.2254 4.88155 25.4188 5.17193 25.5964 5.47095C25.774 5.76999 25.9349 6.07622 26.079 6.38963C26.2232 6.70306 26.35 7.02216 26.4594 7.34692C26.5687 7.67168 26.6602 8.00054 26.7337 8.33349C26.8072 8.66644 26.8625 9.00185 26.8994 9.33974C26.9363 9.67763 26.9548 10.0163 26.9548 10.3559C26.9548 10.6954 26.9363 11.0341 26.8994 11.372C26.8625 11.7099 26.8072 12.0453 26.7337 12.3783C26.6602 12.7112 26.5687 13.0401 26.4594 13.3648C26.35 13.6896 26.2232 14.0087 26.079 14.3221C25.9349 14.6356 25.774 14.9418 25.5964 15.2408C25.4188 15.5398 25.2254 15.8302 25.0162 16.1119C24.8069 16.3937 24.5829 16.6654 24.344 16.927C24.1051 17.1887 23.8526 17.4391 23.5864 17.6782L15.4545 25L7.32259 17.6772ZM15.4545 13.5418C15.6811 13.5419 15.9056 13.522 16.1278 13.482C16.3501 13.442 16.5659 13.3828 16.7753 13.3044C16.9847 13.2259 17.1836 13.1296 17.3721 13.0157C17.5606 12.9017 17.7349 12.7721 17.8952 12.627C18.0555 12.4819 18.1986 12.3241 18.3245 12.1534C18.4504 11.9828 18.5568 11.8027 18.6435 11.613C18.7303 11.4234 18.7958 11.228 18.84 11.0267C18.8842 10.8253 18.9063 10.6221 18.9063 10.4168C18.9063 10.2116 18.8842 10.0083 18.84 9.80698C18.7958 9.60567 18.7303 9.41021 18.6435 9.2206C18.5568 9.03098 18.4504 8.85085 18.3245 8.68021C18.1986 8.50957 18.0555 8.35169 17.8952 8.2066C17.7349 8.06149 17.5606 7.93195 17.3721 7.81797C17.1836 7.70399 16.9847 7.60777 16.7753 7.52929C16.5659 7.45081 16.3501 7.39159 16.1278 7.35164C15.9056 7.31168 15.6811 7.29175 15.4545 7.29185C15.228 7.29195 15.0038 7.31206 14.7817 7.35216C14.5596 7.39226 14.3439 7.4516 14.1347 7.53017C13.9255 7.60873 13.7268 7.70502 13.5385 7.81903C13.3503 7.93304 13.1761 8.06259 13.016 8.20767C12.8559 8.35275 12.713 8.51058 12.5872 8.68115C12.4614 8.85173 12.3552 9.03178 12.2685 9.2213C12.1819 9.41082 12.1165 9.60617 12.0723 9.80736C12.0282 10.0085 12.0061 10.2117 12.0061 10.4168C12.0061 10.6219 12.0282 10.8251 12.0723 11.0263C12.1165 11.2275 12.1819 11.4228 12.2685 11.6123C12.3552 11.8019 12.4614 11.9819 12.5872 12.1525C12.713 12.3231 12.8559 12.4809 13.016 12.626C13.1761 12.771 13.3503 12.9006 13.5385 13.0146C13.7268 13.1286 13.9255 13.2249 14.1347 13.3035C14.3439 13.382 14.5596 13.4414 14.7817 13.4815C15.0038 13.5216 15.228 13.5417 15.4545 13.5418Z' fill-rule='nonzero' fill='url(%23paint_linear_38_5_0)'/%3E %3Cdefs%3E %3Cfilter id='filter_38_6_dd' x='5.000000' y='17.000000' width='21.000000' height='18.000000' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E %3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E %3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E %3CfeMorphology radius='2' in='' result='BackgroundImageFix'/%3E %3CfeOffset dx='0' dy='0'/%3E %3CfeGaussianBlur stdDeviation='1.33333'/%3E %3CfeColorMatrix type='matrix' values='0 0 0 0 0.99608 0 0 0 0 0.83137 0 0 0 0 0.29804 0 0 0 0.25 0'/%3E %3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect_dropShadow_1'/%3E %3CfeBlend mode='normal' in='SourceGraphic' in2='effect_dropShadow_1' result='shape'/%3E %3C/filter%3E %3CclipPath id='clip38_2'%3E %3Crect id='画板 1' width='32.000000' height='37.000000' fill='white'/%3E %3C/clipPath%3E %3ClinearGradient id='paint_linear_38_5_0' x1='15.500000' y1='0.000000' x2='15.500000' y2='25.000000' gradientUnits='userSpaceOnUse'%3E %3Cstop stop-color='%23FB7694'/%3E %3Cstop offset='1.000000' stop-color='%23FED44C'/%3E %3C/linearGradient%3E %3C/defs%3E %3C/svg%3E"), |
|
||||
}) |
|
||||
this.#imgMesh=new THREE.Mesh(geometry,material) |
|
||||
this.#imgMesh.renderOrder=6 |
|
||||
this.#imgMesh.position.set(0, 0, 115*-0.015) |
|
||||
this.add(this.#imgMesh) |
|
||||
|
|
||||
var nameGeometry=new THREE.PlaneGeometry(this.#nameObj.box.width/16,this.#nameObj.box.height/16) |
|
||||
var nameMaterial=new THREE.MeshBasicMaterial({ |
|
||||
transparent:true, |
|
||||
opacity:0, |
|
||||
side:THREE.DoubleSide, |
|
||||
map:new THREE.TextureLoader().load(this.#nameObj.img) |
|
||||
}) |
|
||||
this.#nameMesh=new THREE.Mesh(nameGeometry, nameMaterial) |
|
||||
this.#nameMesh.renderOrder=6 |
|
||||
this.#nameMesh.position.set(0, 0, 115*(0.015)) |
|
||||
this.add(this.#nameMesh) |
|
||||
|
|
||||
this.position.set(115*this.#pos[0],this.#pos[1],115*(this.#pos[2])) |
|
||||
} |
|
||||
refesh(){ |
|
||||
this.dispose() |
|
||||
this.#update() |
|
||||
} |
|
||||
get img(){ |
|
||||
return this.#imgMesh |
|
||||
} |
|
||||
get labelName(){ |
|
||||
return this.#nameMesh |
|
||||
} |
|
||||
rotate({x,y,z}){ |
|
||||
this.#imgMesh.rotation.x=x |
|
||||
this.#imgMesh.rotation.y=y |
|
||||
this.#imgMesh.rotation.z=z |
|
||||
this.#nameMesh.rotation.x=x |
|
||||
this.#nameMesh.rotation.y=y |
|
||||
this.#nameMesh.rotation.z=z |
|
||||
} |
|
||||
zoomOut(v){ |
|
||||
this.scale.set(v,v,v) |
|
||||
} |
|
||||
dispose(){ |
|
||||
for(var {geometry,material} of this.children){ |
|
||||
geometry.dispose() |
|
||||
material.dispose() |
|
||||
} |
|
||||
while (this.children[0]){ |
|
||||
this.remove(this.children[0]) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,101 +0,0 @@ |
|||||
import * as THREE from 'three' |
|
||||
import gsap from 'gsap' |
|
||||
|
|
||||
export default class Point extends THREE.Object3D{ |
|
||||
#point |
|
||||
#linePoints |
|
||||
#line |
|
||||
#popover |
|
||||
#timeLine=gsap.timeline() |
|
||||
#val |
|
||||
constructor (position,popover, val){ |
|
||||
super() |
|
||||
this.#linePoints=[ |
|
||||
[115*position.lng, 0.7, 115*position.lat], |
|
||||
[115*(position.lng -0.01), 6, 115*position.lat], |
|
||||
[115*(position.lng -0.2), 6, 115*position.lat], |
|
||||
] |
|
||||
this.#popover=popover |
|
||||
this.#val=val |
|
||||
this.refesh() |
|
||||
|
|
||||
this.#timeLine=gsap.timeline() |
|
||||
this.#timeLine.pause() |
|
||||
var line1={x:this.#linePoints[0][0],y:this.#linePoints[0][1]} |
|
||||
this.#timeLine.to(line1,{x:this.#linePoints[1][0],y:this.#linePoints[1][1], duration:0.3,onUpdate:()=>{ |
|
||||
this.#line.geometry.setAttribute("position",new THREE.Float32BufferAttribute([ |
|
||||
...this.#linePoints[0], |
|
||||
line1.x,line1.y,this.#linePoints[1][2] |
|
||||
],3)) |
|
||||
}}) |
|
||||
var line2={x:this.#linePoints[1][0]} |
|
||||
this.#timeLine.to(line2,{x:this.#linePoints[2][0], duration:0.7,onUpdate:()=>{ |
|
||||
this.#line.geometry.setAttribute("position",new THREE.Float32BufferAttribute([ |
|
||||
...this.#linePoints[0], |
|
||||
...this.#linePoints[1], |
|
||||
line2.x,this.#linePoints[2][1],this.#linePoints[2][2] |
|
||||
],3)) |
|
||||
},onComplete:()=>{ |
|
||||
this.#popover.position.set(...this.#linePoints[2]) |
|
||||
this.#popover.element.style.opacity=1 |
|
||||
this.#popover.visible=true |
|
||||
}}) |
|
||||
} |
|
||||
#update(){ |
|
||||
const geometry = new THREE.SphereGeometry( 0.7, 20, 20 ); |
|
||||
const material = new THREE.MeshPhysicalMaterial( { |
|
||||
clearcoat: 1.0, |
|
||||
clearcoatRoughness: 0.4, |
|
||||
metalness: 0.8, |
|
||||
roughness: 0.5, |
|
||||
color: 0x69E7FC, |
|
||||
emissive:0x24BBD4, |
|
||||
flatShading:false, |
|
||||
normalScale: new THREE.Vector2( 0.15, 0.15 ), |
|
||||
}); |
|
||||
this.#point=new THREE.Mesh(geometry, material) |
|
||||
this.#point.scale.set(0,0,0) |
|
||||
this.#point.position.set(...this.#linePoints[0]) |
|
||||
this.add(this.#point)//添加模型
|
|
||||
//线
|
|
||||
var lineGeometry=new THREE.BufferGeometry() |
|
||||
var lineMaterial=new THREE.LineBasicMaterial() |
|
||||
this.#line=new THREE.Line(lineGeometry,lineMaterial) |
|
||||
this.add(this.#line) |
|
||||
} |
|
||||
refesh(){ |
|
||||
this.dispose() |
|
||||
this.#update() |
|
||||
} |
|
||||
dispose(){ |
|
||||
for(var {geometry,material} of this.children){ |
|
||||
geometry.dispose() |
|
||||
material.dispose() |
|
||||
} |
|
||||
while (this.children[0]){ |
|
||||
this.remove(this.children[0]) |
|
||||
} |
|
||||
} |
|
||||
show(){ |
|
||||
this.#timeLine.play() |
|
||||
} |
|
||||
hide(){ |
|
||||
this.#popover.element.style.opacity=0 |
|
||||
this.#timeLine.reverse(null, false) |
|
||||
} |
|
||||
out(){ |
|
||||
this.#point.scale.set(1,1,1) |
|
||||
} |
|
||||
hover(){ |
|
||||
this.#point.scale.set(1.4,1.4,1.4) |
|
||||
} |
|
||||
get mesh(){ |
|
||||
return this.#point |
|
||||
} |
|
||||
get time(){ |
|
||||
return this.#timeLine |
|
||||
} |
|
||||
get val(){ |
|
||||
return this.#val |
|
||||
} |
|
||||
} |
|
||||
@ -1,757 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.center{ |
|
||||
flex-grow: 1; |
|
||||
display:flex; |
|
||||
flex-direction: column; |
|
||||
position:relative; |
|
||||
&:deep .el-date-editor{ |
|
||||
top:10px; |
|
||||
left:20px; |
|
||||
} |
|
||||
&>.items{ |
|
||||
flex-shrink: 0; |
|
||||
display:flex; |
|
||||
align-items: center; |
|
||||
justify-content: space-around; |
|
||||
margin-top:60px; |
|
||||
position:relative; |
|
||||
z-index: 20; |
|
||||
&>div{ |
|
||||
background-image:url(@/assets/img/park-center-bg.png); |
|
||||
width:197px; |
|
||||
height:89px; |
|
||||
position:relative; |
|
||||
.icon{ |
|
||||
position:absolute; |
|
||||
top:14px; |
|
||||
left:14px; |
|
||||
width:45px; |
|
||||
height:45px; |
|
||||
} |
|
||||
.value{ |
|
||||
position:absolute; |
|
||||
top: 3px; |
|
||||
left: 72px; |
|
||||
height: 69px; |
|
||||
width: 123px; |
|
||||
display:flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: center; |
|
||||
padding:8px; |
|
||||
span{ |
|
||||
&:first-child{ |
|
||||
color:#fff; |
|
||||
font-size:24px; |
|
||||
font-weight: bold; |
|
||||
&:after{ |
|
||||
content:attr(data-unit); |
|
||||
font-size:16px; |
|
||||
color:#99A4AE; |
|
||||
} |
|
||||
} |
|
||||
&:nth-child(2){ |
|
||||
margin-top:4px; |
|
||||
color:#99A4AE; |
|
||||
font-size:16px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
&>canvas,&>.mapCSS2D{ |
|
||||
position:fixed; |
|
||||
pointer-events: all; |
|
||||
z-index: -10; |
|
||||
top:0; |
|
||||
left:0; |
|
||||
width:100%; |
|
||||
height:100%; |
|
||||
} |
|
||||
&>.mapCSS2D{ |
|
||||
pointer-events: none; |
|
||||
z-index: 30; |
|
||||
} |
|
||||
.model{ |
|
||||
transition: opacity 0.6s; |
|
||||
&>div{ |
|
||||
position:absolute; |
|
||||
bottom:0; |
|
||||
right:calc(-289px/2); |
|
||||
width:289px; |
|
||||
height:149px; |
|
||||
background-image:url(@/assets/img/park-center-popver-bg.png); |
|
||||
&>.title{ |
|
||||
font-weight: bold; |
|
||||
font-size:13px; |
|
||||
color:#50A7F9; |
|
||||
font-weight: bold; |
|
||||
position:absolute; |
|
||||
text-align: center; |
|
||||
top: 25px; |
|
||||
left: 28px; |
|
||||
width: 240px; |
|
||||
} |
|
||||
&>.ads{ |
|
||||
position: absolute; |
|
||||
top: 49px; |
|
||||
left: 30px; |
|
||||
width: 241px; |
|
||||
display:flex; |
|
||||
align-items: center; |
|
||||
// justify-content: flex-end; |
|
||||
span{ |
|
||||
// &.plantBS-dingwei{ |
|
||||
// color:#F19149; |
|
||||
// margin-right:auto; |
|
||||
// } |
|
||||
&.item{ |
|
||||
color:var(--c); |
|
||||
font-weight: bold; |
|
||||
font-size:14px; |
|
||||
&:before{ |
|
||||
content:attr(data-title); |
|
||||
font-weight: normal; |
|
||||
color:#C0DBF7; |
|
||||
font-size:12px; |
|
||||
} |
|
||||
&:after{ |
|
||||
content:"个"; |
|
||||
color:#C0DBF7; |
|
||||
font-weight: normal; |
|
||||
font-size:12px; |
|
||||
} |
|
||||
&+.item{ |
|
||||
margin-left:10px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
&>.line{ |
|
||||
position:absolute; |
|
||||
top: 73px; |
|
||||
left: 30px; |
|
||||
width: 239px; |
|
||||
height: 1px; |
|
||||
background: linear-gradient(rgba(12, 137, 254, 0.3), rgba(9, 207, 251, 0.3)); |
|
||||
&:before{ |
|
||||
content:""; |
|
||||
background-image:url(@/assets/img/line.png); |
|
||||
width:152px; |
|
||||
height:29px; |
|
||||
position:absolute; |
|
||||
top: -17px; |
|
||||
left: -43px; |
|
||||
animation: move 4s linear infinite; |
|
||||
} |
|
||||
} |
|
||||
&>.scroll-board{ |
|
||||
position:absolute; |
|
||||
top: 73px; |
|
||||
left: 30px; |
|
||||
width: 239px; |
|
||||
margin-top:5px; |
|
||||
height:55px; |
|
||||
&:deep>div{ |
|
||||
display:flex; |
|
||||
align-items: center; |
|
||||
span{ |
|
||||
font-size:12px; |
|
||||
color:#0C89FE; |
|
||||
&:first-child{ |
|
||||
width:80px; |
|
||||
flex-shrink: 0; |
|
||||
} |
|
||||
&:nth-child(2){ |
|
||||
flex-grow: 1; |
|
||||
&:after{ |
|
||||
content:"亩"; |
|
||||
} |
|
||||
} |
|
||||
&:nth-child(3){ |
|
||||
width:120px; |
|
||||
text-align: right; |
|
||||
flex-shrink: 0; |
|
||||
&:before{ |
|
||||
content:"预估产量"; |
|
||||
} |
|
||||
&:after{ |
|
||||
content:"kg"; |
|
||||
} |
|
||||
} |
|
||||
&:before,&:after{ |
|
||||
color:#C0DBF7; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
svg{ |
|
||||
opacity: 0; |
|
||||
} |
|
||||
} |
|
||||
@keyframes move { |
|
||||
0%{ |
|
||||
left:-43px; |
|
||||
opacity: 0; |
|
||||
} |
|
||||
30%{ |
|
||||
opacity: 1; |
|
||||
} |
|
||||
70%{ |
|
||||
opacity: 1; |
|
||||
} |
|
||||
100%{ |
|
||||
left:141px; |
|
||||
opacity: 0; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<div class="center"> |
|
||||
<el-date-picker type="year" v-model="year" :clearable="false" popper-class="year-popper"/> |
|
||||
<div class="items"> |
|
||||
<div> |
|
||||
<span class="icon" style="background-image:url(data:image/png;base64,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);"/> |
|
||||
<div class="value"> |
|
||||
<span data-unit="个">{{number.companyNum||0}}</span> |
|
||||
<span>企业数量</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div> |
|
||||
<span class="icon" style="background-image:url(data:image/png;base64,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);"/> |
|
||||
<div class="value"> |
|
||||
<span data-unit="亩">{{number.parkArea||0}}</span> |
|
||||
<span>基地面积</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<canvas ref="map" @mousemove="move" @click="showPopover"/> |
|
||||
<div ref="mapCSS2D" class="mapCSS2D"/> |
|
||||
<div ref="model" class="model"> |
|
||||
<div> |
|
||||
<div class="title over">{{modelData?.companyName}}</div> |
|
||||
<div class="ads"> |
|
||||
<!-- <span class="plantBS-dingwei">物茂乡</span> --> |
|
||||
<span class="item" data-title="基地：" style="--c:#10CC40;">{{modelData?.baseNum}}</span> |
|
||||
<span class="item" data-title="品种：" style="--c:#00E4FF;">{{modelData?.varietyNum}}</span> |
|
||||
</div> |
|
||||
<div class="line"/> |
|
||||
<d-scroll-board :data="modelData?.varietyList||[]" :num="3"> |
|
||||
<template #default="{row}"> |
|
||||
<span class="over" :style="`width:${239/10*3}px`">{{row.varietyName}}</span> |
|
||||
<span :style="`width:${239/10*2}px;text-align:right;`">{{row.plantArea}}</span> |
|
||||
<span :style="`width:${239/10*5}px`">{{row.outPut}}</span> |
|
||||
</template> |
|
||||
</d-scroll-board> |
|
||||
</div> |
|
||||
</div> |
|
||||
<svg ref="svg"> |
|
||||
<text :fill="labelName.color" dominant-baseline="text-before-edge" font-size="28" font-weight="900" v-html="labelName.text"></text> |
|
||||
</svg> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import request from '@/config/request' |
|
||||
import * as THREE from 'three' |
|
||||
import {CSS2DRenderer, CSS2DObject} from 'three/examples/jsm/renderers/CSS2DRenderer' |
|
||||
import gsap from 'gsap' |
|
||||
import { MapControls } from 'three/examples/jsm/controls/MapControls' |
|
||||
import { inject, nextTick, onMounted, reactive, ref, resolveTransitionHooks, shallowRef, watch } from 'vue'; |
|
||||
import yuanmou from '@/assets/map/yuanmou.json' |
|
||||
import {SVGToBase64} from 'black-knight/lib/config/tools' |
|
||||
import {dScrollBoard} from 'black-knight/lib/components' |
|
||||
import Point from './Point' |
|
||||
import Label from './Label' |
|
||||
|
|
||||
var emit=defineEmits() |
|
||||
var msg=inject("msg") |
|
||||
|
|
||||
var number=shallowRef({}) |
|
||||
var modelData=shallowRef({})//模态框数据 |
|
||||
var year=ref('') |
|
||||
|
|
||||
var time_line=gsap.timeline() |
|
||||
time_line.pause() |
|
||||
|
|
||||
var svg=ref() |
|
||||
var labelName=reactive({ |
|
||||
text:"", |
|
||||
color:"#fff" |
|
||||
}) |
|
||||
var model=ref() |
|
||||
|
|
||||
var map=ref(); |
|
||||
var mapCSS2D=ref() |
|
||||
var scene,renderer,camera,modalRenderer,popover; |
|
||||
var raycaster= new THREE.Raycaster();//鼠标移动点 |
|
||||
var group=new THREE.Group() |
|
||||
var names=[] |
|
||||
var labels=[] |
|
||||
var items={select:null,show:null,list:[]} |
|
||||
var center=[101.863986 -0.02,25.776215 -0.01] |
|
||||
var distance=0 |
|
||||
var region=reactive([ |
|
||||
{name:"羊街镇",lan:101.9301474,lng:26.0574059}, |
|
||||
{name:"老城乡",lan:101.8811474,lng:25.9254059}, |
|
||||
{name:"凉山乡",lan:101.972559,lng:25.81227}, |
|
||||
{name:"元马镇",lan:101.8701474,lng:25.8154059}, |
|
||||
{name:"平田乡",lan:101.7647297,lng:25.7918077}, |
|
||||
{name:"新华乡",lan:101.6910768,lng:25.7798770}, |
|
||||
{name:"物茂乡",lan:101.7810768,lng:25.6308770}, |
|
||||
{name:"黄瓜园镇",lan:101.8653983,lng:25.7235168}, |
|
||||
{name:"江边乡",lan:101.9035691,lng:25.581815}, |
|
||||
{name:"姜驿乡",lan:101.9960739,lng:25.500477}, |
|
||||
]) |
|
||||
function init(){ |
|
||||
scene = new THREE.Scene() |
|
||||
|
|
||||
renderer = new THREE.WebGLRenderer({ canvas: map.value, antialias: true, alpha: true }) |
|
||||
renderer.setPixelRatio(window.devicePixelRatio); |
|
||||
renderer.setSize(map.value.clientWidth, map.value.clientHeight) |
|
||||
|
|
||||
modalRenderer=new CSS2DRenderer({element: mapCSS2D.value}) |
|
||||
modalRenderer.setSize(map.value.clientWidth, map.value.clientHeight) |
|
||||
|
|
||||
camera = new THREE.PerspectiveCamera(40, map.value.clientWidth / map.value.clientHeight, 10, 1000) |
|
||||
camera.position.set(0, 100, 90) |
|
||||
distance=Math.sqrt(Math.pow(100,2)+Math.pow(90,2)) |
|
||||
|
|
||||
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); |
|
||||
directionalLight.position.set(0, 0, 10).normalize(); |
|
||||
scene.add(directionalLight); |
|
||||
var ambientLight = new THREE.AmbientLight(0xcccccc, 0.9); |
|
||||
scene.add(ambientLight); |
|
||||
|
|
||||
scene.add(group) |
|
||||
group.scale.set(115,115,1) |
|
||||
group.rotation.x=-Math.PI/2 |
|
||||
|
|
||||
//数据展示弹框 |
|
||||
popover = new CSS2DObject(model.value) |
|
||||
popover.position.set(-10,7,0) |
|
||||
popover.element.style.opacity=0 |
|
||||
scene.add(popover) |
|
||||
|
|
||||
var controls = new MapControls(camera, map.value) |
|
||||
controls.maxPolarAngle=Math.PI/2 |
|
||||
controls.minPolarAngle=0 |
|
||||
controls.dispatchEvent=e=>{ |
|
||||
var distance_now=Math.sqrt(Math.pow(camera.position.x,2)+Math.pow(camera.position.y,2)+Math.pow(camera.position.z,2)) |
|
||||
names.forEach(v=>{ |
|
||||
v.rotation.x=camera.rotation.x |
|
||||
v.rotation.y=camera.rotation.y |
|
||||
v.rotation.z=camera.rotation.z |
|
||||
}) |
|
||||
labels.forEach(v=>{ |
|
||||
v.rotate(camera.rotation) |
|
||||
if(distance_now<distance){ |
|
||||
v.zoomOut(distance_now/distance) |
|
||||
}else{ |
|
||||
v.zoomOut(1) |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
function addMap(){ |
|
||||
var shape = new THREE.Shape() |
|
||||
shape.moveTo(...yuanmou[0]) |
|
||||
for (var i of yuanmou.slice(1)){ |
|
||||
shape.lineTo(...i) |
|
||||
} |
|
||||
//底边 |
|
||||
var bottomGeometry=new THREE.ExtrudeBufferGeometry( shape, { |
|
||||
depth: 5, //二维面厚度 |
|
||||
bevelEnabled: false, |
|
||||
} ); |
|
||||
bottomGeometry.translate(-center[0],-center[1],-5) |
|
||||
var mian = new THREE.TextureLoader().load(require('@/assets/img/map_bg.png')) |
|
||||
mian.wrapS = mian.wrapT = THREE.RepeatWrapping; |
|
||||
mian.repeat.set(1.964, 1.346) |
|
||||
mian.offset.set(0.465,-0.141) |
|
||||
var materialUp=new THREE.MeshBasicMaterial({ |
|
||||
transparent:true, |
|
||||
opacity:0, |
|
||||
map: mian, |
|
||||
}) |
|
||||
|
|
||||
var side = new THREE.TextureLoader().load("data:image/svg+xml,%3Csvg width='44.000000' height='24.000000' viewBox='0 0 44 24' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Crect id='矩形 1' y='3.000000' width='44.000000' height='3.000000' fill='%231EB5FC'/%3E %3Crect id='矩形 1' y='9.000000' width='44.000000' height='3.000000' fill='%231EB5FC'/%3E %3Crect id='矩形 1' y='15.000000' width='44.000000' height='3.000000' fill='%231EB5FC'/%3E %3Crect id='矩形 1' y='21.000000' width='44.000000' height='3.000000' fill='%231EB5FC'/%3E %3C/svg%3E") |
|
||||
side.wrapS = side.wrapT = THREE.RepeatWrapping; |
|
||||
side.repeat.set(0.1, 0.25) |
|
||||
var materialSide=new THREE.MeshBasicMaterial({ |
|
||||
transparent:true, |
|
||||
opacity:0, |
|
||||
map:side, |
|
||||
opacity:0.8, |
|
||||
color:0x0C89FE, |
|
||||
}) |
|
||||
var mesh=new THREE.Mesh(bottomGeometry,[materialUp,materialSide]) |
|
||||
mesh.scale.set(0.5,0.5,0.5) |
|
||||
|
|
||||
time_line.to(mesh.scale,{x:1,y:1,z:1, duration:2, onStart(){ |
|
||||
group.add(mesh) |
|
||||
}}) |
|
||||
time_line.to(mesh.rotation,{z:Math.PI*2, duration:2},'-=2') |
|
||||
time_line.to(materialUp,{opacity:1, duration:2},'-=2') |
|
||||
time_line.to(materialSide,{opacity:1, duration:2},'-=2') |
|
||||
} |
|
||||
async function addLabel(){ |
|
||||
for(var v of region){ |
|
||||
labelName.text=v.name; |
|
||||
labelName.color="#fff" |
|
||||
await new Promise(result=>{ |
|
||||
nextTick(()=>{ |
|
||||
var box=svg.value.children[0].getBBox() |
|
||||
var label=new Label( |
|
||||
[-center[0]+v.lan, 1.3, -center[1]+v.lng], |
|
||||
{box,img:SVGToBase64(`<svg height="${box.height}" width="${box.width}">${svg.value.innerHTML}</svg>`)} |
|
||||
) |
|
||||
label.rotate(camera.rotation) |
|
||||
scene.add(label) |
|
||||
labels.push(label) |
|
||||
time_line.to(label.img.material,{opacity:1, duration:0.15,delay:0.2},'-=0.2') |
|
||||
time_line.to(label.labelName.material,{opacity:1, duration:0.15,delay:0.2},'-=0.35') |
|
||||
result() |
|
||||
}) |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
function addBG1(){ |
|
||||
var bgGeometry=new THREE.PlaneGeometry(253/6,464/5.9) |
|
||||
var bgMaterial=new THREE.MeshBasicMaterial({ |
|
||||
transparent:true, |
|
||||
depthWrite:false, |
|
||||
opacity:0, |
|
||||
side:THREE.DoubleSide, |
|
||||
map:new THREE.TextureLoader().load(require('@/assets/img/park-map-bg1.png')) |
|
||||
}) |
|
||||
var bgMesh=new THREE.Mesh(bgGeometry,bgMaterial) |
|
||||
bgMesh.position.set(115*(-center[0]+101.859473),10,115*(-center[1]+25.825215)) |
|
||||
bgMesh.rotation.x=-Math.PI/2 |
|
||||
bgMesh.renderOrder=1 |
|
||||
|
|
||||
time_line.to(bgMaterial,{opacity:1,duration:1,onStart(){ |
|
||||
scene.add(bgMesh) |
|
||||
}}) |
|
||||
time_line.to(bgMesh.position,{y:0.1,duration:1},"-=1") |
|
||||
} |
|
||||
async function addBG2(){ |
|
||||
var bgGeometry=new THREE.PlaneGeometry(316/9.1,599/9.1) |
|
||||
var bgMaterial=new THREE.MeshBasicMaterial({ |
|
||||
transparent:true, |
|
||||
opacity:0, |
|
||||
side:THREE.DoubleSide, |
|
||||
map:new THREE.TextureLoader().load(require('@/assets/img/park-map-bg2.png')) |
|
||||
}) |
|
||||
var bgMesh=new THREE.Mesh(bgGeometry,bgMaterial) |
|
||||
bgMesh.position.set(115*(-center[0]+101.855473),10,115*(-center[1]+25.827215)) |
|
||||
bgMesh.rotation.x=-Math.PI/2 |
|
||||
bgMesh.renderOrder=2 |
|
||||
|
|
||||
time_line.to(bgMaterial,{opacity:1,duration:1,onStart(){ |
|
||||
scene.add(bgMesh) |
|
||||
}}) |
|
||||
time_line.to(bgMesh.position,{y:0.2,duration:1},"-=1") |
|
||||
|
|
||||
//标记 |
|
||||
await setLine( |
|
||||
[101.800373,0.21,25.565215], |
|
||||
{text:"现代种业联农带农业示范区",color:"#10CC40",order:2}, |
|
||||
[ |
|
||||
0.02, 2, 0, |
|
||||
0.2, 2, 0 |
|
||||
] |
|
||||
) |
|
||||
await setLine( |
|
||||
[101.750373,0.21,25.735215], |
|
||||
{text:"<tspan>现代冬早蔬菜联农</tspan><tspan x='0' y='36'>带农业产业示范区</tspan>",color:"#10CC40",order:2}, |
|
||||
[ |
|
||||
-0.02, 2, 0, |
|
||||
-0.16, 2, 0 |
|
||||
] |
|
||||
) |
|
||||
await setLine( |
|
||||
[101.900373,0.21,26.065215], |
|
||||
{text:"<tspan>种业和蔬菜融合联农</tspan><tspan x='0' y='36'>带农业示范区</tspan>",color:"#10CC40",order:2}, |
|
||||
[ |
|
||||
-0.02, 2, 0, |
|
||||
-0.16, 2, 0 |
|
||||
] |
|
||||
) |
|
||||
} |
|
||||
async function addBG3(){ |
|
||||
var bgGeometry=new THREE.PlaneGeometry(431/9.1,654/9.1) |
|
||||
var bgMaterial=new THREE.MeshBasicMaterial({ |
|
||||
transparent:true, |
|
||||
side:THREE.DoubleSide, |
|
||||
opacity:0, |
|
||||
map:new THREE.TextureLoader().load(require('@/assets/img/park-map-bg3.png')) |
|
||||
}) |
|
||||
var bgMesh=new THREE.Mesh(bgGeometry,bgMaterial) |
|
||||
bgMesh.renderOrder=3 |
|
||||
bgMesh.position.set(115*(-center[0]+101.886473),10,115*(-center[1]+25.770215)) |
|
||||
bgMesh.rotation.x=-Math.PI/2 |
|
||||
|
|
||||
time_line.to(bgMaterial,{opacity:1,duration:1,onStart(){ |
|
||||
scene.add(bgMesh) |
|
||||
}}) |
|
||||
time_line.to(bgMesh.position,{y:0.3,duration:1},"-=1") |
|
||||
|
|
||||
await setLine( |
|
||||
[101.820373,0.31,25.695215], |
|
||||
{text:"三产融合发展产业带",color:"#FFF100",order:3}, |
|
||||
[ |
|
||||
-0.02, 5, 0, |
|
||||
-0.16, 5, 0 |
|
||||
] |
|
||||
) |
|
||||
} |
|
||||
async function addBG4(){ |
|
||||
var bgGeometry=new THREE.PlaneGeometry(216/9.1,364/9.1) |
|
||||
var bgMaterial=new THREE.MeshBasicMaterial({ |
|
||||
transparent:true, |
|
||||
side:THREE.DoubleSide, |
|
||||
opacity:0, |
|
||||
map:new THREE.TextureLoader().load(require('@/assets/img/park-map-bg4.png')) |
|
||||
}) |
|
||||
var bgMesh=new THREE.Mesh(bgGeometry,bgMaterial) |
|
||||
bgMesh.renderOrder=4 |
|
||||
bgMesh.position.set(115*(-center[0]+101.806473),10,115*(-center[1]+25.770215)) |
|
||||
bgMesh.rotation.x=-Math.PI/2 |
|
||||
|
|
||||
time_line.to(bgMaterial,{opacity:1,duration:1,onStart(){ |
|
||||
scene.add(bgMesh) |
|
||||
}}) |
|
||||
time_line.to(bgMesh.position,{y:0.4,duration:1},"-=1") |
|
||||
|
|
||||
await setLine( |
|
||||
[101.891373,0.41,25.664215], |
|
||||
{text:"<tspan>右廊-要素聚集特色产业</tspan><tspan x='0' y='36'>发展廊道</tspan>",color:"#F19149",order:4}, |
|
||||
[ |
|
||||
0.02, 5, 0, |
|
||||
0.16, 5, 0 |
|
||||
] |
|
||||
) |
|
||||
await setLine( |
|
||||
[101.740373,0.41,25.905215], |
|
||||
{text:"<tspan>左廊-要素聚集特色</tspan><tspan x='0' y='36'>产业发展廊道</tspan>",color:"#F19149",order:4}, |
|
||||
[ |
|
||||
-0.02, 5, 0, |
|
||||
-0.12, 5, 0 |
|
||||
], |
|
||||
0.04 |
|
||||
) |
|
||||
} |
|
||||
async function addBG5(){ |
|
||||
var bgGeometry=new THREE.CircleGeometry(95/19,32) |
|
||||
var bgMaterial=new THREE.MeshBasicMaterial({ |
|
||||
transparent:true, |
|
||||
opacity:0, |
|
||||
side:THREE.DoubleSide, |
|
||||
map:new THREE.TextureLoader().load(require('@/assets/img/park-map-bg5.png')) |
|
||||
}) |
|
||||
var bgMesh=new THREE.Mesh(bgGeometry,bgMaterial) |
|
||||
bgMesh.renderOrder=5 |
|
||||
bgMesh.position.set(115*(-center[0]+101.869473),10,115*(-center[1]+25.827215)) |
|
||||
bgMesh.rotation.x=-Math.PI/2 |
|
||||
|
|
||||
time_line.to(bgMaterial,{opacity:1,duration:2,onStart(){ |
|
||||
scene.add(bgMesh) |
|
||||
}}) |
|
||||
time_line.to(bgMesh.position,{y:0.5,duration:1,onComplete(){ |
|
||||
|
|
||||
}},"-=2") |
|
||||
|
|
||||
await setLine( |
|
||||
[101.740373+0.13,0.51,25.905215-0.08], |
|
||||
{text:"科技示范引领发展核心区",color:"#E60012",order:5}, |
|
||||
[ |
|
||||
0.02, 3, 0, |
|
||||
0.16, 3, 0 |
|
||||
] |
|
||||
) |
|
||||
} |
|
||||
async function setLine(label,{text,color,order},points,offset=0){ |
|
||||
|
|
||||
var point=new THREE.PlaneGeometry(1.2,1.2) |
|
||||
var pointMaterial=new THREE.MeshBasicMaterial({ |
|
||||
map:new THREE.TextureLoader().load("data:image/svg+xml,%3Csvg width='100.000000' height='100.000000' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Crect id='矩形 1' x='4.000000' y='4.000000' width='92.000000' height='92.000000' stroke='%23FFFFFF' stroke-width='8.000000'/%3E %3Crect id='矩形 2' x='20.000000' y='21.000000' width='60.000000' height='60.000000' fill='%23FFFFFF'/%3E %3C/svg%3E"), |
|
||||
transparent:true, |
|
||||
}) |
|
||||
var pointMesh=new THREE.Mesh(point,pointMaterial) |
|
||||
pointMesh.position.set(115*(-center[0]+label[0]),label[1],115*(-center[1]+label[2])) |
|
||||
pointMesh.rotation.x=-Math.PI/2 |
|
||||
pointMesh.renderOrder=order+0.1 |
|
||||
|
|
||||
var lineGeometry=new THREE.BufferGeometry() |
|
||||
var point1=[115*(-center[0]+label[0]), label[1], 115*(-center[1]+label[2])] |
|
||||
var point2=[115*(-center[0]+label[0]+points[0]), label[1]+points[1], 115*(-center[1]+label[2]+points[2])] |
|
||||
var point3=[115*(-center[0]+label[0]+points[3]), label[1]+points[4], 115*(-center[1]+label[2]+points[5])] |
|
||||
lineGeometry.setAttribute('position',new THREE.Float32BufferAttribute([ |
|
||||
...point1, |
|
||||
...point1, |
|
||||
], 3)) |
|
||||
//动画时间线 |
|
||||
var value1={x:point1[0],y:point1[1]} |
|
||||
time_line.to(value1, {x:point2[0],y:point2[1], duration:0.5,onUpdate(){ |
|
||||
lineGeometry.setAttribute('position',new THREE.Float32BufferAttribute([ |
|
||||
...point1, |
|
||||
value1.x,value1.y,point2[2] |
|
||||
], 3)) |
|
||||
},onStart(){ |
|
||||
scene.add(pointMesh)//添加定点标签 |
|
||||
}}) |
|
||||
var value2={x:point2[0]} |
|
||||
time_line.to(value2,{x:point3[0], duration:1,onUpdate(){ |
|
||||
lineGeometry.setAttribute('position',new THREE.Float32BufferAttribute([ |
|
||||
...point1, |
|
||||
...point2, |
|
||||
value2.x,point3[1],point3[2] |
|
||||
], 3)) |
|
||||
}}) |
|
||||
|
|
||||
var lineMaterial=new THREE.LineBasicMaterial({ |
|
||||
color:color, |
|
||||
}) |
|
||||
lineMaterial.renderOrder=7 |
|
||||
scene.add(new THREE.Line(lineGeometry,lineMaterial)) |
|
||||
labelName.text=text |
|
||||
labelName.color=color |
|
||||
await new Promise(resolve=>{ |
|
||||
nextTick(()=>{ |
|
||||
var box=svg.value.children[0].getBBox() |
|
||||
var times=17 |
|
||||
var adsGeometry=new THREE.PlaneGeometry(box.width/times,box.height/times) |
|
||||
adsGeometry.translate(0,box.height/times/2,0) |
|
||||
var adsMaterial=new THREE.MeshBasicMaterial({ |
|
||||
transparent:true, |
|
||||
opacity:0, |
|
||||
side:THREE.DoubleSide, |
|
||||
map:new THREE.TextureLoader().load(SVGToBase64(`<svg height="${box.height}" width="${box.width}">${svg.value.innerHTML}</svg>`)) |
|
||||
}) |
|
||||
var adsMesh=new THREE.Mesh(adsGeometry,adsMaterial) |
|
||||
adsMesh.name=labelName.text |
|
||||
names.push(adsMesh) |
|
||||
adsMesh.renderOrder=7 |
|
||||
adsMesh.position.set(115*(-center[0]+label[0]+points[3]+offset +0.1*(points[3]>0?1:-1)), label[1]+points[4], 115*(-center[1]+label[2]+points[5])) |
|
||||
adsMesh.rotation.x=camera.rotation.x |
|
||||
scene.add(adsMesh) |
|
||||
|
|
||||
time_line.to(adsMaterial,{opacity:1, duration:1}) |
|
||||
time_line.to(adsMesh.position,{x:115*(-center[0]+label[0]+points[3]+offset), duration:2},'-=2') |
|
||||
|
|
||||
resolve() |
|
||||
}) |
|
||||
}) |
|
||||
} |
|
||||
function addPoint(val){ |
|
||||
var point=new Point({lng:-center[0]+val.lng,lat:-center[1]+val.lat}, popover, val) |
|
||||
scene.add(point) |
|
||||
items.list.push(point) |
|
||||
var option={scale:0} |
|
||||
time_line.to(option,{scale:1, duration:0.5,ease:"", onUpdate(){ |
|
||||
point.mesh.scale.set(option.scale, option.scale, option.scale) |
|
||||
}}) |
|
||||
} |
|
||||
|
|
||||
function render(){ |
|
||||
renderer.render(scene, camera); |
|
||||
modalRenderer.render(scene, camera); |
|
||||
requestAnimationFrame(render) |
|
||||
} |
|
||||
function move({clientX, clientY}){ |
|
||||
raycaster.setFromCamera( |
|
||||
new THREE.Vector2( |
|
||||
clientX/window.innerWidth*2-1, |
|
||||
-clientY/window.innerHeight*2+1 |
|
||||
), |
|
||||
camera |
|
||||
) |
|
||||
const intersects=raycaster.intersectObjects(items.list.map(v=>v.mesh), false) |
|
||||
if(intersects.length>0){ |
|
||||
map.value.style.cursor="pointer" |
|
||||
if(items.select){ |
|
||||
if(items.select!=intersects[0].object){ |
|
||||
items.select.parent.out() |
|
||||
items.select=intersects[0].object |
|
||||
items.select.parent.hover() |
|
||||
} |
|
||||
}else{ |
|
||||
items.select=intersects[0].object |
|
||||
items.select.parent.hover() |
|
||||
} |
|
||||
}else{ |
|
||||
map.value.style.cursor="default" |
|
||||
if(items.select){ |
|
||||
items.select.parent.out() |
|
||||
items.select=null |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
function showPopover(){ |
|
||||
if(items.show!=items.select){ |
|
||||
items.show?.parent?.hide?.() |
|
||||
items.show=items.select |
|
||||
items.show?.parent?.show?.() |
|
||||
setTimeout(()=>{ |
|
||||
modelData.value=items.show?.parent?.val |
|
||||
},1000) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
watch(year,async n=>{ |
|
||||
emit('update:year',n.format('yyyy')) |
|
||||
//获取企业数量、园区面积 |
|
||||
var res=await request("/api/industrial/centertop",{ |
|
||||
method:"post", |
|
||||
data:{date:n.format('yyyy'),region:""} |
|
||||
}) |
|
||||
if(res.statu){ |
|
||||
number.value=res.data |
|
||||
}else{ |
|
||||
msg.error(res.msg||"获取数量失败！") |
|
||||
} |
|
||||
//获取地图数据 |
|
||||
var res=await request("/api/industrial/centermap",{ |
|
||||
method:"post", |
|
||||
data:{ |
|
||||
date:n.format('yyyy'), |
|
||||
region:"", |
|
||||
} |
|
||||
}) |
|
||||
if(res.statu){ |
|
||||
for(var i of items.list){ |
|
||||
i.dispose() |
|
||||
} |
|
||||
items.list=[] |
|
||||
for(var i of res.data){ |
|
||||
var [lng,lat]=(i.lnglat||'').split(',').filter(v=>v).map(v=>parseFloat(v)) |
|
||||
addPoint({...i,lng,lat}) |
|
||||
} |
|
||||
}else{ |
|
||||
msg.error(res.msg||"获取地图数据失败！") |
|
||||
} |
|
||||
}) |
|
||||
nextTick(()=>{ |
|
||||
year.value=new Date() |
|
||||
}) |
|
||||
|
|
||||
onMounted(async ()=>{ |
|
||||
nextTick(async()=>{ |
|
||||
init() |
|
||||
addMap() |
|
||||
render() |
|
||||
|
|
||||
await addLabel() |
|
||||
await addBG1() |
|
||||
await addBG2() |
|
||||
await addBG3() |
|
||||
await addBG4() |
|
||||
await addBG5() |
|
||||
|
|
||||
setTimeout(()=>{ |
|
||||
time_line.play() |
|
||||
},1000) |
|
||||
}) |
|
||||
}) |
|
||||
</script> |
|
||||
@ -1,43 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.left,.right{ |
|
||||
width:586px; |
|
||||
display:flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: space-evenly; |
|
||||
position:relative; |
|
||||
z-index: 20; |
|
||||
} |
|
||||
.left{ |
|
||||
flex-shrink: 0; |
|
||||
margin-left:20px; |
|
||||
} |
|
||||
.right{ |
|
||||
flex-shrink: 0; |
|
||||
margin-right:20px; |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<div class="left"> |
|
||||
<left1 :year="year"/> |
|
||||
<left2 :year="year"/> |
|
||||
<left3 :year="year"/> |
|
||||
</div> |
|
||||
<center v-model:year="year"/> |
|
||||
<div class="right"> |
|
||||
<right1 :year="year"/> |
|
||||
<right2 :year="year"/> |
|
||||
<right3 :year="year"/> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import left1 from './left_1.vue' |
|
||||
import left2 from './left_2.vue' |
|
||||
import left3 from './left_3.vue' |
|
||||
import center from './center.vue' |
|
||||
import right1 from './right_1.vue' |
|
||||
import right2 from './right_2.vue' |
|
||||
import right3 from './right_3.vue' |
|
||||
import { ref } from 'vue' |
|
||||
|
|
||||
var year=ref('') |
|
||||
</script> |
|
||||
File diff suppressed because one or more lines are too long
@ -1,145 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.left_2{ |
|
||||
&>.content{ |
|
||||
display:flex; |
|
||||
.echarts{ |
|
||||
flex-shrink: 0; |
|
||||
margin-right:40px; |
|
||||
width:140px; |
|
||||
height:129px+28; |
|
||||
position:relative; |
|
||||
pointer-events:all; |
|
||||
&:before{ |
|
||||
content:""; |
|
||||
position:absolute; |
|
||||
top:32px; |
|
||||
left:12px; |
|
||||
width:117px; |
|
||||
height:117px; |
|
||||
background-image: url(@/assets/img/echarts_bg.png); |
|
||||
background-repeat: no-repeat; |
|
||||
background-position: center; |
|
||||
animation: BGrotate 6s linear infinite; |
|
||||
} |
|
||||
} |
|
||||
.area{ |
|
||||
flex-grow: 1; |
|
||||
.title{ |
|
||||
color:#fff; |
|
||||
font-size:18px; |
|
||||
font-weight: bold; |
|
||||
margin-bottom:20px; |
|
||||
} |
|
||||
.items{ |
|
||||
display:flex; |
|
||||
justify-content: space-between; |
|
||||
flex-wrap: wrap; |
|
||||
margin-bottom:-16px; |
|
||||
&>div{ |
|
||||
margin-bottom:16px; |
|
||||
display:flex; |
|
||||
align-items: center; |
|
||||
width:40%; |
|
||||
font-size:16px; |
|
||||
&:before{ |
|
||||
content:""; |
|
||||
width:17px; |
|
||||
height:17px; |
|
||||
border:1px solid var(--c); |
|
||||
background-image:linear-gradient(var(--c),var(--c)); |
|
||||
background-size:8px 8px; |
|
||||
background-repeat: no-repeat; |
|
||||
background-position: center; |
|
||||
margin-right:6px; |
|
||||
} |
|
||||
.name{ |
|
||||
color:#99A4AE; |
|
||||
margin-left:8px; |
|
||||
} |
|
||||
.value{ |
|
||||
color:#fff; |
|
||||
font-weight: bold; |
|
||||
margin-left:auto; |
|
||||
&:after{ |
|
||||
content:"亩"; |
|
||||
color:#99A4AE; |
|
||||
font-weight: normal; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<div class="left_2"> |
|
||||
<dTitle title="种植概况" icon="2"/> |
|
||||
<div class="content"> |
|
||||
<v-echarts :option="opt"/> |
|
||||
<div class="area"> |
|
||||
<div class="title">种植面积</div> |
|
||||
<div class="items"> |
|
||||
<div v-for="(v,k) in list" :key="k" :style="{'--c':colors[k%colors.length]}"> |
|
||||
<span class="name over">{{v.name}}</span> <span class="value">{{v.value}}</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import request from '@/config/request' |
|
||||
import { computed, inject, onMounted, shallowRef, watch } from 'vue' |
|
||||
import dTitle from '../title.vue' |
|
||||
|
|
||||
var props=defineProps({ |
|
||||
year:{ |
|
||||
type:String, |
|
||||
default:"" |
|
||||
} |
|
||||
}) |
|
||||
var msg=inject("msg") |
|
||||
|
|
||||
var colors=['#029DFD','#00E7F7','#F66E97','#10CC40','#F19149','#FFF100'] |
|
||||
var list=shallowRef([]) |
|
||||
var opt=computed(()=>({ |
|
||||
tooltip:{ |
|
||||
position:'right' |
|
||||
}, |
|
||||
color:colors, |
|
||||
title:{ |
|
||||
text:"种植情况", |
|
||||
textStyle:{ |
|
||||
color:"#fff", |
|
||||
fontSize:16, |
|
||||
fontWeight:700, |
|
||||
}, |
|
||||
}, |
|
||||
series: [ |
|
||||
{ |
|
||||
type: "pie", |
|
||||
center:['50%',90], |
|
||||
radius:[56,62], |
|
||||
label:{show:false}, |
|
||||
data: list.value, |
|
||||
} |
|
||||
] |
|
||||
})) |
|
||||
|
|
||||
watch(()=>props.year, async n=>{ |
|
||||
var res=await request("/api/industrial/leftcenter",{ |
|
||||
method:"post", |
|
||||
data:{date:n,region:""} |
|
||||
}) |
|
||||
if(res.statu){ |
|
||||
list.value=res.data.map(v=>({name: v.plantName,value: v.plantArea})) |
|
||||
}else{ |
|
||||
msg.error(res.msg||"获取种植概况失败！") |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
onMounted(async ()=>{ |
|
||||
|
|
||||
}) |
|
||||
</script> |
|
||||
@ -1,69 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.left_3{ |
|
||||
.dv-scroll-board{ |
|
||||
pointer-events:all; |
|
||||
&:deep>.header{ |
|
||||
background:rgba(12, 44, 78, 0.7)!important; |
|
||||
box-shadow: inset 0 0 10px 2px rgba(12, 137, 254, 0.5); |
|
||||
} |
|
||||
&:deep>.rows{ |
|
||||
color:#A2B4C5; |
|
||||
.even{ |
|
||||
background:transparent!important; |
|
||||
.ceil:nth-child(3){ |
|
||||
color:#0C81EF; |
|
||||
} |
|
||||
} |
|
||||
.odd{ |
|
||||
background: rgba(2, 157, 253, 0.1)!important; |
|
||||
.ceil:nth-child(3){ |
|
||||
color:#00E7F7; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<div class="left_3"> |
|
||||
<dTitle title="病虫害情况" icon="9"/> |
|
||||
<dvScrollBoard ref="scrollBoard" :config="config" style="height:246px"/> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import request from '@/config/request' |
|
||||
import { inject, onMounted, reactive, ref, shallowRef, watch } from 'vue' |
|
||||
import dTitle from '../title.vue' |
|
||||
|
|
||||
var props=defineProps({ |
|
||||
year:{ |
|
||||
type:String, |
|
||||
default:"" |
|
||||
} |
|
||||
}) |
|
||||
var msg=inject('msg') |
|
||||
|
|
||||
var config=reactive({ |
|
||||
header:['类型','品种','病虫害类型','发生次数','病虫名称'], |
|
||||
data:[], |
|
||||
rowNum:5, |
|
||||
align:['center','center','center'], |
|
||||
}) |
|
||||
var scrollBoard=ref() |
|
||||
|
|
||||
watch(()=>props.year, async n=>{ |
|
||||
var res=await request("/api/industrial/leftbelow",{ |
|
||||
method:"post", |
|
||||
data:{date: n,region:""} |
|
||||
}) |
|
||||
if(res.statu){ |
|
||||
scrollBoard.value.updateRows(res.data.map(v=>[v.plantType,v.plantName,v.pestType,v.pestNum,v.pestName])) |
|
||||
}else{ |
|
||||
msg.error(res.msg||"获取病虫害情况失败！") |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
onMounted(async ()=>{ |
|
||||
|
|
||||
}) |
|
||||
</script> |
|
||||
@ -1,91 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.right_1{ |
|
||||
.dv-scroll-board{ |
|
||||
margin-top:8px; |
|
||||
&:deep>.header{ |
|
||||
background:rgba(8, 34, 56, 0.7)!important; |
|
||||
color:#C0DBF7; |
|
||||
font-size:18px; |
|
||||
} |
|
||||
&:deep>.rows{ |
|
||||
.row-item{ |
|
||||
background:transparent!important; |
|
||||
color:#99A4AE; |
|
||||
.ceil:last-child{ |
|
||||
color:#C0DBF7; |
|
||||
.up{ |
|
||||
color:#fd2100; |
|
||||
} |
|
||||
.down{ |
|
||||
color:#10cc40; |
|
||||
display:inline-block; |
|
||||
transform: rotateX(180deg); |
|
||||
} |
|
||||
} |
|
||||
&:first-child>.ceil:first-child{ |
|
||||
color:#10CC40; |
|
||||
} |
|
||||
&:nth-child(2)>.ceil:first-child{ |
|
||||
color:#00E4FF; |
|
||||
} |
|
||||
&:nth-child(3)>.ceil:first-child{ |
|
||||
color:#0099FF; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<div class="right_1"> |
|
||||
<dTitle title="价格行情" icon="10"> |
|
||||
<span style="color:#00E4FF;font-size:18px;">单位统一为： 10元/kg</span> |
|
||||
</dTitle> |
|
||||
<swiper-btn :list="btns" v-model="btnIndex"/> |
|
||||
<dvScrollBoard ref="scrollBoard" :config="config" style="height:150px;"/> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import request from '@/config/request' |
|
||||
import { inject, onMounted, reactive, shallowRef, watch, ref } from 'vue' |
|
||||
import dTitle from '../title.vue' |
|
||||
|
|
||||
var props=defineProps({ |
|
||||
year:{ |
|
||||
type:String, |
|
||||
default:"", |
|
||||
} |
|
||||
}) |
|
||||
var msg=inject("msg") |
|
||||
|
|
||||
var btns=shallowRef([]) |
|
||||
var btnIndex=ref("") |
|
||||
var config=reactive({ |
|
||||
header:['地区','最低价','最高价','均价','较上一日涨幅'], |
|
||||
data:[ |
|
||||
['本地','2.32','2.32','2.32','0.25%<span class="plantBS-shangsheng up"/>'], |
|
||||
['本地','2.32','2.32','2.32','0.25%<span class="plantBS-shangsheng up"/>'], |
|
||||
['本地','2.32','2.32','2.32','0.25%<span class="plantBS-shangsheng down"/>'], |
|
||||
], |
|
||||
rowNum:3, |
|
||||
align:['center','center','center','center','center'], |
|
||||
columnWidth:[110,110,110,110,117+28], |
|
||||
}) |
|
||||
|
|
||||
watch(()=>props.year, async n=>{ |
|
||||
var res=await request("/api/industrial/plantGoods",{ |
|
||||
method:"post", |
|
||||
data:{ |
|
||||
date: n, |
|
||||
region:"", |
|
||||
} |
|
||||
}) |
|
||||
if(res.statu){ |
|
||||
btns.value=res.data.map(v=>({label:v.plantName, value:v.plantName})) |
|
||||
btnIndex.value=btns.value[0].value |
|
||||
}else{ |
|
||||
msg.error(res.msg||"获取品种失败！") |
|
||||
} |
|
||||
}) |
|
||||
watch() |
|
||||
</script> |
|
||||
@ -1,234 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.right_2{ |
|
||||
.number{ |
|
||||
display:flex; |
|
||||
align-items: center; |
|
||||
table{ |
|
||||
width:100%; |
|
||||
tr{ |
|
||||
td{ |
|
||||
color:#C0DBF7; |
|
||||
font-size:16px; |
|
||||
span{ |
|
||||
&:not([class*=plantBS-]){ |
|
||||
color:#fff; |
|
||||
font-weight: bold; |
|
||||
&:before{ |
|
||||
content:attr(data-b); |
|
||||
color:#99A4AE; |
|
||||
font-weight: normal; |
|
||||
} |
|
||||
&:after{ |
|
||||
content:attr(data-f); |
|
||||
color:#99A4AE; |
|
||||
font-weight: normal; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
&.up span{ |
|
||||
&[data-b]{ |
|
||||
&:before{ |
|
||||
content:"+", |
|
||||
} |
|
||||
} |
|
||||
&.plantBS-shangsheng{ |
|
||||
color:#F02000; |
|
||||
} |
|
||||
} |
|
||||
&.down span.plantBS-shangsheng{ |
|
||||
color:#10CC40; |
|
||||
display: inline-block; |
|
||||
transform: rotateX(180deg); |
|
||||
} |
|
||||
} |
|
||||
&:not(:first-child){ |
|
||||
td{ |
|
||||
padding-top:10px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<div class="right_2"> |
|
||||
<dTitle title="产量预估" icon="5"/> |
|
||||
<v-echarts :option="opt" ref="bar" style="height:194px;pointer-events:all;" @click='prodIndex=$event.dataIndex' autoresize/> |
|
||||
<div class="number" v-if="prod"> |
|
||||
<sub-title :name="prod.name"/> |
|
||||
<table> |
|
||||
<tr> |
|
||||
<td>{{new Date().format('yyyy')}}年：<span data-f="kg">{{prod.output}}</span></td> |
|
||||
<td><span data-b="实际产量: " data-f="kg">{{prod.last}}</span></td> |
|
||||
<td :class="prod.tb>0?'up':'down'"><span data-b="较上年涨幅："/>{{prod.tb}}%<span class="plantBS-shangsheng"/></td> |
|
||||
</tr> |
|
||||
</table> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import request from '@/config/request' |
|
||||
import { computed, inject, onMounted, ref, shallowRef, watch } from 'vue' |
|
||||
import dTitle from '../title.vue' |
|
||||
import subTitle from './title.vue' |
|
||||
|
|
||||
var props=defineProps({ |
|
||||
year:{ |
|
||||
type:String, |
|
||||
default:"" |
|
||||
} |
|
||||
}) |
|
||||
var event=inject("event") |
|
||||
var msg=inject("msg") |
|
||||
|
|
||||
var list=shallowRef([]) |
|
||||
var prodIndex=ref(0) |
|
||||
var prod = computed(()=>{ |
|
||||
var val=list.value[prodIndex.value] |
|
||||
if(val){ |
|
||||
return{ |
|
||||
name:val.plantName, |
|
||||
output:val.output, |
|
||||
last:val.realityPut, |
|
||||
tb: val.output==0?0:Math.round((val.realityPut-val.output)/val.output*1000)/100 |
|
||||
} |
|
||||
} |
|
||||
return false |
|
||||
}) |
|
||||
|
|
||||
var bar=ref() |
|
||||
var max=5 |
|
||||
var opt=computed(()=>({ |
|
||||
title:{ |
|
||||
text:"单位/kg", |
|
||||
right:2, |
|
||||
|
|
||||
textStyle:{ |
|
||||
color:"#99A4AE", |
|
||||
fontSize:16, |
|
||||
} |
|
||||
}, |
|
||||
tooltip:{ |
|
||||
trigger:"axis", |
|
||||
axisPointer:{ |
|
||||
type:"cross" |
|
||||
} |
|
||||
}, |
|
||||
grid:{ |
|
||||
left: 10, |
|
||||
right: 10, |
|
||||
bottom: 10, |
|
||||
top:35, |
|
||||
containLabel: true |
|
||||
}, |
|
||||
dataZoom:{ |
|
||||
type:"inside", |
|
||||
startValue:0, |
|
||||
endValue:max, |
|
||||
zoomOnMouseWheel:false, |
|
||||
moveOnMouseMove:true, |
|
||||
moveOnMouseWheel:true, |
|
||||
}, |
|
||||
xAxis: { |
|
||||
type: 'category', |
|
||||
axisLine:{show:false}, |
|
||||
axisTick:{show:false}, |
|
||||
axisLabel:{ |
|
||||
color:"#99A4AE", |
|
||||
fontSize:16, |
|
||||
interval:0, |
|
||||
}, |
|
||||
data: list.value.map(v=>v.plantName) |
|
||||
}, |
|
||||
yAxis: { |
|
||||
type: 'value', |
|
||||
axisLabel:{ |
|
||||
color:"#99A4AE", |
|
||||
fontSize:16, |
|
||||
}, |
|
||||
splitLine:{lineStyle:{ |
|
||||
type:"dashed", |
|
||||
color:"#0B1A3D", |
|
||||
}} |
|
||||
}, |
|
||||
series: [ |
|
||||
{ |
|
||||
data: list.value.map(v=>v.output), |
|
||||
type: 'bar', |
|
||||
showBackground: true, |
|
||||
barWidth:20, |
|
||||
itemStyle:{ |
|
||||
opacity:0.45, |
|
||||
color:{ |
|
||||
type: 'linear', |
|
||||
x: 0, y: 0, x2: 1, y2: 0, |
|
||||
colorStops: [ |
|
||||
{offset: 0, color: 'rgba(12, 137, 254, 1)'}, |
|
||||
{offset: 0.5, color: 'rgba(12, 137, 254, 0.35)'}, |
|
||||
{offset: 1, color: 'rgba(12, 137, 254, 1)'} |
|
||||
], |
|
||||
global: false |
|
||||
} |
|
||||
}, |
|
||||
label:{ |
|
||||
show:true, |
|
||||
position:"top", |
|
||||
color:"#fff", |
|
||||
align:"center", |
|
||||
distance:2, |
|
||||
opacity:1, |
|
||||
formatter(e){ |
|
||||
return `{a|${e.value}}\n{b|}` |
|
||||
}, |
|
||||
rich:{ |
|
||||
b:{ |
|
||||
width:20, |
|
||||
height:4, |
|
||||
backgroundColor:"#0C89FE" |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
backgroundStyle: { |
|
||||
color: 'rgba(12, 137, 254, 0.15)' |
|
||||
} |
|
||||
} |
|
||||
] |
|
||||
})) |
|
||||
var isEnter=ref(false) |
|
||||
|
|
||||
event.on("updateData",()=>{ |
|
||||
if(list.value.length>max && !isEnter.value && bar.value){ |
|
||||
var start=bar.value.getOption().dataZoom[0].startValue+1 |
|
||||
if(start+max+1>list.value.length){ |
|
||||
bar.value.dispatchAction({ |
|
||||
type:"dataZoom", |
|
||||
startValue:0, |
|
||||
endValue:max, |
|
||||
}) |
|
||||
}else{ |
|
||||
bar.value.dispatchAction({ |
|
||||
type:"dataZoom", |
|
||||
startValue:start, |
|
||||
endValue:max+start, |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
watch(()=>props.year, async n=>{ |
|
||||
var res=await request("/api/industrial/rightcenter",{ |
|
||||
method:"post", |
|
||||
data:{date:n,region:""} |
|
||||
}) |
|
||||
if(res.statu){ |
|
||||
list.value=res.data |
|
||||
}else{ |
|
||||
msg.error(res.msg||"获取失败！") |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
onMounted(async()=>{ |
|
||||
|
|
||||
}) |
|
||||
</script> |
|
||||
@ -1,108 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.right_3{ |
|
||||
.d-title{ |
|
||||
.right{ |
|
||||
span{ |
|
||||
display:inline-flex; |
|
||||
align-items: center; |
|
||||
color:#fff; |
|
||||
font-size:16px; |
|
||||
&+span{ |
|
||||
margin-left:16px; |
|
||||
} |
|
||||
&:before{ |
|
||||
content:""; |
|
||||
width:18px; |
|
||||
height:4px; |
|
||||
background:var(--c); |
|
||||
margin-right:6px; |
|
||||
} |
|
||||
&:after{ |
|
||||
content:"年"; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<div class="right_3"> |
|
||||
<dTitle title="产值预估" icon="11"> |
|
||||
<span style="--c:#0C81EF;">2021</span> |
|
||||
<span style="--c:#10CC40;">2022</span> |
|
||||
<span style="--c:#00E4FF;">2023</span> |
|
||||
</dTitle> |
|
||||
<v-echarts :option="opt" autoresize style="height:238px;pointer-events:all;"/> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import { computed } from 'vue' |
|
||||
import dTitle from '../title.vue' |
|
||||
|
|
||||
var opt=computed(()=>({ |
|
||||
title:{ |
|
||||
text:"单位/kg", |
|
||||
textStyle:{ |
|
||||
color:"#E2EFFA", |
|
||||
fontSize:16, |
|
||||
}, |
|
||||
right:5, |
|
||||
top:2, |
|
||||
}, |
|
||||
tooltip: { |
|
||||
trigger: 'axis', |
|
||||
axisPointer:{ |
|
||||
type:"cross" |
|
||||
} |
|
||||
}, |
|
||||
grid: { |
|
||||
left: 10, |
|
||||
right: 10, |
|
||||
bottom: 10, |
|
||||
top:35, |
|
||||
containLabel: true |
|
||||
}, |
|
||||
xAxis: { |
|
||||
type: 'category', |
|
||||
boundaryGap: false, |
|
||||
axisLine:{show:false}, |
|
||||
axisTick:{show:false}, |
|
||||
axisLabel:{ |
|
||||
color:"#E2EFFA", |
|
||||
fontSize:16, |
|
||||
}, |
|
||||
data: ['西蓝花', '大白菜', '四季豆', '黄瓜', '苤蓝', '韭菜', '土豆','柑橘','苹果','萝卜'] |
|
||||
}, |
|
||||
yAxis: { |
|
||||
type: 'value', |
|
||||
axisLabel:{ |
|
||||
color:"#E2EFFA", |
|
||||
fontSize:16, |
|
||||
}, |
|
||||
splitLine:{ |
|
||||
lineStyle:{ |
|
||||
color:"#4E7C98", |
|
||||
type:"dashed", |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
series: [ |
|
||||
{ |
|
||||
name: '预估产量', |
|
||||
type: 'line', |
|
||||
itemStyle:{color:"#0C81EF"}, |
|
||||
symbol:"path://M150.11839294433594,150.11839294433594C250.26559448242188,50.07360076904297,370.8927917480469,0,512,0c141.107177734375,0,261.734375,50.07360076904297,361.881591796875,150.11839294433594C973.9263916015625,250.26559448242188,1024,370.8927917480469,1024,512c0,141.2095947265625,-50.0736083984375,261.8367919921875,-150.118408203125,361.881591796875C773.734375,973.9263916015625,653.107177734375,1024,512,1024c-141.10720825195312,0,-261.7344055175781,-50.0736083984375,-361.88160705566406,-150.118408203125C50.07360076904297,773.8367919921875,0,653.2095947265625,0,512C0,370.8927917480469,50.07360076904297,250.26559448242188,150.11839294433594,150.11839294433594ZM512,41.88159942626953c-85.2991943359375,0,-164.14718627929688,20.889598846435547,-236.33920288085938,62.771202087402344C203.4687957763672,146.4320068359375,146.4320068359375,203.4687957763672,104.65280151367188,275.6607971191406C62.77119827270508,347.9552001953125,41.88159942626953,426.7008056640625,41.88159942626953,512c0,129.638427734375,45.97760009765625,240.4351806640625,137.83040618896484,332.28802490234375C271.5647888183594,936.2432250976562,382.3616027832031,982.118408203125,512,982.118408203125c129.638427734375,0,240.4351806640625,-45.87518310546875,332.28802490234375,-137.83038330078125C936.2432250976562,752.4351806640625,982.118408203125,641.638427734375,982.118408203125,512c0,-129.63839721679688,-45.97760009765625,-240.33279418945312,-137.83038330078125,-332.2879943847656C752.4351806640625,87.75679779052734,641.638427734375,41.88159942626953,512,41.88159942626953ZM512,256c-36.147186279296875,0,-70.14401245117188,7.06561279296875,-102.1951904296875,20.88958740234375C377.8559875488281,290.91839599609375,349.4912109375,309.35040283203125,324.9151916503906,332.2879943847656c-22.937591552734375,24.576019287109375,-41.47198486328125,52.9407958984375,-55.39837646484375,84.88961791992188S248.627197265625,483.3280029296875,248.627197265625,519.372802734375c0,36.147216796875,6.96319580078125,70.14398193359375,20.889617919921875,102.1951904296875s32.460784912109375,60.3135986328125,55.39837646484375,84.88958740234375C349.4912109375,729.4976196289062,377.8559875488281,747.9296264648438,409.8048095703125,761.8560180664062C441.8559875488281,775.7824096679688,475.8528137207031,782.74560546875,512,782.74560546875c36.147216796875,0,70.14398193359375,-6.96319580078125,102.1951904296875,-20.88958740234375C646.1439819335938,747.9296264648438,674.5087890625,729.4976196289062,699.0847778320312,706.4575805664062c22.9376220703125,-24.57598876953125,41.4720458984375,-52.9407958984375,55.3984375,-84.88958740234375s20.88958740234375,-66.0479736328125,20.88958740234375,-102.1951904296875c0,-36.0447998046875,-6.96319580078125,-70.14401245117188,-20.88958740234375,-102.1951904296875S722.0223999023438,356.9664001464844,699.0847778320312,332.2879943847656C674.5087890625,309.35040283203125,646.1439819335938,290.91839599609375,614.1951904296875,276.88958740234375C582.1439819335938,263.06561279296875,548.147216796875,256,512,256Z", |
|
||||
symbolSize:13, |
|
||||
data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134] |
|
||||
}, |
|
||||
{ |
|
||||
name: '实际产量', |
|
||||
type: 'line', |
|
||||
itemStyle:{color:"#10CC40"}, |
|
||||
symbol:"path://M150.11839294433594,150.11839294433594C250.26559448242188,50.07360076904297,370.8927917480469,0,512,0c141.107177734375,0,261.734375,50.07360076904297,361.881591796875,150.11839294433594C973.9263916015625,250.26559448242188,1024,370.8927917480469,1024,512c0,141.2095947265625,-50.0736083984375,261.8367919921875,-150.118408203125,361.881591796875C773.734375,973.9263916015625,653.107177734375,1024,512,1024c-141.10720825195312,0,-261.7344055175781,-50.0736083984375,-361.88160705566406,-150.118408203125C50.07360076904297,773.8367919921875,0,653.2095947265625,0,512C0,370.8927917480469,50.07360076904297,250.26559448242188,150.11839294433594,150.11839294433594ZM512,41.88159942626953c-85.2991943359375,0,-164.14718627929688,20.889598846435547,-236.33920288085938,62.771202087402344C203.4687957763672,146.4320068359375,146.4320068359375,203.4687957763672,104.65280151367188,275.6607971191406C62.77119827270508,347.9552001953125,41.88159942626953,426.7008056640625,41.88159942626953,512c0,129.638427734375,45.97760009765625,240.4351806640625,137.83040618896484,332.28802490234375C271.5647888183594,936.2432250976562,382.3616027832031,982.118408203125,512,982.118408203125c129.638427734375,0,240.4351806640625,-45.87518310546875,332.28802490234375,-137.83038330078125C936.2432250976562,752.4351806640625,982.118408203125,641.638427734375,982.118408203125,512c0,-129.63839721679688,-45.97760009765625,-240.33279418945312,-137.83038330078125,-332.2879943847656C752.4351806640625,87.75679779052734,641.638427734375,41.88159942626953,512,41.88159942626953ZM512,256c-36.147186279296875,0,-70.14401245117188,7.06561279296875,-102.1951904296875,20.88958740234375C377.8559875488281,290.91839599609375,349.4912109375,309.35040283203125,324.9151916503906,332.2879943847656c-22.937591552734375,24.576019287109375,-41.47198486328125,52.9407958984375,-55.39837646484375,84.88961791992188S248.627197265625,483.3280029296875,248.627197265625,519.372802734375c0,36.147216796875,6.96319580078125,70.14398193359375,20.889617919921875,102.1951904296875s32.460784912109375,60.3135986328125,55.39837646484375,84.88958740234375C349.4912109375,729.4976196289062,377.8559875488281,747.9296264648438,409.8048095703125,761.8560180664062C441.8559875488281,775.7824096679688,475.8528137207031,782.74560546875,512,782.74560546875c36.147216796875,0,70.14398193359375,-6.96319580078125,102.1951904296875,-20.88958740234375C646.1439819335938,747.9296264648438,674.5087890625,729.4976196289062,699.0847778320312,706.4575805664062c22.9376220703125,-24.57598876953125,41.4720458984375,-52.9407958984375,55.3984375,-84.88958740234375s20.88958740234375,-66.0479736328125,20.88958740234375,-102.1951904296875c0,-36.0447998046875,-6.96319580078125,-70.14401245117188,-20.88958740234375,-102.1951904296875S722.0223999023438,356.9664001464844,699.0847778320312,332.2879943847656C674.5087890625,309.35040283203125,646.1439819335938,290.91839599609375,614.1951904296875,276.88958740234375C582.1439819335938,263.06561279296875,548.147216796875,256,512,256Z", |
|
||||
symbolSize:13, |
|
||||
data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 29] |
|
||||
}, |
|
||||
] |
|
||||
})) |
|
||||
</script> |
|
||||
@ -1,102 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.title{ |
|
||||
flex-shrink: 0; |
|
||||
padding:0 5px; |
|
||||
margin-right:18px; |
|
||||
min-width:75px; |
|
||||
height:40px; |
|
||||
line-height: 40px; |
|
||||
text-align: center; |
|
||||
position:relative; |
|
||||
&:before{ |
|
||||
content: ""; |
|
||||
position:absolute; |
|
||||
width:58px; |
|
||||
height:17px; |
|
||||
background-image:url(data:image/png;base64,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); |
|
||||
bottom:-6px; |
|
||||
animation:move 5s infinite linear; |
|
||||
} |
|
||||
&:after{ |
|
||||
content: ""; |
|
||||
position:absolute; |
|
||||
width:58px; |
|
||||
height:17px; |
|
||||
background-image:url(data:image/png;base64,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); |
|
||||
top:-8px; |
|
||||
animation:move 5s infinite linear; |
|
||||
} |
|
||||
span{ |
|
||||
font-size:18px; |
|
||||
background-image:-webkit-linear-gradient(top, #fff,#429EFA); |
|
||||
-webkit-background-clip:text; |
|
||||
-webkit-text-fill-color:transparent; |
|
||||
} |
|
||||
svg{ |
|
||||
position:absolute; |
|
||||
top:0; |
|
||||
left:0; |
|
||||
height:100%; |
|
||||
width:100%; |
|
||||
} |
|
||||
} |
|
||||
@keyframes move { |
|
||||
0%{ |
|
||||
left:-10%; |
|
||||
opacity:0; |
|
||||
} |
|
||||
20%{ |
|
||||
opacity: 1; |
|
||||
} |
|
||||
80%{ |
|
||||
opacity: 1; |
|
||||
} |
|
||||
100%{ |
|
||||
opacity:0; |
|
||||
left:calc(100% - 50px) |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<div class="title" ref="frame"> |
|
||||
<span>{{name}}</span> |
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="76.5px" height="41.5px"> |
|
||||
<path |
|
||||
fill-rule="evenodd" |
|
||||
stroke="rgb(15, 150, 245)" |
|
||||
stroke-width="1px" |
|
||||
stroke-linecap="butt" |
|
||||
stroke-linejoin="miter" |
|
||||
fill="rgb(15, 150, 245)" |
|
||||
:d="`M1.958,9.167 c0,-3.864 0,-7.598 0,-7.598 c0,0 2.143,0 4.592,0 M${width-4.253},1.569 c2.68,0 4.253,0 4.253,0 c0,0 0,3.049 0,7.412 M${width},32.298 c0,4.745 0,7.022 0,7.022 c0,0 -1.186,0 -4.373,0 M6.43,39.32 c-2.813,0 -4.472,0 -4.472,0 c0,0 0,-2.953 0,-7.207`"/> |
|
||||
<path |
|
||||
fill-rule="evenodd" |
|
||||
stroke-width="1px" |
|
||||
stroke="rgb(8, 153, 253)" |
|
||||
stroke-linecap="butt" |
|
||||
stroke-linejoin="miter" |
|
||||
fill-opacity="0.078" |
|
||||
fill="rgb(8, 153, 253)" |
|
||||
:d="`M2.317,15.408 c0,-7.288 0,-13.365 0,-13.365 l${width-3},0 c0,0 0,5.972 0,13.175 M${width-0.3},25.644 c0,8.099 0,14.313 0,14.313 l${-width+2.6},0 c0,0 0,-6.214 0,-14.313`"/> |
|
||||
</svg> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import { onMounted, ref, watch } from "vue" |
|
||||
|
|
||||
var props=defineProps({ |
|
||||
name:{ |
|
||||
type:String, |
|
||||
default:"" |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
var frame=ref() |
|
||||
var width=ref(0) |
|
||||
watch(()=>props.name,n=>{ |
|
||||
width.value=frame.value.clientWidth |
|
||||
}) |
|
||||
onMounted(()=>{ |
|
||||
width.value=frame.value.clientWidth |
|
||||
}) |
|
||||
</script> |
|
||||
File diff suppressed because one or more lines are too long
@ -1,81 +0,0 @@ |
|||||
<style lang="less" scoped> |
|
||||
.d-title{ |
|
||||
height:63px; |
|
||||
background-image:url(@/assets/img/frame_title_bg.png); |
|
||||
display:flex; |
|
||||
align-items: center; |
|
||||
padding-bottom:25px; |
|
||||
position:relative; |
|
||||
--t:v-bind(time); |
|
||||
&:before{ |
|
||||
content:""; |
|
||||
width:152px; |
|
||||
height:29px; |
|
||||
background-image:url(@/assets/img/line.png); |
|
||||
position:absolute; |
|
||||
top:26px; |
|
||||
animation: move var(--t) linear infinite; |
|
||||
} |
|
||||
span{ |
|
||||
margin-left:12px; |
|
||||
background-image:-webkit-linear-gradient(top, #fff,#429EFA); |
|
||||
-webkit-background-clip:text; |
|
||||
-webkit-text-fill-color:transparent; |
|
||||
font-weight: bold; |
|
||||
font-size:28px; |
|
||||
} |
|
||||
.right{ |
|
||||
margin-left:auto; |
|
||||
} |
|
||||
} |
|
||||
@keyframes move { |
|
||||
0%{ |
|
||||
left:-40px; |
|
||||
opacity: 0; |
|
||||
} |
|
||||
10%{ |
|
||||
opacity: 1; |
|
||||
} |
|
||||
90%{ |
|
||||
opacity: 1; |
|
||||
} |
|
||||
100%{ |
|
||||
left:480px; |
|
||||
opacity: 0; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<template> |
|
||||
<div class="d-title"> |
|
||||
<img v-if="props.icon==1" src="data:image/png;base64,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"/> |
|
||||
<img v-else-if="props.icon==2" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH5wQHDi0jJxEZdAAAAqtJREFUSMe11t2LFWUcB/DPrrOtqRjklrBliWCmmJVXJiFUKlGyiil64T9Q4I3ay5UgBEnI2kVpKxKEWGSQdCcR3dib2EWipoIvC6WGiguF2rpn5njxPMc9Mzvrnj0nvzDMzPM883zn+3v5zrStO5R140O8ggRVraEN7fgD7+EXZLXJJKvqxboWScrwIj7BapyvJ1x2H8hqeBaP5wmzYbn3AVWFFCVZ1nLOxiLMIUnzQ5fwEwaFxDej5hkhlKVI0uwu423swbYWVS3HF5hWTpjm7mfgKQw1qRDmCu01msK71w9gAxYibZKwipl4qBFC6MTzTQezASSVtPVNxkWYtt6FNzGpcYV5wlv4Hf9iQt14BV1YgI44dhg7cFyoyEXowVLBTwl1MCFHWFelQ9iFrcoNvB17sR4n8QauxbX98UU/i6Qf4EmcxpW8wnznj+U6tflPcR1r8X7c9BscwFe4KjT//ng9MSqttM3rq1zBI3UhPYob8m2RxpA+J7TPy/gVX+P1unUn8FYMN0zFCryGJ3Ck2PgPYsnYqfdfzNPkwvh8fIxV+Ad9MfQ1zC4WTaOYInxUr5XMLYgquwtkUCkqbBSz8QN+w5qS+Y3K7W2gqHBQqKzUcGkTiqVT8NkOrBQq+ltsNlwDNXSO8qKH6hv/Nr4U/m+K5p0J+d2OV/ESFuNnvI1ePDxGVPqxu+g0/Th1j4cux3MHdkalnwst0oM58Xi08Nw5vIkLbdO2D9W3xUX8OIrCSUIFd9WNf4d3cCzez8KWuPmfUcBJ7IvRGOGljxnfH9xyob8OCi5zFgNx7qM4/rfQ3wJhNVcczeBpbMJfkbBm5Jdwobg4ybJxf2jLkCmYtGBnI5CkmTN44X8grRbOHWWLkmrVu4IZT6epf9R2oW+nxvvvhbweK1t8B+ScwzA4PVeTAAAAAElFTkSuQmCC"/> |
|
||||
<img v-else-if="props.icon==3" src="data:img/png;base64,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"/> |
|
||||
<img v-else-if="props.icon==4" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAhCAYAAADOHBvaAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH5wQHDi0wo69YqgAAA25JREFUSMfF1lmoVlUUB/Dfdz33qje18hqkDxEk+JAVVObNDKJeCipowIImspG0CeslH6oXI2ighCAb6KEIKW1ANApCSlFuqTk0aGkmmg0+lBA5nbV7OPva9UO/KaQ/rIez91rrv9baa5+1azd8FDrA5XgMo/As3sX+dhx0pUSL0pWSGSkZSMmylJydkvEpeTMlG1NyR0pGtOqvKxJNpDuSGZEMRLIwktMjmRvJxCz3Zr1XI9kQyV2RjG7mtxHx8EhmRrI+E06I5IFMNi+SPZH8FcnLkZwZyY2RHIpkQSRrI5ndKICuCOqkN8KdETZEeC1/3x9hUoT5EfYexeZghJURNufviVl3XYQ5EfrqbWpXf3i4ucbgNjyC07AVT+Et7GvQJ5MxG7eg9xg6OzEfb+A3qF35fvRlwvtwBr7G01iIAw0Iz8tBXofuFpt5N17BgtoVi8vFuCZvzMPcJsb9eBDXo2jnCg3BQFGGCSgxLJesFy/h+yGKNVyFRzG9Q7JBlOjritAT4YcI0yJ8GuGhCFtyY02OcG2EFRE+iDD9KI3VqiyNcFmERRFGFmVYgklYlUt+YS7lTNyes+0UCUvxAj7JazehqyjDduwYorwqyzNYhnEdEAbeyYSr6va6oChDMfhRhy+xB7uwArdidBPC/XgPLx6F8AgU5bFnxDBVo21UNd1zmIObVXd+KPbhbTyf9ZuiONR4OI0ckuU2zFJNo1lZCryu+jm0RNhKxmUu24a69W0586kYj7vbIVQda09RlqmR0j0N9g7gYJuk8DfWNMq4GWo6u2rL8c1/Ie4UB9DdrLmOB2o0bq7jiv+RuOzcVudj8XDGneS9BH2qM0tt2AUUkQ7/Gk/En204+BF72wx2JE5FrSjDVlyKh7E6yx8tOOnW+pOnFxeoRu5YrC7KSB9jMy7CJXnzixzAnjYzqscYnK96Lp2M77AYW4qoTvenLJ/h4hxEPwZU4+33Dgj7cxKj8K3q8bh1UKGII9tip2q8Lce0bDwVa7ESvzQhHJttpuTybsLn2F6vOJhxPXZjUSabhnNzydbkCuxSdWfKMjbrTVWd+6ZcvR2OgdqIJ1saMONyJv2qu7sep2C4akyek9fX5WB/buaw1vNEW5NtnKo7p+CEnO0hfJVL2uwo/iXufryTkeoknIWeXNZf23XwDx/xBzkD6LKAAAAAAElFTkSuQmCC"/> |
|
||||
<img v-else-if="props.icon==5" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAcCAYAAAB2+A+pAAAAAXNSR0IArs4c6QAABZBJREFUSEu9lluMXHUdx7/f/zlzzgytLVnZSHxBTfHSqKSRhAChRhJTtt1Ou5rd4AOktTEymAAvCEkhqQoW1BiUhEUNkAhNsSCZFm13kcQLGEzaREJYccdeIg+WUtiWXnZn5n/5mnPO7O50u9ndB8J5mZz5n3M++X5/Vw7u99sNOSTqD6VgHt61nmfwEVwc3B9eFXAdiIMhcOiFDfzvR8AFv/HH0ABwJYgjjtywr4/ji4H79istWVxairAse9Z6nLclnD6wnq3F3p0+58CL4S0BnyfxHyNWf7+R/17o5cE9StoVrCPCNwH2ZM8SOhVgnk+mMPrcENtLgbO6N4wBWE2gIbC6b9PCiteNqCdthZ+CvBlCWoDRFrS7lZq7R2/ixJLAG+oFGEDDk9WRRcDVvfqEl54AsR7KmIVkCPsjctu+TTyxJPBNL/iOYjbkWB0ZWlhx3x71KtbjgDYBiDoQD3AvHW87MMSTSwJ//bkCDLLhAqt/XgLYww+L3NwNplSPENWWDL7xd7OKAxcH37BHvbE0TOgCsMC6I2uvZIp3yFy/BssqLZhMvVkJ99I6TALUTFavfdaPUVgtsOEdq3+/ZWGrMzCDhqk5YLIuw9rlwMQJb78MRmshfCxPAWGC3r70lyPpUexgyP+7/pmOYrKhsDRwsAVYnRgT8CLrpsSaA3xkw04IGwUkIEhhUsDu89b8+PWtPJ2Dr/mtHyM6isnqoUUUr3lSvUk8v9Vtx5opIY6hZymt7U4ygaPBc8vBrXwnB3/lKT9GZuXEBjyrh7YtbHUGjoyGMSfGAOs+FGA6vxvkV7vAAvQyFd06A17zRGF1FuMAVt9YAhiaHwyy1rSI09jvIvi1GXBe5xy1gVve/E5R5/zir+0YwVwxI7MoeNWT6i07P0xgTlaj3oyjWslOxhGTi8FBozLxLPgLj9sxZGCyEbypjt++sNUZOLZ+GMJmdpJLgAdRd6UCLF0MljTaiuItx6YVX/mYHaM6iq2tjt9VHsceRZ86iV6qmQJlJIL1wvuH72Br1S/Vy3h+sFxUs34yTpNkFy6yWqPWxluO3dWx+jOPdhRnyUW78eh76eEreuxVhhygeFnRi3kWkfnT0Xfxt1U9WBmYdS5spoqWKcJTqBsV4ChKdoEXxlhBowhd4CsembXaw/ZPMj2xQmF7ALZRuiT/MOBJjLQY3Z7dp2F+cMtEtdRPxuD8ig26wJ/8eVdyOdsvl06gHB4RdDOBeLYk9BqsHfK+0orK/jERA3MV+ziqucxqpM9AuPGCrAZGLKOt705bffnPZq32wfYnLp1wif8FiCEKpa5a/Ec7iQaTc2gpdb8CWO0GQ3oRan7Xx8ujOPjdEGbrmJCEl0No3nry+8uLBnLZTzqKlce4v2nSU6kPj4IanM7ajt2HgqKBkkHbyz1FsK/YAfIra/4HaJvfDvGyiPTPA7h2znj8q2z0rfe283gO7tnZLsoJajiEDWfi9PjHvbtTwvdAdGJMR4W6S0v3xDEcJt39EG8BlW8gEFugnsYl8Y/cxJk4LlceEjgwGyo2JT0Nnn3w1L09H+TgFQ+28wYi4K22XF/zvvLbK3fi0wx+bRBX5CVqMEXh4GlbehOroeWH8bkI/lqFkC97NOa8R/TauVUYx7/AS439kmJcrYBKPhaNORu8e/WMT4/MTKflD2QxzlqmjkG8zfjwNiP5NlUsbVb5DFVcKZUMKtlJRDXbpbSFqanCzUoFiW2lXiwzSmQDpuim7IzVM+dpmWy7cz45zmU/bI8L/CyAcwBfIcIHgAkC2vkulVMDRVMyCnmyBcARpus8G7khMZ0qCDSWChY0nfez0RhSGBOHEJoA/sn0B/Z1AFd1EsR1fufkxYd6m02q/zHd4X4DqV9kOU/O6c3xQ2Vd8LEsdm/8H+HjFW64T7NFAAAAAElFTkSuQmCC"/> |
|
||||
<img v-else-if="props.icon==6" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH5wQHDjsZ/YV1EQAAAzZJREFUSMed1z+IHVUUBvDf7k50s6YwGANC/IOgRrRIiAEREbSwsFAkyDYGQlzT2ChiIYnBf0EQTAgqBBsNhCypRATxD8TYKGIhooWNYqEoaAyKmmSzbz6LN/t2dndm3tud4s2c737nfOeee2fueWPTH5Zb8Dy2YwLBGOZxBodwTu3K4GdwI7VnJhPP4oGwTmRhLPE9XijwCh7VfO3Ar+G1LqEVicRD4WAltIQTtmFTgTtq/ufRS6zDZAVO44/E+ECzK4kosasmdBFzlf/6xHi4sQipvP4J9+E3cXeYrWLtTLyzLOsmwUEyy2b5VHgfVyQ+wbWJskj6wqGH78IF8UOTUEPZ2vHqHn4SP1fYXIUpytJYxStwvzib/toOF2qa5UpsR+JvrA9TC+NFubgVNyTe68i8VbwV699faog3UZTxmbh1xLKNhrUkVeN8U5SlA/gl7BLbMky8pbwjcj4Xn4ZjRRlnEy/jz8Sbw4J2CJ1ObAzb2xIIz4nTQdErBwEuW2X2C5xLiT04mSjCt2JrEz+pvg3p7+ru9WlYyxonYW/iZGXPh/k6ry120Rsm3B6gTMyEEzWfw+H2kYWXlaN7w/TtecwkjtfGjiSeXO7TZq8QHiHbMpVoZY+FY2LfsFnW7bUIz4TjNfv1sK+rUk1xVlPqS2GvOFHjvZF4YtgStQu3kRaf5xJ7wmyN+xYeX+XeWCo8QrZfhdka70gq0RHfgBX4qMJXhSsTF3FoYfeu8p1vFT7fUbat4evEHG5ew9dtAf938XXqWRcewYND1uuGUQ6FIR+ix3BT4lTRKx0IB9d0+nSsrWbe7sRu3Fn0yiWN2UjCqz2fWVGVe4teabwy/gtP46/EbWH/qKVcMbZU9GjiS1weXhVXI0WvHPDmqm7yQmIn9qe7bJ0NQ2384/BBBR6ISrjMINi4uCb99nZTQ+ads+zAN+r301OYWNzVpYnKYUM4o3+mTtUcv0gcjX5DP/gv0i5UJqbxcAUfFi9iPGypHMaLsvRjuKXq9K9rKNtHODXk34MaTGxIJYzNic2WXueKXukZTIbr9Y84GEsGDf7bdZGmmS5JqD/+Lu7BXfr9emp5/Y79/wOueO+UlZzpxgAAAABJRU5ErkJggg=="/> |
|
||||
<img v-else-if="props.icon==7" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IArs4c6QAABQ9JREFUSEutlnmI1VUUx7/f+3ur88a9MLdUVChpAaXNP1wQLSGMymGwzESfkqGUqC1qPrUsl5wWNcxSQ5OYSssdjBRJkcisTLPMlMR9XN+M8+a9d+83fg5jo76Zp9n9995zPueee+73HOJ6lsS+y9CgZRvYE5VQocEASEMBWFD7nMwPFH5BFH9/3ovl9blkfZuPrFc4KrQwBh3l0IkO+yo8/FgADAGUABAjkBJQAeBXkWudxbcpg/0b+rMql++cwIGl8jKFaEOhN6QnSdwDwcqwJG2xNGJQLGkGgMa1nDoAFwDsgbgkG8Ha1X144mroNcCemxVpVIEelIYB6AXAI3BQ5C4Bnzhhp5F7luTrAJrkcOgccJLSZ/TMB6v6Yz9I1Zy7AtizVLFGUQyU0zgAbchLaVolYX06hWNlZ5Es7AyvMOniBKdC1wJrBZAEtNJaM3Pd49gHVEMvAx8sVbRpBIMoTZTQFOQKBywKHMfva0byYo0jPwMF5xCHUT6g77xc1AoaM23tozxyGei/WdKgHzzNhlMrGCywxszbNADHaiKrDYyecXEQU5UjpTkK5TRhZl/wsGDbACYv3bBvaWV7MbiQYHcHLGXIvLFpAI/mqrKeSxQJxFzc4LqBILHPORP/pgjb6Kcy7NwzhphBaG+G3qitRdxd13fxgSZafcNcRVOHXSXgFmYYmMHuK9TFo51PsAt9J5Xmoy1DmaoPqPCNAUWIwB+w7jl2X54dAnImxUMuwKe2F/NAfWLg3zAddnHqhm7oF9A5CSV8YJldBOAJOH2aSXmTdo7k+XzAlHFxGOSt0tp+RKQBbmK3pe47Qe0pTa4s8JbvKWI6HzBJNwLAVF6pNPlU2f+He3nvx/bApe/o7LCf4sEt+axaz1W0eRM3Ag6vXSVt+Ux9yhHetSh7UsB5wiveHefOfFZdEgqhte1HYJCRYvI7Rr3toVphJHmEKeOdC7OHBaZg7eDfRoV25AP6+61LFY0cR8y6CmPCBZd1MrdtORiOSVXlDNqYZef5dpegZgLG/nnK+woJZq8Her1n2i5QkxDRDpl0FRA6wA7vZ78A0QNOCyqqArNOjKff2/6X1fE9ha2xgymNEbijynjTeXuJHSujVyl87zxv+OHRuSXtv0TQ9k01QdTOBTAQ4hykzLts+XbmIdAsItVQFqOPlnurkaDfTG963TZHXY1xiwE1g7zBR8ZiCxvOVdMClx0v8HkB65xLvXhqQuz4zdIal6hxxGUnQxwJYWPWeWPKXuJRAmLzmehKZhcDbAFyWrDCLD6a+LcH3jB8oYK3nLePCZjtAwSMLmvnbUARbXUDnqto43RmOMXJhM7BmUlnyrw1KGHlf4E1PZvtDWE6yM6S5oGB2WdfrpbMyx0/lkje6oUj4yCMEHSMwDsuFPwyOQ6nr27CdQbxlho1ytq+oCaAuEPQStIlzr8S+avG5oqZJjLlYttgIPiCSH8MTENclaVWpLzAHlQhmfOPJmQgxAq8THsYFpMsotQc0NeiZpVPDO2pHfA1U1uDKRUtXSA0xEhxks0hHRHMVsFuthZ7vWDoLDOwAoxlumGA6ERjegjoRaGDyKSclkuBD1MJHLw6O7kH4ZkqjFRm7wf1NMA+BHz98gWhnMBFCBkAAVENANOAUKGEKhHbJC5Pw9uKBM/kSn3dk3dCJhpAK2vtfRQeFtSNYEtJURCEINBvZToO6GfRbDSZ7Paqu8OH/Gqs653/AXLEY/p18N+YAAAAAElFTkSuQmCC"/> |
|
||||
<img v-else-if="props.icon==8" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IArs4c6QAABXlJREFUSEulll+M3FUdxT/n3t/MtoGWshgVNZnqCyVqlcT4oCZSFFP/xIR/qyhBBQtEQ2givhSxzaZbq1at2AhoNT60CWkDKo0PJug2NdqMgEEjmAYfGgO20AKyyC4787v3mPub2XbZtmuVOy8zv/u7c+73fM859wrgmj2OYTnvsvN1SB/ELAcy4DJ/hiGJjHna+MFaYe8Da3VkkfebKWHriodYFWs2Y39YcK4h/LeFc/MSfcxR43sUwj171+r5xdbqk7/0slbINxC10eb8swU6zXt/zdJXWv/mN3vHlM5Iyyf2+c2RvFHS9ZiR1wB43PbGF5eFn+5fo1fOCLj2517ZjnmLrKsNrf8bUBw3Hl/ySti5d0wziwJG8hakq3kNgBLPZmt8+jx+smiFH7vfHStPFLEa2kAfOAo6VkQqoWa3VgYXyjuGcxvBzRsSz2SHO48f42eP3qzyH6cduux+d0LOE4KxYYX/FPzYzpPEqhZ1LCtTqvqIC4L8VeH32zTP543jwLdph11K1DJxNuEKZh56gpfYVDYMumy3O6ryhOcAxXNk7yPoUUwtiI3kyncxGuBa4O2nsc4s8LjEky6suGCFjH3Y5F/49VV3/xrVet9ud6o4oFSmbcgS0zY9UVxaFjf8GRFtzpGoml+v4rQJiRIEmbk2DJKjR3Y35Lhh/9/5YwMoBoCYNqLGvCiYGeAMhsqeSyCYFYilpwAuLu9pyD+qQ7W1AcypAWx6aDiC2EnOk9kEhaqCGsWqF+q0wgq3gT8Ap/RwcUj59ymlm3XJbndC/6RoDM9idtmebKjJVAqxENjPTqNB4UvY75XOPv4GO/EjWelGXbJzYAtpSCnUFi9hXh5S2dBa+NQgY89HjPyPlJbXuylonS7e6U6V0wRDwEY0MG1RVIeG4rCwTECc09hn7vng/SOWn2w0gFYJRk/DbxfHdbp4hzuu0nwfPmfxoMgPy9FWavxmikW0HHOtpdXFZ0W/Qody9jfrUP8uJqoYW1fZvhV44wIVd01cp7fucKfSSUDDU7LvzjCZ5Tq6FUr45FDMrAuEbhesAapBIuUJ5davHPLHwVMhxAPZ9TqjL8ucNwdq6KY8BBRpAnMNw2gzel4wZbJF0OAsLp5UW+Z1hVbDjOx7Z1K1fSTWnxFaD7ws8zVcP+JYbRZcgQcHgkVXhdILd7jTTicBh8bv2bz6TCv2L30TSwYRy6/rFNeHmFYFcxeiM4gIDpLjrYoss+vvg1YP+91NsQBuc0cxTcjDLBUvYH5r+4mSHEGlwlJjToUiS1cK95K0PuR4VErfQVw6T7U9xH05xa/HmC63GQcu5ESF29zJhVIY08D4Twt9r1bYV+4srdyrSG2nQC9Rd6K0AWnSKexRSBsE1w1bcUIjhn/J3mqqPYR0h8xnwY87VF/Qim1DW5QsHfRwFnzI1uFBsDk05nATq6OWlyblG2KOKwV3I94wPKqKRwd5WhbYh6C6Xk5vQ9pu5WeSqs9pxeYBpeA5wOZq1XwWjibI9Y865E+TSRXhFotR2QX0nUjT2H9xEY84nEL1A+r+pUHhG+CnyPnzDWAORTTzABdLRTFD1q4U0vZK7enMbEWuLhLFey4evkvKx3pppN/K/Tep0rjhQ8CfUqhu1NKN02+pWtUWo08t7MWZcAeW4aDx34DHQp0P0go3mfhCP/fvaxE+0lSM3kHgPZiliIMof1FLNnmlYtosPDbnmcVj/8RsOfdmMQfAdxpdGcRUgm4wWxGrmwJOnpvdOuabNDKebsHpNtBFC+8pZwNs84ccuD2aq5yZUtDD4O8CqxasPyb4oUY21fcaLhduY5/xAnsqePGno6UDTvlbCvqo5Skn/TkE7pD0bkxvqNqAHAyP/QcXwcKiByHjHwAAAABJRU5ErkJggg=="/> |
|
||||
<img v-else-if="props.icon==9" src="data:image/png;base64,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"/> |
|
||||
<img v-else-if="props.icon==10" src="data:image/png;base64,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"/> |
|
||||
<img v-else-if="props.icon==11" src="data:image/png;base64,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"/> |
|
||||
<span>{{props.title}}</span> |
|
||||
<div class="right"><slot/></div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import { ref } from "vue" |
|
||||
|
|
||||
|
|
||||
var props=defineProps({ |
|
||||
icon:{ |
|
||||
type:String, |
|
||||
default:"1", |
|
||||
}, |
|
||||
title:{ |
|
||||
type:String, |
|
||||
default:"" |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
var time=ref(`${2+Math.round(Math.random()*3*10)/10}s`) |
|
||||
</script> |
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue