|
|
@@ -4,13 +4,27 @@
|
|
|
<el-radio-button label="first">物资柜位置</el-radio-button>
|
|
|
<el-radio-button label="second">物资柜列表</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
+ <!-- 优化后带样式的无数据提示盒子 -->
|
|
|
<div
|
|
|
+ v-if="jobconfig.imageUrl==''"
|
|
|
style="
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- "
|
|
|
+ position: absolute;
|
|
|
+ top: 40%;
|
|
|
+ left: 40%;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #666;
|
|
|
+ text-align: center;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 暂无数据，请到基础数据菜单进行配置
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ "
|
|
|
v-show="tabPosition == 'first'"
|
|
|
>
|
|
|
|
|
|
@@ -18,12 +32,12 @@
|
|
|
<div
|
|
|
ref="mapContainer"
|
|
|
:style="{
|
|
|
- transform: `scale(${scaleFactor})`,
|
|
|
- transformOrigin: 'top left',
|
|
|
- width: '1250px',
|
|
|
- height: '700px',
|
|
|
- position: 'relative',
|
|
|
- }"
|
|
|
+ transform: `scale(${scaleFactor})`,
|
|
|
+ transformOrigin: 'top left',
|
|
|
+ width: '1250px',
|
|
|
+ height: '700px',
|
|
|
+ position: 'relative',
|
|
|
+ }"
|
|
|
>
|
|
|
|
|
|
<img
|
|
|
@@ -32,28 +46,28 @@
|
|
|
alt=""
|
|
|
/>
|
|
|
|
|
|
-<!-- <img-->
|
|
|
-<!-- v-for="(cabinet, index) in TicketListPage"-->
|
|
|
-<!-- :key="cabinet.cabinetId"-->
|
|
|
-<!-- :style="{-->
|
|
|
-<!-- width: '35px',-->
|
|
|
-<!-- height: '35px',-->
|
|
|
-<!-- position: 'absolute',-->
|
|
|
-<!-- cursor: 'pointer',-->
|
|
|
-<!-- // 图标垂直居中-->
|
|
|
-<!-- top: `${deptXLGCenter.top - 53}px`,-->
|
|
|
-<!-- // 图标水平居中，动态计算偏移-->
|
|
|
-<!-- left: `${-->
|
|
|
-<!-- deptXLGCenter.left - -->
|
|
|
-<!-- (TicketListPage.length * 35 + (TicketListPage.length - 1) * 5) /-->
|
|
|
-<!-- 2 +-->
|
|
|
-<!-- index * 40-->
|
|
|
-<!-- }px`,-->
|
|
|
-<!-- }"-->
|
|
|
-<!-- :src="require(`@/assets/images/${imageMap[cabinet.status]}.jpg`)"-->
|
|
|
-<!-- alt=""-->
|
|
|
-<!-- @click="handleCabinetClick(cabinet)"-->
|
|
|
-<!-- />-->
|
|
|
+ <!-- <img-->
|
|
|
+ <!-- v-for="(cabinet, index) in TicketListPage"-->
|
|
|
+ <!-- :key="cabinet.cabinetId"-->
|
|
|
+ <!-- :style="{-->
|
|
|
+ <!-- width: '35px',-->
|
|
|
+ <!-- height: '35px',-->
|
|
|
+ <!-- position: 'absolute',-->
|
|
|
+ <!-- cursor: 'pointer',-->
|
|
|
+ <!-- // 图标垂直居中-->
|
|
|
+ <!-- top: `${deptXLGCenter.top - 53}px`,-->
|
|
|
+ <!-- // 图标水平居中，动态计算偏移-->
|
|
|
+ <!-- left: `${-->
|
|
|
+ <!-- deptXLGCenter.left - -->
|
|
|
+ <!-- (TicketListPage.length * 35 + (TicketListPage.length - 1) * 5) /-->
|
|
|
+ <!-- 2 +-->
|
|
|
+ <!-- index * 40-->
|
|
|
+ <!-- }px`,-->
|
|
|
+ <!-- }"-->
|
|
|
+ <!-- :src="require(`@/assets/images/${imageMap[cabinet.status]}.jpg`)"-->
|
|
|
+ <!-- alt=""-->
|
|
|
+ <!-- @click="handleCabinetClick(cabinet)"-->
|
|
|
+ <!-- />-->
|
|
|
|
|
|
<div v-for="(item, index) in jobconfigPoint.records" :key="item.id">
|
|
|
<div
|
|
|
@@ -68,17 +82,17 @@
|
|
|
v-for="(cabinet, index) in TicketListPage[item.entityId] || []"
|
|
|
:key="cabinet.cabinetId"
|
|
|
:style="{
|
|
|
- width: '35px',
|
|
|
- height: '35px',
|
|
|
- position: 'absolute',
|
|
|
- cursor: 'pointer',
|
|
|
- top: (item.y - 40) + 'px', // 让图标浮在岗位的上方
|
|
|
- left: (
|
|
|
- item.x -
|
|
|
- ((TicketListPage[item.entityId] ? TicketListPage[item.entityId].length * 35 : 0) - 53) / 2 + // 计算总宽度并居中，减去单个图标宽度，确保居中
|
|
|
- index * 40 // 处理图标间隔
|
|
|
- ) + 'px'
|
|
|
- }"
|
|
|
+ width: '35px',
|
|
|
+ height: '35px',
|
|
|
+ position: 'absolute',
|
|
|
+ cursor: 'pointer',
|
|
|
+ top: (item.y - 40) + 'px', // 让图标浮在岗位的上方
|
|
|
+ left: (
|
|
|
+ item.x -
|
|
|
+ ((TicketListPage[item.entityId] ? TicketListPage[item.entityId].length * 35 : 0) - 53) / 2 + // 计算总宽度并居中，减去单个图标宽度，确保居中
|
|
|
+ index * 40 // 处理图标间隔
|
|
|
+ ) + 'px'
|
|
|
+ }"
|
|
|
:src="imageMap[cabinet.status]"
|
|
|
alt=""
|
|
|
@click="handleCabinetClick(cabinet)"
|
|
|
@@ -86,8 +100,9 @@
|
|
|
|
|
|
|
|
|
</div>
|
|
|
-<!-- 左侧警告部分内容-->
|
|
|
- <img style="width: 40px;height: 40px;position: absolute;top:2%;right: -4%" :src="this.ExceptionTableImage" alt=""
|
|
|
+ <!-- 左侧警告部分内容-->
|
|
|
+ <img style="width: 40px;height: 40px;position: absolute;top:2%;right: -4%" :src="this.ExceptionTableImage"
|
|
|
+ alt=""
|
|
|
@click="showExTable"
|
|
|
>
|
|
|
<div v-if="exceptionTableVisible"
|
|
|
@@ -399,7 +414,8 @@ import { listMaterials } from '@/api/mes/material/information'
|
|
|
import { MaterialsLoanExceptionPage } from '@/api/mes/material/exception'
|
|
|
import { selectIsMapById } from '@/api/system/mapconfig'
|
|
|
import { getIsMapPointPage } from '@/api/system/mappoint'
|
|
|
-import { getIsSystemAttributeByKey} from '@/api/system/configuration'
|
|
|
+import { getIsSystemAttributeByKey } from '@/api/system/configuration'
|
|
|
+
|
|
|
export default {
|
|
|
name: 'Team',
|
|
|
components: {
|
|
|
@@ -510,9 +526,9 @@ export default {
|
|
|
children: 'children',
|
|
|
label: 'label'
|
|
|
},
|
|
|
- sysAttrValue:null,//从基础数据接口里拿到物资柜底图的mapId
|
|
|
- ExceptionTableImage:'',//列表异常的图标
|
|
|
- ExceptionTableImage2:'',//列表异常的图标2
|
|
|
+ sysAttrValue: null,//从基础数据接口里拿到物资柜底图的mapId
|
|
|
+ ExceptionTableImage: '',//列表异常的图标
|
|
|
+ ExceptionTableImage2: ''//列表异常的图标2
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -555,11 +571,11 @@ export default {
|
|
|
this.total = response.data.total
|
|
|
this.loading = false
|
|
|
})
|
|
|
- const sysAttrKey1 = 'icon.cabinet.normal';
|
|
|
- const sysAttrKey2 = 'icon.cabinet.borrowed';
|
|
|
- const sysAttrKey3 = 'icon.cabinet.abnormal';
|
|
|
- const sysAttrKey4='sys.exception.icon';
|
|
|
- const sysAttrKey5='sys.exception2.icon';
|
|
|
+ const sysAttrKey1 = 'icon.cabinet.normal'
|
|
|
+ const sysAttrKey2 = 'icon.cabinet.borrowed'
|
|
|
+ const sysAttrKey3 = 'icon.cabinet.abnormal'
|
|
|
+ const sysAttrKey4 = 'sys.exception.icon'
|
|
|
+ const sysAttrKey5 = 'sys.exception2.icon'
|
|
|
Promise.all([
|
|
|
getIsSystemAttributeByKey(sysAttrKey1),
|
|
|
getIsSystemAttributeByKey(sysAttrKey2),
|
|
|
@@ -567,13 +583,13 @@ export default {
|
|
|
getIsSystemAttributeByKey(sysAttrKey4),
|
|
|
getIsSystemAttributeByKey(sysAttrKey5)
|
|
|
]).then((responses) => {
|
|
|
- this.imageMap[0] = responses[0].data.sysAttrValue; // 正常
|
|
|
- this.imageMap[1] = responses[1].data.sysAttrValue; // 使用中
|
|
|
- this.imageMap[2] = responses[2].data.sysAttrValue; // 异常
|
|
|
- this.ExceptionTableImage=responses[3].data.sysAttrValue
|
|
|
- this.ExceptionTableImage2=responses[4].data.sysAttrValue
|
|
|
- console.log(this.imageMap,this.ExceptionTableImage,this.ExceptionTableImage2,'imageMap');
|
|
|
- });
|
|
|
+ this.imageMap[0] = responses[0].data.sysAttrValue // 正常
|
|
|
+ this.imageMap[1] = responses[1].data.sysAttrValue // 使用中
|
|
|
+ this.imageMap[2] = responses[2].data.sysAttrValue // 异常
|
|
|
+ this.ExceptionTableImage = responses[3].data.sysAttrValue
|
|
|
+ this.ExceptionTableImage2 = responses[4].data.sysAttrValue
|
|
|
+ console.log(this.imageMap, this.ExceptionTableImage, this.ExceptionTableImage2, 'imageMap')
|
|
|
+ })
|
|
|
},
|
|
|
|
|
|
getExpection() {
|
|
|
@@ -692,10 +708,10 @@ export default {
|
|
|
})
|
|
|
|
|
|
// 获取物资柜地图与物资柜对应状态的柜子图片
|
|
|
- const sysAttrKey='sys.map.cabinet'
|
|
|
+ const sysAttrKey = 'sys.map.cabinet'
|
|
|
getIsSystemAttributeByKey(sysAttrKey).then(response => {
|
|
|
- console.log(response,'获取物资柜底图')
|
|
|
- this.sysAttrValue=response.data.sysAttrValue
|
|
|
+ console.log(response, '获取物资柜底图')
|
|
|
+ this.sysAttrValue = response.data.sysAttrValue
|
|
|
// 这里获取全局配置地图参数里的作业票地图
|
|
|
selectIsMapById(this.sysAttrValue).then((res) => {
|
|
|
console.log(res, '作业票地图 图片数据')
|
|
|
@@ -703,10 +719,10 @@ export default {
|
|
|
})
|
|
|
})
|
|
|
|
|
|
- const dataMap={
|
|
|
+ const dataMap = {
|
|
|
pages: 1,
|
|
|
size: -1,
|
|
|
- mapId:4
|
|
|
+ mapId: 4
|
|
|
}
|
|
|
getIsMapPointPage(dataMap).then((res) => {
|
|
|
console.log(res, '作业票地图岗位位置信息接口')
|
|
|
@@ -715,26 +731,26 @@ export default {
|
|
|
},
|
|
|
//辅助函数计算超时时间
|
|
|
calculateTimeDifference(occurTime) {
|
|
|
- if (!occurTime) return '未知';
|
|
|
+ if (!occurTime) return '未知'
|
|
|
|
|
|
// 将时间字符串转换为 Date 对象
|
|
|
- const occurDate = new Date(occurTime);
|
|
|
+ const occurDate = new Date(occurTime)
|
|
|
if (isNaN(occurDate.getTime())) {
|
|
|
- console.error('Invalid date format:', occurTime);
|
|
|
- return '未知';
|
|
|
+ console.error('Invalid date format:', occurTime)
|
|
|
+ return '未知'
|
|
|
}
|
|
|
|
|
|
- const currentTime = new Date().getTime();
|
|
|
- const timeDifference = (currentTime - occurDate.getTime()) / (1000 * 60); // 转换为分钟
|
|
|
+ const currentTime = new Date().getTime()
|
|
|
+ const timeDifference = (currentTime - occurDate.getTime()) / (1000 * 60) // 转换为分钟
|
|
|
|
|
|
if (timeDifference < 1) {
|
|
|
- return `${(timeDifference * 60).toFixed(0)}秒`;
|
|
|
+ return `${(timeDifference * 60).toFixed(0)}秒`
|
|
|
} else if (timeDifference < 60) {
|
|
|
- return `${timeDifference.toFixed(1)}分钟`;
|
|
|
+ return `${timeDifference.toFixed(1)}分钟`
|
|
|
} else {
|
|
|
- const hours = Math.floor(timeDifference / 60);
|
|
|
- const minutes = (timeDifference % 60).toFixed(0);
|
|
|
- return `${hours}小时${minutes}分钟`;
|
|
|
+ const hours = Math.floor(timeDifference / 60)
|
|
|
+ const minutes = (timeDifference % 60).toFixed(0)
|
|
|
+ return `${hours}小时${minutes}分钟`
|
|
|
}
|
|
|
},
|
|
|
|
