肖正
4 months ago
23 changed files with 884 additions and 3691 deletions
@ -0,0 +1,42 @@ |
|||||
|
import request from '/@/utils/request'; |
||||
|
export function getSummary() { |
||||
|
return request({ |
||||
|
url: '/api/storage/summary', |
||||
|
method: 'get', |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
export function getModuleSummary(moduleId) { |
||||
|
return request({ |
||||
|
url: `/api/storage/moduleSummary/${moduleId}`, |
||||
|
method: 'get', |
||||
|
}); |
||||
|
} |
||||
|
export function getPropertyValue(params) { |
||||
|
return request({ |
||||
|
url: `/api/storage/getPropertyValue/${params.moduleId}/${params.propertyName}`, |
||||
|
method: 'get', |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
export function setPropertyValue(params) { |
||||
|
return request({ |
||||
|
url: `/api/storage/setPropertyValue/${params.moduleId}/${params.propertyName}`, |
||||
|
method: 'post', |
||||
|
data: params.value, |
||||
|
}); |
||||
|
} |
||||
|
export function invokeMethod(params) { |
||||
|
return request({ |
||||
|
url: `/api/storage/invokeMethod/${params.moduleId}/${params.methodName}`, |
||||
|
method: 'post', |
||||
|
data: params.value, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
export function start() { |
||||
|
return request({ |
||||
|
url: `/api/storage/start`, |
||||
|
method: 'post', |
||||
|
}); |
||||
|
} |
||||
@ -0,0 +1,14 @@ |
|||||
|
<template> |
||||
|
<div class="home-box"> |
||||
|
<iframe src="http://365.robot365.cn/#/monitorScreen/scada-1" |
||||
|
style="height: 100%;" frameborder="0"></iframe> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup name="M9home"> |
||||
|
|
||||
|
</script> |
||||
|
<style scoped lang="scss">.home-box{ |
||||
|
height: 100%; |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 2.2 MiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 239 KiB |
|
After Width: | Height: | Size: 374 KiB |
|
After Width: | Height: | Size: 736 KiB |
|
After Width: | Height: | Size: 7.0 MiB |
|
After Width: | Height: | Size: 1009 KiB |
|
After Width: | Height: | Size: 854 KiB |
|
After Width: | Height: | Size: 664 KiB |
|
After Width: | Height: | Size: 345 KiB |
@ -0,0 +1,29 @@ |
|||||
|
<template> |
||||
|
<el-card class="laboratory-container" title="实验室"> |
||||
|
<template #header> |
||||
|
<div class="card-header"> |
||||
|
<span>实验室</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
<laboratory /> |
||||
|
</el-card> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import laboratory from './laboratory.vue'; |
||||
|
</script> |
||||
|
<style> |
||||
|
.laboratory-container .el-card__body { |
||||
|
height: 100%; |
||||
|
} |
||||
|
.el-popper.is-customized { |
||||
|
/* Set padding to ensure the height is 32px */ |
||||
|
padding: 6px 12px; |
||||
|
background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129)); |
||||
|
} |
||||
|
|
||||
|
.el-popper.is-customized .el-popper__arrow::before { |
||||
|
background: linear-gradient(45deg, #b2e68d, #bce689); |
||||
|
right: 0; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,353 @@ |
|||||
|
<template> |
||||
|
<div class="svg-box"> |
||||
|
<!-- <img href="./img/m9.png" width="100%" height="100%" /> --> |
||||
|
<svg ref="svg" :width="width" :height="height"> |
||||
|
<image |
||||
|
:x="0" |
||||
|
:y="0" |
||||
|
href="./img/lb.png" |
||||
|
:width="width" |
||||
|
/> |
||||
|
<!-- 定义椭圆轨道 --> |
||||
|
<!-- <ellipse |
||||
|
:cx="cx" |
||||
|
:cy="cy" |
||||
|
:rx="rx" |
||||
|
:ry="ry" |
||||
|
fill="none" |
||||
|
stroke="black" |
||||
|
/> --> |
||||
|
<!-- 定义图片 --> |
||||
|
<!-- <image |
||||
|
:x="position.x" |
||||
|
:y="position.y" |
||||
|
:transform="`rotate(${angle}, ${position.x + 20}, ${position.y + 20})`" |
||||
|
href="./img/AGV01.png" |
||||
|
width="40" |
||||
|
height="40" |
||||
|
/> --> |
||||
|
<polyline |
||||
|
:points="computedPoints1" |
||||
|
stroke="black" |
||||
|
fill="none" |
||||
|
stroke-dasharray="5,5" |
||||
|
/> |
||||
|
<polyline |
||||
|
:points="computedPoints2" |
||||
|
stroke="black" |
||||
|
fill="none" |
||||
|
stroke-dasharray="5,5" |
||||
|
/> |
||||
|
<polyline |
||||
|
:points="computedPoints3" |
||||
|
stroke="black" |
||||
|
fill="none" |
||||
|
stroke-dasharray="5,5" |
||||
|
/> |
||||
|
<polyline |
||||
|
:points="coAGVPoints1" |
||||
|
stroke="black" |
||||
|
fill="none" |
||||
|
stroke-dasharray="5,5" |
||||
|
/> |
||||
|
<polyline |
||||
|
:points="coAGVPoints2" |
||||
|
stroke="black" |
||||
|
fill="none" |
||||
|
stroke-dasharray="5,5" |
||||
|
/> |
||||
|
<polyline |
||||
|
:points="coAGVPoints3" |
||||
|
stroke="black" |
||||
|
fill="none" |
||||
|
stroke-dasharray="5,5" |
||||
|
/> |
||||
|
<polyline |
||||
|
:points="coAGVPoints4" |
||||
|
stroke="black" |
||||
|
fill="none" |
||||
|
stroke-dasharray="5,5" |
||||
|
/> |
||||
|
<polyline |
||||
|
:points="coAGVPoints5" |
||||
|
stroke="black" |
||||
|
fill="none" |
||||
|
stroke-dasharray="5,5" |
||||
|
/> |
||||
|
<polyline |
||||
|
:points="coAGVPoints6" |
||||
|
stroke="black" |
||||
|
fill="none" |
||||
|
stroke-dasharray="5,5" |
||||
|
/> |
||||
|
<polyline |
||||
|
:points="coAGVPoints7" |
||||
|
stroke="black" |
||||
|
fill="none" |
||||
|
stroke-dasharray="5,5" |
||||
|
/> |
||||
|
<image |
||||
|
ref="image" |
||||
|
href="./img/AGV02.png" |
||||
|
:x="imagePosition.x - 50" |
||||
|
:y="imagePosition.y - 50" |
||||
|
:width="100" |
||||
|
:height="100" |
||||
|
:transform="`rotate(${imageRotation}, ${imagePosition.x}, ${imagePosition.y})`" |
||||
|
/> |
||||
|
<image |
||||
|
ref="image" |
||||
|
href="./img/AGV01.png" |
||||
|
:x="imagePosition2.x - 50" |
||||
|
:y="imagePosition2.y - 50" |
||||
|
:width="100" |
||||
|
:height="100" |
||||
|
:transform="`rotate(${imageRotation2}, ${imagePosition2.x}, ${imagePosition2.y})`" |
||||
|
/> |
||||
|
</svg> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup name="laboratory"> |
||||
|
import { onMounted, reactive, computed, ref, onBeforeUnmount } from 'vue'; |
||||
|
// import EditUser from '/@/views/system/user/component/editUser.vue'; |
||||
|
import { ElMessage } from 'element-plus'; |
||||
|
const width = ref(800); |
||||
|
const height = ref(600); |
||||
|
const svg = ref(null); |
||||
|
const deviceMsg = ref([ |
||||
|
{name: 'M9_001', value: [ |
||||
|
{name: '温度',} |
||||
|
]} |
||||
|
]); |
||||
|
const originalPoints1 = [ |
||||
|
{ x: 200, y: 2700 }, |
||||
|
{ x: 1500, y: 2700 }, |
||||
|
{ x: 1500, y: 2000 }, |
||||
|
{ x: 3000, y: 2000 } |
||||
|
]; |
||||
|
const originalPoints2 = [ |
||||
|
{ x: 3000, y: 2000 }, |
||||
|
{ x: 1600, y: 2000 }, |
||||
|
{ x: 1600, y: 1000 }, |
||||
|
]; |
||||
|
const originalPoints3 = [ |
||||
|
{ x: 1600, y: 1000 }, |
||||
|
{ x: 1600, y: 2700 }, |
||||
|
{ x: 200, y: 2700 }, |
||||
|
]; |
||||
|
|
||||
|
const originalPoints4 = [ |
||||
|
{ x: 4040, y: 4300 }, |
||||
|
{ x: 4040, y: 2000 }, |
||||
|
{ x: 3400, y: 2000 } |
||||
|
]; |
||||
|
const originalPoints5 = [ |
||||
|
{ x: 4040, y: 4300 }, |
||||
|
{ x: 4040, y: 3600 }, |
||||
|
{ x: 5400, y: 3600 }, |
||||
|
{ x: 5400, y: 3800 }, |
||||
|
]; |
||||
|
const originalPoints6 = [ |
||||
|
{ x: 5400, y: 3800 }, |
||||
|
{ x: 5400, y: 3600 }, |
||||
|
{ x: 6000, y: 3600 }, |
||||
|
{ x: 6000, y: 3900 }, |
||||
|
]; |
||||
|
const originalPoints7 = [ |
||||
|
{ x: 6000, y: 3900 }, |
||||
|
{ x: 6000, y: 3100 }, |
||||
|
]; |
||||
|
const originalPoints8 = [ |
||||
|
{ x: 6000, y: 3100 }, |
||||
|
{ x: 5500, y: 3100 }, |
||||
|
{ x: 5500, y: 1600 }, |
||||
|
{ x: 5700, y: 1600 }, |
||||
|
]; |
||||
|
const originalPoints9 = [ |
||||
|
{ x: 5700, y: 1600 }, |
||||
|
{ x: 4300, y: 1600 }, |
||||
|
{ x: 4300, y: 2000 }, |
||||
|
{ x: 3400, y: 2000 } |
||||
|
]; |
||||
|
const originalPoints10 = [ |
||||
|
{ x: 3400, y: 2000 }, |
||||
|
{ x: 4040, y: 2000 }, |
||||
|
{ x: 4040, y: 4300 }, |
||||
|
]; |
||||
|
const imagePosition = ref({ x: 0, y: 2700 }); |
||||
|
const imageRotation = ref(0); |
||||
|
const imagePosition2 = ref({ x: 0, y: 2700 }); |
||||
|
const imageRotation2 = ref(0); |
||||
|
|
||||
|
// const pathIndex = ref(0); |
||||
|
// const paths = [originalPoints1, originalPoints2, originalPoints3]; |
||||
|
const state = reactive({ |
||||
|
loading: false, |
||||
|
angle: 0, |
||||
|
proportion: 4613/6921, |
||||
|
imgWidth: 6921, |
||||
|
imgHeight: 4613, |
||||
|
start1X: 0, |
||||
|
start1Y: 0, |
||||
|
end1X: 0, |
||||
|
end1Y: 0, |
||||
|
start2X: 0, |
||||
|
start2Y: 0, |
||||
|
end2X: 0, |
||||
|
end2Y: 0, |
||||
|
editUserTitle: '', |
||||
|
}); |
||||
|
onBeforeUnmount(() => { |
||||
|
window.removeEventListener('resize', updateDimensions); |
||||
|
}); |
||||
|
onMounted(async () => { |
||||
|
window.addEventListener('resize', updateDimensions); |
||||
|
updateDimensions(); // Initial resize to fit the container |
||||
|
init(); |
||||
|
}); |
||||
|
const updateDimensions = () => { |
||||
|
if (svg.value && svg.value.parentElement) { |
||||
|
width.value = svg.value.parentElement.clientWidth; |
||||
|
height.value = width.value* state.proportion; |
||||
|
} |
||||
|
}; |
||||
|
const computedPoints1 = computed(() => { |
||||
|
return originalPoints1 |
||||
|
.map(point => `${point.x * width.value / state.imgWidth},${point.y * height.value / state.imgHeight}`) |
||||
|
.join(' '); |
||||
|
}); |
||||
|
const computedPoints2 = computed(() => { |
||||
|
return originalPoints2 |
||||
|
.map(point => `${point.x * width.value / state.imgWidth},${point.y * height.value / state.imgHeight}`) |
||||
|
.join(' '); |
||||
|
}); |
||||
|
const computedPoints3 = computed(() => { |
||||
|
return originalPoints3 |
||||
|
.map(point => `${point.x * width.value / state.imgWidth},${point.y * height.value / state.imgHeight}`) |
||||
|
.join(' '); |
||||
|
}); |
||||
|
const coAGVPoints1 = computed(() => { |
||||
|
return originalPoints4 |
||||
|
.map(point => `${point.x * width.value / state.imgWidth},${point.y * height.value / state.imgHeight}`) |
||||
|
.join(' '); |
||||
|
}); |
||||
|
const coAGVPoints2 = computed(() => { |
||||
|
return originalPoints5 |
||||
|
.map(point => `${point.x * width.value / state.imgWidth},${point.y * height.value / state.imgHeight}`) |
||||
|
.join(' '); |
||||
|
}); |
||||
|
const coAGVPoints3 = computed(() => { |
||||
|
return originalPoints6 |
||||
|
.map(point => `${point.x * width.value / state.imgWidth},${point.y * height.value / state.imgHeight}`) |
||||
|
.join(' '); |
||||
|
}); |
||||
|
const coAGVPoints4 = computed(() => { |
||||
|
return originalPoints7 |
||||
|
.map(point => `${point.x * width.value / state.imgWidth},${point.y * height.value / state.imgHeight}`) |
||||
|
.join(' '); |
||||
|
}); |
||||
|
const coAGVPoints5 = computed(() => { |
||||
|
return originalPoints8 |
||||
|
.map(point => `${point.x * width.value / state.imgWidth},${point.y * height.value / state.imgHeight}`) |
||||
|
.join(' '); |
||||
|
}); |
||||
|
const coAGVPoints6 = computed(() => { |
||||
|
return originalPoints9 |
||||
|
.map(point => `${point.x * width.value / state.imgWidth},${point.y * height.value / state.imgHeight}`) |
||||
|
.join(' '); |
||||
|
}); |
||||
|
const coAGVPoints7 = computed(() => { |
||||
|
return originalPoints10 |
||||
|
.map(point => `${point.x * width.value / state.imgWidth},${point.y * height.value / state.imgHeight}`) |
||||
|
.join(' '); |
||||
|
}); |
||||
|
|
||||
|
// const coordinateTransformation = () => {} |
||||
|
const init = async () => { |
||||
|
animate(originalPoints1, 1); |
||||
|
animate(originalPoints4, 2); |
||||
|
await new Promise(resolve => setTimeout(resolve, 22000)); |
||||
|
await animate(originalPoints2, 1); |
||||
|
await animate(originalPoints3, 1); |
||||
|
}; |
||||
|
const animate = async (currentPath, type) => { |
||||
|
// const currentPath = paths[pathIndex.value]; |
||||
|
const totalPoints = currentPath.length; |
||||
|
const AGV = type === 2 ? imagePosition2 : imagePosition; |
||||
|
const Rotation = type === 2 ? imageRotation2 : imageRotation; |
||||
|
var startX = type === 1 ? state.start1X : state.start2X; |
||||
|
let startY = type === 1 ? state.start1Y : state.start2Y; |
||||
|
let endX = type === 1 ? state.end1X : state.end2X; |
||||
|
let endY = type === 1 ? state.end1Y : state.end2Y |
||||
|
|
||||
|
for (let i = 0; i < totalPoints - 1; i++) { |
||||
|
const startPoint = currentPath[i]; |
||||
|
const endPoint = currentPath[i + 1]; |
||||
|
startX = startPoint.x * width.value / state.imgWidth; |
||||
|
endX = endPoint.x * width.value / state.imgWidth; |
||||
|
startY = startPoint.y * height.value / state.imgHeight; |
||||
|
endY = endPoint.y * height.value / state.imgHeight; |
||||
|
if (i == 0) { |
||||
|
AGV.value.x = startX; |
||||
|
AGV.value.y = startY; |
||||
|
} else { |
||||
|
if (Math.abs(endX - startX) < 1) { |
||||
|
Rotation.value = startY > endY ? -90 : 90; |
||||
|
} else { |
||||
|
Rotation.value = startX > endX ? 180 : 0; |
||||
|
} |
||||
|
// await new Promise(resolve => setTimeout(resolve, 1000)); |
||||
|
} |
||||
|
// const distance = Math.sqrt( |
||||
|
// Math.pow(endX - startX, 2) + |
||||
|
// Math.pow(endY - startY, 2) |
||||
|
// ); |
||||
|
// const duration = distance / 100; // Adjust speed here |
||||
|
|
||||
|
// const deltaX = (endX - startX) / duration; |
||||
|
// const deltaY = (endY - startY) / duration; |
||||
|
// const angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI); |
||||
|
// console.log(999, duration) |
||||
|
// debugger |
||||
|
|
||||
|
await animateItem(AGV, endX, endY, startX); |
||||
|
} |
||||
|
|
||||
|
// await new Promise(resolve => setTimeout(resolve, 3000)); |
||||
|
// pathIndex.value = (pathIndex.value + 1) % paths.length; |
||||
|
// animate(); |
||||
|
}; |
||||
|
|
||||
|
const animateItem = async (AGV, endX, endY, startX) => { |
||||
|
let add = 0; |
||||
|
// debugger |
||||
|
if (Math.abs(endX - startX) < 1) { |
||||
|
add = AGV.value.y > endY ? -0.5 : 0.5; |
||||
|
// debugger; |
||||
|
if (Math.abs(AGV.value.y - endY) > 1) { |
||||
|
AGV.value.y+= add; |
||||
|
// requestAnimationFrame(animateItem) |
||||
|
await new Promise(resolve => setTimeout(resolve, 10)); |
||||
|
await animateItem(AGV, endX, endY, startX); |
||||
|
} |
||||
|
} else { |
||||
|
add = AGV.value.x > endX ? -0.5 : 0.5; |
||||
|
if (Math.abs(AGV.value.x - endX) > 1) { |
||||
|
AGV.value.x+= add; |
||||
|
await new Promise(resolve => setTimeout(resolve, 10)); |
||||
|
await animateItem(AGV, endX, endY, startX); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.svg-box { |
||||
|
height: 100%; |
||||
|
} |
||||
|
svg { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,82 @@ |
|||||
|
<template> |
||||
|
<div class="home-box"> |
||||
|
<el-form |
||||
|
ref="ruleFormRef" |
||||
|
label-width="auto" |
||||
|
class="demo-ruleForm" |
||||
|
style="max-width: 1000px;" |
||||
|
inline |
||||
|
status-icon |
||||
|
> |
||||
|
<el-divider content-position="left">状态</el-divider> |
||||
|
<el-form-item v-for="(item, i) in props.summary?.properties" :key="i" v-show="item.type !== 7" |
||||
|
:label="item.summary" style="width: 40%"> |
||||
|
<div v-if="item.type === 1" style="width: 120px;"> |
||||
|
<el-switch v-model="item.value" :disabled="!item.canWrite" /></div> |
||||
|
<el-input-number v-model="item.value" v-else :disabled="!item.canWrite"/> |
||||
|
</el-form-item> |
||||
|
<el-empty v-if="!props.summary?.properties?.length" image-size="80" description="暂无属性" /> |
||||
|
<!-- <div v-if="!props.summary?.properties?.length" style="color: #909399;margin-left: 100px;">暂无属性</div> --> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="onSubmit">提交修改</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<el-form |
||||
|
ref="ruleFormRef" |
||||
|
label-width="auto" |
||||
|
class="demo-ruleForm" |
||||
|
style="max-width: 1000px;" |
||||
|
inline |
||||
|
status-icon |
||||
|
> |
||||
|
<el-divider content-position="left">控制</el-divider> |
||||
|
<el-empty v-if="!props.summary?.properties?.length" image-size="80" description="暂无方法" /> |
||||
|
<!-- <div v-if="!props.summary?.properties?.length" style="color: #909399;margin-left: 100px;">暂无方法</div> --> |
||||
|
<el-form-item v-for="(item, i) in props.summary?.methods" style="width: 40%;" |
||||
|
:label="item.summary + ': '" :key="i"> |
||||
|
<el-button v-model="item.value" @click="clickMethod(item)" |
||||
|
v-if="!item.parameters || !item.parameters.length" type="primary">调用</el-button> |
||||
|
<el-switch v-model="item.value" @change="clickMethod(item)" v-else-if="item.type === 1" /> |
||||
|
<el-input-number v-model="item.value" @change="clickMethod(item)" v-else /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup name="M9home"> |
||||
|
// import { setPropertyValue } from '/@/api/m9'; |
||||
|
// import { ElMessage } from 'element-plus'; |
||||
|
const props = defineProps({ |
||||
|
title: String, |
||||
|
summary: {} as any, |
||||
|
}); |
||||
|
const emits = defineEmits(['clickMethod', 'setProperty']); |
||||
|
const clickMethod = async (item) => { |
||||
|
emits('clickMethod', item); |
||||
|
} |
||||
|
function onSubmit() { |
||||
|
emits('setProperty'); |
||||
|
console.log(props.summary?.properties) |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.m9-home { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
.home-box { |
||||
|
flex: 1; |
||||
|
} |
||||
|
.home-item { |
||||
|
width: 50%; |
||||
|
text-align: center; |
||||
|
&-title { |
||||
|
font-size: 16px; |
||||
|
color: #666; |
||||
|
} |
||||
|
&-value { |
||||
|
font-size: 20px; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,237 @@ |
|||||
|
<template> |
||||
|
<div class="sys-user-container"> |
||||
|
<el-row :gutter="5" style="width: 100%; flex: 1"> |
||||
|
<el-col :span="4" :xs="24"> |
||||
|
<el-card class="box-card" shadow="hover" style="height: 100%" body-style="height:100%; overflow:auto"> |
||||
|
<div v-for="(item, i) in state.modules" :key="i" :class="current == i ? 'is-current':''" |
||||
|
class="el-tree-node__content" @click="nodeClick(i)">{{item?.description}}</div> |
||||
|
</el-card> |
||||
|
<!-- <OrgTree ref="orgTreeRef" @node-click="nodeClick" /> --> |
||||
|
</el-col> |
||||
|
|
||||
|
<el-col :span="20" :xs="24" style="display: flex; flex-direction: column"> |
||||
|
<el-card class="full-table" shadow="hover"> |
||||
|
<template #header> |
||||
|
<div class="card-header"> |
||||
|
<b>{{state.modules[current]?.description}}</b> |
||||
|
</div> |
||||
|
</template> |
||||
|
<div v-if="current === 0" class="m9-home"> |
||||
|
<div style="flex: 1"> |
||||
|
<img :src="imgUrl" alt="" style="margin-top: 5%;" width="90%"> |
||||
|
</div> |
||||
|
<Home :summary="state.summary" @clickMethod="clickMethod" @setProperty="setProperty"></Home> |
||||
|
</div> |
||||
|
<Home v-else :summary="state.summary" @clickMethod="clickMethod" @setProperty="setProperty"></Home> |
||||
|
<!-- <div class="slider-demo-block" v-else> |
||||
|
<div style="width: 100%;position: relative;"> |
||||
|
<el-slider v-model="value" :min="-10" @input="handleSliderInput" /> |
||||
|
<div class="el-slider__marks"> |
||||
|
<el-tooltip v-for="(item, i) in mark" :key="i" effect="customized" trigger="click"> |
||||
|
<template #content> |
||||
|
<div>设置当前位置：</div> |
||||
|
<el-input-number v-model="item.name" :min="-10" @change="inputChange"/> |
||||
|
<br/> |
||||
|
<el-button type="primary" style="margin-top: 5px;" size="small" @click="move(item.name)">移动到当前位置</el-button> |
||||
|
</template> |
||||
|
<div :style="{left: item.value}" class="el-slider__marks-text" >{{item.name}}</div> |
||||
|
</el-tooltip> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-input-number v-model="value" style="margin-left: 40px; width: 150px;" :min="-10" /> |
||||
|
</div> --> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<!-- <EditUser ref="editUserRef" :title="state.editUserTitle" :orgData="state.orgTreeData" @handleQuery="handleQuery" /> --> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup name="sysUser"> |
||||
|
import { onMounted, reactive, ref } from 'vue'; |
||||
|
// import EditUser from '/@/views/system/user/component/editUser.vue'; |
||||
|
import Home from './home.vue'; |
||||
|
import { ElMessage } from 'element-plus'; |
||||
|
import { SysUser, SysOrg } from '/@/api-services/models'; |
||||
|
import { getSummary, getPropertyValue, setPropertyValue, invokeMethod, getModuleSummary } from '/@/api/m9'; |
||||
|
// import { Session } from '/@/utils/storage'; |
||||
|
// import type { CSSProperties } from 'vue'; |
||||
|
import imgUrl from '/@/assets/M9.png' |
||||
|
|
||||
|
|
||||
|
const current = ref<number>(0); |
||||
|
const state = reactive({ |
||||
|
loading: false, |
||||
|
userData: [] as Array<SysUser>, |
||||
|
orgTreeData: [] as Array<SysOrg>, |
||||
|
modules: [], |
||||
|
queryParams: { |
||||
|
orgId: -1, |
||||
|
account: undefined, |
||||
|
realName: undefined, |
||||
|
phone: undefined, |
||||
|
}, |
||||
|
summary: { |
||||
|
properties: [] |
||||
|
}, |
||||
|
tableParams: { |
||||
|
page: 1, |
||||
|
pageSize: 20, |
||||
|
total: 0 as any, |
||||
|
}, |
||||
|
editUserTitle: '', |
||||
|
}); |
||||
|
|
||||
|
onMounted(async () => { |
||||
|
init() |
||||
|
}); |
||||
|
|
||||
|
const init = async () => { |
||||
|
state.loading = true; |
||||
|
// handleQuery(); |
||||
|
// Bool = 1, |
||||
|
// Float = 2, |
||||
|
// UShort = 3, |
||||
|
// Int = 4, |
||||
|
// Double = 5, |
||||
|
// String = 6, |
||||
|
|
||||
|
state.modules = [ |
||||
|
{name: '', id: 0, description: '仪表盘'} |
||||
|
] |
||||
|
let res = await getSummary(); |
||||
|
if (res.data.result && res.data.result.modules) { |
||||
|
state.modules = state.modules.concat(res.data.result.modules); |
||||
|
} |
||||
|
// if (res.data.result && res.data.result.summary) { |
||||
|
// state.summary = res.data.result.summary; |
||||
|
// } |
||||
|
await getSummaryValue(res.data.result?.summary); |
||||
|
state.loading = false; |
||||
|
} |
||||
|
|
||||
|
const clickMethod = async (item) => { |
||||
|
state.loading = true; |
||||
|
await invokeMethod({moduleId: state.modules[current.value].id, methodName: item.name, value: item.value}) |
||||
|
state.loading = false; |
||||
|
} |
||||
|
|
||||
|
const setProperty = async () => { |
||||
|
let canSubmit = false; |
||||
|
for(let val of state.summary.properties || []) { |
||||
|
if (val.canWrite) { |
||||
|
canSubmit = true; |
||||
|
if (!val.value || val.value === 0) |
||||
|
continue; |
||||
|
setPropertyValue({moduleId: state.modules[current.value].id, propertyName: val.name, value: val.value}) |
||||
|
} |
||||
|
} |
||||
|
if (!canSubmit) { |
||||
|
ElMessage.error("当前无可编辑的状态"); |
||||
|
return |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const getSummaryValue = async (summary) => { |
||||
|
// state.summary = []; |
||||
|
for (let val of summary.properties || []) { |
||||
|
try { |
||||
|
let res = await getPropertyValue({moduleId: state.modules[current.value].id, propertyName: val.name}); |
||||
|
val.value = res.data.result; |
||||
|
} catch (e) { |
||||
|
console.log(e) |
||||
|
} |
||||
|
// state.summary.push(val); |
||||
|
} |
||||
|
console.log(888, summary) |
||||
|
state.summary = summary; |
||||
|
} |
||||
|
|
||||
|
// const handleSliderInput = (value) => { |
||||
|
// if (marks.hasOwnProperty(value)) { |
||||
|
// handleMarkClick(value); |
||||
|
// } else { |
||||
|
// return false; |
||||
|
// } |
||||
|
// } |
||||
|
// const handleMarkClick = (value) => { |
||||
|
// console.log(`Mark at ${value}% clicked`); |
||||
|
// // 在这里添加你想在点击 marks 时触发的逻辑 |
||||
|
// // 比如：this.performAction(value); |
||||
|
// } |
||||
|
|
||||
|
// // 查询操作 |
||||
|
// const handleQuery = async () => { |
||||
|
// state.loading = true; |
||||
|
// let params = Object.assign(state.queryParams, state.tableParams); |
||||
|
// var res = await getAPI(SysUserApi).apiSysUserPagePost(params); |
||||
|
// state.userData = res.data.result?.items ?? []; |
||||
|
// state.tableParams.total = res.data.result?.total; |
||||
|
// state.loading = false; |
||||
|
// }; |
||||
|
|
||||
|
// const inputChange = () => { |
||||
|
// }; |
||||
|
|
||||
|
// const move = (val) => { |
||||
|
// value.value = val; |
||||
|
// }; |
||||
|
|
||||
|
// 树组件点击 |
||||
|
const nodeClick = async (i: number) => { |
||||
|
current.value = i; |
||||
|
if (i === 0) { |
||||
|
init(); |
||||
|
return; |
||||
|
} |
||||
|
let res = await getModuleSummary(state.modules[i].id); |
||||
|
await getSummaryValue(res.data.result); |
||||
|
}; |
||||
|
</script> |
||||
|
<style> |
||||
|
.el-popper.is-customized { |
||||
|
/* Set padding to ensure the height is 32px */ |
||||
|
padding: 6px 12px; |
||||
|
background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129)); |
||||
|
} |
||||
|
|
||||
|
.el-popper.is-customized .el-popper__arrow::before { |
||||
|
background: linear-gradient(45deg, #b2e68d, #bce689); |
||||
|
right: 0; |
||||
|
} |
||||
|
</style> |
||||
|
<style scoped lang="scss"> |
||||
|
.m9-home { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.el-tree-node__content { |
||||
|
padding: 3px 10px; |
||||
|
} |
||||
|
.el-tree-node__content.is-current { |
||||
|
background: var(--el-color-primary-light-9); |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.slider-demo-block { |
||||
|
max-width: 600px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.el-slider__marks-text { |
||||
|
top: 9px; |
||||
|
cursor: pointer; |
||||
|
&:before { |
||||
|
display: block; |
||||
|
content: ''; |
||||
|
width: 6px; |
||||
|
height: 6px; |
||||
|
border-radius: 50%; |
||||
|
background: red; |
||||
|
position: absolute; |
||||
|
top: -15px; |
||||
|
left: 50%; |
||||
|
transform: translateX(-3px); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 721 KiB |
File diff suppressed because it is too large
Loading…
Reference in new issue