高德地图图层定位，获取POI数据

src/api/amap.js

@@ -6,6 +6,9 @@ const amap = {
     getLngLat(param){
         return mapR.get(`v3/geocode/geo?address=${param}`);
     },
+    getAroundPOI(redius,location,types){
+        return mapR.get(`v5/place/around?redius=${redius}&location=${location}&types=${types}`);
+    }
 }
 
 export default amap

src/api/houseGuarantyArea.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+const houseTargetArea = {
+
+    save(params) {
+        return request.post(`/houseGuarantyArea`,params)
+    },
+
+    getByLngLat(param){
+        return request.get(`/houseGuarantyArea/lngLat?lngLat=${param}`)
+    },
+   
+  
+
+}
+
+export default houseTargetArea
+
+

src/components/MapContainer/index.vue

@@ -3,12 +3,13 @@
 </template>
 <script>
 import AMapLoader from "@amap/amap-jsapi-loader";
-import markPNG from "../../assets/icons/mark.png"
+import markPNG from "../../assets/icons/mark.png";
+import amap from "@/api/amap";
 
 export default {
     name: "map-view",
     mounted() {
-        //this.initAMap();
+        this.initAMap();
     },
     unmounted() {
         this.map?.destroy();
@@ -18,55 +19,39 @@ export default {
         targetPoint: {
             type: Array,
             Required: false
-        }
+        },
     },
 
-    watch:{
-        targetPoint:{
-            handler(nv){
+    watch: {
+        targetPoint: {
+            handler(nv) {
                 this.map?.destroy();
                 this.initAMap();
             },
-            immediate:true
         }
     },
 
     created() {
-
     },
+
     methods: {
         initAMap() {
             window._AMapSecurityConfig = {
                 securityJsCode: "522c082a4dfbb2b5555c7b1d3ff453b8",
             };
-           
+
             AMapLoader.load({
                 key: "78291dcbd623bd91a9d00754bab6c29b", // 申请好的Web端开发者Key，首次调用 load 时必填
                 version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                 plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.MapType", "AMap.ElasticMarker"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
             }).then((AMap) => {
-                var zoomStyleMapping = {
-                    14: 0,
-                    15: 0,
-                    16: 0,
-                    17: 0,
-                    18: 0,
-                    19: 0,
-                    20: 0,
-                };
                 this.map = new AMap.Map("container", {
                     // 设置地图容器id
                     viewMode: "3D", // 是否为3D地图模式
-                    zoom: 15, // 初始化地图级别
-                    center: this.targetPoint[0].lngLat.split(",") // 初始化地图中心点位置
+                    zoom: 12, // 初始化地图级别
+                    // center: this.targetPoint[0].lngLat.split(",") // 初始化地图中心点位置
                 });
-                var toolbar = new AMap.ToolBar(); //创建工具条插件实例
-                this.map.addControl(toolbar); //添加工具条插件到页面
-                var scale = new AMap.Scale();
-                this.map.addControl(scale);
-                var mapType = new AMap.MapType();
-                this.map.addControl(mapType);
-
+                var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0, };
                 for (let i in this.targetPoint) {
                     var stylesArray = [
                         {
@@ -87,7 +72,7 @@ export default {
                         },
                     ];
                     //设置圆形位置
-                    var center = new AMap.LngLat(this.targetPoint[i].lngLat.split(",")[0],this.targetPoint[i].lngLat.split(",")[1]);
+                    var center = new AMap.LngLat(this.targetPoint[i].lngLat.split(",")[0], this.targetPoint[i].lngLat.split(",")[1]);
                     //设置圆的半径大小
                     var radius = 1000;
 
@@ -108,29 +93,153 @@ export default {
                         position: this.targetPoint[i].lngLat.split(","), //点标记位置
                         styles: stylesArray, //指定样式列表
                         zoomStyleMapping: zoomStyleMapping, //指定 zoom 与样式的映射
-                        clickable:true
+                        clickable: true
                     })
                     this.map.add(elasticMarker); //添加到地图上
                     this.map.add(circle);
                     this.map.setFitView(); //缩放地图到合适的视野级别
 
                     //鼠标移入事件
-                    // circle.on("click", function () { 
-                    //     console.log("鼠标点击");
-                    // });       
+                    circle.on("click", function () {
+                        console.log("鼠标点击");
+                    });
 
                 }
+                var toolbar = new AMap.ToolBar(); //创建工具条插件实例
+                this.map.addControl(toolbar); //添加工具条插件到页面
+                var scale = new AMap.Scale();
+                this.map.addControl(scale);
+                var mapType = new AMap.MapType();
+                this.map.addControl(mapType);
             })
-            .catch((e) => {
-                console.log(e);
-            });
-        
-        },
+                .catch((e) => {
+                    console.log(e);
+                });
 
-        collectInfo(){
 
-        }
+        },
 
+        //道路信息
+        collectRoad(redius, lnglat) {
+            if (lnglat) {
+                const types = ["190300|190301|190302|190303|190304|190305|190306|190307|190308|190309|190310|190311"];
+                amap.getAroundPOI(redius, lnglat, types).then(res => {
+                    if (res.status == "1") {
+                        res.infoType = "ROAD"
+                        this.$emit("getPOIData", res)
+                    }
+                })
+            }
+        },
+        //公共交通
+        collectPublicTransport(redius, lnglat) {
+            if (lnglat) {
+                const types = ["150104|150200|150300|150400|150500|150700|150704|150800|151200"];
+                amap.getAroundPOI(redius, lnglat, types).then(res => {
+                    if (res.status == "1") {
+                        res.infoType = "PUBLIC-TRANSPORT"
+                        this.$emit("getPOIData", res)
+                    }
+                   
+                })
+            }
+        },
+        //停车场
+        colletPark(redius, lnglat) {
+            if (lnglat) {
+                const types = ["150900|150903|150904|150905|150906|150907|150908|150909"];
+                amap.getAroundPOI(redius, lnglat, types).then(res => {
+                    if (res.status == "1") {
+                        res.infoType = "PARK"
+                        this.$emit("getPOIData", res)
+                    }
+                })
+            }
+        },
+        //商场
+        collectBusiness(redius, lnglat) {
+            if (lnglat) {
+                const types = ["060100|060101|060400"];
+                amap.getAroundPOI(redius, lnglat, types).then(res => {
+                    if (res.status == "1") {
+                        res.infoType = "BUSINESS"
+                        this.$emit("getPOIData", res)
+                    }
+                })
+            }
+        },
+        //周边小区
+        collectCommunity(redius, lnglat) {
+            if (lnglat) {
+                const types = ["120000"];
+                amap.getAroundPOI(redius, lnglat, types).then(res => {
+                    if (res.status == "1") {
+                        res.infoType = "COMMUNITY"
+                        this.$emit("getPOIData", res)
+                    }
+                })
+            }
+        },
+        //教育机构
+        collectEducation(redius, lnglat) {
+            if (lnglat) {
+                const types = ["141200|141201|141202|141203|141204|141205|141206|141207"];
+                amap.getAroundPOI(redius, lnglat, types).then(res => {
+                    if (res.status == "1") {
+                        res.infoType = "EDUCATION"
+                        this.$emit("getPOIData", res)
+                    }
+                })
+            }
+        },
+        //医院
+        collectHospital(redius, lnglat) {
+            if (lnglat) {
+                const types = ["090000|090101|090102|090200|090201|090202|090203|090204|090205|090206|090207|090208|090209|090210|090211|090300|090400|090510"];
+                amap.getAroundPOI(redius, lnglat, types).then(res => {
+                    if (res.status == "1") {
+                        res.infoType = "HOSPITAL"
+                        this.$emit("getPOIData", res)
+                    }
+                })
+            }
+        },
+        //银行
+        collectBank(redius, lnglat) {
+            if (lnglat) {
+                const types = ["160100"];
+                amap.getAroundPOI(redius, lnglat, types).then(res => {
+                    if (res.status == "1") {
+                        res.infoType = "BANK"
+                        this.$emit("getPOIData", res)
+                    }
+                })
+            }
+        },
+        //酒店宾馆
+        collectHotal(redius, lnglat) {
+            if (lnglat) {
+                const types = ["100000|100100|100101|100102|100103|100104|100105|100200|100201"];
+                amap.getAroundPOI(redius, lnglat, types).then(res => {
+                    if (res.status == "1") {
+                        res.infoType = "HOTEL"
+                        this.$emit("getPOIData", res)
+                    }
+                })
+            }
+        },
+        //风景名胜
+        collectSpot(redius, lnglat) {
+            if (lnglat) {
+                const types = ["110000|110100|110101|110102|110103|110104|110105|110106|110200|"];
+                amap.getAroundPOI(redius, lnglat, types).then(res => {
+                    if (res.status == "1") {
+                        res.infoType = "SPOT"
+                        this.$emit("getPOIData", res)
+                    }
+                })
+            }
+        },
     },
 };
 </script>

src/utils/mapRequest.js

@@ -26,27 +26,31 @@ mapService.interceptors.response.use(
   response => {
     const res = response.data
 
-    // code不等于200的处理
-    if (res.status != 1) {
+
+
+    if (res.infocode == "10044") {
       ElMessage({
-        showClose: true,
-        message: res.info,
-        type: 'error'
+          message: '当日查询高德接口次数已用完',
+          type: 'error',
+          duration: 5 * 1000,
+          plain: true
       })
+      return res;
+    }
 
-      return res
-    } else {
-      return res
+    if (res.status != "1") {
+      ElMessage({
+          message: '高德接口查询异常',
+          type: 'error',
+          duration: 5 * 1000,
+          plain: true
+      })
+      return res;
     }
+    return res;
   },
   error => {
     console.log('err' + error)
-    ElMessage({
-      message: error.message,
-      type: 'error',
-      duration: 5 * 1000,
-      plain:true
-    })
     return Promise.reject(error)
   }
 )

src/views/house/workbench/guarantyResult.vue

@@ -11,9 +11,10 @@
         <el-tabs v-model="activeName" class="targets-tabs" type="border-card">
             <el-tab-pane :label="'估价对象' + t.tid" :name="t.tid" :lazy="true" v-for="(t, index) in targets">
                 <div class="targetTable">
-                    <el-table :data="t.aims" border stripe size="default"
+                    <el-table :data="t.aims" border stripe size="default" ref="multipleTableRef"
                         :header-row-style="{ color: '#333333', 'font-size': '16px' }"
-                        style="color: #333333; font-size: 16px;">
+                        style="color: #333333; font-size: 16px;"  @selection-change="handleSelectionChange">
+                        <el-table-column type="selection"  width="55" align="center" />
                         <el-table-column prop="tid" label="估价对象" width="80" align="center" />
                         <el-table-column prop="tno" label="序号" width="60" align="center" />
                         <el-table-column prop="certificateNo" label="权属证书号" width="220" align="center" />
@@ -33,8 +34,8 @@
                         <el-table-column prop="landType" label="地类(用途)" width="60" align="center" /> -->
                         <el-table-column label="操作" width="160" align="center">
                             <template v-slot="scope">
-                                <el-button type="text" @click="addEntityInfo(scope.row.id, scope.row.no)">实物信息</el-button>
-                                <el-button type="text" @click="addEntityInfo(scope.row.id, scope.row.no)">区位信息</el-button>
+                                <el-button type="text" @click="addEntityInfo(scope.row.tid, scope.row.tno)">实物信息</el-button>
+                                <el-button type="text" @click="getAreaInfoByLngLat(scope.row.lngLat)">区位信息</el-button>
                             </template>
                         </el-table-column>
                     </el-table>
@@ -51,7 +52,7 @@
                         </el-checkbox-button>
                     </el-checkbox-group> -->
                 </div>
-                <amap :targetPoint="targetPoint"></amap>
+                <amap ref="map" :targetPoint="targetPoint" @getPOIData="getPOIData"></amap>
         </div>
 
 
@@ -517,6 +518,190 @@
                 </div>
             </template>
         </el-dialog>
+
+        <el-dialog v-model="areaInfoDialog" width="85%" align-center @closed="cleanLngLat">
+            <div class="infoType">
+                <el-divider content-position="left">
+                    <span  class="infoTitle">道路</span>
+                    <el-tooltip
+                        class="box-item"
+                        effect="light"
+                        content="刷新"
+                        placement="top-start"
+                    >
+                    <span class="refresh" @click="refreshRoad"><el-icon><Refresh /></el-icon></span>
+                </el-tooltip>
+                </el-divider>
+                <div style="padding-left: 100px;">
+                    <span class="infoItem" closable type="primary" v-for="(r ,index) in road">
+                    {{ r.name }}
+                    </span>
+                </div>
+            </div>
+            <div class="infoType">
+                <el-divider content-position="left">
+                    <span  class="infoTitle">公共交通</span>
+                    <el-tooltip
+                        class="box-item"
+                        effect="light"
+                        content="刷新"
+                        placement="top-start"
+                    >
+                    <span class="refresh" @click="refreshPublicTransport"><el-icon><Refresh /></el-icon></span>
+                </el-tooltip>
+                </el-divider>
+                <div style="padding-left: 100px;">
+                    <span class="infoItem" closable type="primary" v-for="(r ,index) in publicTransport">
+                    {{ r.name }}
+                    </span>
+                </div>
+            </div>
+            <div class="infoType">
+                <el-divider content-position="left">
+                    <span  class="infoTitle">停车场</span>
+                    <el-tooltip
+                        class="box-item"
+                        effect="light"
+                        content="刷新"
+                        placement="top-start"
+                    >
+                    <span class="refresh" @click="refreshPark"><el-icon><Refresh /></el-icon></span>
+                </el-tooltip>
+                </el-divider>
+                <div style="padding-left: 100px;">
+                    <span class="infoItem" closable type="primary" v-for="(r ,index) in park">
+                    {{ r.name }}
+                    </span>
+                </div>
+            </div>
+            <div class="infoType">
+                <el-divider content-position="left">
+                    <span  class="infoTitle">商场</span>
+                    <el-tooltip
+                        class="box-item"
+                        effect="light"
+                        content="刷新"
+                        placement="top-start"
+                    >
+                    <span class="refresh" @click="refreshBusiness"><el-icon><Refresh /></el-icon></span>
+                </el-tooltip>
+                </el-divider>
+                <div style="padding-left: 100px;">
+                    <span class="infoItem" closable type="primary" v-for="(r ,index) in business">
+                    {{ r.name }}
+                    </span>
+                </div>
+            </div>
+            <div class="infoType">
+                <el-divider content-position="left">
+                    <span  class="infoTitle">周边小区</span>
+                    <el-tooltip
+                        class="box-item"
+                        effect="light"
+                        content="刷新"
+                        placement="top-start"
+                    >
+                    <span class="refresh" @click="refreshCommunity"><el-icon><Refresh /></el-icon></span>
+                </el-tooltip>
+                </el-divider>
+                <div style="padding-left: 100px;">
+                    <span class="infoItem" closable type="primary" v-for="(r ,index) in community">
+                    {{ r.name }}
+                    </span>
+                </div>
+            </div>
+            <div class="infoType">
+                <el-divider content-position="left">
+                    <span  class="infoTitle">教育机构</span>
+                    <el-tooltip
+                        class="box-item"
+                        effect="light"
+                        content="刷新"
+                        placement="top-start"
+                    >
+                    <span class="refresh" @click="refreshEducation"><el-icon><Refresh /></el-icon></span>
+                </el-tooltip>
+                </el-divider>
+                <div style="padding-left: 100px;">
+                    <span class="infoItem" closable type="primary" v-for="(r ,index) in education">
+                    {{ r.name }}
+                    </span>
+                </div>
+            </div>
+            <div class="infoType">
+                <el-divider content-position="left">
+                    <span  class="infoTitle">医院</span>
+                    <el-tooltip
+                        class="box-item"
+                        effect="light"
+                        content="刷新"
+                        placement="top-start"
+                    >
+                    <span class="refresh" @click="refreshHospital"><el-icon><Refresh /></el-icon></span>
+                </el-tooltip>
+                </el-divider>
+                <div style="padding-left: 100px;">
+                    <span class="infoItem" closable type="primary" v-for="(r ,index) in hospital">
+                    {{ r.name }}
+                    </span>
+                </div>
+            </div>
+            <div class="infoType">
+                <el-divider content-position="left">
+                    <span  class="infoTitle">银行</span>
+                    <el-tooltip
+                        class="box-item"
+                        effect="light"
+                        content="刷新"
+                        placement="top-start"
+                    >
+                    <span class="refresh" @click="refreshBank"><el-icon><Refresh /></el-icon></span>
+                </el-tooltip>
+                </el-divider>
+                <div style="padding-left: 100px;">
+                    <span class="infoItem" closable type="primary" v-for="(r ,index) in bank">
+                    {{ r.name }}
+                    </span>
+                </div>
+            </div>
+            <div class="infoType">
+                <el-divider content-position="left">
+                    <span  class="infoTitle">酒店宾馆</span>
+                    <el-tooltip
+                        class="box-item"
+                        effect="light"
+                        content="刷新"
+                        placement="top-start"
+                    >
+                    <span class="refresh" @click="refreshHotal"><el-icon><Refresh /></el-icon></span>
+                    </el-tooltip>
+                </el-divider>
+                <div style="padding-left: 100px;">
+                    <span class="infoItem" closable type="primary" v-for="(r ,index) in hotel">
+                    {{ r.name }}
+                    </span>
+                </div>
+            </div>
+            <div class="infoType">
+                <el-divider content-position="left">
+                    <span  class="infoTitle">风景名胜</span>
+                    <el-tooltip
+                        class="box-item"
+                        effect="light"
+                        content="刷新"
+                        placement="top-start"
+                    >
+                    <span class="refresh" @click="refreshSpot"><el-icon><Refresh /></el-icon></span>
+                    </el-tooltip>
+                </el-divider>
+                <div style="padding-left: 100px;">
+                    <span class="infoItem" closable type="primary" v-for="(r ,index) in spot">
+                    {{ r.name }}
+                    </span>
+                </div>
+            </div>
+        </el-dialog>
+
     </div>
 </template>
 
@@ -524,8 +709,8 @@
 <script>
 import houseGuaranty from '@/api/houseGuaranty';
 import houseTargetEntity from '@/api/houseTargetEntity';
+import houseTargetArea from '@/api/houseGuarantyArea';
 import amap from '../../../components/MapContainer/index.vue';
-import ampRequest from '@/api/amap';
 
 export default {
 
@@ -536,21 +721,20 @@ export default {
     created() {
         this.docId = this.$route.query.id;
         this.getTargets();
-
     },
 
     watch:{
         activeName:{
             handler(nv,ov){
-                const aims = this.targets.filter(item=>item.tid = nv)
-                this.targetPoint = aims;
+                const target = this.targets.filter(item=>item.tid = nv)
+                this.targetPoint = target.aims;
             },
             immediate:true
         },
         targets:{
-            handler(nv,ov){
-                this.targetPoint = nv[0].aims;
-            }
+            handler(){
+               this.updatePoint();
+            },
         }
         
     },
@@ -603,24 +787,31 @@ export default {
             tId: null,
             tNo: null,
             
-            targetPoint:[
-                // {
-                //   name:"成都高新区民丰大道西段400号附11号2层",
-                //   point:[104.062866,30.574925]
-                // }
-                // ,
-                // {
-                //     name:"成都高新区民丰大道西段400号附11号1层",
-                //     point:[104.063866,30.575925]
-                // }
-            ],
-            mapDialog:false
+            targetPoint:[],
+            mapDialog:false,
+            areaInfoDialog:false,
+            road:[],
+            publicTransport:[],
+            park:[],
+            business:[],
+            community:[],
+            education:[],
+            hospital:[],
+            bank:[],
+            hotel:[],
+            spot:[],
+            redius:'1000',
+            curLngLat:null
 
         }
     },
 
     methods: {
 
+        updatePoint(){
+            this.targetPoint = this.targets[0].aims;
+        },
+
         getTargets() {
             houseGuaranty.getTargetsById(this.docId).then(res => {
                 if (res.code === 200) {
@@ -732,11 +923,113 @@ export default {
             })
         },
 
-        getLngLat(){
-            ampRequest.getLngLat("成都市武侯区锦城大道666号").then(res=>{
-                console.log(res)
+        handleSelectionChange(val){
+            this.targetPoint = val;
+        },
+        getPOIData(data){
+            if (data.infoType=='ROAD'){
+                this.road = data.pois
+            }
+            if (data.infoType=='PUBLIC-TRANSPORT'){
+                this.publicTransport = data.pois
+            }
+            if (data.infoType=='PARK'){
+                this.park = data.pois
+            }
+            if (data.infoType=='BUSINESS'){
+                this.business = data.pois
+            }
+            if (data.infoType=='COMMUNITY'){
+                this.community = data.pois
+            }
+            if (data.infoType=='EDUCATION'){
+                this.education = data.pois
+            }
+            if (data.infoType=='HOSPITAL'){
+                this.hospital = data.pois
+            }
+            if (data.infoType=='BANK'){
+                this.bank = data.pois
+            }
+            if (data.infoType=='HOTEL'){
+                this.hotel = data.pois
+            }
+            if (data.infoType=='SPOT'){
+                this.spot = data.pois
+            }
+           
+        },
+
+        getAreaInfoByLngLat(lngLat){
+            houseTargetArea.getByLngLat(lngLat).then(res=>{
+                if (res.code===200 && res.data!=null){
+                    
+                }else{
+                    this.getAMapInfo();
+                }
+                this.areaInfoDialog = true;
             })
+        },
+
+        getAMapInfo(lngLat){
+            this.curLngLat = lngLat;
+            this.$refs.map.collectRoad(this.redius,lngLat);
+            this.$refs.map.collectPublicTransport(this.redius,lngLat);
+            this.$refs.map.colletPark(this.redius,lngLat);
+            this.$refs.map.collectBusiness(this.redius,lngLat);
+            this.$refs.map.collectCommunity(this.redius,lngLat);
+            // this.$refs.map.collectEducation(this.redius,lngLat);
+            // this.$refs.map.collectHospital(this.redius,lngLat);
+            // this.$refs.map.collectBank(this.redius,lngLat);
+            // this.$refs.map.collectHotal(this.redius,lngLat);
+            // this.$refs.map.collectSpot(this.redius,lngLat);
+            
+        },
+        refreshRoad(){
+            this.$refs.map.collectRoad(this.redius,this.curLngLat);
+           
+        },
+        refreshPublicTransport(){
+            this.$refs.map.collectPublicTransport(this.redius,this.curLngLat);
+        },
+        refreshPark(){
+            this.$refs.map.colletPark(this.redius,this.curLngLat);
+        },
+        refreshBusiness(){
+            this.$refs.map.collectBusiness(this.redius,this.curLngLat);
+        },
+        refreshCommunity(){
+            this.$refs.map.collectCommunity(this.redius,this.curLngLat);
+        },
+        refreshEducation(){
+            this.$refs.map.collectEducation(this.redius,this.curLngLat);
+        },
+        refreshHospital(){
+            this.$refs.map.collectHospital(this.redius,this.curLngLat);
+        },
+        refreshBank(){
+            this.$refs.map.collectBank(this.redius,this.curLngLat);
+        },
+        refreshHotal(){
+            this.$refs.map.collectHotal(this.redius,this.curLngLat);
+        },
+        refreshSpot(){
+            this.$refs.map.collectSpot(this.redius,this.curLngLat);
+        },
+        cleanLngLat(){
+            this.curLngLat=null;
+            this.road=[];
+            this.publicTransport=[];
+            this.park=[];
+            this.business=[];
+            this.community=[];
+            this.education=[];
+            this.hospital=[];
+            this.bank=[];
+            this.hotel=[];
+            this.spot=[];
         }
+
     }
 }
 </script>
@@ -763,6 +1056,30 @@ export default {
     float: right;
     margin-top: 30px;
 }
+.infoType{
+    width: 100%;
+    font-size: 16px;
+    padding: 10px;
+}
+.infoTitle{
+    font-weight: bold;
+    font-size: 20px;
+    margin-right: 10px;
+}
+.infoItem{
+    margin-left: 10px;
+    padding: 5px;
+    font-size: 18px;
+    white-space: nowrap; 
+}
+.infoItem:hover{
+    cursor: pointer;
+    color: #ff6154;
+}
+.refresh:hover{
+    color: #ff6154;
+    cursor: pointer;
+}
 
 /* .el-radio-group {
     --el-radio-group-width: 220px;
@@ -849,4 +1166,11 @@ export default {
 :deep(.el-button--text){
     color:#ff6154;
 }
+:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner){
+    background-color:#ff6154;
+    border-color:#ff6154;
+}
+:deep(.el-checkbox__inner:hover){
+    border-color:#ff6154;
+}
 </style>