1

MrShi

2025-03-18 a836f03a5d1fbfa81e147d09ffdfa87ba3975c13

 admin/src/views/operation/tram.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,229 @@
<template>
  <TableLayout :permissions="['business:sites:query']">
    <!-- æœç´¢è¡¨å• -->
    <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline>
      <el-form-item label="车辆编号" prop="code">
        <el-input v-model="searchForm.code" placeholder="请输入车辆编号" @keypress.enter.native="search"></el-input>
      </el-form-item>
      <el-form-item label="所在站点" prop="name">
        <el-input v-model="searchForm.name" placeholder="请输入名称/编码" @keypress.enter.native="search"></el-input>
      </el-form-item>
      <el-form-item label="电量情况" prop="lowVoltage">
        <el-select v-model="searchForm.lowVoltage" placeholder="电量情况" @change="search">
          <el-option label="正常" :value="0" />
          <el-option label="电量低" :value="1" />
        </el-select>
      </el-form-item>
      <section>
        <el-button type="primary" @click="search(1)">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </section>
    </el-form>
    <!-- è¡¨æ ¼å’Œåˆ†é¡µ -->
    <template v-slot:table-wrap>
      <ul class="toolbar" v-permissions="['business:sites:create']">
        <li><el-button type="primary" @click="$refs.TramEditRef.open('新增车辆')" icon="el-icon-plus"
            v-permissions="['business:sites:create']">新建</el-button></li>
        <li><el-button @click="handleDelAll">批量删除</el-button></li>
        <li v-permissions="['system:user:create']">
          <ImportButton text="导入" template-name="电车模板.xlsx" template-path="/template/tram_import_tem.xlsx"
            action="/business/bikes/importExcel" @success="search" />
        </li>
        <li><el-button :loading="downLoading" @click="handleDownAll"
            v-permissions="['business:sites:create']">批量下载二维码</el-button></li>
      </ul>
      <el-table @selection-change="handleSelectionChange" v-loading="isWorking.search" :data="tableData.list" stripe
        border>
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="code" label="车辆编码" min-width="100px" align="center"></el-table-column>
        <el-table-column prop="paramName" label="车辆类型" min-width="100px" align="center"></el-table-column>
        <el-table-column prop="deviceSn" label="控制器SN" min-width="100px" align="center"></el-table-column>
        <el-table-column prop="voltage" label="当前电压值" sortable min-width="100px" align="center"></el-table-column>
        <el-table-column label="电量情况" width="80px" align="center">
          <template v-slot="{ row }">
            <span :class="{ red: row.lowVoltage == 1 }">{{ row.lowVoltage == 0 ? '正常' : '低电量' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="siteId" label="站点编号" min-width="100px" align="center"></el-table-column>
        <el-table-column prop="siteName" label="站点名称" min-width="100px" align="center"></el-table-column>
        <el-table-column prop="heartDate" label="最后通讯时间" min-width="100px" align="center"></el-table-column>
        <el-table-column v-if="containPermissions(['business:sites:update', 'business:sites:delete'])" label="操作"
          min-width="160" align="center" fixed="right">
          <template slot-scope="{row}">
            <el-button type="text" @click="handlePri(row)" icon="el-icon-picture-outline-round">查看二维码</el-button>
            <el-button type="text" @click="$refs.TramEditRef.open('编辑车辆', row)" icon="el-icon-edit"
              v-permissions="['business:sites:update']">编辑</el-button>
            <el-button type="text" @click="deleteById(row)" icon="el-icon-delete"
              v-permissions="['business:sites:delete']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="tableData.pagination">
      </pagination>
    </template>
    <!-- æ–°å»º/修改 -->
    <TramEdit ref="TramEditRef" @success="search" />
    <el-dialog title="查看二维码" :visible.sync="isShowPri" width="600px">
      <div style="display: flex;align-items: center;justify-content: center;">
        <el-image style="width: 500px; height: 500px" :src="imgurl" :preview-src-list="[imgurl]"></el-image>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowPri = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="isShowPri = false">ç¡® å®š</el-button>
      </span>
    </el-dialog>
    <QRcode ref="QRcodeRef" />
    <!-- <ImportWindow ref="ImportWindowRef" templateName="电车信息模板" /> -->
  </TableLayout>
</template>

<script>
import BaseTable from '@/components/base/BaseTable'
import TableLayout from '@/layouts/TableLayout'
import Pagination from '@/components/common/Pagination'
import TramEdit from './components/TramEdit.vue'
import QRcode from './components/QRcode'
import ImportButton from '@/components/common/ImportButton'
import { tranListPost } from '@/api/business/bikes.js'
import { qrcodeBike, qrcodeBikeList, deleteBatchById } from '@/api/business/bikes.js'
import { Message } from 'element-ui'
export default {
  name: 'bikes',
  extends: BaseTable,
  components: { TableLayout, Pagination, TramEdit, QRcode, ImportButton },
  data() {
    return {
      // æœç´¢
      searchForm: {
        id: '',
        createDate: '',
        creator: '',
        editDate: '',
        editor: '',
        isdeleted: '',
        info: '',
        name: '',
        code: '',
        status: '',
        lockNum: '',
        lowVoltage: '',
        ip: '',
        type: 1,
        clientVersion: ''
      },
      imgurl: '',
      isShowPri: false,
      downLoading: false,

      selList: []
    }
  },
  created() {
    this.config({
      module: '站点信息表',
      api: '/business/bikes',
      'field.id': 'id',
      'field.main': 'id'
    })
    this.search()
  },
  methods: {
    handleSelectionChange(val) {
      this.selList = val
      console.log(val)

    },
    handleDelAll() {
      const { selList } = this
      if (selList.length == 0) return Message.warning('请先选择要删除的车辆')
      this.$confirm('您确认要删除选中的车辆吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteBatchById({ ids: selList.map(i => i.id).join() }).then(res => {
          if (res) {
            this.search(1)
            Message.success('删除成功')
          }
        })
      })
    },
    handlePri(row) {
      this.imgurl = null
      qrcodeBike({ fouce: 0, bikeId: row.id }).then(res => {
        if (res && res.imgurl) {
          this.imgurl = res.imgurl
          this.isShowPri = true
        }
      })
    },
    handleDownAll() {
      this.downLoading = true
      qrcodeBikeList({ fouce: 0 }).then(res => {
        this.downLoading = false
        this.$refs.QRcodeRef.list = res
        this.$refs.QRcodeRef.visible = true
      }, () => {
        this.downLoading = false
      })
    },
    search(pageIndex) {
      this.tableData.pagination.pageIndex = pageIndex || this.tableData.pagination.pageIndex
      this.isWorking.search = true
      tranListPost({
        page: this.tableData.pagination.pageIndex,
        capacity: this.tableData.pagination.pageSize,
        model: this.searchForm,
        sorts: this.tableData.sorts
      })
        .then(data => {
          this.tableData.list = data.records
          this.tableData.pagination.total = data.total
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
        .finally(() => {
          this.isWorking.search = false
        })
    },
    handleSizeChange(pageSize) {
      this.tableData.pagination.pageSize = pageSize
      this.search()
    },
    // æŽ’序
    handleSortChange(sortData) {
      this.tableData.sorts = []
      if (sortData.order != null) {
        this.tableData.sorts.push({
          property: sortData.column.sortBy,
          direction: sortData.order === 'descending' ? 'DESC' : 'ASC'
        })
      }
      this.handlePageChange()
    },
    // é¡µç å˜æ›´å¤„理
    handlePageChange(pageIndex) {
      this.tableData.pagination.pageIndex = pageIndex || this.tableData.pagination.pageIndex
      this.isWorking.search = true
      tranListPost({
        page: this.tableData.pagination.pageIndex,
        capacity: this.tableData.pagination.pageSize,
        model: this.searchForm,
        sorts: this.tableData.sorts
      })
        .then(data => {
          this.tableData.list = data.records
          this.tableData.pagination.total = data.total
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
        .finally(() => {
          this.isWorking.search = false
        })
    },
  }
}
</script>