zc

src/views/chemicalManage/chemicalsStatistics/categoryStatistics.vue

@@ -7,15 +7,23 @@
         <p>类别占比</p>
       </div>
       <div class="title-right-box">
-
+      </div>
+      <div class="pagination-controls" v-if="newData.length>7">
+        <p @click="prevPage"
+           :disabled="currentPage === 1"><</p>
+        <p>{{ currentPage }}/{{ totalPages }}</p>
+        <p @click="nextPage"
+           :disabled="currentPage === totalPages">></p>
       </div>
     </div>
     <img class="null-data-img" v-show="!dataType" src="@/assets/ZDimages/basicsModules/null-data-1.png">
     <div id="eCharts-category" v-show="dataType"></div>
     <div class="position-max-box" v-show="dataType">
-      <div class="position-for-box" v-for="(item,index) in newData" :key="index">
-        <p :style="'background:'+eChartsListColor[index]+';'"></p>
-        <p>{{item.classifyAttribute}}</p>
+      <div class="position-for-box" v-for="(item,index) in currentPageData" :key="index">
+        <p :style="'background:'+eChartsListColor[item.indexKey]+';'"></p>
+        <el-tooltip class="item" effect="dark" :content="item.classifyAttribute" placement="top">
+          <p>{{item.classifyAttribute}}</p>
+        </el-tooltip>
         <p>{{item.chemicalMix}}</p>
       </div>
     </div>
@@ -29,53 +37,27 @@ import { chemicalIndexChemicalGroup, chemicalIndexTypeGroup } from '@/api/chemic
     data () {
       return {
         dataType:false,
-        eChartsListColor : ["#009DFF","#0045AF","#FFA200", "#FF2A00", "#A069FF", "#63FFE5", "#C4C4C4"],
+        eChartsListColor : [
+          "#009DFF", "#0045AF", "#FFA200", "#FF2A00", "#A069FF", "#63FFE5", "#C4C4C4",
+          "#006400", "#FFFF00", "#FFC1C1", "#FF6A6A", "#DEB887", "#FF1493", "#FF4500" ],
         maxNum:0,
-        // data1:[
-        //   {
-        //     name:"易燃气体",
-        //     value:"4",
-        //     classifyAttribute: "易燃气体",
-        //     chemicalMix: "4%"
-        //   },
-        //   {
-        //     name:"易燃液体",
-        //     value:"4",
-        //     classifyAttribute: "易燃液体",
-        //     chemicalMix: "4%"
-        //   },
-        //   {
-        //     name:"爆炸品",
-        //     value:"32",
-        //     classifyAttribute: "爆炸品",
-        //     chemicalMix: "32%"
-        //   },
-        //   {
-        //     name:"有毒品",
-        //     value:"21",
-        //     classifyAttribute: "有毒品",
-        //     chemicalMix: "21%"
-        //   },
-        //   {
-        //     name:"压缩气体或液化气体",
-        //     value:"15",
-        //     classifyAttribute: "压缩气体或液化气体",
-        //     chemicalMix: "15%"
-        //   },
-        //   {
-        //     name:"易挥发",
-        //     value:"14",
-        //     classifyAttribute: "易挥发",
-        //     chemicalMix: "14%"
-        //   },
-        //   {
-        //     name:"其他",
-        //     value:"10",
-        //     classifyAttribute: "其他",
-        //     chemicalMix: "10%"
-        //   }
-        // ],
         newData:[],
+        currentPage: 1,
+        pageSize: 7,
+        // 示例数据（实际使用时可以替换为你的数据）
+        items: []
+      }
+    },
+    computed: {
+      // 计算总页数
+      totalPages() {
+        return Math.ceil(this.items.length / this.pageSize);
+      },
+      // 计算当前页的数据
+      currentPageData() {
+        const start = (this.currentPage - 1) * this.pageSize;
+        const end = start + this.pageSize;
+        return this.items.slice(start, end);
       }
     },
     created(){
@@ -97,9 +79,12 @@ import { chemicalIndexChemicalGroup, chemicalIndexTypeGroup } from '@/api/chemic
         chemicalIndexChemicalGroup().then(response => {
           self.maxNum=response.data.count;
           response.data.list.forEach(function(item,index) {
-            list.push({name:item.name,value:item.number,classifyAttribute:item.name,chemicalMix:item.ratio})
+            if(item.number>0){
+              list.push({name:item.name,value:item.number,classifyAttribute:item.name,chemicalMix:item.ratio,indexKey:index})
+            }
           })
           this.$set(this, 'newData',list)
+          this.$set(this, 'items',list)
           this.getInfo();
         });
       },
@@ -167,6 +152,16 @@ import { chemicalIndexChemicalGroup, chemicalIndexTypeGroup } from '@/api/chemic
         };
         myChart.setOption(option);
       },
+      prevPage() {
+        if (this.currentPage > 1) {
+          this.currentPage--;
+        }
+      },
+      nextPage() {
+        if (this.currentPage < this.totalPages) {
+          this.currentPage++;
+        }
+      }
     },
   }
 </script>
@@ -195,7 +190,41 @@ import { chemicalIndexChemicalGroup, chemicalIndexTypeGroup } from '@/api/chemic
         }
       }
       .title-right-box{
-
+        flex:1;
+      }
+      .pagination-controls{
+        display: flex;
+        border:1px solid #0183FA;
+        border-radius:4px;
+        p{
+          font-size:16px;
+          line-height:22px;
+          height:22px;
+          padding:0 10px;
+        }
+        p:nth-child(1){
+          cursor: pointer;
+          line-height:20px;
+          color:#0183FA;
+        }
+        p:nth-child(2){
+          border-left:1px solid #0183FA;
+          border-right:1px solid #0183FA;
+          padding:0 15px;
+        }
+        p:nth-child(3){
+          cursor: pointer;
+          line-height:20px;
+          color:#0183FA;
+        }
+        p:nth-child(1):hover{
+          background-color: #0183FA;
+          color:#fff;
+        }
+        p:nth-child(3):hover{
+          background-color: #0183FA;
+          color:#fff;
+        }
       }
     }
     .null-data-img{
@@ -229,6 +258,10 @@ import { chemicalIndexChemicalGroup, chemicalIndexTypeGroup } from '@/api/chemic
         }
         p:nth-child(2){
           flex:1;
+          display:block;
+          overflow:hidden;
+          text-overflow:ellipsis;
+          white-space:nowrap;
         }
         p:nth-child(3){
           text-align: right;

src/views/integratedManagement/laboratoryManagement/subject/indexRightPage/hardwarePage.vue

@@ -103,6 +103,8 @@
     name: 'hardwarePage',
     data(){
       return{
+        //实验室管理员ID
+        adminUserId:'',
         //MQTT请求参数-硬件
         mtOpic:"iot/hardware/all/sub/",
         client:{},
@@ -149,8 +151,6 @@
             {label:"29°C",value:29},
             {label:"30°C",value:30},
           ],
-          //实验室管理员ID
-          adminUserId:'',
         }
       }
     },