init
This commit is contained in:
346
src/views/FactoryManage/AbnormalAlarm.vue
Normal file
346
src/views/FactoryManage/AbnormalAlarm.vue
Normal file
@@ -0,0 +1,346 @@
|
||||
<!--
|
||||
* @Author: gtz
|
||||
* @Date: 2021-03-20 14:02:38
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2021-07-22 11:55:28
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form
|
||||
:placeholder-name="placeholderName"
|
||||
:key-name="keyName"
|
||||
@getDataList="getList"
|
||||
@add="addNew"
|
||||
/>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="trueWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<Alarm-Update
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdate"
|
||||
:worker-list="workerList"
|
||||
@refreshDataList="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import { list, del, getWorkerList } from '@/api/factory-manage/abnormalAlarm'
|
||||
import { alarmLevelList } from '@/api/basicData/AlarmManagement/alarmLevel'
|
||||
import AlarmUpdate from './components/Alarm-update.vue'
|
||||
import AlarmDetail from './components/Alarm-detail.vue'
|
||||
import HeadForm from './components/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter, handleLimit } from '@/filters'
|
||||
import i18n from '@/lang'
|
||||
import factory from '@/filters/factory'
|
||||
// import data from '../pdf/content'
|
||||
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.alarmHandle',
|
||||
showParam: {
|
||||
name: 'status',
|
||||
type: 'unequal',
|
||||
value: 3
|
||||
}
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.factory.abnormalAlarm.alarmTime'),
|
||||
filter: timeFormatter,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.factory.abnormalAlarm.name'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'alarmType',
|
||||
label: i18n.t('module.factory.abnormalAlarm.alarmType'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'alarmGrade',
|
||||
label: i18n.t('module.factory.abnormalAlarm.alarmLevel'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'alarmContent',
|
||||
label: i18n.t('module.factory.abnormalAlarm.alarmReason'),
|
||||
align: 'center',
|
||||
filter: handleLimit
|
||||
},
|
||||
// {
|
||||
// prop: 'alarmNotify',
|
||||
// label: i18n.t('module.factory.abnormalAlarm.messagePushMode'),
|
||||
// align: 'center',
|
||||
// filter: factory('alarmNotify')
|
||||
// },
|
||||
// {
|
||||
// prop: 'team',
|
||||
// label: i18n.t('module.factory.abnormalAlarm.team'),
|
||||
// align: 'center'
|
||||
// },
|
||||
{
|
||||
prop: 'status',
|
||||
label: i18n.t('module.factory.abnormalAlarm.status'),
|
||||
align: 'center',
|
||||
filter: factory('alarmStatus')
|
||||
},
|
||||
{
|
||||
prop: 'detail',
|
||||
label: i18n.t('module.factory.abnormalAlarm.detail'),
|
||||
align: 'center',
|
||||
subcomponent: AlarmDetail,
|
||||
workerList: []
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Factory',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, AlarmUpdate },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyName: [
|
||||
{
|
||||
name: this.$t('module.factory.abnormalAlarm.alarmType'),
|
||||
type: 'input'
|
||||
},
|
||||
{
|
||||
name: this.$t('module.factory.abnormalAlarm.timeQuantum'),
|
||||
type: 'datePicker'
|
||||
},
|
||||
{
|
||||
name: this.$t('module.factory.abnormalAlarm.alarmLevel'),
|
||||
type: 'select',
|
||||
option: [
|
||||
// { value: this.$t('module.factory.abnormalAlarm.all'), label: this.$t('module.factory.abnormalAlarm.all') },
|
||||
// { value: this.$t('module.factory.abnormalAlarm.breakdown'), label: this.$t('module.factory.abnormalAlarm.breakdown') },
|
||||
// { value: this.$t('module.factory.abnormalAlarm.warn'), label: this.$t('module.factory.abnormalAlarm.warn') },
|
||||
// { value: this.$t('module.factory.abnormalAlarm.alarm'), label: this.$t('module.factory.abnormalAlarm.alarm') }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: this.$t('module.factory.abnormalAlarm.status'),
|
||||
type: 'select',
|
||||
option: [
|
||||
{
|
||||
value: 3,
|
||||
label: this.$t('module.factory.abnormalAlarm.processingComplete')
|
||||
},
|
||||
{ value: 2, label: this.$t('module.factory.abnormalAlarm.inHand') },
|
||||
{
|
||||
value: 1,
|
||||
label: this.$t('module.factory.abnormalAlarm.waitingProcess')
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
placeholderName: [
|
||||
this.$t('module.factory.abnormalAlarm.alarmType'),
|
||||
null
|
||||
],
|
||||
addOrUpdateVisible: false,
|
||||
tableBtn,
|
||||
trueWidth: 120,
|
||||
tableProps,
|
||||
list: [],
|
||||
// 初始化报警级别
|
||||
alarmOption: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
status: '',
|
||||
alarmType: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
id: ''
|
||||
},
|
||||
workerList: {},
|
||||
alarmLevelList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getDict()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`[${this.$t('module.basicData.visual.TipsBefore')}][${
|
||||
raw.data.name
|
||||
}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t(
|
||||
'module.basicData.visual.confirmButtonText'
|
||||
),
|
||||
cancelButtonText: this.$t(
|
||||
'module.basicData.visual.cancelButtonText'
|
||||
),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then((response) => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else if (raw.type === 'edit') {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList(key) {
|
||||
this.listLoading = true
|
||||
if (key) {
|
||||
this.listQuery.alarmType = key[0]
|
||||
if (key[1]) {
|
||||
this.listQuery.startTime = key[1][0]
|
||||
this.listQuery.endTime = key[1][1]
|
||||
} else {
|
||||
this.listQuery.startTime = ''
|
||||
this.listQuery.endTime = ''
|
||||
}
|
||||
this.listQuery.alarmGrade = key[2]
|
||||
this.listQuery.status = key[3]
|
||||
}
|
||||
list(this.listQuery).then((response) => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
// 显示查询参数
|
||||
console.log(this.listQuery)
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
|
||||
// 将JSON中的某一条属性取出来
|
||||
// this.list.map(o=>{return{alarmGrade:o.alarmGrade}})
|
||||
// this.list.map(o=>{return[o.alarmGrade]})
|
||||
// this.list.map(o=>{return[o.alarmGrade].toString()})
|
||||
// console.log(o)
|
||||
|
||||
// console.log(this.keyName[2].option)
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// 获取员工列表
|
||||
async getDict() {
|
||||
const res = await getWorkerList({
|
||||
current: 1,
|
||||
size: 999
|
||||
})
|
||||
if (res.code === 0) {
|
||||
this.workerList = res.data.records
|
||||
const workerObj = {}
|
||||
res.data.records.forEach((item) => {
|
||||
workerObj[item.id] = item.name
|
||||
})
|
||||
Vue.set(
|
||||
this.tableProps[this.tableProps.length - 1],
|
||||
'workerList',
|
||||
workerObj
|
||||
)
|
||||
}
|
||||
const result = await alarmLevelList({
|
||||
current: 1,
|
||||
size: 999
|
||||
})
|
||||
if (result.code === 0) {
|
||||
this.alarmLevelList = result.data.records
|
||||
this.alarmOption = this.alarmLevelList.map(item => {
|
||||
return {
|
||||
label: item.alarmGrade,
|
||||
value: item.alarmGrade
|
||||
}
|
||||
})
|
||||
this.keyName[2].option = this.alarmOption
|
||||
console.log(this.alarmOption)
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
219
src/views/FactoryManage/EquipmentAlarm.vue
Normal file
219
src/views/FactoryManage/EquipmentAlarm.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-04-16 12:56:32
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :inline="true" :model="listQuery" @keyup.enter.native="getList()">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.equipmentName')" prop="name">
|
||||
<el-select v-model="listQuery.name" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.factory.abnormalAlarm.equipmentName')])" clearable>
|
||||
<el-option
|
||||
v-for="item in nameArr"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.alarmStatus')" prop="alarmStatus">
|
||||
<el-select v-model="listQuery.alarmStatus" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.factory.abnormalAlarm.alarmStatus')])" clearable>
|
||||
<el-option
|
||||
v-for="item in statusArr"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<base-table
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:is-loading="listLoading"
|
||||
>
|
||||
<!-- <method-btn
|
||||
slot="handleBtn"
|
||||
:width="trueWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/> -->
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<Alarm-handling v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>import i18n from '@/lang'
|
||||
import AlarmHandling from './components/Alarm-handling.vue'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
// import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
// const tableBtn = [
|
||||
// {
|
||||
// type: 'deal',
|
||||
// btnName: i18n.t('module.factory.abnormalAlarm.deal')
|
||||
// }
|
||||
// ]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.factory.abnormalAlarm.equipmentName'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'alarmInfo',
|
||||
label: i18n.t('module.factory.abnormalAlarm.alarmInfo'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'alarmStartTime',
|
||||
label: i18n.t('module.factory.abnormalAlarm.alarmStartTime'),
|
||||
filter: timeFormatter,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'alarmEndTime',
|
||||
label: i18n.t('module.factory.abnormalAlarm.alarmEndTime'),
|
||||
filter: timeFormatter,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'alarmGrade',
|
||||
label: i18n.t('module.basicData.alarmManagement.AlarmLevel'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'alarmStatus',
|
||||
label: i18n.t('module.factory.abnormalAlarm.alarmStatus'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: i18n.t('module.basicData.visual.Remarks'),
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
// , MethodBtn
|
||||
export default {
|
||||
name: 'EquipmentAlarm',
|
||||
components: { Pagination, BaseTable, AlarmHandling },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
// tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
list: [],
|
||||
nameArr: [],
|
||||
statusArr: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
alarmStatus: '',
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(raw)
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
this.statusArr = [
|
||||
{
|
||||
id: 1,
|
||||
name: '报警中'
|
||||
},
|
||||
{
|
||||
id: 0,
|
||||
name: '已解决'
|
||||
}
|
||||
]
|
||||
this.nameArr = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'PID1'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '00A'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '00C'
|
||||
}
|
||||
]
|
||||
this.list = [
|
||||
{
|
||||
name: 'PID1',
|
||||
alarmStartTime: '2020-12-10 12:11:30',
|
||||
alarmInfo: '机械手停止运动',
|
||||
alarmStatus: '报警中',
|
||||
alarmGrade: '二级'
|
||||
}
|
||||
]
|
||||
this.listLoading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
138
src/views/FactoryManage/components/Alarm-detail.vue
Normal file
138
src/views/FactoryManage/components/Alarm-detail.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<!--
|
||||
* @Author: gtz
|
||||
* @Date: 2021-03-20 14:06:05
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-03-24 18:50:30
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<span>
|
||||
<el-button type="text" size="small" @click="emitClick">{{ 'btn.detail' | i18nFilter }}</el-button>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="showDetail"
|
||||
>
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
:model="dataForm"
|
||||
:rules="rules"
|
||||
size="medium"
|
||||
label-width="120px"
|
||||
label-position="right"
|
||||
style="text-align: left"
|
||||
>
|
||||
<el-row>
|
||||
<el-row style="padding-bottom: 20px; text-align: center; font-size: 18px; color: #303133; font-weight: bold">
|
||||
{{ $t('module.factory.abnormalAlarm.exceptionAlarm') + $t('module.factory.abnormalAlarm.detail') }}
|
||||
</el-row>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.alarmSource')">
|
||||
{{ dataForm.alarmSource }}
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.alarmTime')">
|
||||
{{ dataForm.createTime }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.alarmCode')">
|
||||
{{ dataForm.alarmCode }}
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.alarmContent')">
|
||||
{{ dataForm.alarmContent }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding-bottom: 20px; text-align: center; font-size: 18px; color: #303133; font-weight: bold">
|
||||
{{ $t('module.factory.abnormalAlarm.description') }}
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.status')">
|
||||
{{ dataForm.status | filterFun }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.handler')">
|
||||
<!-- {{ injectData.workerList[dataForm.handler] }} -->
|
||||
{{ dataForm.handler }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.description')">
|
||||
{{ dataForm.description }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.annex')">
|
||||
<el-row v-for="(item, index) in dataForm.fileIds" :key="item">
|
||||
{{ dataForm.fileNames[index] }}
|
||||
<el-button size="small" type="primary" @click="downloadFile(item)">{{ 'btn.download' | i18nFilter }}</el-button>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getInfo } from '@/api/factory-manage/abnormalAlarm'
|
||||
import factory from '@/filters/factory'
|
||||
|
||||
export default {
|
||||
filters: {
|
||||
filterFun: factory('alarmStatus')
|
||||
},
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showDetail: false,
|
||||
dataForm: {
|
||||
id: null,
|
||||
alarmSource: null,
|
||||
createTime: null,
|
||||
alarmCode: null,
|
||||
alarmContent: null,
|
||||
status: null,
|
||||
handler: null,
|
||||
description: null,
|
||||
fileIds: null
|
||||
},
|
||||
rules: {},
|
||||
files: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
emitClick() {
|
||||
getInfo({
|
||||
id: this.injectData.id
|
||||
}).then(res => {
|
||||
this.dataForm = res.data
|
||||
res.data.fileIds.forEach((item, index) => {
|
||||
this.files.push({
|
||||
id: item,
|
||||
name: res.data.fileNames[index]
|
||||
})
|
||||
})
|
||||
this.showDetail = true
|
||||
console.log(res)
|
||||
}).catch(() => {
|
||||
this.showDetail = true
|
||||
})
|
||||
},
|
||||
downloadFile(id) {
|
||||
window.open(`${location.origin}/api/common/attachment/downloadFile?type=file&attachmentId=${id}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
142
src/views/FactoryManage/components/Alarm-handling.vue
Normal file
142
src/views/FactoryManage/components/Alarm-handling.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-04-06 14:07:18
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="$t('module.factory.abnormalAlarm.EquipmentAlarmProcessing')"
|
||||
:visible.sync="visible"
|
||||
>
|
||||
<el-row :gutter="10">
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
:model="dataForm"
|
||||
:rules="rules"
|
||||
size="medium"
|
||||
label-width="110px"
|
||||
label-position="left"
|
||||
>
|
||||
<el-col :span="10">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.equipmentName')" prop="name">
|
||||
<el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.factory.abnormalAlarm.equipmentName')])" readonly :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.alarmInfo')" prop="alarmInfo">
|
||||
<el-input v-model="dataForm.alarmInfo" :placeholder="$i18nForm(['placeholder.input', $t('module.factory.abnormalAlarm.alarmInfo')])" readonly :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.alarmStartTime')" prop="alarmStartTime">
|
||||
<el-date-picker
|
||||
v-model="dataForm.alarmStartTime"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
:style="{width: '100%'}"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.factory.abnormalAlarm.alarmStartTime')])"
|
||||
readonly
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-col :span="10">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.alarmEndTime')" prop="alarmEndTime">
|
||||
<el-date-picker
|
||||
v-model="dataForm.alarmEndTime"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
:style="{width: '100%'}"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.factory.abnormalAlarm.alarmEndTime')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.alarmStatus')" prop="alarmStatus">
|
||||
<el-select
|
||||
v-model="dataForm.alarmStatus"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.factory.abnormalAlarm.alarmStatus')])"
|
||||
clearable
|
||||
:style="{width: '100%'}"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in alarmStatusOptions"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
|
||||
<el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<div slot="footer">
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handelConfirm">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
props: [],
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
name: undefined,
|
||||
alarmInfo: undefined,
|
||||
alarmStartTime: null,
|
||||
alarmEndTime: null,
|
||||
alarmStatus: 1,
|
||||
remark: undefined
|
||||
},
|
||||
rules: {
|
||||
equipmentName: [],
|
||||
alarmInfo: [],
|
||||
alarmStartTime: [],
|
||||
alarmEndTime: [],
|
||||
alarmStatus: [],
|
||||
remark: []
|
||||
},
|
||||
alarmStatusOptions: [{
|
||||
'label': '已解决',
|
||||
'value': 1
|
||||
}, {
|
||||
'label': '报警中',
|
||||
'value': 2
|
||||
}]
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
init(raw) {
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
this.dataForm = JSON.parse(JSON.stringify(raw.data))
|
||||
})
|
||||
},
|
||||
handelConfirm() {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (!valid) return
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
173
src/views/FactoryManage/components/Alarm-update.vue
Normal file
173
src/views/FactoryManage/components/Alarm-update.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<!--
|
||||
* @Author: gtz
|
||||
* @Date: 2021-03-20 14:06:05
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-04-16 15:13:02
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="visible"
|
||||
style="text-align: center"
|
||||
@open="onOpen"
|
||||
@close="onClose"
|
||||
>
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
:model="dataForm"
|
||||
:rules="rules"
|
||||
size="medium"
|
||||
label-width="120px"
|
||||
label-position="right"
|
||||
style="text-align: left"
|
||||
>
|
||||
<el-row>
|
||||
<el-row style="padding-bottom: 20px; text-align: center; font-size: 18px; color: #303133; font-weight: bold">
|
||||
{{ $t('module.factory.abnormalAlarm.exceptionAlarm') + $t('module.factory.abnormalAlarm.detail') }}
|
||||
</el-row>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.alarmSource')">
|
||||
{{ dataForm.alarmSource }}
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.alarmTime')">
|
||||
{{ dataForm.createTime }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.alarmCode')">
|
||||
{{ dataForm.alarmCode }}
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.alarmContent')">
|
||||
{{ dataForm.alarmContent }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding-bottom: 20px; text-align: center; font-size: 18px; color: #303133; font-weight: bold">
|
||||
{{ $t('module.factory.abnormalAlarm.description') }}
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.status')">
|
||||
<el-select v-model="dataForm.status" clearable>
|
||||
<el-option :value="3" :label="$t('module.factory.abnormalAlarm.processingComplete')" />
|
||||
<el-option :value="2" :label="$t('module.factory.abnormalAlarm.inHand')" />
|
||||
<el-option :value="1" :label="$t('module.factory.abnormalAlarm.waitingProcess')" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.handler')">
|
||||
<!-- <el-select v-model="dataForm.handler">
|
||||
<el-option v-for="item in workerList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select> -->
|
||||
<el-input v-model="dataForm.handler" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.description')">
|
||||
<el-input v-model="dataForm.description" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.factory.abnormalAlarm.annex')">
|
||||
<more-upload ref="upload" :item-id="dataForm.id" :files="files" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getInfo, update } from '@/api/factory-manage/abnormalAlarm'
|
||||
import moreUpload from '@/components/Upload/MoreFiles'
|
||||
|
||||
export default {
|
||||
components: { moreUpload },
|
||||
props: {
|
||||
workerList: {
|
||||
type: Array,
|
||||
require: true,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: null,
|
||||
alarmSource: null,
|
||||
createTime: null,
|
||||
alarmCode: null,
|
||||
alarmContent: null,
|
||||
status: null,
|
||||
handler: null,
|
||||
description: null,
|
||||
fileIds: null
|
||||
},
|
||||
files: [],
|
||||
rules: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
getInfo({
|
||||
id
|
||||
}).then(res => {
|
||||
this.dataForm = res.data
|
||||
this.files = []
|
||||
res.data.fileIds.forEach((item, index) => {
|
||||
this.files.push({
|
||||
id: item,
|
||||
name: res.data.fileNames[index]
|
||||
})
|
||||
})
|
||||
this.visible = true
|
||||
}).catch(() => {
|
||||
this.visible = true
|
||||
})
|
||||
},
|
||||
onOpen() {},
|
||||
onClose() {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
this.$emit('refreshDataList')
|
||||
},
|
||||
dataFormSubmit() {
|
||||
const files = this.$refs.upload.returnFileList()
|
||||
const fileIds = []
|
||||
files.map(item => {
|
||||
fileIds.push(item.id)
|
||||
})
|
||||
console.log(fileIds)
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.dataForm.fileIds = fileIds
|
||||
const data = this.dataForm
|
||||
update(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
98
src/views/FactoryManage/components/HeadForm.vue
Normal file
98
src/views/FactoryManage/components/HeadForm.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:18:27
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-04-20 16:41:50
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-form :inline="true" @keyup.enter.native="getDataList()">
|
||||
<el-form-item v-for="(item, index) in keyName" :key="index" :label="item.name">
|
||||
<el-input v-if="item.type === 'input'" v-model="key[index]" style="width:150px" :placeholder="placeholderName[index]" clearable />
|
||||
<el-select v-if="item.type === 'select'" v-model="key[index]" style="width:150px" :placeholder="placeholderName[index]" clearable>
|
||||
<!-- 这里用 :value="i.alarmId" :label="i.alarmGrade" 可以将数据传进select -->
|
||||
<el-option v-for="i in item.option" :key="i.value" :value="i.value" :label="i.label" />
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-if="item.type === 'datePicker'"
|
||||
v-model="key[index]"
|
||||
type="daterange"
|
||||
align="right"
|
||||
unlink-panels
|
||||
:range-separator="'formItem.to' | i18nFilter"
|
||||
:start-placeholder="'formItem.beginTime' | i18nFilter"
|
||||
:end-placeholder="'formItem.endTime' | i18nFilter"
|
||||
:picker-options="pickerOptions"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getDataList()">{{ 'btn.search' | i18nFilter }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
keyName: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
placeholderName: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
key: [],
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: this.$t('datePickerOption.lastWeek'),
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: this.$t('datePickerOption.lastMonth'),
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: this.$t('datePickerOption.lastThreeMonths'),
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.keyName.map(() => {
|
||||
this.key.push(null)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getDataList() {
|
||||
this.$emit('getDataList', this.key)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
123
src/views/FactoryManage/components/LocationSub.vue
Normal file
123
src/views/FactoryManage/components/LocationSub.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-03-15 10:48:36
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="'btn.see' | i18nFilter"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="visible"
|
||||
>
|
||||
<el-row :gutter="15">
|
||||
<el-col :span="5" style="text-align: right;">
|
||||
{{ $t('module.factory.visual.locationSub') }}
|
||||
</el-col>
|
||||
<el-col :span="19">
|
||||
<el-row v-for="item in trueSubList" :key="item">
|
||||
{{ item }}
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
subList: [
|
||||
'00023342107070243',
|
||||
'00023342107070244',
|
||||
'00023342107070245',
|
||||
'00023342107070246',
|
||||
'00023342107070247',
|
||||
'00023342107070248',
|
||||
'00023342107070249',
|
||||
'00023342107070250',
|
||||
'00023342107070251',
|
||||
'00023342107070252',
|
||||
'00023342107070253',
|
||||
'00023342107070254',
|
||||
'00023342107070255',
|
||||
'00023342107070256',
|
||||
'00023342107070257',
|
||||
'00023342107070258',
|
||||
'00023342107070259',
|
||||
'00023342107070260',
|
||||
'00023342107070261',
|
||||
'00023342107070262',
|
||||
'00023342107070263',
|
||||
'00023342107070264',
|
||||
'00023342107070265',
|
||||
'00023342107070266',
|
||||
'00023342107070267',
|
||||
'00023342107070268',
|
||||
'00023342107070269',
|
||||
'00023342107070270',
|
||||
'00023342107070271',
|
||||
'00023342107070272',
|
||||
'00023342107070273',
|
||||
'00023342107070274',
|
||||
'00023342107070275',
|
||||
'00023342107070276',
|
||||
'00023342107070277',
|
||||
'00023342107070278',
|
||||
'00023342107070279',
|
||||
'00023342107070280',
|
||||
'00023342107070281',
|
||||
'00023342107070282',
|
||||
'00023342107070283',
|
||||
'00023342107070284',
|
||||
'00023342107070285',
|
||||
'00023342107070286',
|
||||
'00023342107070287',
|
||||
'00023342107070288',
|
||||
'00023342107070289',
|
||||
'00023342107070290',
|
||||
'00023342107070291',
|
||||
'00023342107070292'
|
||||
],
|
||||
oldNum: [],
|
||||
trueSubList: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible: function(val) {
|
||||
if (val) {
|
||||
this.trueSubList = []
|
||||
this.oldNum = []
|
||||
for (let i = 0; i < Number(this.getRandom(10, 30)); i++) {
|
||||
this.getTrueSubList()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getRandom(min, max, fixed = 0) {
|
||||
const differ = max - min
|
||||
const random = Math.random()
|
||||
return (min + random * differ).toFixed(fixed)
|
||||
},
|
||||
init() {
|
||||
this.visible = true
|
||||
},
|
||||
getTrueSubList() {
|
||||
const idx = Number(this.getRandom(0, 59))
|
||||
if (this.oldNum.indexOf(idx) >= 0) {
|
||||
this.getTrueSubList()
|
||||
} else {
|
||||
this.trueSubList.push(this.subList[idx])
|
||||
this.oldNum.push(idx)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
82
src/views/FactoryManage/components/VisualSub.vue
Normal file
82
src/views/FactoryManage/components/VisualSub.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-03-15 10:48:36
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="'btn.see' | i18nFilter"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="visible"
|
||||
>
|
||||
<el-row :gutter="15">
|
||||
<el-col :span="5" style="text-align: right;">
|
||||
{{ $t('module.factory.visual.visualSub') }}
|
||||
</el-col>
|
||||
<el-col :span="19">
|
||||
<el-row v-for="item in trueSubList" :key="item">
|
||||
{{ item }}
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
subList: [
|
||||
'00023342107070233',
|
||||
'00023342107070234',
|
||||
'00023342107070235',
|
||||
'00023342107070236',
|
||||
'00023342107070237',
|
||||
'00023342107070238',
|
||||
'00023342107070239',
|
||||
'00023342107070240',
|
||||
'00023342107070241',
|
||||
'00023342107070242'
|
||||
],
|
||||
oldNum: null,
|
||||
trueSubList: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible: function(val) {
|
||||
if (val) {
|
||||
this.trueSubList = []
|
||||
for (let i = 0; i < Number(this.getRandom(1, 2)); i++) {
|
||||
this.getTrueSubList()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getRandom(min, max, fixed = 0) {
|
||||
const differ = max - min
|
||||
const random = Math.random()
|
||||
return (min + random * differ).toFixed(fixed)
|
||||
},
|
||||
init() {
|
||||
this.visible = true
|
||||
},
|
||||
getTrueSubList() {
|
||||
const idx = Number(this.getRandom(0, 9))
|
||||
if (idx === this.oldNum) {
|
||||
this.getTrueSubList()
|
||||
} else {
|
||||
this.trueSubList.push(this.subList[idx])
|
||||
this.oldNum = idx
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
218
src/views/FactoryManage/visual.vue
Normal file
218
src/views/FactoryManage/visual.vue
Normal file
@@ -0,0 +1,218 @@
|
||||
<!--
|
||||
* @Author: gtz
|
||||
* @Date: 2021-03-20 14:02:38
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-04-16 15:25:27
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container app-container-visual">
|
||||
<el-row>
|
||||
<el-select v-model="line" @change="changeLine">
|
||||
<el-option v-for="item in lineList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
<el-button v-if="lineObj[line].stock" type="primary" @click="showLocation">{{ $t('module.factory.visual.showLocation') }}</el-button>
|
||||
</el-row>
|
||||
<el-row class="visual-status">
|
||||
<span v-for="item in statusData" :key="item.id" class="status-box">
|
||||
<span class="status-color" :style="{backgroundColor: item.colour}" />
|
||||
<span>{{ item.status }}</span>
|
||||
</span>
|
||||
</el-row>
|
||||
<el-row v-if="showPic" class="img-box">
|
||||
<img v-if="line" :src="imageUrl" class="img-item">
|
||||
<div
|
||||
v-for="item in lineObj[line].equipmentPoint"
|
||||
:key="item.id"
|
||||
class="img-point"
|
||||
:style="{top: `calc(${item.pointY} - 10px)`, left: `calc(${item.pointX} - 30px)`}"
|
||||
@click="showSubstrate"
|
||||
>
|
||||
<el-tooltip class="item" effect="dark" :content="lineEqData[item.id].name + ':' + statusList[lineEqData[item.id].status].description" placement="top">
|
||||
<div class="img-point-name">
|
||||
<div
|
||||
:style="{
|
||||
width: (lineEqData[item.id].name + ':' + statusList[lineEqData[item.id].status].description).length * 12 > 60 ? (lineEqData[item.id].name + ':' + statusList[lineEqData[item.id].status].description).length * 12 + 'px' : '60px',
|
||||
animation: '10s wordsLoop linear infinite normal',
|
||||
textAlign: 'center'
|
||||
}"
|
||||
>
|
||||
{{ lineEqData[item.id].name + ':' + statusList[lineEqData[item.id].status].description }}
|
||||
</div>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="img-point-status" :style="{background: statusList[lineEqData[item.id].status].colour}" />
|
||||
</div>
|
||||
</el-row>
|
||||
<Visual-sub ref="visualsub" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VisualList, VisualEqData } from '@/api/basicData/visual'
|
||||
import { getUrl } from '@/api/file'
|
||||
import { StateConfigList } from '@/api/basicData/StateConfig'
|
||||
import { blobToBase64 } from '@/utils/blobToBase64'
|
||||
import VisualSub from './components/VisualSub'
|
||||
|
||||
export default {
|
||||
name: 'Factory',
|
||||
components: { VisualSub },
|
||||
data() {
|
||||
return {
|
||||
line: null,
|
||||
lineList: [],
|
||||
lineObj: {},
|
||||
imageUrl: null,
|
||||
lineEqData: {},
|
||||
showPic: false,
|
||||
statusList: {},
|
||||
statusData: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
line: function(val) {
|
||||
getUrl({
|
||||
attachmentId: this.lineObj[val].annexId,
|
||||
type: 0
|
||||
}).then(blob => {
|
||||
blobToBase64(blob.data).then(res => {
|
||||
this.imageUrl = res
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getStatusList()
|
||||
},
|
||||
methods: {
|
||||
getStatusList() {
|
||||
StateConfigList({
|
||||
current: 1,
|
||||
size: 999
|
||||
}).then(response => {
|
||||
if (response.data.records) {
|
||||
this.statusData = response.data.records
|
||||
response.data.records.map(item => {
|
||||
this.statusList[item.id] = item
|
||||
})
|
||||
console.log(this.statusList)
|
||||
this.getList()
|
||||
} else {
|
||||
this.statusList = {}
|
||||
}
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
VisualList({
|
||||
current: 1,
|
||||
size: 999,
|
||||
type: 1
|
||||
}).then(response => {
|
||||
if (response.code === 0) {
|
||||
this.lineList = response.data.records
|
||||
response.data.records.map(item => {
|
||||
if (item.equipmentPoint) {
|
||||
item.equipmentPoint = JSON.parse(item.equipmentPoint)
|
||||
}
|
||||
this.lineObj[item.id] = item
|
||||
})
|
||||
if (response.data.records.length > 0) {
|
||||
this.line = response.data.records[0].id
|
||||
this.changeLine(response.data.records[0].id)
|
||||
}
|
||||
} else {
|
||||
this.lineList = []
|
||||
this.lineObj = {}
|
||||
}
|
||||
})
|
||||
},
|
||||
changeLine(id) {
|
||||
VisualEqData({
|
||||
current: 1,
|
||||
size: 999,
|
||||
id
|
||||
}).then(response => {
|
||||
if (response.code === 0) {
|
||||
this.showPic = true
|
||||
response.data.map(item => {
|
||||
this.lineEqData[item.id] = item
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
showLocation() {
|
||||
this.$router.push({
|
||||
name: 'VisualLocation',
|
||||
query: {
|
||||
id: this.line
|
||||
}
|
||||
})
|
||||
},
|
||||
showSubstrate() {
|
||||
this.$refs.visualsub.init()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.app-container-visual{
|
||||
.visual-status{
|
||||
width: calc(100% - 40px);
|
||||
min-width: 760px;
|
||||
margin: 0 20px;
|
||||
line-height: 24px;
|
||||
.status-box{
|
||||
margin-right: 10px;
|
||||
.status-color{
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.img-box{
|
||||
width: 100%;
|
||||
min-width: 800px;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
.img-item{
|
||||
width: 100%;
|
||||
}
|
||||
.img-point{
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
background: rgba(0, 0, 0, 1);
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
.img-point-name{
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.img-point-status{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes wordsLoop {
|
||||
0% {
|
||||
transform: translateX(60px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
180
src/views/FactoryManage/visualLocation.vue
Normal file
180
src/views/FactoryManage/visualLocation.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<!--
|
||||
* @Author: gtz
|
||||
* @Date: 2021-03-20 14:02:38
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-04-16 15:25:27
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container app-container-visual">
|
||||
<el-button type="primary" icon="el-icon-arrow-left" @click="goBack">{{ 'btn.back' | i18nFilter }}</el-button>
|
||||
<el-row v-if="showPic" class="img-box">
|
||||
<img :src="imageUrl" class="img-item">
|
||||
<div
|
||||
v-for="item in lineData.equipmentPoint"
|
||||
:key="item.id"
|
||||
class="img-point"
|
||||
:style="{top: `calc(${item.pointY} - 10px)`, left: `calc(${item.pointX} - 30px)`}"
|
||||
@click="showSubstrate"
|
||||
>
|
||||
<el-tooltip class="item" effect="dark" :content="lineEqData[item.id].text" placement="top">
|
||||
<div class="img-point-name">
|
||||
<div
|
||||
:style="{
|
||||
width: lineEqData[item.id].text.length * 12 + 'px',
|
||||
animation: '20s wordsLoop linear infinite normal',
|
||||
textAlign: 'center'
|
||||
}"
|
||||
>
|
||||
{{ lineEqData[item.id].text }}
|
||||
</div>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div
|
||||
v-for="item in carList"
|
||||
:key="item.id"
|
||||
class="visual-car"
|
||||
:style="{top: `calc(${item.pointY} - 10px)`, left: `calc(${item.pointX} + 30px)`}"
|
||||
>
|
||||
<el-tooltip class="item" effect="dark" :content="item.name" placement="top">
|
||||
<svg-icon icon-class="car" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-row>
|
||||
<Location-sub ref="locationsub" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VisualList, VisualLocationData } from '@/api/basicData/visual'
|
||||
import { getUrl } from '@/api/file'
|
||||
import { blobToBase64 } from '@/utils/blobToBase64'
|
||||
import LocationSub from './components/LocationSub'
|
||||
|
||||
export default {
|
||||
name: 'Factory',
|
||||
components: { LocationSub },
|
||||
data() {
|
||||
return {
|
||||
line: null,
|
||||
lineData: {},
|
||||
imageUrl: null,
|
||||
lineEqData: {},
|
||||
showPic: false,
|
||||
statusList: {},
|
||||
carList: [
|
||||
{ id: 1, name: '叉车1', stockPos: '', pointX: '0', pointY: '0' }
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getLocation()
|
||||
},
|
||||
methods: {
|
||||
getLocation() {
|
||||
VisualList({
|
||||
current: 1,
|
||||
size: 1,
|
||||
parentId: this.$route.query.id
|
||||
}).then(res => {
|
||||
if (res.data.records.length) {
|
||||
this.lineData = res.data.records[0]
|
||||
if (this.lineData.equipmentPoint) {
|
||||
this.lineData.equipmentPoint = JSON.parse(this.lineData.equipmentPoint)
|
||||
this.carList[0].stockPos = this.lineData.equipmentPoint[0].id
|
||||
this.carList[0].pointX = this.lineData.equipmentPoint[0].pointX
|
||||
this.carList[0].pointY = this.lineData.equipmentPoint[0].pointY
|
||||
}
|
||||
this.getLocationInfo(res.data.records[0].id)
|
||||
getUrl({
|
||||
attachmentId: res.data.records[0].annexId,
|
||||
type: 0
|
||||
}).then(blob => {
|
||||
blobToBase64(blob.data).then(res => {
|
||||
this.imageUrl = res
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getLocationInfo(id) {
|
||||
VisualLocationData({
|
||||
current: 1,
|
||||
size: 999,
|
||||
id
|
||||
}).then(response => {
|
||||
if (response.code === 0) {
|
||||
this.showPic = true
|
||||
response.data.map(item => {
|
||||
const footer = ',' + this.$t('module.factory.visual.box') + ':' + item.storageVoList.map(i => i.name)?.join(',')
|
||||
const head = this.$t('module.factory.visual.location') + ':' + item.name
|
||||
item.text = item.storageVoList ? head + footer : head
|
||||
this.lineEqData[item.stockId] = item
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
showSubstrate() {
|
||||
this.$refs.locationsub.init()
|
||||
},
|
||||
goBack() {
|
||||
this.$router.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.app-container-visual{
|
||||
.img-box{
|
||||
width: 100%;
|
||||
min-width: 800px;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
.img-item{
|
||||
width: 100%;
|
||||
}
|
||||
.img-point{
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
background: rgba(0, 0, 0, 1);
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
.img-point-name{
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.img-point-status{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -15px;
|
||||
}
|
||||
}
|
||||
.visual-car{
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes wordsLoop {
|
||||
0% {
|
||||
transform: translateX(60px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user