ll

liukangdong

2025-02-20 b565a275fe240e2bd8a939c3b4beed98d03767bc

 admin/src/views/operation/tram.vue

@@ -15,54 +15,65 @@
        </el-select>
      </el-form-item>
      <section>
        <el-button type="primary" @click="search">搜索</el-button>
        <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 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
        v-loading="isWorking.search"
        :data="tableData.list"
        stripe
        border
      >
        <el-table-column prop="code" label="车辆编码"  :sort-method="(a,b)=>{ return   a.code-b.code}"  sortable min-width="100px" align="center"></el-table-column>
        <el-table-column prop="name" label="车辆类型" sortable min-width="100px" align="center"></el-table-column>
        <el-table-column prop="name" label="控制器SN" sortable min-width="100px" align="center"></el-table-column>
        <el-table-column prop="name" label="当前电压值" sortable min-width="100px" align="center"></el-table-column>
        <el-table-column prop="name" label="电量情况" sortable min-width="100px" align="center"></el-table-column>
        <el-table-column prop="name" label="站点编号" sortable min-width="100px" align="center"></el-table-column>
        <el-table-column prop="name" label="站点名称" sortable min-width="100px" align="center"></el-table-column>
        <el-table-column prop="createTime" label="最后通讯时间" sortable  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"
        >
      <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="$refs.QRcode.open('查看二维码', row.code)" 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>
            <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 @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="tableData.pagination">
      </pagination>
    </template>
    <!-- 新建/修改 -->
    <TramEdit ref="TramEditRef" @success="handlePageChange"/>
    <!--  查看二维码  -->
    <QRcode ref="QRcode" />
    <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>

@@ -71,12 +82,16 @@
import TableLayout from '@/layouts/TableLayout'
import Pagination from '@/components/common/Pagination'
import TramEdit from './components/TramEdit.vue'
import QRcode from '@/components/business/QRcode'
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: 'Sites',
  name: 'bikes',
  extends: BaseTable,
  components: { TableLayout, Pagination, TramEdit, QRcode },
  data () {
  components: { TableLayout, Pagination, TramEdit, QRcode, ImportButton },
  data() {
    return {
      // 搜索
      searchForm: {
@@ -92,18 +107,122 @@
        status: '',
        lockNum: '',
        ip: '',
        type: 1,
        clientVersion: ''
      }
      },
      imgurl: '',
      isShowPri: false,
      downLoading: false,

      selList: []
    }
  },
  created () {
  created() {
    this.config({
      module: '站点信息表',
      api: '/business/sites',
      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>