supervise-monitor-ui/src/views/shebeitaizhang/shebeitaizhangList.vue

<template>
  <div class="app-container">
    <div class="app-containerb" v-show="viewState == 1">
      <!-- 饼图 -->
      <div class="tbars">
        <!-- 第1个图表 -->
        <div class="tbar">

          <div class="bar">
            <pie-chartrenyuan :chart-data="wanhao_Chart"></pie-chartrenyuan>
            <!-- <div class="zhongzi">75%</div> -->
          </div>
          <div class="title"><span class="iconfont icon-jiating greenzi"></span></div>
        </div>
        <!-- 第1个图表 -->
        <div class="tbar">

          <div class="bar">
            <pie-chartrenyuan :chart-data="weixiu_Chart"></pie-chartrenyuan>
            <!-- <div class="zhongzi">15%</div> -->
          </div>
          <div class="title"><span class="iconfont icon-jiating greenzi"></span></div>
        </div>
        <!-- 第1个图表 -->
        <div class="tbar">
          <div class="bar">
            <pie-chartrenyuan :chart-data="sunhai_Chart"></pie-chartrenyuan>
            <!-- <div class="zhongzi">10%</div> -->
          </div>
          <div class="title"><span class="iconfont icon-jiating greenzi"></span></div>
        </div>
      </div>
      <div class="webye">
        <button-bar view-title="设备台账" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle" />
        <div class="main-content">
          <div class="searchcon">
            <el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button>
            <div v-show="isSearchShow" class="search">
              <el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="110px" class="tab-header">
                <el-form-item label="选择仓库">
                  <el-select v-model="listQuery.ckId" filterable clearable placeholder="请选择仓库">
                    <el-option v-for="item in ckList" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
                <el-form-item label="设备类型">
                  <el-select v-model="listQuery.type" filterable clearable placeholder="请选择设备类型">
                    <el-option v-for="item in supplierType_list" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
                <el-form-item label="设备名称">
                  <el-input v-model="listQuery.name" clearable placeholder="" class="addinputw"></el-input>
                </el-form-item>
              </el-form>
              <div class="btn">
                <el-button type="primary" icon="el-icon-search" size="small" @click="handleFilter">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh" size="small" @click="handleReset">重置</el-button>
              </div>
            </div>
          </div>
          <div class="listtop">
            <div class="tit">设备台账信息列表</div>
            <!-- 翻页分页 -->
            <pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current"
              :limit.sync="listQuery.size" class="pagination" @pagination="getList" />
          </div>
          <div>
            <el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width: 100%;"
              @selection-change="handleSelectionChange">
              <el-table-column type="selection" align="center" width="50" />
              <el-table-column label="序号" fixed type="index" width="80" :index="indexMethod" align="center" />
              <el-table-column label="操作" fixed align="center" width="220px" class-name="small-padding fixed-width">
                <template slot-scope="{row}">
                  <el-button size="mini" type="primary"
                    :disabled="!row.isShow && (row.supplierTypeValue === '主机厂' || row.supplierTypeValue === '分公司')"
                    @click="handleEdit(row)">编辑</el-button>
                  <el-button size="mini" type="primary" @click="handleCheck(row)">详情</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="jc" label="设备序列号" header-align="center" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.serialNumber }}</span>
                </template>
              </el-table-column>
              <el-table-column label="设备类型" width="110" align="center">
                <template slot-scope="scope">
                  <span>{{ getSupplierType(scope.row.type) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="设备位置" width="" header-align="center" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.position }}</span>
                </template>
              </el-table-column>
              <el-table-column label="设备名称" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="备注" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.remarks }}</span>
                </template>
              </el-table-column>
              <el-table-column label="所属仓库" align="center">
                <template slot-scope="scope">
                  <span>{{ getCkTitle(scope.row.ckId) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="维修状态" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.maintenance == '1'" style="color:blue">{{ getMainTitle(scope.row.maintenance)
                  }}</span>
                  <span v-if="scope.row.maintenance == '2'" style="color:orange">{{ getMainTitle(scope.row.maintenance)
                  }}</span>
                  <span v-if="scope.row.maintenance == '3'" style="color:red">{{ getMainTitle(scope.row.maintenance)
                  }}</span>
                </template>
              </el-table-column>
              <!-- <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 1" style="color:red">{{ getStatus(scope.row.status) }}</span>
                  <span v-if="scope.row.status == 2" style="color:orange">{{ getStatus(scope.row.status) }}</span>
                  <span v-if="scope.row.status == 3" style="color:green">{{ getStatus(scope.row.status) }}</span>
                </template>
              </el-table-column> -->
            </el-table>
          </div>
          <div class="pages">
            <!-- 翻页 -->
            <pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current"
              :limit.sync="listQuery.size" class="pagination" @pagination="getList" />
          </div>
        </div>
      </div>
    </div>
    <shebeitaizhangAdd v-show="viewState == 2" ref="divadd" @doback="resetState" @reloadlist="handleFilter" />
    <shebeitaizhangInfo v-show="viewState == 4" ref="divinfo" @doback="resetState" />
  </div>
</template>

<script>

import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import ButtonBar from '@/components/ButtonBar'
import shebeitaizhangAdd from './shebeitaizhangAdd'
import shebeitaizhangInfo from './shebeitaizhangInfo'
import { getDevicePage, getInfoById, removeDevice, getStatusList, getWareHouseList } from '@/api/device/device'
import * as echarts from "echarts";
import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuanb'
// 1.1完好率饼图
const wanhao_Chart = {
  color: ['#30e9ff', '#d9d9d9'],
  Data: {
    seriesData: [
      { value: 75, name: '完好' },
      { value: 25, name: '不完好' },
    ]
  },
  label: {
    normal: {
      position: 'inner',
      show: false
    }
  },
}
// 1.2维修率饼图
const weixiu_Chart = {
  color: ['#d9d9d9', '#fdc004'],
  Data: {
    seriesData: [
      { value: 15, name: '维修' },
      { value: 85, name: '无维修' },
    ]
  },
  label: {
    normal: {
      position: 'inner',
      show: false
    }
  },
}
// 1.3损害率饼图
const sunhai_Chart = {
  color: ['#d9d9d9', '#ff0202'],
  Data: {
    seriesData: [
      { value: 10, name: '损害' },
      { value: 90, name: '无损害' }
    ]
  },
  label: {
    normal: {
      position: 'inner',
      show: false
    }
  },
}

export default {
  name: 'shebeitaizhangList',
  components: {
    Pagination,
    pageye,
    ButtonBar,
    shebeitaizhangAdd,
    shebeitaizhangInfo, PieChartrenyuan
  },
  data() {
    return {
      wanhao_Chart: wanhao_Chart, // 1.1
      weixiu_Chart: weixiu_Chart,
      sunhai_Chart: sunhai_Chart,
      btndisabled: false,
      btnList: [
        {
          type: 'primary',
          size: 'small',
          icon: 'plus',
          btnKey: 'toAdd',
          btnLabel: '新增'
        },
        {
          type: 'danger',
          size: 'small',
          icon: 'del',
          btnKey: 'doDel',
          btnLabel: '删除'
        },
        {
          type: 'success',
          size: 'small',
          icon: 'export',
          btnKey: 'import',
          btnLabel: '导入'
        },
        {
          type: 'info',
          size: 'small',
          icon: 'cross',
          btnKey: 'doClose',
          btnLabel: '关闭'
        }
      ],
      viewState: 1,
      isSearchShow: false,
      searchxianshitit: '显示查询条件',
      sids: [],
      // 查询 -----------
      tableKey: 0,
      list: [],
      listLoading: false,
      listQuery: {
        current: 1,
        size: 10,
        total: 0
      },
      supplierType_list: [
        { name: '摄像头', id: '1' },
        { name: '电子围栏', id: '2' },
        { name: '门禁', id: '3' },
        { name: '报警主机', id: '4' },
        { name: '网络录像机', id: '5' }
      ],
      maintenanceList: [
        { name: '完好', id: '1' },
        { name: '维修', id: '2' },
        { name: '损坏', id: '3' },
      ],
      floor_list: [
        { title: '一层', id: '1' },
        { title: '二层', id: '2' },
        { title: '三层', id: '3' },
        { title: '四层', id: '4' },
      ],
      ckList: [],
      status_list: [
        { title: '已损坏', id: '1' },
        { title: '已维修', id: '2' },
        { title: '完好', id: '3' },
      ],
      rules: {}
    }
  },
  mounted() {
    this.$refs['btnbar'].setButtonList(this.btnList)
  },
  created() {
    // 初始化变量
    this.init()
  },
  methods: {
    getStatus(item) {
      for (var i = 0; i < this.status_list.length; i++) {
        if (this.status_list[i].id == item) {
          return this.status_list[i].title
        }
      }
    },
    getSupplierType(item) {
      for (var i = 0; i < this.supplierType_list.length; i++) {
        if (this.supplierType_list[i].id == item) {
          return this.supplierType_list[i].name
        }
      }
    },
    resetState() {
      this.viewState = 1
    },
    getCkTitle(item) {
      for (var i = 0; i < this.ckList.length; i++) {
        if (this.ckList[i].id == item) {
          return this.ckList[i].name
        }
      }
    },
    getMainTitle(item) {
      for (var i = 0; i < this.maintenanceList.length; i++) {
        if (this.maintenanceList[i].id == item) {
          return this.maintenanceList[i].name
        }
      }
    },
    btnHandle(btnKey) {
      console.log('XXXXXXXXXXXXXXX    ' + btnKey)
      switch (btnKey) {
        case 'toAdd':
          this.toAdd()
          break
        case 'doDel':
          this.doDel()
          break
        case 'toChangShang':
          this.toChangShang()
          break
        case 'toGain':
          this.toGain()
          break
        case 'doExport':
          this.doExport()
          break
        case 'doClose':
          this.doClose()
          break
        default:
          break
      }
    },
    // 搜索条件效果
    clicksearchShow() {
      this.isSearchShow = !this.isSearchShow
      if (this.isSearchShow) {
        this.searchxianshitit = '隐藏查询条件'
      } else {
        this.searchxianshitit = '显示查询条件'
      }
    },
    init() {
      this.getList()
      getWareHouseList().then(res => {
        if (res.code == 200) {
          this.ckList = res.data
        }
      })
      getStatusList().then(res => {
        if (res.code == 200) {
          this.wanhao_Chart.Data.seriesData = []
          this.weixiu_Chart.Data.seriesData = []
          this.sunhai_Chart.Data.seriesData = []
          for (var i = 0; i < res.data.length; i++) {
            var item = res.data[i];
            // 1完好 2维修 3损坏
            if (item.maintenance == '1') {
              console.log('完好', item.maintenanceCount)
              var bad = 100 - item.maintenanceCount;
              var obj = { name: '完好', value: item.maintenanceCount }
              var obj1 = { name: '不完好', value: bad }
              this.wanhao_Chart.Data.seriesData.push(obj)
              this.wanhao_Chart.Data.seriesData.push(obj1)
            }

            // 1完好 2维修 3损坏
            if (item.maintenance == '2') {
              console.log('维修', item.maintenanceCount)
              var bad = 100 - item.maintenanceCount;
              var obj = { name: '维修', value: item.maintenanceCount }
              var obj1 = { name: '未维修', value: bad }
              this.weixiu_Chart.Data.seriesData.push(obj1)
              this.weixiu_Chart.Data.seriesData.push(obj)
            }

            // 1完好 2维修 3损坏
            if (item.maintenance == '3') {
              console.log('损害', item.maintenanceCount)
              var bad = 100 - item.maintenanceCount;
              var obj = { name: '损害', value: item.maintenanceCount }
              var obj1 = { name: '未损害', value: bad }
              this.sunhai_Chart.Data.seriesData.push(obj1)
              this.sunhai_Chart.Data.seriesData.push(obj)
            }
          }
        }
      })
    },
    // 序号
    indexMethod(index) {
      var pagestart = (this.listQuery.current - 1) * this.listQuery.size
      var pageindex = index + 1 + pagestart
      return pageindex
    },
    // 查询列表信息
    getList() {
      this.listLoading = true
      getDevicePage(this.listQuery).then((response) => {
        this.listLoading = false
        if (response.code == '200') {
          this.list = response.data.records
          this.listQuery.total = response.data.total
        } else {
          this.list = []
          this.listQuery.total = 0
        }
      })
    },
    // 查询按钮
    handleFilter() {
      this.listQuery.current = 1
      this.getList()
    },
    handleReset() {
      this.listQuery.ckId = null
      this.listQuery.type = null
      this.listQuery.name = null
    },
    // 打开添加对话框
    toAdd() {
      this.viewState = 2
      this.listQuery.typeSubmit = 'add'
      this.$refs['divadd'].showAdd(this.listQuery.typeSubmit)
    },
    // 打开查看
    handleCheck(row) {
      getInfoById({ id: row.id }).then(res => {
        this.viewState = 4
        this.listQuery.info = res.data
        this.$refs['divinfo'].showInfo(this.listQuery)
      })
    },
    handleEdit(row) {
      this.listQuery.typeSubmit = 'edit'
      this.viewState = 2
      getInfoById({ id: row.id }).then(res => {
        this.listQuery.info = res.data
        this.$refs['divadd'].showEdit(this.listQuery)
      })
    },

    handleSelectionChange(row) {
      const aa = []
      row.forEach((element) => {
        aa.push(element.id)
      })
      this.sids = aa
    },
    // 根据本行ID删除数据
    doDel() {
      if (this.sids.length > 0) {
        const tip = '请确认是否删除所选 ' + this.sids.length + ' 条记录?'
        this.$confirm(tip, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          removeDevice({ ids: this.sids.toString() }).then(resp => {
            if (resp.code == 200) {
              loading.close()
              this.$message({ type: 'success', message: resp.msg, showClose: true })
              this.getList()
            } else {
              loading.close()
            }
          }).catch(e => {
            loading.close()
          })
        }).catch(() => {
        })
      } else {
        this.$message({ type: 'error', message: '没有选择!!', showClose: true })
        return
      }
    },
    toChangShang() {
      this.$router.push({
        path: '/cangkuguanli/cangkuguanliList',
      })
    },
    doClose() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.app-containerb {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.webye {
  flex: 1;
  text-align: left;
}

/* 饼图部分 */
.tbars {
  width: 250px;
  height: 100%;
  /* display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;align-items: flex-start; */
  margin: 0 20px 0 0;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0px 0px 10px #E9E9E9;
  border-radius: 5px;
}

.tbar {
  /* width: 25%; */
  margin: 0 0px 0 0;
  /* background-color: #fff;
    box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; */
  padding: 10px;
}

.tbar:last-of-type {
  margin: 0;
}

.tbar0 {
  border-bottom: 0px solid #032ab8;
}

.tbar .title {
  font-size: 20px;
  padding: 0px 20px;
  text-align: center;
  font-weight: bold;
  color: #333;
  font-size: 16px;
  /* border-bottom: 1px solid #ececee; */
}

.tbar .title span {
  padding: 0 10px 0 0;
}

.tbar .bar {
  position: relative;
  /* display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;align-items: center; */
  margin: 0;
  padding: 0px;
  height: 190px;
}

.tbar .bar .zhongzi {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 240px;
  text-align: center;
  font-weight: bold;
  color: #333;
  font-size: 18px;
}
</style>