فهرست منبع

新加采集员相关页面

zhangdan 4 سال پیش
والد
کامیت
fde3c7931a

+ 19 - 0
package-lock.json

@@ -16080,6 +16080,11 @@
       "integrity": "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=",
       "dev": true
     },
+    "throttle-debounce": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -16606,6 +16611,15 @@
       "resolved": "https://registry.npmjs.org/v-runtime-template/-/v-runtime-template-1.10.0.tgz",
       "integrity": "sha512-WLlq9jUepSfUrMEenw3mn7FDXX6hhbl11JjC1OKhwLzifHzVrY5a696TUHDPyj9jke3GGnR7b+2T3od/RL5cww=="
     },
+    "v-viewer": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/v-viewer/-/v-viewer-1.5.1.tgz",
+      "integrity": "sha512-Q5ICKzmYQD0qTf+hti2Lhgy6UYY2zgFr+YrN9a3yPgr7pOjYrG405Pz4+6Z6FXlhdhGysCWFJUNCI2tsIyvjWQ==",
+      "requires": {
+        "throttle-debounce": "^2.0.1",
+        "viewerjs": "^1.5.0"
+      }
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -16649,6 +16663,11 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "viewerjs": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.9.0.tgz",
+      "integrity": "sha512-2D1OdGatb5aCZbZvaCdbJYuoDObjD9ITe7GZp0SoG7rgw3arOIZoIO1ygmfG+I4+RvEuDo+aZ75kNgwmYS9j3w=="
+    },
     "viser": {
       "version": "2.4.6",
       "resolved": "https://registry.npmjs.org/viser/-/viser-2.4.6.tgz",

+ 1 - 0
package.json

@@ -30,6 +30,7 @@
     "nprogress": "^0.2.0",
     "qrcode": "^1.4.4",
     "v-runtime-template": "^1.10.0",
+    "v-viewer": "^1.5.1",
     "viser-vue": "^2.4.6",
     "vue": "^2.6.10",
     "vue-clipboard2": "^0.2.1",

+ 33 - 2
src/config/router.config.js

@@ -87,7 +87,7 @@ export const asyncRouterMap = [{
     component: PageView,
     meta: {
       title: '大数据看板',
-      icon: 'fund',
+      icon: 'fund'
       // permission: 'M_dataView'
     },
     hideChildrenInMenu: true,
@@ -110,7 +110,7 @@ export const asyncRouterMap = [{
           title: '大数据看板',
           icon: 'fund',
           hidden: true,
-          hiddenHeaderContent: true,
+          hiddenHeaderContent: true
         }
       }]
     }]
@@ -412,6 +412,26 @@ export const asyncRouterMap = [{
         icon: 'snippets',
         permission: 'M_rubbishTotal_list'
       }
+    },
+    {
+      path: '/reportForm/unRecyclableRubbishTotal',
+      name: 'unRecyclableRubbishTotal',
+      component: () => import(/* webpackChunkName: "reportForm" */ '@/views/reportForm/unRecyclableRubbishTotal.vue'),
+      meta: {
+        title: '非可回收垃圾汇总表',
+        icon: 'bar-chart'
+        // permission: 'M_rubbishTotal_list'
+      }
+    },
+    {
+      path: '/reportForm/unRecyclableRubbishDetails',
+      name: 'unRecyclableRubbishDetails',
+      component: () => import(/* webpackChunkName: "reportForm" */ '@/views/reportForm/unRecyclableRubbishDetails.vue'),
+      meta: {
+        title: '非可回收垃圾明细',
+        icon: 'fund'
+        // permission: 'M_rubbishTotal_list'
+      }
     }
     ]
   },
@@ -506,6 +526,17 @@ export const asyncRouterMap = [{
         permission: 'M_network_list'
       }
     },
+    {
+      path: '/equipmentManage/collector',
+      name: 'collector',
+      component: () => import(/* webpackChunkName: "equipmentManage" */
+        '@/views/equipmentManage/collector/collector.vue'),
+      meta: {
+        title: '采集员管理',
+        icon: 'team'
+        // permission: 'M_network_list'
+      }
+    },
     {
       path: '/equipmentManage/labelSetting',
       name: 'labelSetting',

+ 8 - 3
src/main.js

@@ -8,7 +8,9 @@ import store from './store/'
 import { VueAxios } from './utils/request'
 //  复制内容到粘贴板
 import VueClipboard from 'vue-clipboard2'
-
+// 图片查看器
+import Viewer from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
 // mock
 // import './mock'
 
@@ -20,10 +22,13 @@ import './utils/filter'
 import VueCookies from 'vue-cookies' // global filter
 // 无缝滚动
 import scroll from 'vue-seamless-scroll'
-Vue.use(scroll)
-Vue.config.productionTip = false
 // datav
 import dataV from '@jiaminghi/data-view'
+Vue.use(Viewer)
+// 图片查看器下边的操作按钮-若想隐藏改为false即可
+Viewer.setDefaults({ Options: { 'inline': false, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' } })
+Vue.use(scroll)
+Vue.config.productionTip = false
 Vue.use(dataV)
 // mount axios Vue.$http and this.$http
 Vue.use(VueAxios)

+ 148 - 0
src/views/equipmentManage/collector/addCollector.vue

@@ -0,0 +1,148 @@
+<template>
+  <a-modal :footer="null" centered :title="titleText" v-model="isShow" @cancle="cancel">
+    <a-spin :spinning="loading">
+      <a-form-model :model="formData" ref="ruleForm" :rules="rules">
+        <a-form-model-item label="网点标签" :label-col="{span:6}" :wrapper-col="{span:16}" prop="labelNoList">
+          <a-select
+            style="max-height: 50px;overflow: auto;"
+            id="network-labelNoList"
+            placeholder="请选择网点标签"
+            allowClear
+            v-model="formData.labelNoList"
+            :showSearch="true"
+            option-filter-prop="children"
+            :filter-option="filterOption"
+          >
+            <a-select-option v-for="item in lableData" :key="item.labelNo" :value="item.labelNo">{{ item.labelName }}</a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item label="采集员姓名" :label-col="{span:6}" :wrapper-col="{span:16}">
+          <a-input placeholder="请输入网点标签名称(30个字符以内)" v-model="formData.collectorName" allowClear :maxLength="30"/>
+        </a-form-model-item>
+        <a-form-model-item label="采集员手机" :label-col="{span:6}" :wrapper-col="{span:16}" prop="collectorPhone">
+          <a-input placeholder="请输入采集员手机" v-model="formData.collectorPhone" allowClear :maxLength="11"/>
+        </a-form-model-item>
+        <a-form-model-item :wrapper-col="{ span: 24, offset: 8 }">
+          <a-button type="primary" @click="handleSubmit()" :style="{ marginRight: '15px' }">
+            保存
+          </a-button>
+          <a-button :style="{ marginLeft: '15px' }" @click="cancel">
+            取消
+          </a-button>
+        </a-form-model-item>
+      </a-form-model>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+// import { lableDetails, saveLable } from '@/api/labelSetting.js'
+import { lableSeleteList } from '@/api/labelSetting.js'
+export default {
+  name: 'AddCollector',
+  props: {
+    openModal: {
+      type: Boolean,
+      default: false
+    },
+    collectorId: {
+      type: [Number, String],
+      default: ''
+    }
+  },
+  data () {
+    return {
+      formData: { collectorName: '', collectorPhone: '', labelNoList: undefined },
+      isShow: this.openModal, // 弹框状态
+      titleText: '新增',
+      rules: {
+        labelNoList: [{ required: true, message: '请选择网点标签', trigger: 'change' }],
+        collectorPhone: [{ required: true, message: '请输入正确的手机号', trigger: 'blur' }]
+      },
+      loading: false,
+      lableData: [] // 标签数据
+    }
+  },
+  methods: {
+    // 过滤数据
+    filterOption (input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      )
+    },
+    // 获取标签数据
+    getlableSeleteList () {
+      lableSeleteList().then(res => {
+        if (res.status == 200) {
+          this.lableData = res.data || []
+        }
+      })
+    },
+    // 数据详情
+    getPageInfo () {
+      const _this = this
+      _this.loading = true
+      // lableDetails({
+      //   id: _this.id
+      // }).then(res => {
+      //   if (res.status == 200) {
+      //     _this.loading = false
+      //     _this.formData = Object.assign({}, this.formData, res.data)
+      //   }
+      // })
+    },
+    // 保存
+    handleSubmit () {
+      this.$refs.ruleForm.validate(valid => {
+        const _this = this
+        if (valid) {
+          const params = JSON.parse(JSON.stringify(this.formData))
+          // saveLable(params).then(res => {
+          //   console.log(res, 'rrrrrrrrr')
+          //   if (res.status == 200) {
+          //     _this.$message.success(res.message)
+          //     _this.$emit('refresh')
+          //     setTimeout(function () {
+          //       _this.cancel()
+          //     }, 300)
+          //   }
+          // })
+        }
+      })
+    },
+    cancel (e) {
+      this.clear()
+      this.$emit('close')
+    },
+    clear () {
+      this.$refs.ruleForm.resetFields()
+      delete this.formData.id
+      this.formData.macAddress = ''
+      this.formData.remarks = ''
+    }
+  },
+  // 监听弹窗
+  watch: {
+    // 父页面传过来的弹窗状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    isShow (newValue, oldValue) {
+      if (newValue) {
+        this.getlableSeleteList()
+        if (this.collectorId) { // 编辑
+          this.titleText = '编辑'
+          // this.getPageInfo()
+        } else {
+          this.titleText = '新增'
+        }
+      } else {
+        this.cancel()
+      }
+    }
+  }
+}
+</script>
+
+<style>
+</style>

+ 249 - 0
src/views/equipmentManage/collector/collector.vue

@@ -0,0 +1,249 @@
+<template>
+  <a-card :bordered="false" class="network-table-page-search-wrapper">
+    <div class="network-searchForm">
+      <a-form layout="inline" v-bind="formItemLayout" @keyup.enter.native="$refs.table.refresh(true)">
+        <a-row :gutter="24">
+          <a-col :xs="24" :sm="12" :md="8" :lg="6">
+            <a-form-item label="创建时间" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <a-range-picker
+                id="network-time"
+                v-model="time"
+                :format="dateFormat"
+                :placeholder="['开始时间','结束时间']"
+                :disabledDate="disabledDate"
+                @change="onChange" />
+            </a-form-item>
+          </a-col>
+          <a-col :xs="24" :sm="12" :md="8" :lg="6">
+            <a-form-item label="网点名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <a-input id="network-queryWord" allowClear :maxLength="30" v-model="queryParam.queryWord" placeholder="请输入网点名称" />
+            </a-form-item>
+          </a-col>
+          <a-col :xs="24" :sm="12" :md="8" :lg="6">
+            <a-form-item label="采集员" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <a-input id="network-queryWord" allowClear :maxLength="30" v-model="queryParam.queryWord" placeholder="请输入姓名/手机号码" />
+            </a-form-item>
+          </a-col>
+          <a-col :xs="24" :sm="12" :md="8" :lg="6">
+            <a-button class="handle-btn serach-btn" id="network-btn-serach" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+            <a-button class="handle-btn" type="" id="network-btn-reset" @click="handleReset">重置</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <div class="table-operator">
+      <a-button v-if="$hasPermissions('B_network_add')" class="add-btn" id="network-btn-add" type="primary" @click="handleEdit">新增</a-button>
+    </div>
+    <s-table
+      ref="table"
+      size="default"
+      :rowKey="(record) => record.id"
+      :columns="columns"
+      :data="loadData"
+      bordered>
+      <!-- 启禁用 -->
+      <span slot="status" slot-scope="text, record">
+        <a-switch
+          checkedChildren="启用"
+          unCheckedChildren="禁用"
+          v-model="record.loginFlag"
+          @change="changeFlagHandle(text, record)"
+          id="userList-changeFlagHandle" />
+        <!-- <span v-if="!$hasPermissions('B_userManage_enable')">--</span> -->
+      </span>
+      <!-- 操作 -->
+      <template slot="action" slot-scope="text, record">
+        <a-icon
+          type="unlock"
+          title="重置密码"
+          class="actionBtn icon-orange"
+          @click="resetPassword(record)" />
+        <a-icon type="edit" title="编辑" class="actionBtn icon-blues" @click="handleEdit(record)" />
+        <a-icon
+          type="delete"
+          title="删除"
+          class="actionBtn icon-red"
+          @click="delect(record)" />
+          <!-- <span v-if="!$hasPermissions('B_userManage_edit') && !($hasPermissions('B_userManage_resetPwd') && record.loginFlag==1) && !($hasPermissions('B_userManage_del') && record.loginFlag==0) ">--</span> -->
+      </template>
+    </s-table>
+    <!-- 新增编辑 -->
+    <add-Collector :openModal="openCollectorModal" :collectorId="collectorId" @refresh="handleReset" @close="closeModal" />
+  </a-card>
+</template>
+
+<script>
+import { STable, VSelect } from '@/components'
+import moment from 'moment'
+import addCollector from './addCollector.vue'
+import { stationList } from '@/api/station'
+export default {
+  name: 'Collector',
+  components: { STable, VSelect, addCollector },
+  data () {
+    return {
+      formItemLayout: {
+        labelCol: { span: 7 },
+        wrapperCol: { span: 17 }
+      },
+      // 查询参数
+      queryParam: {
+        beginDate: null, // 开始时间
+        endDate: null, // 结束时间
+        queryWord: '', //  网点名称
+        labelNoList: []
+      },
+      // 表头
+      columns: [
+        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
+        { title: '创建时间', dataIndex: 'createDate', width: 200, align: 'center' },
+        { title: '网点名称', dataIndex: 'name', width: 200, align: 'center', customRender: text => { return text || '--' } },
+        { title: '采集员姓名', dataIndex: '', width: 150, align: 'center', ellipsis: true, customRender: text => { return text || '--' } },
+        { title: '采集员手机', dataIndex: '', width: 150, align: 'center', ellipsis: true, customRender: text => { return text || '--' } },
+        { title: '状态', dataIndex: 'loginFlag', width: 100, align: 'center', slot: 'status' },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: 150, align: 'center' }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return stationList(Object.assign(parameter, this.queryParam)).then(res => {
+          if (res.status == 200) {
+            const no = (res.data.pageNo - 1) * res.data.pageSize
+            for (let i = 0; i < res.data.list.length; i++) {
+              const _item = res.data.list[i]
+              _item.no = no + i + 1
+            }
+            return res.data
+          }
+        })
+      },
+      // 将默认当天时间日期回显在时间选择框中
+      time: [],
+      dateFormat: 'YYYY-MM-DD',
+      openCollectorModal: false, //  新增编辑网点信息
+      collectorId: null //  网点id
+    }
+  },
+  methods: {
+    moment,
+    // 不可选日期
+    disabledDate (date, dateStrings) {
+      return date && date.valueOf() > Date.now()
+    },
+    // 创建时间change
+    onChange (dates, dateStrings) {
+      if ((dates, dateStrings)) {
+        this.queryParam.beginDate = dateStrings[0]
+        this.queryParam.endDate = dateStrings[1]
+      }
+    },
+    filterOption (input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      )
+    },
+    // 重置
+    handleReset () {
+      this.queryParam.beginDate = undefined
+      this.queryParam.endDate = undefined
+      this.queryParam.queryWord = ''
+      this.time = []
+      this.$refs.table.refresh(true)
+      this.networkId = undefined
+      this.queryParam.labelNoList = []
+    },
+    //  新增、编辑网点
+    handleEdit (row) {
+      this.collectorId = row ? row.id : null
+      this.openCollectorModal = true
+      console.log(this.collectorId)
+    },
+    //  关闭弹框
+    closeModal () {
+      this.collectorId = null
+      this.openCollectorModal = false
+      this.$refs.table.refresh()
+    },
+    // 修改状态
+    changeFlagHandle (text, record) {
+      const _data = {
+        id: record.id,
+        flag: record.loginFlag ? '1' : '0'
+      }
+      // updateEnableStatus(_data).then(res => {
+      //   if (res.status + '' === '200') {
+      //     this.$message.success(res.message)
+      //   } else {
+      //     record.loginFlag = !record.loginFlag
+      //   }
+      // })
+    },
+    // 重置密码
+    resetPassword (row) {
+      // resetPSD({
+      //   id: row.id
+      // }).then(res => {
+      //   if (res.status == 200) {
+      //     this.$message.success(res.message)
+      //   }
+      // })
+    },
+    // 删除
+    delect (row) {
+      const _this = this
+      this.$confirm({
+        title: '警告',
+        centered: true,
+        content: '删除后无法恢复,确认删除?',
+        okText: '确定',
+        cancelText: '取消'
+        // onOk () {
+        //   delectUserPower({
+        //     id: row.id
+        //   }).then(res => {
+        //     if (res.status == 200) {
+        //       _this.$message.success(res.message)
+        //       _this.$refs.table.refresh()
+        //     }
+        //   })
+        // }
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+  .network-table-page-search-wrapper{
+    .network-searchForm{
+      .ant-form-inline .ant-form-item{
+        width: 100%;
+      }
+      // 搜索框的下间距
+      .ant-form-item {
+      	margin-bottom: 10px;
+      }
+      .handle-btn{
+        margin-top: 4px;
+      }
+      .serach-btn{
+        margin-right: 10px;
+      }
+    }
+    .actionBtn {
+    	font-size: 20px;
+    	padding: 0 10px;
+    }
+    // 合计
+    .total {
+    	margin: 15px 0 25px;
+    	width: 100%;
+    	background-color: #e6f7ff;
+    	border: 1px solid #91d5ff;
+    	padding: 8px 15px 8px 27px;
+    	border-radius: 4px;
+    	.iconImg {
+    		color: #1890FF;
+    		margin-right: 10px;
+    	}
+    }
+  }
+</style>

+ 246 - 0
src/views/reportForm/unRecyclableRubbishDetails.vue

@@ -0,0 +1,246 @@
+<template>
+  <a-card :bordered="false" class="unRecyclableRubbishDetails-container">
+    <!-- 搜索条件 -->
+    <div class="unRecyclableRubbishDetails-container-searchForm">
+      <a-form-model
+        ref="queryParam"
+        :model="queryParam"
+        layout="inline"
+        @keyup.enter.native="$refs.table.refresh(true)"
+      >
+        <a-row :gutter="24">
+          <a-col :xs="24" :sm="12" :md="6" :lg="5">
+            <a-form-model-item label="最后清运时间" :label-col="{ span:8 }" :wrapper-col="{ span:16}">
+              <a-range-picker
+                id="notCleanNetwork-time"
+                v-model="time"
+                style="width: 100%;"
+                :format="dateFormat"
+                :placeholder="['开始时间','结束时间']"
+                :disabledDate="disabledDate"
+                @change="onChange" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :xs="24" :sm="12" :md="6" :lg="5">
+            <a-form-model-item label="采集员" :label-col="{ span:8}" :wrapper-col="{ span:16}">
+              <a-input id="network-queryWord" allowClear :maxLength="30" v-model="queryParam.queryWord" placeholder="请输入姓名/手机号码" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :xs="24" :sm="12" :md="6" :lg="5">
+            <a-form-model-item label="网点名称" :label-col="{ span:8}" :wrapper-col="{ span:16}">
+              <a-select
+                style="max-height: 50px;overflow: auto;margin-top: 3px;"
+                id="notCleanNetwork-stationNo"
+                placeholder="请选择网点名称"
+                allowClear
+                mode="multiple"
+                v-model="queryParam.stationNo"
+                :showSearch="true"
+                option-filter-prop="children"
+                :filter-option="filterOption">
+                <a-select-option v-for="item in optionData" :key="item.stationNo" :value="item.stationNo">{{ item.name }}</a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col :xs="24" :sm="12" :md="6" :lg="4">
+            <a-button type="primary" @click="$refs.table.refresh(true)" id="notCleanNetwork-refresh" style="margin: 4px 10px 0 20px">查询</a-button>
+            <a-button type="" @click="reset" id="notCleanNetwork-reset" style="margin-top: 4px">重置</a-button>
+          </a-col>
+        </a-row>
+
+      </a-form-model>
+    </div>
+    <!-- 合计 -->
+    <a-alert type="info" showIcon style="margin-bottom:15px">
+      <div class="ftext" slot="message">总计<span> {{ orderTotal }} </span>条,<span> {{ recyclableWasteTotal }} </span>kg。
+        其中,其他垃圾总计<span> {{ }} </span>kg,厨余垃圾总计<span>{{ }} </span>kg,建筑垃圾总计<span> {{ }} </span>kg
+      </div>
+    </a-alert>
+    <!-- 列表 -->
+    <s-table ref="table" :rowKey="(record) => record.id" :columns="columns" :data="loadData" bordered>
+      <!-- 图片 -->
+      <template slot="img">
+        <img :src="images[0]" class="image1" @click="isShow">
+        <viewer :images="images" class="viewer" ref="viewer"@inited="inited">
+          <img v-for="src in images" :src="src" :key="src" class="image">
+        </viewer>
+        <P>{{ images ? images.length+' 张' :'' }}</P>
+      </template>
+    </s-table>
+    </s-table>
+  </a-card>
+</template>
+
+<script>
+import { STable, VSelect } from '@/components'
+import { stationList } from '@/api/releaseRecord.js'
+// import { netWorkCleanRecordList, getCleanStationSum } from '@/api/cleanManage.js'
+import { getPutInTimeList, getDetailTotal } from '@/api/reportForm.js'
+import moment from 'moment'
+import getDate from '@/libs/getDate.js'
+export default {
+  components: {
+    STable,
+    VSelect
+  },
+  data () {
+    return {
+      orderTotal: 0, //  总计条数
+      recyclableWasteTotal: 0, //  可回收垃圾总计
+      wasteClothes: 0, //  废旧衣物总计
+      wastePaper: 0, //  废旧纸张总计
+      wasteMetal: 0, //  废旧金属总计
+      queryParam: {
+        stationNo: undefined, // 网点名称
+        beginDate: null, // 开始时间
+        endDate: null // 结束时间
+      },
+      optionData: [], // 网点列表数据
+      // 将默认当天时间日期回显在时间选择框中
+      time: [
+        moment(getDate.getRecentday().starttime, 'YYYY-MM-DD'),
+        moment(getDate.getRecentday().endtime, 'YYYY-MM-DD')
+      ],
+      dateFormat: 'YYYY-MM-DD', // 日期格式
+      columns: [
+        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
+        { title: '网点名称', dataIndex: '', width: 100, align: 'center', customRender: (text) => { return text || '--' } },
+        { title: '采集员姓名', dataIndex: '', width: 100, align: 'center', customRender: (text) => { return text || '--' } },
+        { title: '采集员手机', dataIndex: '', width: 100, align: 'center' },
+        { title: '其他垃圾(kg)', dataIndex: '', width: 100, align: 'center', customRender: (text) => { return text || '0' } },
+        { title: '厨余垃圾(kg)', dataIndex: '', width: 100, align: 'center', customRender: (text) => { return text || '0' } },
+        { title: '建筑垃圾(kg)', dataIndex: '', width: 100, align: 'center', customRender: (text) => { return text || '0' } },
+        { title: '总计(kg)', dataIndex: '', width: 100, align: 'center', customRender: (text) => { return text || '0' } },
+        { title: '备注', dataIndex: '', width: 100, align: 'center', customRender: (text) => { return text || '--' } },
+        { title: '图片', width: 100, dataIndex: 'img', align: 'center', scopedSlots: { customRender: 'img' } }
+      ],
+      // 图片
+      images: [
+        'https://picsum.photos/400/400',
+        'https://picsum.photos/600/600',
+        'https://picsum.photos/500/500'
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        const searchData = Object.assign(parameter, this.queryParam)
+        if (this.time && this.time.length) {
+          searchData.beginDate = moment(this.time[0]).format('YYYY-MM-DD 00:00:00')
+          searchData.endDate = moment(this.time[1]).format('YYYY-MM-DD 23:59:59')
+        } else {
+          searchData.beginDate = null
+          searchData.endDate = null
+        }
+        return getPutInTimeList(searchData).then(res => {
+          if (res.status == 200) {
+            for (let i = 0; i < res.data.list.length; i++) {
+              const item = res.data.list[i]
+            }
+            this.orderTotal = res.data.count || 0
+            this.getTotal()
+            return res.data
+          } else {
+            this.orderTotal = 0
+          }
+        })
+      }
+    }
+  },
+  mounted () {
+    this.getStationList()
+  },
+  methods: {
+    // 不可选日期
+    disabledDate (date, dateStrings) {
+      return date && date.valueOf() > Date.now()
+    },
+    // 创建时间change
+    onChange (dates, dateStrings) {
+      if ((dates, dateStrings)) {
+        this.queryParam.beginDate = dateStrings[0]
+        this.queryParam.endDate = dateStrings[1]
+      }
+    },
+    filterOption (input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      )
+    },
+    // 获取网点数据
+    getStationList () {
+      stationList().then(res => {
+        if (res.status == 200) {
+          this.optionData = res.data || []
+        } else {
+          this.optionData = []
+        }
+      })
+    },
+    // 编辑后刷新列表
+    refreshTable () {
+      // 编辑
+      if (this.itemStationNo && this.itemDeviceNo) {
+        this.$refs.table.refresh()
+      } else {
+        // 保存
+        this.$refs.table.refresh(true)
+      }
+    },
+    // 总计
+    getTotal () {
+      const params = this.queryParam
+      if (this.time && this.time.length) {
+        params.beginDate = moment(this.time[0]).format('YYYY-MM-DD 00:00:00')
+        params.endDate = moment(this.time[1]).format('YYYY-MM-DD 23:59:59')
+      } else {
+        params.beginDate = null
+        params.endDate = null
+      }
+      getDetailTotal(params).then(res => {
+        if (res.status == 200) {
+          if (res.data) {
+            this.recyclableWasteTotal = res.data.totalWeight ? (res.data.totalWeight / 1000).toFixed(3) : '0.000'
+            this.wastePaper = res.data.paper ? (res.data.paper / 1000).toFixed(3) : '0.000'
+          }
+        }
+      })
+    },
+    // 重置
+    reset () {
+      this.queryParam.stationNo = undefined
+      this.queryParam.beginDate = null
+      this.queryParam.endDate = null
+      this.time = [
+        moment(getDate.getRecentday().starttime, 'YYYY-MM-DD'),
+        moment(getDate.getRecentday().endtime, 'YYYY-MM-DD')
+      ]
+      this.$refs.table.refresh(true)
+    },
+    inited (viewer) {
+      this.$viewer = viewer
+    },
+    isShow () {
+      this.$viewer.view()
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+	.unRecyclableRubbishDetails-container {
+		.unRecyclableRubbishDetails-container-searchForm {
+			.ant-form-inline .ant-form-item {
+				width: 100%;
+				margin-bottom: 15px;
+			}
+		}
+    .image1 {
+    height: 25px;
+    cursor: pointer;
+    margin: 5px;
+    display: inline-block;
+  }
+  .image{
+    display: none;
+  }
+	}
+</style>

+ 310 - 0
src/views/reportForm/unRecyclableRubbishTotal.vue

@@ -0,0 +1,310 @@
+<template>
+  <a-card :bordered="false" class="unRecyclableRubbishTotal-container">
+    <!-- 搜索条件 -->
+    <div class="unRecyclableRubbishTotal-container-searchForm">
+      <a-form-model
+        ref="queryParam"
+        :model="queryParam"
+        layout="inline"
+        @keyup.enter.native="$refs.table.refresh(true)"
+        v-bind="formItemLayout">
+        <a-row :gutter="24">
+          <a-col :xs="24" :sm="12" :md="6" :lg="5">
+            <a-form-model-item label="最后清运时间" :label-col="{ span:8 }" :wrapper-col="{ span:16}">
+              <a-range-picker
+                id="notCleanNetwork-time"
+                v-model="time"
+                style="width: 100%;"
+                :format="dateFormat"
+                :placeholder="['开始时间','结束时间']"
+                :disabledDate="disabledDate"
+                @change="onChange" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :xs="24" :sm="12" :md="6" :lg="5">
+            <a-form-model-item prop="provinceCode" label="所属区域:" :label-col="{ span:8 }" :wrapper-col="{ span:16}">
+              <a-select
+                id="notCleanNetwork-provinceCode"
+                allowClear
+                v-model="queryParam.provinceCode"
+                @change="getCityList"
+                placeholder="请选择省">
+                <a-select-option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col :xs="24" :sm="12" :md="6" :lg="5">
+            <a-form-model-item prop="cityCode" label=" " :colon="false" :label-col="{ span:4 }" :wrapper-col="{ span:16}">
+              <a-select
+                allowClear
+                id="notCleanNetwork-cityCode"
+                v-model="queryParam.cityCode"
+                @change="getAreaList"
+                placeholder="请选择市">
+                <a-select-option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col :xs="24" :sm="12" :md="6" :lg="5">
+            <a-form-model-item prop="districtCode" label=" " :colon="false" :label-col="{ span:0}" :wrapper-col="{ span:16}">
+              <a-select allowClear id="notCleanNetwork-districtCode" v-model="queryParam.districtCode" placeholder="请选择区/县">
+                <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col :xs="24" :sm="12" :md="6" :lg="4">
+            <a-button type="primary" @click="$refs.table.refresh(true)" id="notCleanNetwork-refresh" style="margin: 4px 10px 0 20px">查询</a-button>
+            <a-button type="" @click="reset" id="notCleanNetwork-reset" style="margin-top: 4px">重置</a-button>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :xs="24" :sm="12" :md="6" :lg="5">
+            <a-form-model-item label="网点名称" :label-col="{ span:8}" :wrapper-col="{ span:16}">
+              <a-select
+                style="max-height: 50px;overflow: auto;"
+                id="notCleanNetwork-stationNo"
+                placeholder="请选择网点名称"
+                allowClear
+                mode="multiple"
+                v-model="queryParam.stationNo"
+                :showSearch="true"
+                option-filter-prop="children"
+                :filter-option="filterOption">
+                <a-select-option v-for="item in optionData" :key="item.stationNo" :value="item.stationNo">{{ item.name }}</a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+      </a-form-model>
+    </div>
+    <!-- 合计 -->
+    <a-alert type="info" showIcon style="margin-bottom:15px">
+      <div class="ftext" slot="message">总计<span> {{ orderTotal }} </span>条,<span> {{ recyclableWasteTotal }} </span>kg。
+        其中,其他垃圾总计<span> {{ wasteClothes }} </span>kg,厨余垃圾总计<span>{{ wastePlastics }} </span>kg,建筑垃圾总计<span> {{ wasteMetal }} </span>kg
+      </div>
+    </a-alert>
+    <!-- 列表 -->
+    <s-table ref="table" :rowKey="(record) => record.id" :columns="columns" :data="loadData" bordered>
+      <!-- 可回收物小计 -->
+      <template slot="totalWeight" slot-scope="text,record">
+        <span >{{ record.totalWeight ? (record.totalWeight/1000).toFixed(3) : '0.000' }}</span>
+      </template>
+      <!-- 操作 -->
+    </s-table>
+  </a-card>
+</template>
+
+<script>
+import { STable, VSelect } from '@/components'
+import { stationList } from '@/api/releaseRecord.js'
+import { netWorkCleanRecordList, getCleanStationSum } from '@/api/cleanManage.js'
+import { getProvince, getCityByPro, getDistrictByCity } from '@/api/station'
+import moment from 'moment'
+import getDate from '@/libs/getDate.js'
+export default {
+  components: {
+    STable,
+    VSelect
+  },
+  data () {
+    return {
+      orderTotal: 0, //  总计条数
+      recyclableWasteTotal: 0, //  可回收垃圾总计
+      wasteClothes: 0, //  废旧衣物总计
+      wastePaper: 0, //  废旧纸张总计
+      wasteMetal: 0, //  废旧金属总计
+      queryParam: {
+        stationNo: undefined, // 网点名称
+        beginDate: null, // 开始时间
+        endDate: null, // 结束时间
+        provinceCode: undefined, //  省
+        cityCode: undefined, // 市
+        districtCode: undefined // 区
+      },
+      optionData: [], // 网点列表数据
+      addrProvinceList: [], //  省下拉
+      addrCityList: [], //  市下拉
+      addrDistrictList: [], //  区下拉
+      // 将默认当天时间日期回显在时间选择框中
+      time: [
+        moment(getDate.getRecentday().starttime, 'YYYY-MM-DD'),
+        moment(getDate.getRecentday().endtime, 'YYYY-MM-DD')
+      ],
+      dateFormat: 'YYYY-MM-DD', // 日期格式
+      columns: [
+        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
+        { title: '网点名称', dataIndex: 'stationName', width: 100, align: 'center', customRender: (text) => { return text || '--' } },
+        { title: '其他垃圾(kg)', scopedSlots: { customRender: 'plastic' }, width: 100, align: 'center' },
+        { title: '厨余垃圾(kg)', scopedSlots: { customRender: 'plastic' }, width: 100, align: 'center' },
+        { title: '建筑垃圾(kg)', scopedSlots: { customRender: 'plastic' }, width: 100, align: 'center' },
+        { title: '总计(kg)', dataIndex: 'totalWeight', width: 100, align: 'center', customRender: (text) => { return text || '--' } }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        const searchData = Object.assign(parameter, this.queryParam)
+        if (this.time && this.time.length) {
+          searchData.beginDate = moment(this.time[0]).format('YYYY-MM-DD 00:00:00')
+          searchData.endDate = moment(this.time[1]).format('YYYY-MM-DD 23:59:59')
+        } else {
+          searchData.beginDate = null
+          searchData.endDate = null
+        }
+        return netWorkCleanRecordList(searchData).then(res => {
+          if (res.status == 200) {
+            for (let i = 0; i < res.data.list.length; i++) {
+              const _item = res.data.list[i]
+              //  找出可回收垃圾库存量最大的值
+              const arr = [_item.clothes, _item.paper, _item.plastic, _item.metal, _item.plaMet, _item.glass, _item.recycling]
+              const maxVal = Math.max(...arr)
+              if (maxVal == 0) {
+                _item.maxVal = null
+              } else {
+                _item.maxVal = maxVal
+              }
+            }
+            this.orderTotal = res.data.count || 0
+            this.getTotal()
+            return res.data
+          } else {
+            this.orderTotal = 0
+          }
+        })
+      }
+    }
+  },
+  mounted () {
+    this.getStationList()
+    this.getProvinceList()
+  },
+  methods: {
+    // 不可选日期
+    disabledDate (date, dateStrings) {
+      return date && date.valueOf() > Date.now()
+    },
+    // 创建时间change
+    onChange (dates, dateStrings) {
+      if ((dates, dateStrings)) {
+        this.queryParam.beginDate = dateStrings[0]
+        this.queryParam.endDate = dateStrings[1]
+      }
+    },
+    filterOption (input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      )
+    },
+    // 编辑后刷新列表
+    refreshTable () {
+      // 编辑
+      if (this.itemStationNo && this.itemDeviceNo) {
+        this.$refs.table.refresh()
+      } else {
+        // 保存
+        this.$refs.table.refresh(true)
+      }
+    },
+    // 获取网点数据
+    getStationList () {
+      stationList().then(res => {
+        if (res.status == 200) {
+          this.optionData = res.data || []
+        } else {
+          this.optionData = []
+        }
+      })
+    },
+    // 获取省列表
+    getProvinceList () {
+      getProvince().then(res => {
+        if (res.status == 200) {
+          this.addrProvinceList = res.data || []
+        } else {
+          this.addrProvinceList = []
+        }
+      })
+    },
+    // 获取城市列表
+    getCityList (val) {
+      this.addrCityList = []
+      this.addrDistrictList = []
+      this.queryParam.cityCode = undefined
+      this.queryParam.districtCode = undefined
+      this.getCityListRequest(val)
+    },
+    getCityListRequest (val) {
+      getCityByPro({
+        id: val
+      }).then(res => {
+        if (res.status == 200) {
+          this.addrCityList = res.data || []
+        } else {
+          this.addrCityList = []
+        }
+      })
+    },
+    // 获取区县列表
+    getAreaList (val) {
+      this.addrDistrictList = []
+      this.queryParam.districtCode = undefined
+      this.getAreaListRequest(val)
+    },
+    getAreaListRequest (val) {
+      getDistrictByCity({
+        id: val
+      }).then(res => {
+        if (res.status == 200) {
+          this.addrDistrictList = res.data || []
+        } else {
+          this.addrDistrictList = []
+        }
+      })
+    },
+    // 总计
+    getTotal () {
+      const params = this.queryParam
+      if (this.time && this.time.length) {
+        params.beginDate = moment(this.time[0]).format('YYYY-MM-DD 00:00:00')
+        params.endDate = moment(this.time[1]).format('YYYY-MM-DD 23:59:59')
+      } else {
+        params.beginDate = null
+        params.endDate = null
+      }
+      getCleanStationSum(params).then(res => {
+        if (res.status == 200) {
+          if (res.data) {
+            this.recyclableWasteTotal = res.data.totalWeight ? (res.data.totalWeight / 1000).toFixed(3) : '0.000'
+            this.wastePaper = res.data.paper ? (res.data.paper / 1000).toFixed(3) : '0.000'
+          }
+        }
+      })
+    },
+    // 重置
+    reset () {
+      this.queryParam.stationNo = undefined
+      this.queryParam.beginDate = null
+      this.queryParam.endDate = null
+      this.queryParam.provinceCode = undefined
+      this.queryParam.cityCode = undefined
+      this.queryParam.districtCode = undefined
+      this.addrCityList = [] //  市下拉
+      this.addrDistrictList = [] //  区下拉
+      this.time = [
+        moment(getDate.getRecentday().starttime, 'YYYY-MM-DD'),
+        moment(getDate.getRecentday().endtime, 'YYYY-MM-DD')
+      ]
+      this.$refs.table.refresh(true)
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+	.unRecyclableRubbishTotal-container {
+		.unRecyclableRubbishTotal-container-searchForm {
+			.ant-form-inline .ant-form-item {
+				width: 100%;
+				margin-bottom: 15px;
+			}
+		}
+	}
+</style>