@ -1,34 +1,28 @@
<!-- SidePanelItem . vue -- >
< template >
< div >
< SidePanelItem title = "环保自动监测工作开展情况" >
< div class = "facility-grid" >
< div class = "facility-grid" >
< div v-for ="facility in facilities" :key="facility.name" class="facility-card" >
< div class = "facility-icon" >
< component :is ="facility.icon" / >
< div style = "width: 60px;height: 62px;display: flex;align-items: center;justify-content: center;" >
< div class = "facility-icon" >
< img width = "18" height = "14" : src = "facility.icon " >
< / div >
< / div >
< div class = "facility-info" >
< div class = "facility-name" > { { facility . name } } < / div >
< div > < span class = "facility-count" > { { facility . count } } < / span > 个 < / div >
< div style = "font-size: 16px;" > < span class = "facility-count" > { { facility . count } } < / span > < span > 个 < / span > < / div >
< / div >
< / div >
< / div >
< / SidePanelItem >
< / div >
< / template >
< script lang = "ts" setup >
import { ref , onMounted } from 'vue' ;
import SidePanelItem from '@/components/SidePanelItem/index.vue' ;
import {
/ / D r o p l e t O u t l i n e d ,
/ / T h e r m o m e t e r O u t l i n e d ,
HomeOutlined ,
FileTextOutlined ,
/ / F i s h O u t l i n e d ,
EnvironmentOutlined ,
HeartOutlined
} from '@ant-design/icons-vue' ;
/ / 定 义 组 件 名 ( 便 于 调 试 和 递 归 )
defineOptions ( {
@ -38,39 +32,49 @@ defineOptions({
/ / 设 施 数 据
const facilities = ref ( [
{
name : '生态流量泄放设施' ,
count : 145 ,
/ / i c o n : D r o p l e t O u t l i n e d
"name" : "生态流量" ,
"count" : 452
, "icon" : "data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwMDEuNTIzIDgzOS4zNTVjLTE4LjEyNi04LjQ5OS0zOS4zMjQuMTU0LTQ3LjM2MyAxOS4zNTQtLjE0MS4zMzktLjI3OC42OC0uNDA5IDEuMDI0LTI4LjY3NCA3Mi4zNDQtMTA3LjMyIDEwNi4zNC0xNzUuNjI1IDc1LjkyOGExMzguNTUzIDEzOC41NTMgMCAwIDEtNzIuMzQ5LTc3LjgyM2MtNy42OC0xOS44MTQtMjguOTI5LTI5LjQzOS00Ny43NzItMjEuNTU1YTM2LjY2NSAzNi42NjUgMCAwIDAtMTYuODk3IDE0Ljc5N2MtMS42ODkgMi40NTgtMy40ODIgNS41ODEtNS4yMjIgOC42MDEtMjAuOTQxIDUyLjY4NC02OS41ODQgODYuOTg3LTEyMy40NDkgODcuMDM5LTUzLjU1OCAwLTEwMS4zMy0zMy45OTctMTIyLjg4Ni04NS4xOTVhMzguOTE0IDM4LjkxNCAwIDAgMC0yMS41MDUtMjUuODU2Yy0xOC43OTItNy44ODUtNDAuMDkxIDEuNjktNDcuNzcyIDIxLjUwNC0yMC4zMjcgNTQuMDY2LTY5LjY4NyA4OS40OTUtMTI0LjU3NSA4OS41NDctNTUuMTk3LS4wNTItMTA0LjgxMi0zNS43MzctMTI1LjI5Mi05MC4xMTEtNy40MjUtMTkuNzExLTI4LjMxNi0yOS41NDEtNDcuMTA3LTIyLjIyLTE4LjYzOCA3Ljg4NS0yNy45NTcgMzAuMDU0LTIwLjk5MyA1MC4wMjEgNDEuOTg2IDExMy4wOTkgMTYyLjUxNyAxNjguNzUyIDI2OS4yNzMgMTI0LjI2YTIwOC40MzUgMjA4LjQzNSAwIDAgMCA4Mi40MzYtNjIuNTY1Yzc0LjE5MyA5Mi43NzMgMjA1LjMyMiAxMDQuMTkgMjkyLjc3NiAyNS40OTdhMjE0LjQ2IDIxNC40NiAwIDAgMCAyNC41NzctMjYuMTExYzczLjYzIDkyLjk3NyAyMDQuNDUyIDEwNS4wNiAyOTIuMTYxIDI2Ljk4MiAyNS4yNDMtMjIuNDI1IDQ1LjA1OS01MC45NDMgNTcuODA4LTgzLjA5NiA3LjQzNC0xOS4yOS0xLjE4Ny00MS4wNTUtMTkuODE1LTUwLjAyMiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0xMDAxLjUyMyA2NDcuMzU5Yy0xOC4xMjYtOC40OTktMzkuMzI0LjE1NC00Ny4zNjMgMTkuMzU0LS4xNDEuMzM5LS4yNzguNjgtLjQwOSAxLjAyNC0yOC42NzQgNzIuMzQ0LTEwNy4zMiAxMDYuMzQtMTc1LjYyNSA3NS45MjhhMTM4LjU1MyAxMzguNTUzIDAgMCAxLTcyLjM0OS03Ny44MjNjLTcuNjgtMTkuODE0LTI4LjkyOS0yOS40MzktNDcuNzcyLTIxLjU1NWEzNi42NjUgMzYuNjY1IDAgMCAwLTE2Ljg5NyAxNC43OTdjLTEuNjg5IDIuNDU4LTMuNDgyIDUuNTgxLTUuMjIyIDguNjAxLTIwLjk0MSA1Mi42ODQtNjkuNTg0IDg2Ljk4Ny0xMjMuNDQ5IDg3LjAzOS01My41NTggMC0xMDEuMzMtMzMuOTk3LTEyMi44ODYtODUuMTk1YTM4LjkxNCAzOC45MTQgMCAwIDAtMjEuNTA1LTI1Ljg1NmMtMTguNzkyLTcuODg1LTQwLjA5MSAxLjY5LTQ3Ljc3MiAyMS41MDQtMjAuMzI3IDU0LjA2Ni02OS42ODcgODkuNDk1LTEyNC41NzUgODkuNTQ3LTU1LjE5Ny0uMDUyLTEwNC44MTItMzUuNzM3LTEyNS4yOTItOTAuMTExLTcuNDI1LTE5LjcxMS0yOC4zMTYtMjkuNTQxLTQ3LjEwNy0yMi4yMi0xOC42MzggNy44ODUtMjcuOTU3IDMwLjA1NC0yMC45OTMgNTAuMDIxIDQxLjk4NiAxMTMuMDk5IDE2Mi41MTcgMTY4Ljc1MiAyNjkuMjczIDEyNC4yNmEyMDguNDM1IDIwOC40MzUgMCAwIDAgODIuNDM2LTYyLjU2NWM3NC4xOTMgOTIuNzczIDIwNS4zMjIgMTA0LjE5IDI5Mi43NzYgMjUuNDk3YTIxNC40NiAyMTQuNDYgMCAwIDAgMjQuNTc3LTI2LjExMWM3My42MyA5Mi45NzcgMjA0LjQ1MiAxMDUuMDYgMjkyLjE2MSAyNi45ODIgMjUuMjQzLTIyLjQyNSA0NS4wNTktNTAuOTQzIDU3LjgwOC04My4wOTYgNy40MzQtMTkuMjktMS4xODctNDEuMDU1LTE5LjgxNS01MC4wMjIiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNNDg2LjA2NyAwYzYuOTY0IDAgMTMuODI1IDIuOTE4IDE4LjYzOCA4LjA4OWwxOC42MzggMjAuNjM0IDIxLjYwNyAyNS40NDUgMTIuOTAzIDE1LjgyMUw1NzkgOTcuMTI0bDE0Ljg0OSAyMC4xMjIgMTUuMjA3IDIxLjUwMyAxNS4yNTggMjIuNjNhODk3LjgzNCA4OTcuODM0IDAgMCAxIDIzLjI0NiAzNy41OGwxMi4wODQtMTYuMTI4IDUwLjY5LTY1Ljg0MSA1MC42OSA2NS43OWMxNS4yNTkgMTkuNzEyIDI5LjY5OCAzOS45MzUgNDMuMzE4IDYwLjk3OCA0My4yNjYgNjcuMDcxIDY3LjA3NiAxMjUuNTkxIDY3LjA3NiAxNzQuNTg5LS4xNTQgOTAuMjEyLTcxLjg4OSAxNjQuMjQ2LTE2MS4xODYgMTY0LjI0Ni0yMS4xOTggMC00Mi4wODktNC4yNS02MS40NDMtMTIuMzlsLTEuOTk3IDIuMTVhMjMwLjY2IDIzMC42NiAwIDAgMS01Ni4xNjkgNDEuNzI3IDIyMC4zNDggMjIwLjM0OCAwIDAgMS04OC43ODUgMjUuMzk1bC0xNS42NjkuNTEyYTIyNS4xNCAyMjUuMTQgMCAwIDEtMTYyLjgyMi02OS42MzEgMjQwLjYyIDI0MC42MiAwIDAgMS02Ny4zODMtMTY4LjI0YzAtNzEuMDY0IDM1Ljk5NS0xNTkuMjc5IDEwNi45MS0yNjIuMzQzbDcuNjgxLTExLjA1OSAxNS4zMDktMjEuMTQ1IDE0Ljc5OC0xOS42MDkgMTQuMDI5LTE3LjkyIDE4Ljk0NS0yMy4yOTUgMTUuNjY4LTE4LjQzMkw0NjcuNDMgOC4xOTJhMjUuNjA1IDI1LjYwNSAwIDAgMSAxMy40NjYtNy42OEw0ODYuMDY3IDBabS4zMDcgODMuNDU0LTMuNTg0IDQuMzUyYTExOTguMTA0IDExOTguMTA0IDAgMCAwLTY3LjE3NyA4OC4zMThjLTY0LjI2IDkzLjM4Ny05NS42NDYgMTcwLjMzOS05NS42NDYgMjI2LjA0NCAwIDQ2Ljk0OSAxNy41NjMgOTAuNzI0IDQ5LjM1OSAxMjMuNjQ1IDMxLjQ4OSAzMi41MTEgNzIuNzA4IDUwLjE3NSAxMTYuODQzIDUwLjE3NSAyNi40MjEgMCA1MS4yNTUtNi4xNDQgNzQuNjU0LTE4LjUzNCAxMi4yODktNi40NTEgMjMuODYxLTE0LjY0MyAzNC40MDktMjQuMjY4QTE2Ni4wMyAxNjYuMDMgMCAwIDEgNTQ5LjIgNDE4LjI5NWMwLTQ0LjY0NSAyMC45OTMtOTkuMzI2IDU4LjI2OS0xNjAuMTVsLTkuNTI0LTE3LjFhMTAyNi42MDMgMTAyNi42MDMgMCAwIDAtMTA2Ljg2LTE1Mi4wNjFsLTQuNzExLTUuNTNabTIyNC4wMTIgMTM4LjM5MS0xMy45NzkgMTguNjM2Yy03LjUyNyAxMC4zNDMtMTUuNzcgMjIuMTE4LTI0LjAxNCAzNC43NjUtMzguMTQ2IDU4LjUyLTU5LjE4OSAxMDkuNDEyLTU5LjE4OSAxNDMuMDQ5IDAgMzUuOTQyIDE4LjczOSA2OS4zMjQgNDkgODcuMTQxIDE0LjQ5IDguNjUzIDMxLjE4MiAxMy4xNTggNDguMDI4IDEzLjE1OCA1My41MDYgMCA5Ny4wOC00NS4wMDQgOTcuMTMxLTEwMC4zNSAwLTMzLjc5MS0xOS42NjItODIuMTc0LTU2LjgzNC0xMzkuNzczbC04LjYwMi0xMy4xMDctOC41NTEtMTIuMzM5LTE1LjkyNC0yMS45MTMtNy4wNjYtOS4yNjdaIiBmaWxsPSIjZmZmIi8+PC9zdmc+"
} ,
{
name : '低温水减缓设施' ,
count : 24 ,
/ / i c o n : T h e r m o m e t e r O u t l i n e d
"name" : "水温监测" ,
"count" : 140
, "icon" : "data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDExMjUgMTAyNCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTMwLjgzOCA4MzIuOTM5YzE5LjE4Mi00LjA5NiAzOS4wOTQgNS42MzIgNDYuNTc2IDIzLjcwNmw0LjA1IDguOTA4YzI0LjUyNSA0OS4zMDYgNzYuMjc3IDgxLjE1MiAxMzMuNTk1IDgxLjIwNGwxMC4wMTQtLjMwOGM1Ni4yNTEtMy43MzcgMTA1Ljc1MS0zOC4xOTUgMTI2Ljg0Ni04OS4xODlsMi40MTgtNC43NjNjOS4zODEtMTYuNTY0IDMxLjExNi0yMy44NTUgNTAuMDY0LTE2Ljc5M2w1LjU2OCAyLjcxNGM4Ljk4OCA1LjM5NiAxNS40NDYgMTMuNjQ3IDE4LjExMyAyMy4xNDJsNC41IDguODU4YzI1LjMxMyA0Ni4yMzMgNzUuMDM5IDc2LjMzOSAxMzAuNDQ1IDc2LjMzOSA1OS4xNzctLjA1MiAxMTIuNjE1LTM0LjM1NiAxMzUuNTY2LTg3LjA0bDIuOTI1LTQuNTA1IDIuODY5LTQuMDk3YzQuMzI1LTYuNTk3IDEwLjgxOS0xMS43OTEgMTguNTYyLTE0Ljg0OGw1LjIzMi0xLjUzNWMxOS45NTQtNC40NDMgNDAuMzY2IDUuNTc2IDQ3LjI1IDIzLjE5M2w0LjMzMiA5LjM2OWMxNS4xNTMgMzAuMzMxIDQxLjg3MyA1NC42MzMgNzUuMjA4IDY4LjQwMyA3NC45ODIgMzAuNDEzIDE2MS4zODQtMy41ODMgMTkyLjk0LTc1Ljk4bC4xNjktLjUxMmM5LjA1Ni0xOS42NjEgMzIuMzQzLTI4LjMxMyA1Mi4zMTMtMTkuODE0bDUuMjMxIDIuNzEzYzE2LjkzNSAxMC4zNDcgMjMuNzcxIDI5Ljk3MSAxNi40ODEgNDcuMzA5LTEzLjc2NCAzMS44MjUtMzUuNTEyIDYwLjI4MS02My41MDcgODMuMDk2LTk2LjM1OCA3OC4wOC0yNDAuMDc4IDY1Ljk5Ny0zMjAuOTY3LTI2Ljk4MmwtOC40MzggOS4yMTdhMjI1LjQ0MSAyMjUuNDQxIDAgMCAxLTE4LjU2MyAxNi44OTZjLTk2LjEzMyA3OC42OTQtMjQwLjE5MSA2Ny4yNzYtMzIxLjY5OS0yNS40OThsLTkuNDUgMTAuMTM3Yy0yMi40NTMgMjIuNjc4LTUwLjEzMSA0MC41NjItODEuMDU3IDUyLjM3OC0xMTcuMjg0IDQ0LjQ5Mi0yNDkuNzU1LTExLjE2Mi0yOTUuODgtMTI0LjI2MmwtMS41NzUtNS40NzhjLTQuMjkyLTE4LjI4NSA1Ljk4NS0zNi44MjMgMjQuNjkzLTQ0LjU0NFpNNTQ0Ljk3MS4wMjNjOTEuMTI3LTEuNDM0IDE2Ni44OTcgNjMuNDM2IDE3My43MDQgMTQ2LjY4NmwuNDUgOS4zMnYxNzUuMzU5YzkgNi42NTUgMTcuNDM3IDEzLjk3NyAyNS4xNDMgMjEuOTY0bDguMzI2IDkuMjE2YzkxLjI5NCAxMDEuMzc2IDc5Ljk4OCAyNTAuNTcxLTIzLjUxNCAzMzkuMDQ0bC0xMS4xOTQgOS4wNjNjLTExMi4yMDQgODcuMjY5LTI4MS4zNzUgNzMuMjAyLTM3NC4zNS0zMS4xMjktOTEuNjg4LTEwMS42ODMtODAuNTUtMjUxLjQ5MyAyMy4xNzctMzQwLjYzMmwxMC4wMTItOC4xOTJWMTU2LjAyOUMzNzguMzU2IDcwLjUyNSA0NTIuNjYzIDEuNTU5IDU0NC45MTYuMDIzWm0xLjIzOSA2My45OTljLTUxLjI0NS44NzEtOTMuNTQ3IDM3LjU4MS05OC42NjUgODQuMTIybC0uNTA3IDcuODg1djIwNC4xODNsLTI0LjYzNyAxOS4xNDljLTgzLjgxNCA2NS4yMjktOTQuODQgMTgxLjYwNi0yNC41MjUgMjU5LjU4MyA2NS4xNzcgNzMuNTQyIDE4Mi43NTUgODYuNjQ3IDI2NS41MDMgMjkuNTkzbDEwLjE4Mi03LjUyNmM4MC40MzktNjIuMjU5IDkzLjY1OC0xNzIuMDgzIDMxLjgzOC0yNDkuMzQybC05LjMzOC0xMC45MDZhMTIyLjE5NSAxMjIuMTk1IDAgMCAwLTEzLjUtMTMuNTE3bC03LjQ4MS01Ljk5LTI2LjI3LTE5LjJWMTU3LjEwNGMtLjk1Ni00OS45Mi00Mi43NS04OS44MDUtOTQuMzg5LTkyLjg3N2wtOC4yMTEtLjIwNVptMS41NzQgMTI4IDUuMjg4LjM1OGMxNy4yMTIgMi4zNTUgMzAuMzc1IDE1Ljg3MiAzMC40MzEgMzIuMTU0djIxMi4wMThjMzAuMzc2IDkuNjI1IDU0LjA1OCAzMS40MzcgNjQuMzUxIDU5LjEzNWwyLjUzMiA3LjU3N2MxNC4wODEgNDguNzY4LTE1LjI3IDk5LjIxNy02Ny41MDIgMTE2LjAxOWwtOC41NSAyLjI1M2MtNzkuNzA3IDE3LjQxMy0xNTAuMjM0LTUwLjI0LTEyNi45NDktMTIxLjc3NiA5LjQ4My0yOS4xMzMgMzMuNDI3LTUyLjUzMiA2NC42NzktNjMuMjA4VjIyNC41ODRjLjAzMi0xNy45NTIgMTUuOTk2LTMyLjUwNiAzNS43Mi0zMi41NjJaIiBmaWxsPSIjZmZmIi8+PC9zdmc+"
} ,
{
name : '栖息地' ,
count : 142 ,
icon : HomeOutlined
"name" : "水文监测" ,
"count" : 21
, "icon" : "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMCAwaDE2djE2SDB6Ii8+PHBhdGggZD0iTTkuOTcyIDEyLjc2YzEuMTA0IDAgMS42ODYuMTU3IDIuMi4yOTMuNDgxLjEyOC44OTQuMjQgMS43ODYuMjRWMTVjLTEuMSAwLTEuNjg1LS4xNTQtMi4yLS4yOTMtLjQ4LS4xMjgtLjg5NC0uMjQtMS43ODYtLjI0cy0xLjMwNi4xMTItMS43ODYuMjRjLS41MTQuMTM2LTEuMDk4LjI5My0yLjIuMjkzLTEuMTAxIDAtMS42ODYtLjE1NC0yLjItLjI5My0uNDgxLS4xMjgtLjg5NS0uMjQtMS43ODYtLjI0di0xLjcwOWMxLjEgMCAxLjY4NS4xNTUgMi4yLjI5NC40OC4xMjguODk0LjI0IDEuNzg2LjI0czEuMzA2LS4xMTIgMS43ODctLjI0Yy41MTQtLjEzNiAxLjA5OC0uMjk0IDIuMi0uMjk0di4wMDFabS4wMjYtMi42OTVjMS4xMDIgMCAxLjY4NS4xNTggMi4yLjI5My40OC4xMjkuODk1LjI0IDEuNzg3LjI0djEuNzA4Yy0xLjEwMiAwLTEuNjg2LS4xNTUtMi4yLS4yOTMtLjQ4MS0uMTI5LS44OTUtLjI0LTEuNzg2LS4yNC0uODkyIDAtMS4zMDYuMTExLTEuNzg3LjI0LS41MTUuMTM1LTEuMDk5LjI5My0yLjIuMjkzLTEuMTAxIDAtMS42ODUtLjE1NS0yLjItLjI5My0uNDgtLjEyOS0uODk1LS4yNC0xLjc4Ny0uMjR2LTEuNzA3YzEuMTAyIDAgMS42ODYuMTU0IDIuMi4yOTIuNDgyLjEyOS44OTUuMjQgMS43ODcuMjQuODkyIDAgMS4zMDUtLjExMSAxLjc4Ni0uMjQuNTE1LS4xMzUgMS4xLS4yOTMgMi4yLS4yOTNaTTE0IDF2Ny44NDloLTEuNjU0VjIuNzA4SDMuNjY1djYuMTRIMi4wMVYxSDE0Wk04Ljg4NCA0LjEyNHY0LjcyNUg3LjIzVjQuMTI0aDEuNjU1WiIgZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9nPjwvc3ZnPg=="
} ,
{
name : '过鱼设施' ,
count : 60 ,
icon : FileTextOutlined
"name" : "河道水质监测" ,
"count" : 56
, "icon" : "data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0ibTY2NS4yMTIgMCAuNTEyIDMwNy44MTRjMCAzMy41ODggNy44ODUgNjcuMTc1IDIyLjIyIDk3LjI4bDMyNC41MDYgNDYwLjY5OC43MTcgMi4wNDhjMTYuNDM1IDM0LjMwNCAxNC4zMzYgNzMuNTc0LTYuNDUxIDEwNS43MjhBMTE0LjMzIDExNC4zMyAwIDAgMSA5MTEuNjM4IDEwMjRoLTc5OS4xM2MtMzguNjA1IDAtNzQuMzQyLTE4Ljk0NC05NS4wNzgtNTEuMDk4YTEwNy40MTggMTA3LjQxOCAwIDAgMS02LjQ1Mi0xMDUuNzI4bDEuNDM0LTIuODE2IDMwNy4zNTQtNDU4LjU0N2MxNC4zMzYtMzAuODIyIDIyLjE3LTY0LjQxIDIyLjE3LTk3Ljk5N0wzNDEuNDIyIDBoMzIzLjc4OXptLTYzLjg0NiA2NGgtMTk1Ljg0bC40MSAyNDMuODE0YzAgMzYuNTU3LTcuMTY5IDczLjIxNi0yMC43ODggMTA3LjgyOGwtNy4zMjIgMTcuMS00Ljg2NCA4LjcwNEw2OC4xNyA4OTZsLTEuOTk3IDUuMTJhNDIuODAzIDQyLjgwMyAwIDAgMCAxLjg0MyAzMS4yODNsMy4yMjYgNS44MzdhNDcuNzE4IDQ3LjcxOCAwIDAgMCAzMy45OTcgMjEuMjQ4bDcuMjcuNTEyaDc5OS4xM2E0OS42NjQgNDkuNjY0IDAgMCAwIDQxLjI2Ny0yMS4wNDMgNDMuMDYgNDMuMDYgMCAwIDAgNS4wNjktMzcuMTJsLTIuMS01LjI3NC0zMjAuMjU2LTQ1NC42MDUtNS41My05LjM3YTI5My4zNzYgMjkzLjM3NiAwIDAgMS0yNy44NTItMTA4LjY0NmwtLjUxMi0xNi4wMjVMNjAxLjM2NiA2NHoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjU2LjA3MyAwaDUxMnY2NGgtNTEyek0zNjUuMjMxIDY4Ni40OWE4My45NjggODMuOTY4IDAgMCAxIDgzLjYxIDgzLjYxYzAgNDMuMDA3LTMzLjE3OCA3OC44NDctNzUuMTEgODMuMDk3bC04LjUuNDZhODMuOTY4IDgzLjk2OCAwIDAgMS04My41NTgtODMuNTU4YzAtNDMuMDA4IDMzLjEyNi03OC44NDggNzUuMDU5LTgzLjE0OWw4LjUtLjQ2em0yNDUuMDk1LTE4Ljg0MmM1MS41MDcgMCA5Mi45NzkgNDEuNDcyIDkyLjk3OSA5My4wMyAwIDQ4LjQ4Ny0zNi43MSA4OC4wNjQtODMuOTY4IDkyLjU3bC05LjAxMS40MWE5Mi43NzQgOTIuNzc0IDAgMCAxLTkzLjAzLTkyLjk4YzAtNDguNTM3IDM2Ljc2LTg4LjA2NCA4NC4wMTgtOTIuNjJsOS4wMTItLjQxek0zNjUuMjMgNzUwLjQ5YTE5Ljk2OCAxOS45NjggMCAwIDAtMTkuNTU4IDE5LjYxIDE5Ljk2OCAxOS45NjggMCAwIDAgMTkuNTU4IDE5LjU1OCAxOS45NjggMTkuOTY4IDAgMCAwIDE5LjYxLTE5LjU1OSAxOS45NjggMTkuOTY4IDAgMCAwLTE5LjYxLTE5LjYxem0yNDUuMDk1LTE4Ljg0MmEyOC43NzQgMjguNzc0IDAgMCAwLTI5LjAzIDI5LjAzYzAgMTYuMTggMTIuOCAyOC45OCAyOS4wMyAyOC45OCAxNi4xNzkgMCAyOC45NzktMTIuOCAyOC45NzktMjguOThhMjguNzc0IDI4Ljc3NCAwIDAgMC0yOC45OC0yOS4wM3pNNTAyLjI0MiA0MjEuOTM5YTExNi4zNzggMTE2LjM3OCAwIDAgMSAxMTYuMjI0IDExNi4yMjRjMCA2MC45MjgtNDcuNjE2IDExMS4wNTMtMTA2LjgwMyAxMTUuOTE3bC05LjQyLjM1OGExMTYuMzc4IDExNi4zNzggMCAwIDEtMTE2LjIyNS0xMTYuMjI0YzAtNjAuOTI4IDQ3LjA1My0xMTEuMDAxIDEwNi43MDEtMTE1Ljg2NWw5LjUyMy0uNDF6bTAgNjRjLTI4Ljc3NCAwLTUyLjIyNCAyMy41NTItNTIuMjI0IDUyLjIyNCAwIDI4Ljc3NSAyMy40NSA1Mi4yNzUgNTIuMjI0IDUyLjI3NSAyOC4zNjUgMCA1Mi4yMjQtMjMuNzU2IDUyLjIyNC01Mi4yMjQgMC0yOC43NzQtMjMuNS01Mi4yMjQtNTIuMjI0LTUyLjIyNHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4="
} ,
{
name : '鱼类增殖站' ,
count : 69 ,
/ / i c o n : F i s h O u t l i n e d
"name" : "增殖站水质站" ,
"count" : 9
, "icon" : "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTI0IDBjMTIuODQgMCAyMy4yNSAxMC43NDUgMjMuMjUgMjRTMzYuODQgNDggMjQgNDggLjc1IDM3LjI1NS43NSAyNCAxMS4xNiAwIDI0IDBabS0uMDA1IDYuNjY4Yy05LjUwMSAwLTE3LjIwMiA3LjgyNC0xNy4yMDIgMTcuNDc2IDAgOC4zMjcgNS43MzIgMTUuMjg4IDEzLjQwNSAxNy4wNDVoNy41OTNjNy42NzMtMS43NTcgMTMuNDA2LTguNzE4IDEzLjQwNi0xNy4wNDUgMC05LjY1Mi03LjctMTcuNDc2LTE3LjIwMi0xNy40NzZabS4xOTggMS42OTNjOC40IDAgMTUuMjEgNi42NiAxNS4yMSAxNC44NzQgMCAuMDk4LS4wMDYuMTkzLS4wMDguMjloLS4wNDdjLS4wMDMtLjA1My0uMDEyLS4xMDUtLjAxNy0uMTU3LS4yNCA0LjI1Mi0zLjUwOSA3LjYyMS03LjUwNyA3LjYyMWE3LjAyNSA3LjAyNSAwIDAgMS0yLjU5My0uNDk1bC0uMTM2LjEwMmE4LjM5MSA4LjM5MSAwIDAgMC00LjYyMy0xLjM3IDguMzk5IDguMzk5IDAgMCAwLTQuMjMgMS4xMzMgNi44NzIgNi44NzIgMCAwIDEtMy45NTMgMS4yNjNjLTQuMDggMC03LjM4Ny0zLjYzOS03LjM4Ny04LjEyNSAwLS41NTUuMDUtMS4wOTcuMTQ3LTEuNjJDOS43NSAxNC4zIDE2LjI2IDguMzYgMjQuMTkzIDguMzZabS0uMTk1IDIuNzMxLS4wMDUuMTUzLS4wMDMtLjE1MmMtLjAwMi0uMDEtLjA2MS4wOS0uMTY1LjI3N2wtLjA4Ny4xNTVjLS4zNzUuNjgzLTEuMTIzIDIuMDc4LTEuODg1IDMuNTA2bC0uMjE2LjQwNWMtLjY2NiAxLjI1LTEuMzMgMi41MDItMS45OTQgMy43NTRhNS41MjIgNS41MjIgMCAwIDAtMS4wNTUgMy4yNTljMCAzLjAzMyAyLjQyIDUuNDkxIDUuNDA3IDUuNDkxIDIuOTg1IDAgNS40MDUtMi40NTggNS40MDUtNS40OTFhNS41MjcgNS41MjcgMCAwIDAtMS4wNTQtMy4yNTkgMTg2My4xNSAxODYzLjE1IDAgMCAwLTEuODg2LTMuNTUxbC0uNDMyLS44MWMtMS4wNC0xLjk1LTIuMDIzLTMuNzc3LTIuMDMtMy43MzdabTQuMDUyIDExLjM0MmMuMDAyLjA0OS4wMDYuMDk4LjAwNi4xNDcgMCAyLjE4Ny0xLjU0MiAzLjk2LTMuNDQ1IDMuOTYtMS4yMzggMC0yLjMyMy0uNzUtMi45My0xLjg3OS42ODMuNzI1IDEuNjE0IDEuMTcyIDIuNjQgMS4xNzIgMS44NjQgMCAzLjQxMS0xLjQ2NyAzLjcyOS0zLjRaIiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4="
} ,
{
name : '珍稀植物园' ,
count : 41 ,
icon : EnvironmentOutlined
"name" : "国家水质站" ,
"count" : 1722
, "icon" : "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTguMDEzIDEyLjc5OGMxLjE3NC4wMDIgMi4yOTYtLjQ0MyAzLjEwNC0xLjIyOS44My0uODA4IDEuMjkyLTEuODggMS4yODgtMi45OTQgMC0yLjMzNi0xLjcyLTQuNzM1LTQuMzktOC41NzUtMi42OCAzLjg0LTQuMzkyIDYuMjQtNC4zOTIgOC41NzUgMCAxLjEyMy40NjQgMi4yMDIgMS4yODggMi45OTQuODA4Ljc4NiAxLjkzIDEuMjMgMy4xMDMgMS4yMjloLS4wMDFaTTcuOTggMi43MmMuMzUzLjUyMy41NDYgMS4xMzMuNTYyIDEuNzU5IDAgMi4wOC0yLjIxNCAyLjQzLTIuMjE0IDEuMTVDNi4zNiA0LjggNy40NSAzLjQ5IDcuOTgyIDIuNzJ2LjAwMmgtLjAwMVptLjAzMyAxMy4yNzdjLTEuOTUyIDAtNC43My0uNDgtNi4wMTktMS44ODhhOC41ODQgOC41ODQgMCAwIDEgMS42ODctLjcwNGMuNzI2LjQ4IDIuMjEzLjk5MiA0LjMzMi45OTIgMi4xMTggMCAzLjYwNC0uNTEyIDQuMzY0LS45OTJhOC42NSA4LjY1IDAgMCAxIDEuNjkuNzA2QzEyLjc0NiAxNS41MiA5Ljk2OCAxNiA4LjAxNyAxNmwtLjAwMy0uMDAyWm01LjkxNy04Ljg2MmMuNTMtLjgzMyAxLjQ1NC0uNDUgMS45MjEtMS4yMTcuNTYzLS44OTYtLjU5Ni0xLjgyNC0xLjUyLTEuMDI0LS40OTkuNDU1LS41OTcgMS4zMTItLjQgMi4yNGwtLjAwMS4wMDFaTTEuNjY2IDQuODljLS44OTQtLjgzMi0yLjA4My4wOTYtMS41MiAxLjAyNC40OTQuNzY3IDEuMzg5LjM4NCAxLjkyIDEuMjE2LjIyOC0uOTIzLjEyOS0xLjc4MS0uNC0yLjIzNlY0Ljg5WiIgZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9zdmc+"
} ,
{
name : '动物救助站' ,
count : 4 ,
icon : HeartOutlined
"name" : "视频监控" ,
"count" : 247
, "icon" : "data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDExMzcgMTAyNCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTE0Ny43ODggMCA5NDcuNjYxIDI2My4wMDItNzUuMzE1IDk4LjA4NUwxMTM3IDM5Mi4zOTdsLTc4Ljc4MiAyOTQuNDgyLTIzOC43MzQtNjQuMDk5LTc1LjI1OCA5OC4xOTgtMzM5LjM0NC05NS4xMjR2MjA3LjYxMkg3My42NjdWMTAyNEgwVjY0Mi45ODloNzMuNjF2MTE0LjI1MmgyNTcuNzE5bC0uMDU3LTE1MS45OTVMOS45NDcgNTE1LjI0NSAxNDcuNzg4IDBaTTg1MS43NyAyNzQuMzg3IDYwNS4wNzggNjAyLjg1NWwxMTIuMjYyIDMxLjQyNCAyNTEuMTI1LTMyNy41TDg1MS43NyAyNzQuMzNaTTk3MCA0MjYuNDk2IDg2OS42MTggNTU3LjM3MWwxMzcuMTAyIDM2Ljc3NCAzOS4zOTEtMTQ3LjIxMi03Ni4xNjgtMjAuNDk0Wk0xOTguOTQ1IDkzLjE4OWwtOTguNTYzIDM2OC4zMTcgNDI4LjI0NCAxMTkuODg4IDI0Ni42OTItMzI4LjI5N0wxOTguOTQ1IDkzLjEzMloiIGZpbGw9IiNmZmYiLz48L3N2Zz4="
} ,
{
"name" : "气象监测" ,
"count" : 74058
, "icon" : "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMCAwaDE2djE2SDB6Ii8+PHBhdGggZD0iTTQuMTgzIDE2YS42NDIuNjQyIDAgMCAxLS42NC0uNjQ4LjY0Mi42NDIgMCAwIDEgLjY0LS42NDdINS41OXYtMS43N2E1LjkzIDUuOTMgMCAwIDEtMS43ODktMS4yNTRjLTIuNzUxLTIuNzgyLTEuODktNy4yNS0uNDU2LTguNjk2IDEuMTI3LTEuMTQgMy4xODEtLjUxNSA1LjA2Ni44NzdhLjI2LjI2IDAgMCAxIC4xMDIuMjVMOC4zNDYgNS4xOWwtLjEzLjA2YS4yNi4yNiAwIDAgMS0uMjc0LS4wNGMtMS41MDYtMS4yOS0zLjAwNy0xLjg0OC0zLjYzLTEuMjYtLjc2LjcxNi4wNzcgMi44NzQgMS44NzIgNC44MTggMS43OTQgMS45NDUgMy44NjQgMi45NCA0LjYyNSAyLjIyMi41ODctLjU1My4yMjItMS45NjctLjgwMS0zLjQ3N2wuMTIyLS4yMyAxLjE1NC0uMzc4YzEuMjA3IDEuOTA1IDEuNjM4IDQgLjU2IDUuMDktLjk0My45NTItMi45MzUgMS43MjItNC45NzMgMS4zNDF2MS4zN2gyLjQzMmEuNjQzLjY0MyAwIDAgMSAuNjQuNjQ3LjY0My42NDMgMCAwIDEtLjY0LjY0N2gtNS4xMlptMy4zMjMtOC4wMi0uMTQ0LS4xNDVhLjY5Mi42OTIgMCAwIDEgLjA1LTEuMDM5bDEuNTE2LTEuMjUzYS44NTkuODU5IDAgMCAxIC44NDgtLjEyNy43NzMuNzczIDAgMCAxLS4xNTUtLjQ2OS43NC43NCAwIDAgMSAuNzE2LS43NTguNzM5LjczOSAwIDAgMSAuNzE3Ljc1OC43MzcuNzM3IDAgMCAxLS43MTcuNzU3LjY4NS42ODUgMCAwIDEtLjQzNy0uMTU3Ljg4Ljg4IDAgMCAxLS4xMjYuODUybC0xLjI0IDEuNTNhLjY4NS42ODUgMCAwIDEtLjUzNS4yNjUuNjkuNjkgMCAwIDEtLjQ5My0uMjE0Wm02LjQ2LTIuMjhjMC0yLjU0LTEuOTQ4LTQuNjA3LTQuMzQzLTQuNjA3VjBDMTIuNTg4IDAgMTUgMi41NTcgMTUgNS42OTloLTEuMDMzWm0tMS44MjggMEEyLjczNSAyLjczNSAwIDAgMCAxMS40IDMuODFhMi40MjYgMi40MjYgMCAwIDAtMS43NzctLjc4M3YtMS4wOWMxLjk1OCAwIDMuNTUgMS42ODcgMy41NSAzLjc2MWgtMS4wMzVaIiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L2c+PC9zdmc+"
} ,
{
"name" : "国家水文站" ,
"count" : 1189
, "icon" : "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMCAwaDE2djE2SDB6Ii8+PHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNMyAxNCA4IDBsNSAxNHoiLz48L2c+PC9zdmc+"
}
] ) ;
@ -82,29 +86,36 @@ onMounted(() => {
< style lang = "scss" scoped >
. facility - grid {
display : grid ;
grid - template - columns : repeat ( 2 , 1 fr ) ;
gap : 8 px ;
/ / w i d t h : 4 0 6 p x ;
flex - flow : wrap ;
display : flex ;
justify - content : space - between ;
margin - top : - 7 px ;
font - family : - apple - system , BlinkMacSystemFont , Segoe UI , Roboto , Helvetica Neue , Arial , Noto Sans , sans - serif , Apple Color Emoji , Segoe UI Emoji , Segoe UI Symbol , Noto Color Emoji ;
}
. facility - card {
width : 200 px ;
height : 64 px ;
display : flex ;
align - items : center ;
padding : 6 px ;
justify - content : space - between ;
margin : 4 px 0 px ;
background : # fff ;
border : 1 px solid # e8e8e8 ;
border - radius : 4 px ;
border - radius : 2 px ;
transition : all 0.3 s ;
cursor : pointer ;
box - sizing : border - box ;
}
. facility - icon {
display : flex ;
align - items : center ;
justify - content : center ;
width : 4 8 px ;
height : 4 8 px ;
margin - right : 8 px ;
width : 4 0 px ;
height : 4 0 px ;
/ / m a r g i n - r i g h t : 8 p x ;
background : # 2 f6b98 ;
border - radius : 50 % ;
@ -121,13 +132,13 @@ onMounted(() => {
. facility - name {
font - size : 16 px ;
color : # 333 ;
margin - bottom : 4 px ;
/ / m a r g i n - b o t t o m : 4 p x ;
/ / f o n t - w e i g h t : 5 0 0 ;
}
. facility - count {
font - size : 18 px ;
color : # 2 f6b98 ;
font - weight : 600 ;
/ / f o n t - w e i g h t : 6 0 0 ;
}
< / style >