推料计划分析做分页功能

src/utils/request.js

@@ -15,9 +15,9 @@ var reg =  /(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}
 var browserUrl = window.location.hostname
 console.log("========url===",reg.test(browserUrl))
 // 打包的时候打开,日常关掉
-if (reg.test(browserUrl)){
-  URL = window.location.protocol +"//"+ browserUrl + ":80/"
-}
+// if (reg.test(browserUrl)){
+//   URL = window.location.protocol +"//"+ browserUrl + ":80/"
+// }
 
 Cookies.set('url',URL)
 console.log(process.env.VUE_APP_BASE_API,'===========URL1111')

src/views/statisticalAnalysis/pushingplan/index.vue

@@ -1,8 +1,22 @@
  <template>
   <div class="app-container">
     <div class="search">
-      <el-date-picker v-model="table.parammaps.inputDatetime" type="daterange" class="inputDatetime filter-item" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
-      <el-input v-model="table.parammaps.tname" placeholder="推料车" style="width: 180px;" class="filter-item" clearable />
+      <el-date-picker
+        v-model="table.parammaps.inputDatetime"
+        type="daterange"
+        class="inputDatetime filter-item"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      >
+      </el-date-picker>
+      <el-input
+        v-model="table.parammaps.tname"
+        placeholder="推料车"
+        style="width: 180px"
+        class="filter-item"
+        clearable
+      />
       <el-button class="successBorder" @click="handleRefresh">重置</el-button>
       <el-button class="successBorder" @click="form_search">查询</el-button>
     </div>
@@ -16,62 +30,148 @@
         border
         fit
         highlight-current-row
-        style="width: 100%;"
+        style="width: 100%"
         :row-style="rowStyle"
         :cell-style="cellStyle"
         class="elTable table-fixed"
         :max-height="myHeight"
       >
-        <el-table-column label="序号" align="center" type="index" width="50px" />
-        <el-table-column label="推料车" min-width="100px" align="center" prop="tname" />
-        <el-table-column label="备注" min-width="100px" align="center" prop="remark" />
-        <el-table-column label="开始时间" min-width="100px" align="center" prop="startdate" />
-        <el-table-column label="结束时间" min-width="100px" align="center" prop="enddate" />
-        <el-table-column label="运行时间" min-width="100px" align="center" prop="date" />
-        <el-table-column label="运行轨迹" align="center" width="80" class-name="small-padding fixed-width" fixed="right">
-          <template slot-scope="{row}">
-            <el-button v-if="isRoleEdit" class="miniSuccess" @click="handleRunning_trajectory(row)">查看</el-button>
+        <el-table-column
+          label="序号"
+          align="center"
+          type="index"
+          width="50px"
+        />
+        <el-table-column
+          label="推料车"
+          min-width="100px"
+          align="center"
+          prop="tname"
+        />
+        <el-table-column
+          label="备注"
+          min-width="100px"
+          align="center"
+          prop="remark"
+        />
+        <el-table-column
+          label="开始时间"
+          min-width="100px"
+          align="center"
+          prop="startdate"
+        />
+        <el-table-column
+          label="结束时间"
+          min-width="100px"
+          align="center"
+          prop="enddate"
+        />
+        <el-table-column
+          label="运行时间"
+          min-width="100px"
+          align="center"
+          prop="date"
+        />
+        <el-table-column
+          label="运行轨迹"
+          align="center"
+          width="80"
+          class-name="small-padding fixed-width"
+          fixed="right"
+        >
+          <template slot-scope="{ row }">
+            <el-button
+              v-if="isRoleEdit"
+              class="miniSuccess"
+              @click="handleRunning_trajectory(row)"
+              >查看</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
-      <span v-if="listLoading == false" style="margin-right: 30px;margin-top: 10px;font-size: 14px;">共{{total }}条</span>
+      <!-- <span
+        v-if="listLoading == false"
+        style="margin-right: 30px; margin-top: 10px; font-size: 14px"
+        >共{{ total }}条</span
+      > -->
     </div>
+    <!-- 分页 start-->
+    <el-pagination
+      v-if="listLoading == false"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage"
+      :page-sizes="[50, 100, 150, 200]"
+      :page-size="table.pagecount"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+    >
+    </el-pagination>
+    <!-- 分页 end -->
 
-    <el-dialog  :visible.sync="run.dialogFormVisible" :close-on-click-modal="false" width="80%">
-     <template slot="title">
-       <div class="avue-crud__dialog__header">
-         <span class="el-dialog__title">
-           <span style="display:inline-block;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px" />
-           运行轨迹
-         </span>
-         <div class="avue-crud__dialog__menu" @click="dialogFull? dialogFull=false: dialogFull=true">
-           <svg-icon v-if="dialogFull" icon-class="exit-fullscreen" />
-           <svg-icon v-else icon-class="fullscreen" />
-         </div>
-       </div>
-     </template>
-     <!-- <div style="margin-bottom: 20px;background-image: url('http://niu305.cn:8091/uploads/image/headphoto1.png');background-position: top right;"> -->
+    <el-dialog
+      :visible.sync="run.dialogFormVisible"
+      :close-on-click-modal="false"
+      width="80%"
+    >
+      <template slot="title">
+        <div class="avue-crud__dialog__header">
+          <span class="el-dialog__title">
+            <span
+              style="
+                display: inline-block;
+                width: 3px;
+                height: 20px;
+                margin-right: 5px;
+                float: left;
+                margin-top: 2px;
+              "
+            />
+            运行轨迹
+          </span>
+          <div
+            class="avue-crud__dialog__menu"
+            @click="dialogFull ? (dialogFull = false) : (dialogFull = true)"
+          >
+            <svg-icon v-if="dialogFull" icon-class="exit-fullscreen" />
+            <svg-icon v-else icon-class="fullscreen" />
+          </div>
+        </div>
+      </template>
+      <!-- <div style="margin-bottom: 20px;background-image: url('http://niu305.cn:8091/uploads/image/headphoto1.png');background-position: top right;"> -->
       <div ref="map" class="map-container"></div>
-     <!-- </div> -->
-    <div slot="footer" class="dialog-footer">
-       <el-button class="cancelClose1" @click="run.dialogFormVisible = false;getList()">关闭</el-button>
-    </div>
-   </el-dialog>
-
+      <!-- </div> -->
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          class="cancelClose1"
+          @click="
+            run.dialogFormVisible = false
+            getList()
+          "
+          >关闭</el-button
+        >
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { GetDataByName, postJson,getJson, formatNum, checkButtons } from '@/api/common'
-import { parseTime} from '@/utils/index.js'
+import {
+  GetDataByName,
+  postJson,
+  getJson,
+  formatNum,
+  checkButtons
+} from '@/api/common'
+import { parseTime } from '@/utils/index.js'
 import { MessageBox } from 'element-ui'
 import Cookies from 'js-cookie'
 import axios from 'axios'
 import { getToken } from '@/utils/auth'
-import { createApp } from 'vue';
-import AMapLoader from '@amap/amap-jsapi-loader';
+import { createApp } from 'vue'
+import AMapLoader from '@amap/amap-jsapi-loader'
 // import vLoUrl from '../../../assets/images/tet.png'
-import vLoUrl from '../../../assets/images/guiji2.jpeg';
+import vLoUrl from '../../../assets/images/guiji2.jpeg'
 window._AMapSecurityConfig = {
   securityJsCode: '0133db0118e961029dc45a2d5039cbb1' // '「申请的安全密钥」',
 }
@@ -79,18 +179,21 @@ export default {
   name: 'Pushingplan',
   data() {
     return {
+      currentPage: 1,
       table: {
-        name:'getTmrEqipmemtList',
+        offset: 1,
+        name: 'getTmrEqipmemtList',
+        pagecount: 50,
         parammaps: {
           // pastureid: Cookies.get('pastureid'),
-          tname:'',
-          startdate:'',
+          tname: '',
+          startdate: '',
           enddate: '',
-          inputDatetime: null,
+          inputDatetime: null
           // startdate: parseTime(new Date(), '{y}-{m}-{d}'),
           // enddate: parseTime(new Date(), '{y}-{m}-{d}'),
           // inputDatetime: [new Date(), new Date()],
-        },
+        }
       },
       tableKey: 0,
       list: [],
@@ -100,16 +203,16 @@ export default {
       run: {
         dialogFormVisible: false,
         dialogStatus: '',
-        temp:{}
+        temp: {}
       },
       dialogFull: false,
       isRoleEdit: [],
       isokDisable: false,
       rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
       cellStyle: { padding: 0 + 'px' },
-      myHeight: document.documentElement.clientHeight - 85- 150,
-       map: null,
-       path:[],
+      myHeight: document.documentElement.clientHeight - 85 - 150,
+      map: null,
+      path: [],
       // path: [
       //   [116.405285, 39.904989], // 示例轨迹点1
       //   [116.407516, 39.904717], // 示例轨迹点2
@@ -117,26 +220,43 @@ export default {
       //   // 添加更多轨迹点
       // ],
       index: 0,
-      latitude: 40.878730, // 实景图所在位置的纬度
+      latitude: 40.87873, // 实景图所在位置的纬度
       longitude: 113.216553, // 实景图所在位置的经度
       zoom: 17, // 实景
-      apiKey:'fb6a0e88dbad4931d96a121bcf7c4442',
+      apiKey: 'fb6a0e88dbad4931d96a121bcf7c4442',
       vLoUrl
     }
   },
 
-   mounted() {
-      // this.initMap();
-    },
+  mounted() {
+    // this.initMap();
+  },
   created() {
     this.getButtons()
     this.getList()
   },
 
   methods: {
+    // 分页
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.table.pagecount = val
+      this.table.offset = 1
+      this.currentPage = 1
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.currentPage = val
+      this.table.offset = val
+      this.getList()
+    },
     getButtons() {
       const Edit = 'Pushingplan'
-      const isRoleEdit = checkButtons(JSON.parse(sessionStorage.getItem('buttons')), Edit)
+      const isRoleEdit = checkButtons(
+        JSON.parse(sessionStorage.getItem('buttons')),
+        Edit
+      )
       this.isRoleEdit = isRoleEdit
     },
 
@@ -144,14 +264,21 @@ export default {
       this.listLoading = true
       let url = '/authdata/GetDataByName'
       let data = this.table
-      if(this.table.parammaps.inputDatetime !== null){
-        data.parammaps.startdate = parseTime(this.table.parammaps.inputDatetime[0], '{y}-{m}-{d}')
-        data.parammaps.enddate = parseTime(this.table.parammaps.inputDatetime[1], '{y}-{m}-{d}')
-      }else{
+
+      if (this.table.parammaps.inputDatetime !== null) {
+        data.parammaps.startdate = parseTime(
+          this.table.parammaps.inputDatetime[0],
+          '{y}-{m}-{d}'
+        )
+        data.parammaps.enddate = parseTime(
+          this.table.parammaps.inputDatetime[1],
+          '{y}-{m}-{d}'
+        )
+      } else {
         data.parammaps.startdate = ''
         data.parammaps.enddate = ''
       }
-      postJson(url,data).then(response => {
+      postJson(url, data).then((response) => {
         console.log('table数据', response.data.list)
         if (response.data.list !== null) {
           this.list = response.data.list
@@ -165,18 +292,16 @@ export default {
       })
     },
 
-
-
     form_search() {
       console.log('点击了查询')
       this.getList()
     },
-    handleRefresh(){
+    handleRefresh() {
       this.table.parammaps.tname = ''
       this.table.parammaps.inputDatetime = null
       this.getList()
     },
-    handleRunning_trajectory(row){
+    handleRunning_trajectory(row) {
       console.log('点击了运行轨迹')
       this.run.dialogStatus = 'run'
       this.run.dialogFormVisible = true
@@ -184,18 +309,21 @@ export default {
       this.getRuningList()
     },
 
-    getRuningList(){
+    getRuningList() {
       let url = '/authdata/equipment/muster'
-      let data = '?id='+this.run.temp.id
-      getJson(url,data).then(response => {
+      let data = '?id=' + this.run.temp.id
+      getJson(url, data).then((response) => {
         // path
         // console.log('table数据', response.data.list)
         if (response.data !== null) {
           let arrList = []
-          for(let i=0;i<response.data.length;i++){
+          for (let i = 0; i < response.data.length; i++) {
             let list = []
             // let str= `${parseFloat(response.data[i].N)} ${parseFloat(response.data[i].A)} `
-            list.push(parseFloat(response.data[i].N),parseFloat(response.data[i].A))
+            list.push(
+              parseFloat(response.data[i].N),
+              parseFloat(response.data[i].A)
+            )
 
             arrList.push(list)
             ////////
@@ -203,11 +331,9 @@ export default {
             // testArr.push(parseFloat(response.data[i].A),parseFloat(response.data[i].N));
             // arrList.push(testArr);
             //////
-
           }
 
-
-          this.path = arrList  //真实数据
+          this.path = arrList //真实数据
           //  console.log(JSON.stringify(arrList),'arrList')
           //  console.log(arrList.join('\n'),'9999999');
           // 测试数据
@@ -239,55 +365,49 @@ export default {
         } else {
           this.path = []
         }
-          this.initMap();
+        this.initMap()
       })
     },
     async initMap() {
       await AMapLoader.load({
         key: 'fb6a0e88dbad4931d96a121bcf7c4442', // 替换为你的高德地图API Key
         version: '2.0',
-        plugins: [],
-      }).then(()=>{
-
-      })
+        plugins: []
+      }).then(() => {})
       // 后续牧场栏舍图
-      var backgroundImageUrl = this.vLoUrl; // 示例图片链接
+      var backgroundImageUrl = this.vLoUrl // 示例图片链接
       var imageLayer = new AMap.ImageLayer({
-          url: backgroundImageUrl,
-          bounds: new AMap.Bounds(
-            // this.path[0],
-            // this.path[this.path.length - 1]
-              // [113.20750428,40.87528624] ,// 左下
-              // [113.22348518,40.88395588], // 右上
-              [113.21478078,40.87649131], //左下角；
-               [113.23067741,40.88588863] ,   // 右上角
-          ),//图片范围大小的经纬度，传入西南和东北的经纬度坐标
-          zooms: [15, 20]
-      });
+        url: backgroundImageUrl,
+        bounds: new AMap.Bounds(
+          // this.path[0],
+          // this.path[this.path.length - 1]
+          // [113.20750428,40.87528624] ,// 左下
+          // [113.22348518,40.88395588], // 右上
+          [113.21478078, 40.87649131], //左下角；
+          [113.23067741, 40.88588863] // 右上角
+        ), //图片范围大小的经纬度，传入西南和东北的经纬度坐标
+        zooms: [15, 20]
+      })
       this.map = new window.AMap.Map(this.$refs.map, {
         zoom: 18,
         // zIndex:2,
-        center: [113.21549472999999,40.879621060000005],
-        layers: [
-            AMap.createDefaultLayer(),
-            imageLayer,
-        ]
-      });
-      const startMarker  = new window.AMap.Marker({
+        center: [113.21549472999999, 40.879621060000005],
+        layers: [AMap.createDefaultLayer(), imageLayer]
+      })
+      const startMarker = new window.AMap.Marker({
         position: this.path[this.path.length - 1], // 起始点位置
         map: this.map,
-        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png', // 起始点图标
-      });
-      const  endMarker = new window.AMap.Marker({
+        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png' // 起始点图标
+      })
+      const endMarker = new window.AMap.Marker({
         position: this.path[0],
         map: this.map,
-        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png', // 终点图标
-      });
+        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png' // 终点图标
+      })
 
-      this.drawPath();
+      this.drawPath()
     },
     drawPath() {
-
       const polyline = new window.AMap.Polyline({
         path: this.path,
         strokeStyle: 'red',
@@ -295,34 +415,35 @@ export default {
         strokeOpacity: 1,
         strokeWeight: 3,
         map: this.map,
-        dirArrowStyle: true,
-      });
+        dirArrowStyle: true
+      })
 
       // 调整地图视图以适应轨迹
 
-      this.map.setFitView();
+      this.map.setFitView()
       this.map.setZoom(18)
-
-    },
+    }
   }
 }
 </script>
 <style lang="scss" scoped>
-  .map-container {
-    height: 600px;
-    width: 1000px;
-  }
-  .search {
-    clear: both;
-  }
+.map-container {
+  height: 600px;
+  width: 1000px;
+}
+.search {
+  clear: both;
+}
 
-  .table {
-    margin-top: 10px;
-  }
-  .el-tag{margin-right: 5px;}
+.table {
+  margin-top: 10px;
+}
+.el-tag {
+  margin-right: 5px;
+}
 </style>
 <style lang="scss">
-  .red-row{
-    background: #fde2e2 !important;
-  }
+.red-row {
+  background: #fde2e2 !important;
+}
 </style>