肖正
2 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