fuliqi
2024-03-18 f18ff6df94830a0147f372f031fa94ab5402ead8
Merge remote-tracking branch 'origin/master'
4个文件已修改
17个文件已添加
963 ■■■■■ 已修改文件
package.json 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/images/screen/header_bg.png 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/images/screen/icon/icon1.png 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/images/screen/icon/icon2.png 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/images/screen/pageBg1.jpg 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/images/screen/title_bg.png 补丁 | 查看 | 原始文档 | blame | 历史
src/main.js 10 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/permission.js 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/router/index.js 8 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/screen/components/screen-car/index.vue 19 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/screen/components/screen-detection/index.vue 91 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/screen/components/screen-examine/components/examine-chart.vue 61 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/screen/components/screen-examine/components/examine-table.vue 109 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/screen/components/screen-examine/index.vue 57 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/screen/components/screen-face/index.vue 186 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/screen/components/screen-title/index.vue 41 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/screen/components/screen-wrapper/index.vue 68 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/screen/components/select-item/index.vue 15 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/screen/components/wrapper-title/index.vue 40 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/screen/index.vue 38 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/system/work-order/distribute/index.vue 216 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
package.json
@@ -36,6 +36,7 @@
    "url": "https://gitee.com/y_project/RuoYi-Vue.git"
  },
  "dependencies": {
    "@jiaminghi/data-view": "^2.10.0",
    "@riophae/vue-treeselect": "0.4.0",
    "axios": "0.24.0",
    "clipboard": "2.0.8",
@@ -54,6 +55,7 @@
    "quill": "1.3.7",
    "screenfull": "5.0.2",
    "sortablejs": "1.10.2",
    "v-scale-screen": "1.0.0",
    "vue": "2.6.12",
    "vue-count-to": "1.0.13",
    "vue-cropper": "0.5.5",
src/assets/images/screen/header_bg.png
src/assets/images/screen/icon/icon1.png
src/assets/images/screen/icon/icon2.png
src/assets/images/screen/pageBg1.jpg
src/assets/images/screen/title_bg.png
src/main.js
@@ -1,7 +1,7 @@
import Vue from 'vue'
import Cookies from 'js-cookie'
import {getToken} from "@/utils/auth";
import { getToken } from "@/utils/auth";
import Element from 'element-ui'
import './assets/styles/element-variables.scss'
@@ -38,6 +38,12 @@
// 字典数据组件
import DictData from '@/components/DictData'
// 大屏
import VScaleScreen from 'v-scale-screen'
import dataV from '@jiaminghi/data-view'
// 全局方法挂载
Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey
@@ -62,6 +68,8 @@
Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)
Vue.use(VScaleScreen)
Vue.use(dataV)
DictData.install()
/**
src/permission.js
@@ -8,7 +8,7 @@
NProgress.configure({ showSpinner: false })
const whiteList = ['/login', '/register']
const whiteList = ['/login', '/register', '/screen']
router.beforeEach((to, from, next) => {
  NProgress.start()
src/router/index.js
@@ -75,6 +75,14 @@
    ]
  },
  {
    path: '/screen',
    component: Layout,
    hidden: true,
    component: () => import('@/views/screen/index'),
    name: 'Profile',
    meta: { title: '大屏信息', icon: 'user' }
  },
  {
    path: '/user',
    component: Layout,
    hidden: true,
src/views/screen/components/screen-car/index.vue
New file
@@ -0,0 +1,19 @@
<template>
  <div class="car-container">
    <wrapper-title :title="'人脸数据趋势'"></wrapper-title>
  </div>
</template>
<script>
import WrapperTitle from '../wrapper-title/index';
export default {
  name: 'ScreenCar',
  components: {
    WrapperTitle
  },
}
</script>
<style lang="scss" scoped></style>
src/views/screen/components/screen-detection/index.vue
New file
@@ -0,0 +1,91 @@
<template>
  <div class="detection-container">
    <wrapper-title :title="'运行监控数据'"></wrapper-title>
    <div class="detection-content">
      <div class="water-item">
        <dv-water-level-pond :config="config1" style="width:100px;height:100px" />
        <div class="water-num water-text">6250/0</div>
        <div class="water-label water-text">接入率</div>
      </div>
      <div class="water-item">
        <dv-water-level-pond :config="config2" style="width:100px;height:100px" />
        <div class="water-num water-text">6236/6250</div>
        <div class="water-label water-text">GIS率</div>
      </div>
      <div class="water-item">
        <dv-water-level-pond :config="config3" style="width:100px;height:100px" />
        <div class="water-num water-text">5962/6250</div>
        <div class="water-label water-text">在线率</div>
      </div>
      <div class="water-item">
        <dv-water-level-pond :config="config4" style="width:100px;height:100px" />
        <div class="water-num water-text">5255/5962</div>
        <div class="water-label water-text">完好率</div>
      </div>
    </div>
  </div>
</template>
<script>
import WrapperTitle from '../wrapper-title/index';
export default {
  components: {
    WrapperTitle
  },
  data() {
    return {
      config1: {
        data: [0],
        shape: 'round',
        waveHeight: 5
      },
      config2: {
        data: [99.77],
        shape: 'round',
        waveHeight: 5
      },
      config3: {
        data: [95.39],
        shape: 'round',
        waveHeight: 5
      },
      config4: {
        data: [88.14],
        shape: 'round',
        waveHeight: 5
      },
    }
  }
}
</script>
<style lang="scss" scoped>
.detection-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: rgba(67, 102, 155, 0.3);
  border: 1px solid rgba(47, 91, 157, 0.8);
  padding: 20px 20px;
}
.water-item {
  font-size: 16px;
  color: #fff;
  .water-text {
    text-align: center;
  }
  .water-num {
    margin-top: 20px;
  }
  .water-label {
    font-size: 20px;
  }
}
</style>
src/views/screen/components/screen-examine/components/examine-chart.vue
New file
@@ -0,0 +1,61 @@
<template>
  <div class="chart-container">
    <div class="rank-chart" ref="rankChart"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
let barChart = null;
export default {
  name: 'ExamineChart',
  data() {
    return {
    }
  },
  methods: {
    initChart() {
      const options = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      }
      barChart.setOption(options,true);
    }
  },
  mounted() {
    barChart = echarts.init(this.$refs.rankChart);
    this.initChart();
  },
  beforeDestroy() {
    if (lineChart) {
      barChart.dispose();
    }
  },
}
</script>
<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 400px;
  .rank-chart {
    width: 100%;
    height: 100%;
  }
}
</style>
src/views/screen/components/screen-examine/components/examine-table.vue
New file
@@ -0,0 +1,109 @@
<template>
  <div class="table-container">
    <div class="table-content">
      <el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight">
        <el-table-column prop="date" label="排名" align="center">
        </el-table-column>
        <el-table-column prop="name" label="名称" align="center">
        </el-table-column>
        <el-table-column prop="address" label="成绩" align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableHeight: 40,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },
      ]
    }
  },
  methods: {
    computedHeight() {
      this.$nextTick(() => {
      })
      const content = this.$refs.tabContent;
      console.log(content);
      // this.tableHeight = content.clientHeight;
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.computedHeight();
      },1000)
    })
  }
}
</script>
<style lang="scss" scoped>
.table-container {
  width: 100%;
  flex: 1;
  border: 1px solid red;
  position: relative;
  .table-content {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
  }
}
</style>
src/views/screen/components/screen-examine/index.vue
New file
@@ -0,0 +1,57 @@
<template>
  <div class="examine-container">
    <wrapper-title :title="'考核成绩数据'"></wrapper-title>
    <div class="examine-content">
      <div class="examine-wrapper">
        <examine-chart class="wrapper-item"></examine-chart>
        <examine-table class="wrapper-item"></examine-table>
      </div>
    </div>
  </div>
</template>
<script>
import WrapperTitle from '../wrapper-title/index';
import ExamineChart from './components/examine-chart';
import ExamineTable from './components/examine-table';
export default {
  name: 'ScreenExamine',
  components: {
    WrapperTitle,
    ExamineChart,
    ExamineTable
  }
}
</script>
<style lang="scss" scoped>
.examine-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.examine-content {
  width: 100%;
  flex: 1;
  position: relative;
  .examine-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
.wrapper-item {
  background: rgba(67, 102, 155, 0.3);
  border: 1px solid rgba(47, 91, 157, 0.8);
  margin-bottom: 20px;
  &:last-of-type {
    margin-bottom: 0;
  }
}
</style>
src/views/screen/components/screen-face/index.vue
New file
@@ -0,0 +1,186 @@
<template>
  <div class="face-container">
    <wrapper-title :title="'人脸数据趋势'"></wrapper-title>
    <div class="face-content">
      <div class="data-plane">
        <dv-border-box-13 class="plane">
          <div class="data-item">
            <div class="data-icon">
              <img src="@/assets/images/screen/icon/icon1.png" alt="" class="width-img">
            </div>
            <div class="data-info">
              <div class="data-lable">昨日人脸采集设备总数</div>
              <div class="data-num">{{formatNumber(1123)}}</div>
            </div>
          </div>
        </dv-border-box-13>
        <dv-border-box-13 class="plane">
          <div class="data-item">
            <div class="data-icon">
              <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
            </div>
            <div class="data-info">
              <div class="data-lable">昨日抓拍数据量</div>
              <div class="data-num">{{ formatNumber(200000) }}</div>
            </div>
          </div>
        </dv-border-box-13>
        <dv-border-box-13 class="plane">
          <div class="data-item">
            <div class="data-icon">
              <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
            </div>
            <div class="data-info">
              <div class="data-lable">历史抓拍数据量</div>
              <div class="data-num">{{ formatNumber(112313141111) }}</div>
            </div>
          </div>
        </dv-border-box-13>
      </div>
      <div id="faceChart" ref="faceChart"></div>
    </div>
  </div>
</template>
<script>
import WrapperTitle from '../wrapper-title/index';
import * as echarts from 'echarts';
let lineChart = null;
export default {
  name: 'ScreenFace',
  components: {
    WrapperTitle
  },
  data() {
    return {
      dataList: {
        state: { '01:00': 1000, '02:00': 2131, '03:00': 1233, '04:00': 2132, '05:00': 3211, '06:00': 213, '07:00': 123, '08:00': 566 },
        state2: { '01:00': 900, '02:00': 1131, '03:00': 1533, '04:00': 2132, '05:00': 3011, '06:00': 13, '07:00': 113, '08:00': 566 },
      },
    }
  },
  methods: {
    initChart() {
      const option = {
        legend: {
          right: 'right',
          top: 'top',
          orient: "vertical",
          icon: 'rect',
          data: [
            {
              name: '正常数',
              itemStyle: {
                color: 'rgba(62, 144, 247, 1)'
              }
            },
            {
              name: '异常数',
              itemStyle: {
                color: 'rgba(85, 192, 191, 1)'
              }
            },
          ],
        },
        grid: {
          left: '2%',
          right: '5%',
          bottom: '5%',
          top: '8%',
          containLabel: true
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: Object.keys(this.dataList.state),
        },
        yAxis: {},
        series: [
          {
            name: '今日',
            data: Object.entries(this.dataList.state).map(([key, value]) => value),
            type: 'line',
            itemStyle: {
              color: 'rgba(62, 144, 247, 1)'
            }
          },
          {
            name: '昨日',
            data: Object.entries(this.dataList.state2).map(([key, value]) => value),
            type: 'line',
            itemStyle: {
              color: 'rgba(85, 192, 191, 1)'
            }
          }
        ]
      };
      lineChart.setOption(option, true);
    },
    formatNumber(value) {
      return new Intl.NumberFormat('en-US').format(value);
    }
  },
  mounted() {
    lineChart = echarts.init(this.$refs.faceChart);
    this.initChart();
  },
  beforeDestroy() {
    if (lineChart) {
      lineChart.dispose();
    }
  },
}
</script>
<style lang="scss" scoped>
.face-content {
  background: rgba(67, 102, 155, 0.3);
  border: 1px solid rgba(47, 91, 157, 0.8);
  .plane {
    margin-bottom: 10px;
  }
  .data-plane {
    .data-item {
      width: 100%;
      padding: 20px 20px;
      display: flex;
      align-items: center;
      .data-icon {
        width: 40px;
        margin: 0 20px;
      }
      .data-info {
        flex: 1;
        color: #5b83bd;
        font-size: 16px;
        .data-num {
          margin-top: 5px;
          font-size: 24px;
          color: #fff;
        }
      }
    }
  }
  #faceChart {
    width: 100%;
    height: 300px;
  }
}
.width-img {
  width: 100%;
}
</style>
src/views/screen/components/screen-title/index.vue
New file
@@ -0,0 +1,41 @@
<template>
  <div class="header-container">
    <div class="header-content">
      <div class="header-bg">
        <img src="@/assets/images/screen/header_bg.png" class="width-img" alt="">
      </div>
      <div class="header-text">
        自贡运维考核可视化大屏
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ScreenTitle'
}
</script>
<style lang="scss" scoped>
.header-container {
  width: 1000px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.width-img {
  width: 100%;
  display: block;
}
.header-text {
  position: absolute;
  left: 49%;
  top: 15px;
  transform: translateX(-50%);
  color: #fff;
  font-size: 30px;
}
</style>
src/views/screen/components/screen-wrapper/index.vue
New file
@@ -0,0 +1,68 @@
<template>
  <div class="wrapper-container">
    <div class="wrapper-content">
      <div class="left-container wrapper">
        <screen-face></screen-face>
      </div>
      <div class="center-container wrapper">
        <screen-detection></screen-detection>
      </div>
      <div class="right-container wrapper">
        <screen-examine></screen-examine>
      </div>
    </div>
  </div>
</template>
<script>
import ScreenFace from '../screen-face/index';
import ScreenDetection from '../screen-detection/index';
import ScreenExamine from '../screen-examine/index';
export default {
  name: 'ScreenWrapper',
  components: {
    ScreenFace,
    ScreenDetection,
    ScreenExamine,
  },
}
</script>
<style lang="scss" scoped>
.wrapper-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  .wrapper-content {
    width: 100%;
    height: calc(100% - 100px);
    margin-top: 100px;
    border: 1px solid red;
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    align-items: center;
  }
}
.wrapper {
  width: 33.3%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  &:first-of-type {
    padding-left: 0;
  }
  &:last-of-type {
    padding-right: 0;
  }
}
</style>
src/views/screen/components/select-item/index.vue
New file
@@ -0,0 +1,15 @@
<template>
  <div class="select-container">
  </div>
</template>
<script>
  export default {
  }
</script>
<style lang="scss" scoped>
</style>
src/views/screen/components/wrapper-title/index.vue
New file
@@ -0,0 +1,40 @@
<template>
  <div class="title-container">
    <span class="title">{{ title }}</span>
  </div>
</template>
<script>
export default {
  name: 'WrapperTitle',
  props: {
    title: {
      type: String,
      required: true
    }
  }
}
</script>
<style lang="scss" scoped>
.title-container {
  background-image: url("../../../../assets/images/screen/title_bg.png");
  background-size: 231px 100%;
  background-repeat: no-repeat;
  height: 38px;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .title {
    margin-left: 20px;
    margin-top: -2px;
    color: #fff;
    letter-spacing: 2px;
    font-size: 20px;
    font-style: italic;
  }
}
</style>
src/views/screen/index.vue
New file
@@ -0,0 +1,38 @@
<template>
  <div class="screen-container">
    <screen-title></screen-title>
    <v-scale-screen width="1920" height="1080" :autoScale="true" :delay="0" class="screen">
      <screen-wrapper></screen-wrapper>
    </v-scale-screen>
  </div>
</template>
<script>
import ScreenTitle from './components/screen-title/index.vue';
import ScreenWrapper from './components/screen-wrapper/index.vue';
export default {
  name: 'App',
  components: {
    ScreenTitle,
    ScreenWrapper,
  },
  data() {
    return {
    }
  },
  mounted() {
  }
}
</script>
<style lang="scss" scoped>
.screen {
  background: url('../../assets/images/screen/pageBg1.jpg') !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}
</style>
src/views/system/work-order/distribute/index.vue
New file
@@ -0,0 +1,216 @@
<template>
  <div class="row">
    <el-row type="flex" justify="left">
      <el-col :span="24" style="position: relative">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="0" @click="changeUnit(null, '全部')">
            全部单位
          </el-menu-item>
          <el-menu-item index="1">
            自流井运维单位(70/70)
          </el-menu-item>
          <el-menu-item index="2">
            大安运维(50/50)
          </el-menu-item>
          <el-menu-item index="3">富顺运维单位(20/70)</el-menu-item>
          <el-menu-item index="4">高新运维单位(15/40)</el-menu-item>
          <el-menu-item index="5">荣县运维单位(90/90)</el-menu-item>
          <el-menu-item index="6">贡井运维单位(45/45)</el-menu-item>
          <el-menu-item index="7">沿滩运维单位(70/70)</el-menu-item>
        </el-menu>
        <el-tooltip class="item" effect="dark" content="自动下发设置" placement="left">
          <el-button class="setting" style="" type="success" icon="el-icon-s-tools" circle></el-button>
        </el-tooltip>
      </el-col>
    </el-row>
    <el-row class="op-warp" type="flex" justify="left" >
      <el-col :span="24">
        <el-button size="small" type="info" @click="selectedDistribute" class="op">下发选中工单</el-button>
        <el-button size="small" type="danger" @click="allDistribute" class="op">全部下发</el-button>
        <el-popover
          class="op"
          placement="right"
          width="300px"
          trigger="click">
          <span style="font-weight: bold;font-size: 16px">快速下发</span>
          <el-form ref="fastDistributeForm" :model="fastDistributeForm" :rules="fastDistributeRules" label-width="80px">
            <el-form-item label="快捷方式" prop="fastWay">
              <el-radio v-model="fastDistributeForm.fastWay" label="0">最近30分钟</el-radio>
              <el-radio v-model="fastDistributeForm.fastWay" label="01">最近1小时</el-radio>
              <el-radio v-model="fastDistributeForm.fastWay" label="10">最近2小时</el-radio>
              <el-radio v-model="fastDistributeForm.fastWay" label="11">最近1天</el-radio>
              <el-radio v-model="fastDistributeForm.fastWay" label="101">自定义</el-radio>
            </el-form-item>
            <el-form-item v-if="fastDistributeForm.fastWay === '101'" label="时间范围">
              <el-date-picker
                style="width: 100%"
                v-model="fastTimeRange"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="数量限制" prop="fastNumLimit">
              <el-input v-model="fastDistributeForm.fastNumLimit" size="small" type="number" placeholder="此次工单下发最大数量"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="fastDistribute">立即下发</el-button>
            </el-form-item>
          </el-form>
          <el-button slot="reference" type="primary" size="small">快捷下发</el-button>
        </el-popover>
      </el-col>
    </el-row>
    <el-row class="content-warp" type="flex" justify="left">
      <el-col :span="24">
        <el-table v-loading="loading" :data="workOrderList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="工单号" align="center" prop="workOrderNo"/>
          <el-table-column label="运维单位" align="center" prop="unitName"/>
          <el-table-column label="工单来源" align="center" prop="source"/>
          <el-table-column label="故障类型" align="center" prop="errorType"/>
          <el-table-column label="产生时间" align="center" prop="createTime"/>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'index',
  data() {
    return {
      // 当前运维单位
      unitId: null,
      unitName: "",
      // 多选
      multipleSelection: [],
      // 下发时间范围
      fastTimeRange: [],
      // 下发
      fastDistributeForm: {
        fastWay: '',
        fastNumLimit: null,
        start: null,
        end: null,
        unitId: null
      },
      // 下发表单验证
      fastDistributeRules: {
        fastWay: [
          { required: true, message: "请选择快速分发方式", trigger: "change" }
        ],
        fastNumLimit: [
          { required: true, message: "请输入快速分发数量限制", trigger: "change" }
        ],
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 总条数
      total: 0,
      // 非多个禁用
      multiple: true,
      activeIndex: '0',
      loading: false,
      workOrderList: [],
    }
  },
  methods: {
    changeUnit(unitId, unitName) {
      this.unitId = unitId;
      this.unitName = unitName;
      // todo 触发数据查询
    },
    clearFastDistributeForm() {
      this.fastDistributeForm.fastWay = ''
      this.fastDistributeForm.start = null
      this.fastDistributeForm.end = null
      this.fastDistributeForm.fastNumLimit = null
      this.fastTimeRange = []
    },
    allDis() {},
    // 全部下发
    allDistribute() {
      this.$modal.confirm("确定要下发" + (this.unitId ? this.unitName + "下的" : "所有工单") + "吗?").then(function() {
        return this.allDis();
      }).then(() => {
        // this.getList();
        // this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    // 快速下发
    fastDistribute() {
      this.$refs['fastDistributeForm'].validate((valid) => {
        if (valid) {
          // 如果是自定义方式,那么时间段必填
          if (this.fastDistributeForm.fastWay === '101' && !this.fastTimeRange.length > 0) {
            this.$message.warning("请选择时间范围")
            return false
          }
          if (this.fastTimeRange.length > 0) {
            this.fastDistributeForm.start = this.fastTimeRange[0]
            this.fastDistributeForm.end = this.fastTimeRange[1]
          }
          this.fastDistributeForm.unitId = this.unitId
          // todo 提交快速发布请求
        } else {
          return false
        }
      })
    },
    // 选中工单下发
    selectedDistribute() {
      if (this.multipleSelection.length < 1) {
        this.$message.warning("请先选择要下发的工单")
        return
      }
      // todo 下发工单
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    getList() {
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.multipleSelection = selection.map(item => item.id)
    },
  }
}
</script>
<style scoped>
.row {
  padding: 0 20px;
}
.op-warp {
  margin-top: 10px;
}
.content-warp {
  margin-top: 10px;
}
.op {
  margin-right: 5px;
}
.setting {
  position: absolute;
  top: 10px;
  right:5px
}
</style>