Merge remote-tracking branch 'origin/master'
| | |
| | | "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", |
| | |
| | | "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", |
| | |
| | | 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' |
| | | |
| | |
| | | // 字典数据组件 |
| | | 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 |
| | |
| | | Vue.use(directive) |
| | | Vue.use(plugins) |
| | | Vue.use(VueMeta) |
| | | Vue.use(VScaleScreen) |
| | | Vue.use(dataV) |
| | | DictData.install() |
| | | |
| | | /** |
| | |
| | | |
| | | NProgress.configure({ showSpinner: false }) |
| | | |
| | | const whiteList = ['/login', '/register'] |
| | | const whiteList = ['/login', '/register', '/screen'] |
| | | |
| | | router.beforeEach((to, from, next) => { |
| | | NProgress.start() |
| | |
| | | ] |
| | | }, |
| | | { |
| | | path: '/screen', |
| | | component: Layout, |
| | | hidden: true, |
| | | component: () => import('@/views/screen/index'), |
| | | name: 'Profile', |
| | | meta: { title: '大屏信息', icon: 'user' } |
| | | }, |
| | | { |
| | | path: '/user', |
| | | component: Layout, |
| | | hidden: true, |
| New file |
| | |
| | | <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> |
| New file |
| | |
| | | <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> |
| New file |
| | |
| | | <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> |
| New file |
| | |
| | | <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> |
| New file |
| | |
| | | <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> |
| New file |
| | |
| | | <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> |
| New file |
| | |
| | | <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> |
| New file |
| | |
| | | <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> |
| New file |
| | |
| | | <template> |
| | | <div class="select-container"> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | |
| | | </style> |
| New file |
| | |
| | | <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> |
| New file |
| | |
| | | <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> |
| New file |
| | |
| | | <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> |