维修单统计/index

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--侧边区域地点位置数据-->
      <el-col :xs="9" :sm="6" :md="5" :lg="4" :xl="4">
        <el-tree
          :props="defaultProps"
          :data="areaPlaceLocationsTree"
          :expand-on-click-node="false"
          @node-click="areaPlaceLocationsTreeHandler"
          :highlight-current="true"
        />
      </el-col>
      <!--用户数据-->
      <el-col :xs="15" :sm="18" :md="19" :lg="20" :xl="20">
        <search :query="query"  :departments="departments" :equipments="equipments" :sup_this="sup_this" :states="states"/>
        <!-- 图标 -->
          <div class="dashboard-container">
            <div class="dashboard-editor-container">
              <panelGroup/>
              <div v-if="detailContainerIsShow">
                <el-row style="background:#fff;padding:16px 16px 0;margin:25px 0;">
                  <lineChart :chartData="lineChartData" />
                </el-row>
                <el-row :gutter="32">
                  <el-col :xs="24" :sm="24" :lg="8">
                    <div class="chart-wrapper">
                      <orderBarChart />
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="24" :lg="8">
                    <div class="chart-wrapper">
                      <pieChart />
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="24" :lg="8">
                    <div class="chart-wrapper">
                      <hourBarChart />
                    </div>
                  </el-col>
                </el-row>
              </div>

            </div>
          </div>
        <!--表格渲染-->
        <el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
          <el-table-column prop="areaName" label="区域"/>
          <el-table-column prop="placeName" label="地点"/>
          <el-table-column prop="locationName" label="位置"/>
          <el-table-column prop="equipmentName" label="设备"/>
          <el-table-column prop="repairGroupName" label="维修小组"/>
          <el-table-column label="报修单状态">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.stateName }}</el-tag>
              <!-- <el-tag :color="scope.row.stateColor">{{ scope.row.stateName }}</el-tag> -->
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="报修时间">
            <template slot-scope="scope">
              <span>{{ time(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="comment" label="备注"/>
          <el-table-column label="操作" width="290px" align="center">
            <template slot-scope="scope">
              <edit v-if="checkPer(['admin','lb:maintenanceList:edit'])" :data="scope.row" :sup_this="sup_this"  :departments="departments" :equipments="equipments" :states="states"/>
              <el-popover
                v-if="checkPer(['admin','lb:maintenanceList:del'])"
                v-model="scope.row.delPopover"
                placement="top"
                width="180">
                <p>确定删除本条数据吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="scope.row.delPopover = false">取消</el-button>
                  <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.$index, scope.row)">确定</el-button>
                </div>
                <el-button slot="reference" type="danger" size="mini" @click="scope.row.delPopover = false">删除</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination
          :total="total"
          style="margin-top: 8px;"
          layout="total, prev, pager, next, sizes"
          @size-change="sizeChange"
          @current-change="pageChange"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const tableData = [{
  areaName: '主校区',
  placeName: '教学楼',
  locationName: '金沙江路 1518 弄',
  equipmentName: '洗手台',
  repairGroupName: '土木一组',
    stateName: '已完成',
    stateColor: 'green',
  createTime: '2016-05-04',
  comment: '体育馆3楼 大学生素质拓展中心里的麦克风现在都没声，麦克风可能坏了。'
}, {
  areaName: '主校区',
  placeName: '教学楼',
  locationName: '金沙江路 1518 弄',
  equipmentName: '洗手台',
  repairGroupName: '土木一组',
    stateName: '待分配',
    stateColor: 'blue',
  createTime: '2016-05-04',
  comment: '体育馆3楼 大学生素质拓展中心里的麦克风现在都没声，麦克风可能坏了。'
}, {
  areaName: '主校区',
  placeName: '教学楼',
  locationName: '金沙江路 1518 弄',
  equipmentName: '洗手台',
  repairGroupName: '土木一组',
    stateName: '转领导',
    stateColor: 'orange',
  createTime: '2016-05-04',
  comment: '体育馆3楼 大学生素质拓展中心里的麦克风现在都没声，麦克风可能坏了。'
},{
  areaName: '主校区',
  placeName: '教学楼',
  locationName: '金沙江路 1518 弄',
  equipmentName: '洗手台',
  repairGroupName: '土木一组',
    stateName: '待处理',
    stateColor: 'red',
  createTime: '2016-05-04',
  comment: '体育馆3楼 大学生素质拓展中心里的麦克风现在都没声，麦克风可能坏了。'
}]
const states = [{
  stateId: '1234cdsf',
  stateName:'待处理'
},{
  stateId: '1234ee122',
  stateName:'待分配'
},{
  stateId: '1234ee33',
  stateName:'处理中'
},{
  stateId: '1234ee24d',
  stateName:'投诉中'
},{
  stateId: '1234eesd',
  stateName:'已完成'
},{
  stateId: '1234eewqe',
  stateName:'转领导'
}]
import initData from '@/mixins/initData'
import { parseTime } from '@/utils/index'
import search from './module/search'
import edit from './module/edit'
import { deleta } from '@/api/ki/location/equipment'
import { list } from '@/api/ki/equipment'
import { postLocationEquipmentTreeWithFlag } from '@/api/ki/location'
import { postDepartmentsViaUser } from "@/api/kuc/department"
import lineChart from './module/lineChart.vue'
import orderBarChart from './module/orderBarChart.vue'
import hourBarChart from './module/hourBarChart.vue'
import pieChart from './module/pieChart.vue'
import panelGroup from './module/panelGroup.vue'
import CountTo from 'vue-count-to'
const lineChartData = {
  baoxiuData: [100, 120, 161, 134, 105, 160, 165, 105, 160, 165,100, 120, 161, 134, 105, 160, 165, 105, 160, 165,100, 120, 161, 134, 105, 160, 165, 105, 160, 165, 11 ],
  weixiuData: [120, 82, 91, 154, 162, 140, 145, 162, 140, 145, 120, 82, 91, 154, 162, 140, 145, 162, 140, 145, 120, 82, 91, 154, 162, 140, 145, 162, 140, 145, 9],
  tousuData: [10,3,12,5,3,23,12,21,14,18,10,3,12,5,3,23,12,21,14,18,10,3,12,5,3,23,12,21,14,18,11]
}
export default {
  components: { search, edit, lineChart, orderBarChart, hourBarChart, pieChart, panelGroup, CountTo},
  mixins: [initData],
  data() {
    return {
      // table的数据
      data:tableData,
      delLoading: false,
      sup_this: this,
      // linechart的数据
      lineChartData: lineChartData,
      locationEquipmentId: '',
      defaultProps: { children: 'children', label: 'label' },
      // 侧边区域地点位置数据
      areaPlaceLocationsTree: [],
      // 维修部门数据
      departments: [],
      // 设备的数据
      equipments: [],
      // 统计详细是否展示
      detailContainerIsShow: false,
      // 状态数据
      states: states,
    }
  },
  created() {
    // 加载区域，地点，位置的tree
    this.loadAreaPlaceLocationsTreeSelect()
    // 获取设备数据
    this.loadEquipments()
    // 获取状态数据
    this.loadStates()
    // 加载维修部门的Tree
    this.loadRepireDepartmentsTreeSelect()

    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    // beforeInit() {
    //   this.url = 'api/information/location/equipments/page'
    //   const sort = 'sortNumber,asc'
    //   const query = this.query
    //   const value = query.value
    //   const areaId = query.areaId
    //   const placeId = query.placeId
    //   const locationId = query.locationId
    //   const equipmentId = query.equipmentId
    //   const stateId = query.stateId

    //   this.params = {
    //     page: this.page,
    //     size: this.size,
    //     sort: sort,
    //     deleteFlag: 0
    //   }

    //   if (value) { this.params['enName'] = value }
    //   if (areaId) { this.params['enName'] = areaId }
    //   if (placeId) { this.params['placeId'] = placeId }
    //   if (locationId) { this.params['locationId'] = locationId }
    //   if (equipmentId) { this.params['equipmentId'] = equipmentId }
    //   if (stateId) { this.params['stateId'] = stateId }

    //   return true
    // },
    subDelete(index, row) {
      this.delLoading = true

      deleta(row.lbId).then(res => {
        this.delLoading = false
        row.delPopover = false
        this.loading = false

        this.init()

        if (res.data == true) {
          this.$notify({
            title: "删除",
            message: '删除成功',
            type: "success",
            duration: 2500
          })
        } else {
          this.$notify({
            title: '删除',
            message: err.msg,
            type: 'error',
            duration: 2500
          })
        }
      }).catch(err => {
        this.delLoading = false
        row.delPopover = false
        this.loading = false

        this.$notify({
          title: '删除',
          message: err.msg,
          type: 'error',
          duration: 2500
        })
      })
    },

    time(time) {
      return parseTime(time)
    },

    // 加载区域，地点，位置的tree
    loadAreaPlaceLocationsTreeSelect() {
      var param = {
        deleteFlag: 0
      }

      postLocationEquipmentTreeWithFlag(param).then((res) => {
        this.areaPlaceLocationsTree = res.data
      })
    },

    // 加载维修部门的Tree
    loadRepireDepartmentsTreeSelect() {
      const userId = this.$store.state.user.user.userId

      var param = {
        deleteFlag: 0,
        userId: userId
      }
      postDepartmentsViaUser(param).then((res) => {
        this. departments= res.data
      })
    },

    /**
     * 获取设备数据
     */
    loadEquipments() {
      var param = {
        deleteFlag: 0
      }

      list(param).then((res) => {
        this.equipments = res.data
      })
    },
    /**
     * 状态数据
     */
    loadStates() {
      // var param = {
      //   deleteFlag: 0
      // }

      // list(param).then((res) => {
      //   this.equipments = res.data
      // })
      this.states = [{
        stateId: '1234cdsf',
        stateName:'待处理'
      },{
        stateId: '1234ee122',
        stateName:'待分配'
      },{
        stateId: '1234ee33',
        stateName:'处理中'
      },{
        stateId: '1234ee24d',
        stateName:'投诉中'
      },{
        stateId: '1234eesd',
        stateName:'已完成'
      },{
        stateId: '1234eewqe',
        stateName:'转领导'
      }]
    },

    /**
     * 选择区域地点位置后右侧的数据联动
     */
    areaPlaceLocationsTreeHandler(node,e) {
      // 截取左侧 区域 地点 位置 tree选择节点的标识  A_ 区域   P_地点  L_位置
      const treeIdMarking = node.id.slice(0,2)
      // 当前节点可向后台传的ID值
      const treeId = node.id.slice(2)

      if (node.id != null) {
        if ( treeIdMarking == 'A_' ) {
          // 如果之前点击过地点 位置节点 先清空
          this.query['placeId'] = ''
          this.query['locationId'] = ''

          // 配置请求参数
          this.query['areaId'] = treeId
        } else if ( treeIdMarking == 'P_' ) {
          // 如果之前点击过位置 先清空
          this.query['locationId'] = ''

          // 配置请求参数
          this.query['areaId'] = e.parent.data.id.slice(2)
          this.query['placeId'] = treeId
        } else if (treeIdMarking == 'L_' ) {
          this.query['areaId'] = e.parent.parent.data.id.slice(2)
          this.query['placeId'] = e.parent.data.id.slice(2)
          this.query['locationId'] = treeId
        } else {
          this.query['locationId'] = null
        }
      }

      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .cardWrapper{
    display: flex;
  }
  .dashboard-editor-container {
    padding: 25px;
    background-color: rgb(240, 242, 245);
    position: relative;


    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>