feat:水电双计和管理机设备列表以及充值记录和开卡记录

src/api/record/index.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request';
+
+// 查询开卡记录
+export function fetchCardOpenRecordList(query) {
+  return request({
+    url: '/wpr/cardopenrcd/list',
+    method: 'get',
+    params: query
+  });
+}
+
+// 查询充值记录
+export function fetchRechargeRecordList(query) {
+  return request({
+    url: '/wpr/rechargercd/list',
+    method: 'get',
+    params: query
+  });
+}

src/api/trxrcd/index.js

@@ -16,3 +16,5 @@ export const addTrxrcd = (data) => {
     data
   });
 };
+
+

src/assets/icons/svg/threedrop.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="2" r="1" fill="#666666"/>
+<circle cx="8" cy="8" r="1" fill="#666666"/>
+<circle cx="8" cy="14" r="1" fill="#666666"/>
+</svg>

src/components/AmapSearch/index.vue

@@ -1,11 +1,13 @@
 <template>
   <el-dialog
-    title="位置选择"
+    title="校准位置"
     :visible.sync="dialogVisible"
-    width="800px"
+    width="1200px"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
+    :destroy-on-close="true"
     @close="handleClose"
+    append-to-body
   >
     <div class="map-container block-amap-box">
       <!-- <div class="searchBox">
@@ -34,43 +36,76 @@
         class="demo-form-inline"
         size="mini"
       >
-        <el-form-item label="经度">
-          <el-input v-model="locationForm.lng" disabled></el-input>
-        </el-form-item>
-        <el-form-item label="纬度">
-          <el-input v-model="locationForm.lat" disabled></el-input>
-        </el-form-item>
-        <!-- <el-form-item>
-          <el-button type="primary" size="mini" @click="locationSearch"
-            >定位</el-button
-          >
-        </el-form-item> -->
-        <el-form-item>
-          <el-input
-            @change="searchFun"
-            clearable
-            placeholder="请输入地区检索"
-            v-model.lazy="searchAddr"
-          >
-            <i slot="suffix" class="el-input__icon el-icon-search"></i>
-          </el-input>
-        </el-form-item>
+        <el-row :gutter="40">
+          <el-col :span="10">
+            <el-form-item label="经度">
+              <el-input
+                v-model="locationForm.lng"
+                placeholder="请输入经度"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item label="纬度">
+              <el-input
+                v-model="locationForm.lat"
+                placeholder="请输入纬度"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item>
+              <el-button type="primary" size="mini" @click="handleLocation"
+                >定位</el-button
+              >
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="40">
+          <el-col :span="20">
+            <el-form-item>
+              <el-input
+                clearable
+                placeholder="请输入地区检索"
+                v-model.lazy="searchAddr"
+              >
+                <!-- <i slot="suffix" class="el-input__icon el-icon-search"></i> -->
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item>
+              <el-button type="primary" size="mini" @click="handleSearch"
+                >查询</el-button
+              >
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
-      <div style="height: 70vh" id="searchAmapWrapper" tabindex="0"></div>
+      <div
+        style="height: 700px; margin-bottom: 24px"
+        id="searchAmapWrapper"
+        tabindex="0"
+      ></div>
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button
         @click="handleClose"
         :disabled="dialogSubmitLoading"
         :loading="dialogSubmitLoading"
+        class="plainbutton"
+        type="primary"
+        plain
+        size="mini"
         >取 消</el-button
       >
       <el-button
         :disabled="dialogSubmitLoading"
         type="primary"
         @click="submitForm"
+        size="mini"
         :loading="dialogSubmitLoading"
-        >确定</el-button
+        >保存</el-button
       >
     </span>
   </el-dialog>
@@ -102,17 +137,29 @@ export default {
         lng: '',
         lat: ''
       },
-      formatAddress: ''
+      formatAddress: '',
+      zoom: 14,
+      isAMap: true
     };
   },
   watch: {
     visible(val) {
       if (val !== this.dialogVisible) {
         this.dialogVisible = val;
+        this.locationForm = {
+          lng: this.data?.tmnLongitude,
+          lat: this.data?.tmnLatitude
+        };
 
         if (val) {
           this.$nextTick(() => {
-            this.initMap();
+            if (this.isAMap) {
+              this.initMap();
+              this.locationSearch();
+            } else {
+              this.initTiandiMap();
+              this.locationTiandiSearch();
+            }
           });
         } else {
           this.resetForm();
@@ -126,12 +173,93 @@ export default {
   },
   mounted() {},
   methods: {
+    initTiandiMap() {
+      var imageURL =
+        'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=bfe366f1af60602bd0e51853af6d23d2';
+
+      //创建自定义图层对象
+      var lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 15 });
+      var lay2 = new T.TileLayer(
+        process.env.VUE_APP_WMS_RESOURCE_ADDRESS_TEST,
+        {
+          minZoom: 15,
+          maxZoom: 30
+        }
+      );
+      // 自定义小板桥图层
+      /**
+       * {
+        transparent: true,
+        VERSION: '1.1.0',
+        service: 'WMS',
+        transparent: true,
+        request: 'GetMap',
+        width: 768,
+        height: 663,
+        layers: 'yunfei:xbq0718qp',
+        srs: 'EPSG:4326',
+        format: 'application/openlayers'
+      }
+       */
+      var lay1 = new T.TileLayer.WMS(
+        process.env.VUE_APP_WMS_RESOURCE_ADDRESS_PREFIX,
+        {
+          width: 768,
+          height: 663,
+          layers: 'yunfei:xbq0718qp',
+          transparent: true,
+          styles: ''
+          // crs: 'EPSG:4326'
+          // bbox: '106.448774,30.951907909501745,106.49528109636745,30.992093',
+          // format: 'application/openlayers'
+        }
+      );
+
+      this.map = new T.Map('searchAmapWrapper', {
+        layers: [lay1, lay]
+      });
+
+      this.map.on('click', (e) => {
+        const { lng, lat } = e.lnglat;
+        console.log(lng, lat, e.lnglat);
+        this.locationForm = {
+          lng,
+          lat
+        };
+
+        this.addMarker(lng, lat);
+
+        this.formatAddress = '';
+      });
+
+      this.geocoder = new T.Geocoder();
+
+      this.map.centerAndZoom(new T.LngLat(106.476278, 30.960783), this.zoom);
+    },
     initMap() {
+      const imageLayer = new AMap.ImageLayer({
+        url: process.env.VUE_APP_SYS_BASE_URL + '/layer/changli.png',
+        bounds: new AMap.Bounds(
+          [118.98942, 39.589391],
+          [119.018889, 39.567637]
+        ),
+        zooms: [16.5, 30]
+      });
+
       var map = new AMap.Map('searchAmapWrapper', {
         center: this.center,
         resizeEnable: true,
         zoom: 15,
-        lang: 'en'
+        lang: 'en',
+        layers: [
+          // 卫星
+          new AMap.TileLayer.Satellite(),
+          // 标准图层
+          new AMap.createDefaultLayer(),
+          imageLayer
+          // 路网
+          // new AMap.TileLayer.RoadNet()
+        ]
       });
 
       AMap.plugin(
@@ -153,6 +281,18 @@ export default {
         }
       );
 
+      var wms = new AMap.TileLayer.WMS({
+        url: process.env.VUE_APP_WMS_RESOURCE_ADDRESS,
+        blend: true,
+        tileSize: 256,
+        params: {
+          // LAYERS: 'map:shanghai',
+          // VERSION: '1.1.0'
+        }
+      });
+
+      wms.setMap(map);
+
       this.map = map;
 
       this.map.on('click', (e) => {
@@ -178,72 +318,179 @@ export default {
       this.map.plugin(['AMap.DistrictSearch'], () => {});
     },
     submitForm() {
-      this.dialogSubmitLoading = true;
-
-      return new Promise((resolve) => {
-        if (!this.formatAddress) {
-          this.geocoder.getAddress(
-            this.marker.getPosition(),
-            (status, result) => {
-              if (status === 'complete' && result.regeocode) {
-                const { formattedAddress } = result.regeocode;
-
-                this.formatAddress = formattedAddress;
-              } else {
-                this.$message.error('根据经纬度查询位置失败');
-              }
-              this.handleSuccess();
-              resolve();
+      if (this.locationForm.lat) {
+        this.dialogSubmitLoading = true;
+
+        return new Promise((resolve) => {
+          if (!this.formatAddress) {
+            if (this.isAMap) {
+              this.geocoder.getAddress(
+                this.marker.getPosition(),
+                (status, result) => {
+                  if (status === 'complete' && result.regeocode) {
+                    const { addressComponent } = result.regeocode;
+                    this.formatAddress = {
+                      province: addressComponent.province,
+                      city: addressComponent.city,
+                      district: addressComponent.district
+                    };
+                  } else {
+                    this.$message.error('根据经纬度查询位置失败');
+                  }
+                  this.handleSuccess();
+                  resolve();
+                }
+              );
+            } else {
+              this.geocoder.getLocation(this.marker.getLngLat(), (result) => {
+                if (result.getStatus() === 0) {
+                  const addressComponent =
+                    result.getAddressComponent().addressComponent;
+
+                  this.formatAddress = {
+                    province: addressComponent.province,
+                    city: addressComponent.city,
+                    district: addressComponent.county
+                  };
+                } else {
+                  this.$message.error('根据经纬度查询位置失败');
+                }
+
+                this.handleSuccess();
+                resolve();
+              });
             }
-          );
-        } else {
-          this.dialogSubmitLoading = false;
-          resolve();
-          this.handleSuccess();
-        }
-      });
+          } else {
+            this.dialogSubmitLoading = false;
+            resolve();
+            this.handleSuccess();
+          }
+        });
+      }
     },
     handleSuccess() {
       this.dialogSubmitLoading = false;
       this.handleClose();
-      this.$emit(
-        'success',
-        assign({ address: this.formatAddress }, this.locationForm)
-      );
+      this.$emit('success', assign(this.formatAddress, this.locationForm));
     },
     onSearchResult({ lng, lat }) {},
     handleClose() {
       this.$emit('update:visible', false);
     },
     handleInit() {},
-    searchFun() {
-      // console.log(this.marker)
-      if (this.marker) {
-        this.map.remove(this.marker);
+    handleSearch() {
+      if (this.isAMap) {
+        this.searchFun();
+      } else {
+        this.handleTiandiSearch();
       }
-      if (!this.searchAddr) {
-        return false;
+    },
+    handleTiandiSearch() {
+      if (this.searchAddr) {
+        if (this.marker) {
+          this.map.removeOverLay(this.marker);
+        }
+
+        if (!this.searchAddr) {
+          return false;
+        }
+
+        this.marker = new T.Marker();
+        this.geocoder.getPoint(this.searchAddr, (result) => {
+          if (result.getStatus() === 0) {
+            const lnglat = result.getLocationPoint();
+
+            this.locationForm.lng = lnglat.lng;
+            this.locationForm.lat = lnglat.lat;
+
+            this.marker.setLngLat(lnglat);
+            this.map.addOverLay(this.marker);
+            this.map.panTo(lnglat);
+          } else {
+            this.$message.error('根据地址查询位置失败');
+          }
+        });
       }
-      this.marker = new AMap.Marker();
-      this.geocoder.getLocation(this.searchAddr, (status, result) => {
-        if (status === 'complete' && result.geocodes.length) {
-          const lnglat = result.geocodes[0].location;
-
-          this.locationForm.lng = lnglat.lng;
-          this.locationForm.lat =
-            result.geocodes[0] && result.geocodes[0].formattedAddress;
-          this.marker.setPosition(lnglat);
-          this.map.add(this.marker);
-          this.map.setFitView(this.marker);
-        } else {
-          this.$message.error('根据地址查询位置失败');
+    },
+    searchFun() {
+      if (this.searchAddr) {
+        if (this.marker) {
+          this.map.remove(this.marker);
         }
-      });
+        if (!this.searchAddr) {
+          return false;
+        }
+        this.marker = new AMap.Marker();
+        this.geocoder.getLocation(this.searchAddr, (status, result) => {
+          if (status === 'complete' && result.geocodes.length) {
+            const lnglat = result.geocodes[0].location;
+
+            this.locationForm.lng = lnglat.lng;
+            this.locationForm.lat = lnglat.lat;
+
+            // result.geocodes[0] && result.geocodes[0].formattedAddress;
+            this.marker.setPosition(lnglat);
+            this.map.add(this.marker);
+            this.map.setFitView(this.marker);
+          } else {
+            this.$message.error('根据地址查询位置失败');
+          }
+        });
+      } else {
+        return;
+      }
     },
     resetForm() {
       this.locationForm = { lng: '', lat: '' };
       this.searchAddr = '';
       this.formatAddress = '';
+    },
+    locationSearch() {
+      if (!this.locationForm.lng || !this.locationForm.lat) {
+        return false;
+      }
+
+      if (this.marker) {
+        this.map.remove(this.marker);
+      }
+
+      this.marker = new AMap.Marker();
+
+      this.marker.setPosition([this.locationForm.lng, this.locationForm.lat]);
+      this.map.add(this.marker);
+      this.map.setFitView(this.marker, true, [300, 300, 300, 300]);
+    },
+    locationTiandiSearch() {
+      if (!this.locationForm.lng || !this.locationForm.lat) {
+        return false;
+      }
+
+      this.addMarker(this.locationForm.lng, this.locationForm.lat);
+    },
+    handleLocation() {
+      if (this.isAMap) {
+        this.locationSearch();
+      } else {
+        this.locationTiandiSearch();
+      }
+    },
+    addMarker(lng, lat) {
+      if (this.marker) {
+        this.map.removeOverLay(this.marker);
+      }
+
+      const lnglat = new T.LngLat(lng, lat);
+      this.marker = new T.Marker(lnglat);
+
+      //向地图上添加标注
+      this.map.addOverLay(this.marker);
+      this.map.panTo(lnglat);
+    }
+  },
+  beforeDestroy() {
+    if (this.isAMap) {
+      this.map && this.map.destroy();
+      this.map = null;
     }
   }
 };
@@ -386,4 +633,7 @@ export default {
     left: 10px;
   }
 }
+.plainbutton {
+  background-color: rgba(255, 255, 255, 0);
+}
 </style>

src/components/Table/index.vue

@@ -350,6 +350,7 @@ export default {
 .Btable-container {
   width: 100%;
   height: 100%;
+  min-height: 600px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;

src/main.js

@@ -48,6 +48,7 @@ import VueMeta from 'vue-meta';
 // 字典数据组件
 import DictData from '@/components/DictData';
 import CommonLayout from '@/layout/CommonLayout';
+import Dialog from '@/components/Dialog';
 
 import VueAMap from 'vue-amap';
 function formatImg(url) {
@@ -81,6 +82,7 @@ Vue.component('FileUpload', FileUpload);
 Vue.component('ImageUpload', ImageUpload);
 Vue.component('ImagePreview', ImagePreview);
 Vue.component('CommonLayout', CommonLayout);
+Vue.component('CommonDialog', Dialog);
 Vue.use(VueAMap);
 
 // 初始化vue-amap

src/views/equipmentList/components/CardRecordDialog.vue

@@ -0,0 +1,187 @@
+<template>
+  <common-dialog
+    :lock-scroll="false"
+    title="开卡记录"
+    :visible.sync="dialogVisible"
+    width="1200px"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+  >
+    <div class="dialog-common-page" style="height: 600px">
+      <div class="dialog-common-page__header">
+        <el-form
+          :model="queryParams"
+          ref="queryForm"
+          size="small"
+          :inline="true"
+          class="queryForm"
+        >
+          <el-form-item label="">
+            <el-date-picker
+              v-model="daterange"
+              type="daterange"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              range-separator="至"
+              :default-time="['00:00:00', '23:59:59']"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="primary" @click="handleSearch" :loading="loading"
+              >查询</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="dialog-common-page__body">
+        <b-table
+          ref="tableRef"
+          :data="loadData"
+          :columns="columns"
+          isShowIndex
+          :pageSizes="[10, 20, 50, 100]"
+        >
+        </b-table>
+      </div>
+    </div>
+  </common-dialog>
+</template>
+
+<script>
+import BTable from '@/components/Table/index.vue';
+
+import { fetchCardOpenRecordList } from '@/api/record';
+
+export default {
+  dicts: [],
+  components: {
+    BTable
+  },
+  props: {
+    id: {
+      type: String,
+      default: ''
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      loading: false,
+      queryParams: {},
+      columns: [
+        {
+          label: '会员卡号',
+          prop: 'cardNo'
+        },
+        {
+          label: '农户号',
+          prop: 'farmerOpenid',
+          minWidth: '130px',
+          align: 'center'
+        },
+        {
+          label: '农户名称',
+          prop: 'farmerName',
+          align: 'center'
+        },
+        {
+          label: '身份证号',
+          prop: 'farmerIdcard',
+          align: 'center'
+        },
+        {
+          label: '手机号',
+          prop: 'farmerPhone',
+          align: 'center'
+        },
+        {
+          label: '开卡时间',
+          prop: 'cardopenrcdCreatedate',
+          align: 'center'
+        },
+        {
+          label: '管理机器',
+          prop: 'devCode',
+          align: 'center'
+        }
+      ],
+      daterange: []
+    };
+  },
+  computed: {},
+  watch: {
+    visible(val) {
+      if (val !== this.dialogVisible) {
+        this.dialogVisible = val;
+      }
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    handleSearch() {
+      this.$refs.tableRef.refresh(true);
+    },
+    handleClose() {
+      this.$emit('update:visible', false);
+    },
+    handleSuccess() {
+      this.$emit('update:visible', false);
+      this.$emit('success');
+    },
+    loadData(parameter) {
+      const startTime = this.daterange?.[0] || '';
+      const endTime = this.daterange?.[1] || '';
+
+      const params = {
+        ...parameter,
+        ...this.queryParams,
+        startTime,
+        endTime,
+        devBid: this.id,
+        orderByColumn: 'cardopenrcdCreatedate',
+        isAsc: 'desc'
+      };
+
+      if (!this.dialogVisible) {
+        return Promise.resolve({ data: [] });
+      }
+
+      return fetchCardOpenRecordList(params);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog-common-page {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  height: 100%;
+
+  &__header {
+    width: 100%;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__body {
+    height: 0;
+    flex: 1 1 auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+</style>

src/views/equipmentList/components/MyCard.vue

@@ -63,9 +63,9 @@
               <!-- 白朗厂家没有这个功能，只能采集数据 -->
               信息编辑
             </div>
-            <div class="hovermore__delete" @click.stop="devDeleteClick">
+            <!-- <div class="hovermore__delete" @click.stop="devDeleteClick">
               删除设备
-            </div>
+            </div> -->
           </div>
           <svg-icon
             slot="reference"

src/views/equipmentList/components/RechargeRecordDialog.vue

@@ -0,0 +1,183 @@
+<template>
+  <common-dialog
+    :lock-scroll="false"
+    title="充值记录"
+    :visible.sync="dialogVisible"
+    width="1200px"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+  >
+    <div class="dialog-common-page" style="height: 600px">
+      <div class="dialog-common-page__header">
+        <el-form
+          :model="queryParams"
+          ref="queryForm"
+          size="small"
+          :inline="true"
+          class="queryForm"
+        >
+          <el-form-item label="">
+            <el-date-picker
+              v-model="daterange"
+              type="daterange"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              range-separator="至"
+              :default-time="['00:00:00', '23:59:59']"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="primary" @click="handleSearch" :loading="loading"
+              >查询</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="dialog-common-page__body">
+        <b-table
+          ref="tableRef"
+          :data="loadData"
+          :columns="columns"
+          isShowIndex
+          :pageSizes="[10, 20, 50, 100]"
+        >
+        </b-table>
+      </div>
+    </div>
+  </common-dialog>
+</template>
+
+<script>
+import BTable from '@/components/Table/index.vue';
+
+import { fetchRechargeRecordList } from '@/api/record';
+
+export default {
+  dicts: [],
+  components: {
+    BTable
+  },
+  props: {
+    id: {
+      type: String,
+      default: ''
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      loading: false,
+      queryParams: {},
+      columns: [
+        {
+          label: '会员卡号',
+          prop: 'cardNo'
+        },
+        {
+          label: '农户号',
+          minWidth: '130px',
+          prop: 'farmerOpenid',
+          align: 'center'
+        },
+        {
+          label: '农户名称',
+          prop: 'farmerName',
+          align: 'center'
+        },
+        {
+          label: '充值金额',
+          width: '80px',
+          prop: 'rechargercdRechargeamount',
+          align: 'center'
+        },
+        {
+          label: '充值时间',
+          align: 'center',
+          prop: 'rechargercdRechargetime'
+        },
+        {
+          label: '管理机器',
+          align: 'center',
+          prop: 'devCode'
+        }
+      ],
+      daterange: []
+    };
+  },
+  computed: {},
+  watch: {
+    visible(val) {
+      if (val !== this.dialogVisible) {
+        this.dialogVisible = val;
+      }
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    handleSearch() {
+      this.$refs.tableRef.refresh(true);
+    },
+    handleClose() {
+      this.$emit('update:visible', false);
+    },
+    handleSuccess() {
+      this.$emit('update:visible', false);
+      this.$emit('success');
+    },
+    loadData(parameter) {
+      const startTime = this.daterange?.[0] || '';
+      const endTime = this.daterange?.[1] || '';
+
+      const params = {
+        ...parameter,
+        ...this.queryParams,
+        startTime,
+        endTime,
+        devBid: this.id,
+        orderByColumn: 'rechargercdRechargetime',
+        isAsc: 'desc'
+      };
+
+      if (!this.dialogVisible) {
+        return Promise.resolve({ data: [] });
+      }
+
+      return fetchRechargeRecordList(params);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog-common-page {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  height: 100%;
+
+  &__header {
+    width: 100%;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__body {
+    height: 0;
+    flex: 1 1 auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+</style>

src/views/equipmentList/list/index.vue

@@ -56,12 +56,6 @@
               >查询</el-button
             >
           </el-form-item>
-          <!-- <el-form-item
-            class="addtmnbutton"
-            v-hasPermi="['iot:list:addDevice']"
-          >
-            <el-button type="primary" @click="addDevClick">添加设备</el-button>
-          </el-form-item> -->
         </el-row>
       </el-form>
     </template>
@@ -84,9 +78,9 @@
             :index="index"
             :ListItem="item"
             @devInfoClick="devInfoClick"
-            @devInfoEditClick="devInfoEditClick"
             @devDeleteClick="devDeleteClick(item)"
-            @shipinsectdata="shipinsectpage(item)"
+            @action1="handleCardRecordClick(item)"
+            @action2="handleRechargeRecordClick(item)"
           />
         </el-col>
       </el-row>
@@ -104,16 +98,19 @@
         />
       </div>
     </el-card>
+    <CardRecordDialog
+      :visible.sync="cardRecordDialogVisible"
+      :id="currentDeviceBid"
+    />
+    <RechargeRecordDialog
+      :visible.sync="rechargeRecordDialogVisible"
+      :id="currentDeviceBid"
+    />
     <TmnInfoDialog
       :visible.sync="addDialogshow"
       :dialogInfo="dialogInfo"
       @success="getdateList"
     />
-    <DeviceControlDialog
-      :visible.sync="deviceControlShow"
-      :dialogInfo="deviceControlInfo"
-      @success="getdateList"
-    />
     <deleteDialog
       :visible.sync="devDeleteShow"
       title="删除设备"
@@ -121,30 +118,26 @@
 备，是否删除？"
       @success="deleteDialogSuccess"
     />
-    <addDevDialog
-      :visible.sync="addDialogShowFlag"
-      :firmListData="firmListData"
-      @success="getdateList"
-    />
   </common-layout>
 </template>
 <script>
 import MyCard from '../components/MyCard.vue';
 import { iotdeviceList, iotdeviceDelete } from '@/api/iotm/insectLamp';
 import { iotfirmList } from '@/api/iotm/supplier';
+
+import CardRecordDialog from '../components/CardRecordDialog.vue';
+import RechargeRecordDialog from '../components/RechargeRecordDialog.vue';
 import TmnInfoDialog from '../components/tmnInfoDialog.vue';
-import DeviceControlDialog from '../components/deviceControlDialog.vue';
 import deleteDialog from '../components/deleteDialog';
-import addDevDialog from '../components/addDevDialog';
 
 import { DEVICETYPE } from '@/utils/constants';
 export default {
   components: {
     MyCard,
+    CardRecordDialog,
+    RechargeRecordDialog,
     TmnInfoDialog,
-    DeviceControlDialog,
-    deleteDialog,
-    addDevDialog
+    deleteDialog
   },
   props: {
     deviceType: {
@@ -186,7 +179,10 @@ export default {
       dialogInfo: {}, //信息管理弹窗数据
       deviceControlInfo: {},
       devDeleteShow: false,
-      deletedevItemData: {}
+      deletedevItemData: {},
+      cardRecordDialogVisible: false,
+      rechargeRecordDialogVisible: false,
+      currentDeviceBid: ''
     };
   },
   created() {
@@ -245,6 +241,22 @@ export default {
         path: '/weatherStation/history',
         query: { devBid: item.devBid, cId: item.cId, devCode: item?.devCode }
       });
+    },
+    handleCardRecordClick(row) {
+      if (!row.devBid) {
+        return;
+      }
+
+      this.currentDeviceBid = row.devBid;
+      this.cardRecordDialogVisible = true;
+    },
+    handleRechargeRecordClick(row) {
+      if (!row.devBid) {
+        return;
+      }
+
+      this.currentDeviceBid = row.devBid;
+      this.rechargeRecordDialogVisible = true;
     }
   }
 };

src/views/monitoringMamage/components/IrrigationRecord.vue

@@ -1,15 +1,43 @@
 <template>
-  <el-dialog title="灌溉记录" :visible.sync="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false"
-    @close="handleClose" width="1400px">
+  <el-dialog
+    title="灌溉记录"
+    :visible.sync="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleClose"
+    width="1400px"
+  >
     <div style="margin-bottom: 20px">
-      <el-date-picker v-model="dateValue" clearable type="daterange" value-format="yyyy-MM-dd HH:mm:ss"
-        :default-time="['00:00:00', '23:59:59']" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+      <el-date-picker
+        v-model="dateValue"
+        clearable
+        type="daterange"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        :default-time="['00:00:00', '23:59:59']"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      >
       </el-date-picker>
-      <el-button type="primary" size="small" style="margin-left: 16px;" @click="handleSearch">查询</el-button>
+      <el-button
+        type="primary"
+        size="small"
+        style="margin-left: 16px"
+        @click="handleSearch"
+        >查询</el-button
+      >
     </div>
-    <b-table ref="tableRef" :args="{ 'highlight-current-row': true }" :data="loadData" :columns="columns" showIndex>
+    <b-table
+      ref="tableRef"
+      :args="{ 'highlight-current-row': true }"
+      :data="loadData"
+      :columns="columns"
+      showIndex
+    >
       <template #cardusercdBillingtype="scope">
-        <span style="display:flex;align-items:center;justify-content:center">
+        <span
+          style="display: flex; align-items: center; justify-content: center"
+        >
           {{ changeDict(scope.row.cardusercdBillingtype) }}
         </span>
       </template>
@@ -18,10 +46,10 @@
 </template>
 
 <script>
-import { getCardusercdList } from '@/api/card/index.js'
+import { getCardusercdList } from '@/api/card/index.js';
 import { assign, omit } from 'lodash-es';
-import LeftImg from '../assets/img.svg'
-import BTable from '@/components/Table'
+import LeftImg from '../assets/img.svg';
+import BTable from '@/components/Table';
 export default {
   name: 'IrrigationRecord',
   props: {
@@ -31,7 +59,7 @@ export default {
     },
     irrigationDetail: {
       type: Object,
-      default: () => { }
+      default: () => {}
     }
   },
   data() {
@@ -43,7 +71,7 @@ export default {
           label: '水源编号',
           prop: 'waterNum',
           customRender: '',
-          align: 'center',
+          align: 'center'
         },
         {
           label: '水源名称',
@@ -81,18 +109,18 @@ export default {
           customRender: '',
           align: 'center'
         },
-        {
-          label: '计费方式',
-          prop: 'cardusercdBillingtype',
-          customRender: 'cardusercdBillingtype',
-          align: 'center'
-        },
-        {
-          label: '计费标准',
-          prop: 'cardusercdPriceinfo',
-          customRender: '',
-          align: 'center'
-        },
+        // {
+        //   label: '计费方式',
+        //   prop: 'cardusercdBillingtype',
+        //   customRender: 'cardusercdBillingtype',
+        //   align: 'center'
+        // },
+        // {
+        //   label: '计费标准',
+        //   prop: 'cardusercdPriceinfo',
+        //   customRender: '',
+        //   align: 'center'
+        // },
         {
           label: '扣除金额',
           prop: 'cardusercdUsemoney',
@@ -100,7 +128,7 @@ export default {
           align: 'center'
         }
       ],
-      dialogVisible: false,
+      dialogVisible: false
     };
   },
   components: {
@@ -114,9 +142,9 @@ export default {
     },
     irrigationDetail: {
       handler(val) {
-        const tmnId = val?.tmnId
-        this.tmnId = tmnId
-        this.handleSearch()
+        const tmnId = val?.tmnId;
+        this.tmnId = tmnId;
+        this.handleSearch();
       },
       deep: true
     }
@@ -125,13 +153,13 @@ export default {
     changeDict(flag) {
       switch (flag) {
         case '0':
-          return '水电双计'
+          return '水电双计';
         case '1':
-          return '只计水'
+          return '只计水';
         case '2':
-          return '只计电'
-       }
-     },
+          return '只计电';
+      }
+    },
     loadData(parameter) {
       const payload = omit(assign({}, parameter), []);
       return this.getTableData(payload);
@@ -140,16 +168,16 @@ export default {
       this.$refs.tableRef && this.$refs.tableRef.refresh(true);
     },
     getTableData() {
-      const [startTime, endTime] = this.dateValue
+      const [startTime, endTime] = this.dateValue;
       return getCardusercdList({
         tmdId: this.tmnId,
         startTime,
         endTime
-      })
+      });
     },
     handleClose() {
       this.$emit('update:visible', false);
-    },
+    }
   }
 };
 </script>

vue.config.js

@@ -12,6 +12,8 @@ const name = process.env.VUE_APP_TITLE || '水价改革'; // 网页标题
 
 const port = process.env.port || process.env.npm_config_port || 8021; // 端口
 
+const proxyPath = 'http://192.168.3.40:7000';
+
 // vue.config.js 配置说明
 // 官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
 // 这里只列一部分，具体配置参考文档
@@ -40,7 +42,7 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       ['/iotmprod-api']: {
         // target: `http://192.168.1.57:8027`,
-        target: `https://dev.a.yunfeiyun.com`,
+        target: proxyPath,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''
@@ -48,7 +50,7 @@ module.exports = {
       },
       ['/icsprod-api']: {
         // target: `http://192.168.1.57:8027`,
-        target: `https://dev.a.yunfeiyun.com`,
+        target: proxyPath,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''
@@ -57,7 +59,7 @@ module.exports = {
       [process.env.VUE_APP_BASE_API]: {
         // target: `http://192.168.1.57:8027`,
         // target: `http://192.168.95:8021`,
-        target: `https://dev.a.yunfeiyun.com`,
+        target: proxyPath,
         changeOrigin: true,
         pathRewrite: {
           // ['^' + process.env.VUE_APP_BASE_API]: ''
@@ -65,7 +67,7 @@ module.exports = {
       },
       ['/portalprod-api']: {
         // target: `http://192.168.1.95:7000`,
-        target: `https://dev.a.yunfeiyun.com`,
+        target: proxyPath,
         // target: `http://114.55.0.7:7000`,
         changeOrigin: true,
         pathRewrite: {