zc

src/views/resourceDevice/pageComponent/extendedServiceComponent.vue

@@ -3,9 +3,9 @@
     <title-page-img-components :propsData="propsData"></title-page-img-components>
     <div class="eCharts-max-big-box">
       <div id="extendedServiceComponentECharts"></div>
-      <div class="position-num-title-box">
-        <p v-for="(item,index) in dataList" :key="index">{{index+1}}</p>
-      </div>
+      <!--<div class="position-num-title-box">-->
+        <!--<p v-for="(item,index) in dataList" :key="index">{{index+1}}</p>-->
+      <!--</div>-->
     </div>
   </div>
 </template>
@@ -46,8 +46,13 @@
       },
       getData(){
         reportReportBsEquipOverdueList().then(response => {
+          let bgImg1 ="image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAcBAMAAACJyGLdAAAAElBMVEX/AAD/AAD/AAD/AAD/AAD/AABIDsSGAAAABXRSTlN6EQ/Gu1Pjk9QAAAAgSURBVBjTYwhRggNXBmMGGAAyBRAcxlEO0RyUQEQJXgB6HQY/GMMMugAAAABJRU5ErkJggg=="
+          let bgImg2 = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAcBAMAAACJyGLdAAAAFVBMVEX/WAD/UQD/UQD/GQD/AwD/AwD/AADPi/IVAAAABnRSTlOZFhPVxbwG2/E+AAAAIElEQVQY02NIVYKDMAZnBjgwYRBAcBhHOURzUAIRJXgBw0YGpefcz3cAAAAASUVORK5CYII="
+          let bgImg3 = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAcBAMAAACJyGLdAAAAElBMVEX/tBn/tA//qhH/sxn/sxr/sxq+lYNjAAAABXRSTlN6EQ/Gu1Pjk9QAAAAgSURBVBjTYwhRggNXBmMGGAAyBRAcxlEO0RyUQEQJXgB6HQY/GMMMugAAAABJRU5ErkJggg=="
+          let bgImg4 = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAcBAMAAACJyGLdAAAAFVBMVEUAMTYALDUAMzMAMTUAMTYAMDYAMTbg1DfqAAAABnRSTlPMHRnqxr6o4SlNAAAAIElEQVQY02NIVYKDMAZnBjgwYRBAcBhHOURzUAIRJXgBw0YGpefcz3cAAAAASUVORK5CYII="
           let dataList = [];
           let categoryList = [];
+          let numNameList = [];
           for(let i=0;i<response.data.length;i++){
             dataList.push({
               name:response.data[i].deviceNum,
@@ -57,12 +62,18 @@
               name:response.data[i].deptName,
               value:response.data[i].deviceNum,
             })
+            numNameList.push({
+              name:i+1,
+              value:"0",
+              symbol:i==0?bgImg1:(i==1?bgImg2:(i==2?bgImg3:bgImg4)),
+              label:{color:i==0?'#FF0000':(i==1?'#FF5900':(i==2?'#FFB31A':'#0586FF'))}
+            })
           }
           this.$set(this,'dataList',response.data);
-          this.eChartsMethod(dataList,categoryList);
+          this.eChartsMethod(dataList,categoryList,numNameList);
         })
       },
-      eChartsMethod(dataList,categoryList) {
+      eChartsMethod(dataList,categoryList,numNameList) {
         let { category, total, datas } = {
           datas: dataList,
           total: 100,
@@ -116,7 +127,6 @@
               // 内
               type: 'bar',
               barWidth: 16,
-
               legendHoverLink: false,
               silent: true,
               itemStyle: {
@@ -218,6 +228,30 @@
               },
               z: 0,
             },
+            {
+              type: 'pictorialBar',
+              barWidth: '28',
+              z: 99,
+              silent: true,
+              barCategoryGap: 28,
+              symbolOffset:[-40, -2, 0, 0],
+              symbolClip: false,
+              symbolBoundingData: 5,
+              symbolPosition: 'center',
+              symbolSize: ['100%', '100%'],
+              label: {
+                show: true,
+                position: 'insideBottomLeft',
+                // distance: 20,
+                offset: [-38, 2],
+                fontSize: 20,
+                color: ['#fff'],
+                formatter: function (params) {
+                  return params.name;
+                },
+              },
+              data: numNameList,
+            }
           ],
         };
 

src/views/resourceDevice/pageList/instrumentLeisureComponentTable.vue

@@ -33,9 +33,9 @@
           <el-table-column align="center" label="设备名称" prop="deviceName" show-overflow-tooltip/>
           <el-table-column align="center" sortable="custom" label="预约时长" width="300" prop="orderDuration" show-overflow-tooltip/>
           <el-table-column align="center" label="预约次数" prop="orderNum" width="300" show-overflow-tooltip/>
-          <el-table-column align="center" label="最后一次预约日期" width="600" prop="createTime" show-overflow-tooltip>
+          <el-table-column align="center" label="最后一次预约日期" width="600" prop="lastOrderTime" show-overflow-tooltip>
             <template slot-scope="scope">
-              <span>{{ parseTime(scope.row.createTime,'{y}-{m}-{d} {h}:{i}') }}</span>
+              <span>{{scope.row.lastOrderTime?parseTime(scope.row.lastOrderTime,'{y}-{m}-{d} {h}:{i}'):'--'}}</span>
             </template>
           </el-table-column>
         </el-table>