设备按钮添加图标

gassafetyprogress-web/src/assets/image/czsub.svg

+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM7.87702 10.0747H8.51843V12.6673H7.87702V10.0747ZM6.44436 10.0747H7.08576V12.6673H6.44436V10.0747ZM11.9546 3.71455V11.9051H12.6666V12.6673H9.08258V9.82425C9.08258 9.61425 8.90732 9.44314 8.69265 9.44314H5.86777C5.6531 9.44314 5.47732 9.61476 5.47732 9.82425V12.6673H3.33325V11.9045H4.04518V7.14714C4.04668 7.04491 4.08859 6.94743 4.16176 6.87602C4.23492 6.8046 4.33338 6.76506 4.43562 6.76603H6.74717V5.96907C6.74854 5.86675 6.79039 5.76914 6.86357 5.69761C6.93675 5.62608 7.03529 5.58647 7.13762 5.58744H8.62991C8.73223 5.58647 8.83077 5.62608 8.90395 5.69761C8.97713 5.76914 9.01899 5.86675 9.02035 5.96907V6.76655H9.6405V3.71507C9.642 3.61284 9.68392 3.51536 9.75708 3.44395C9.83025 3.37253 9.92871 3.33299 10.0309 3.33396H11.5642C11.6663 3.33299 11.7647 3.37246 11.8379 3.44377C11.911 3.51507 11.953 3.61241 11.9546 3.71455ZM5.59243 8.88417H8.96954H8.97161V8.12195H5.59243V8.88417Z" fill="#F0C41B"/>
+</svg>

gassafetyprogress-web/src/assets/image/fmjsub.svg

+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.3722 6.834C15.1015 4.93477 14.1804 3.19959 12.7769 1.94502C11.3734 0.690454 9.58101 0.000131564 7.72679 0C5.67751 0 3.71218 0.842855 2.26312 2.34315C0.81407 3.84344 0 5.87827 0 8C0 10.1217 0.81407 12.1566 2.26312 13.6569C3.71218 15.1571 5.67751 16 7.72679 16C9.58101 15.9999 11.3734 15.3095 12.7769 14.055C14.1804 12.8004 15.1015 11.0652 15.3722 9.166H16V6.834H15.3722ZM1.80758 7.43825C1.93429 6.00989 2.5388 4.67218 3.51672 3.65617C4.49464 2.64015 5.78456 2.00963 7.1637 1.8735V3.09475C6.09685 3.22628 5.10407 3.72664 4.346 4.51488C3.58792 5.30312 3.10888 6.33313 2.9864 7.43825H1.80758ZM7.1637 14.1267C5.79162 13.9913 4.50762 13.3665 3.53132 12.3591C2.55502 11.3518 1.94707 10.0246 1.81145 8.6045H2.99147C3.12256 9.70097 3.60475 10.7203 4.36104 11.4998C5.11733 12.2792 6.10408 12.7738 7.1637 12.9045V14.1267ZM6.96377 8.3395V11.0005H6.01216V4.988H9.97214V5.83H6.9628V7.49725H9.80143V8.33925L6.96377 8.3395ZM8.28988 14.1267V12.9052C9.34949 12.7746 10.3362 12.28 11.0925 11.5005C11.8488 10.7211 12.331 9.70172 12.4621 8.60525H13.6421C13.5062 10.0252 12.8982 11.3521 11.9219 12.3592C10.9456 13.3663 9.66179 13.991 8.28988 14.1265V14.1267ZM12.4672 7.43825C12.3447 6.33313 11.8657 5.30312 11.1076 4.51488C10.3495 3.72664 9.35672 3.22628 8.28988 3.09475V1.8735C9.66897 2.00969 10.9588 2.64023 11.9367 3.65624C12.9146 4.67225 13.5191 6.00992 13.6457 7.43825H12.4672Z" fill="#FA8167"/>
+</svg>

gassafetyprogress-web/src/assets/image/jksub.svg

+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM2.28254 8.28605C2.12709 8.22097 2 8.29979 2 8.46079V12.4697C2 12.631 2.12709 12.7092 2.28254 12.6447L3.47843 12.1448C3.63415 12.08 3.76097 11.8957 3.76097 11.7344V11.0845H6.1841C6.30883 11.0846 6.43098 11.0508 6.53617 10.9871C6.64136 10.9234 6.7252 10.8324 6.77782 10.7249L7.33799 9.57378L6.15328 9.05008L5.76602 9.84574H3.76151V9.19578C3.76151 9.03478 3.63442 8.85019 3.47897 8.78538L2.28254 8.28605ZM12.4657 10.1644L13.2825 8.5046L11.2971 9.64793L12.4657 10.1644ZM13.7598 6.9755L5.64275 3.3884C5.4943 3.32316 5.32474 3.31631 5.171 3.36933C5.01726 3.42235 4.89177 3.53096 4.82185 3.67151L3.41243 6.53631C3.34391 6.67718 3.33689 6.83811 3.39291 6.98388C3.44893 7.12966 3.56343 7.24839 3.71133 7.31409L9.06405 9.67956C9.37195 9.81541 9.86121 9.79 10.1514 9.62304L13.7914 7.52668C14.0816 7.35972 14.0671 7.11187 13.7598 6.9755Z" fill="#36E7C7"/>
+</svg>

gassafetyprogress-web/src/assets/image/tyxsub.svg

+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0V0ZM12.8 10.8H12V12H10.8V12.8H9.2V12H7.2V12.8H5.6V12H4.4V10.8H3.6V5.2H4.4V4H5.6V3.6H6.8V4H7.6V3.6H8.8V4H9.6V3.6H10.8V4H12V5.2H12.8V10.8ZM4.8 10.8H11.6V4.8H4.8V10.8ZM10.8 5.2H11.2V10.4H10.8V5.2ZM10 5.2H10.4V10.4H10V5.2ZM9.2 5.2H9.6V10.4H9.2V5.2ZM8.4 5.2H8.8V10.4H8.4V5.2ZM7.6 5.2H8V10.4H7.6V5.2ZM6.8 5.2H7.2V10.4H6.8V5.2ZM6 5.2H6.4V10.4H6V5.2ZM5.2 5.2H5.6V10.4H5.2V5.2Z" fill="#74C5FF"/>
+</svg>

gassafetyprogress-web/src/assets/image/usersub.svg

+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM10.7962 6.01159C10.7962 7.54306 9.55466 8.78489 8.0229 8.78489C6.49113 8.78489 5.24959 7.54335 5.24959 6.01159C5.24959 4.48012 6.49113 3.23828 8.0229 3.23828C9.55466 3.23828 10.7962 4.47982 10.7962 6.01159ZM8.02293 9.70834C8.86456 9.70834 9.66557 9.42494 10.3118 8.91474V8.91504C11.9892 9.55093 12.7593 11.7307 12.7593 12.7244H3.2382C3.2382 11.7218 4.00245 9.52662 5.71357 8.89844C6.3628 9.41841 7.17152 9.70834 8.02293 9.70834Z" fill="#00FFFF"/>
+</svg>

gassafetyprogress-web/src/views/bigWindow/index.vue

@@ -38,7 +38,7 @@
     <!-- 设备按钮 -->
       <div class="typelist-div">
         <div class="list" v-for="(item,index) in arr" :key="index" :class="item.ischeck==true?'active':''" @click="sel1(index,item)">
-          {{item.name}}
+          <img :src="item.imgurl" style="margin-top: 2px;float: left;margin-right: 3px;" /> {{item.name}}
         </div>
       </div>
  
@@ -183,27 +183,32 @@ export default {
         {
           val:1,
           ischeck:false,
+          imgurl: require('@/assets/image/tyxsub.svg'),
           name: "调压箱"
         },
         {
           val:2,
           ischeck:false,
+          imgurl: require('@/assets/image/fmjsub.svg'),
           name: "阀门井"
         },
         {
           val:3,
           ischeck:false,
-          name: "场站"
+          imgurl: require('@/assets/image/czsub.svg'),
+          name: "场 站"
         },
         {
           val:4,
           ischeck:false,
-          name: "用户"
+          imgurl: require('@/assets/image/usersub.svg'),
+          name: "用 户"
         },
         {
           val:5,
           ischeck:false,
-          name: "监控"
+          imgurl: require('@/assets/image/jksub.svg'),
+          name: "监 控"
         }
       ],
         selarr1:[],
@@ -354,15 +359,13 @@ export default {
       let arr=[...this.arr];
       let selarr1=[...this.selarr1];
       if(arr[index].ischeck==false){
-      arr[index].ischeck=true;
-      selarr1.push(item)
+        arr[index].ischeck=true;
+        selarr1.push(item)
       }else{
-      arr[index].ischeck=false;
-      var index11=selarr1.indexOf(index)
-      selarr1.splice(index11,1)
-      
+        arr[index].ischeck=false;
+        var index11=selarr1.indexOf(index)
+        selarr1.splice(index11,1)
       }
-      
       this.arr=arr;
       this.selarr1=selarr1;
       
@@ -547,25 +550,27 @@ export default {
   height: 50px;
   z-index: 9999;
   position: fixed;
-  bottom: 20%;
-  left: 40%;
+  top: 0;
+  margin-top: 120px;
+  right: 450px;
 }
 .list{
   z-index: 9999;
   float: left;
-  margin-left: 10px;
+  margin-left: 15px;
   color: #fff;
-  width: 80px;
-  height: 30px;
-  line-height: 30px;
+  line-height: auto;
   text-align: center;
   background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
   box-shadow: inset 0px 1px 2px 1px #125C9B;
+  font-size: 14px;
+  padding: 5px 7px;
 }
  
 .list.active{
   background: linear-gradient(86deg, #112238 0%, #32A3D3 62%, #112238 100%);
   box-shadow: inset 0px 1px 2px 1px #125C9B;
   color: #2ee7e7;
+  font-size: 16px;
 }
 </style>