Browse Source

控制台

master
肖正 4 months ago
parent
commit
37a6ba22aa
  1. 3
      .env.development
  2. 2
      public/config.js
  3. 12
      src/theme/dark.scss
  4. 68
      src/views/home/index.vue
  5. 190
      src/views/home/user.vue
  6. BIN
      src/views/laboratory/img/SafetyCabinet.png
  7. BIN
      src/views/laboratory/img/platform.png
  8. BIN
      src/views/system/mapManagement/centrifugal.png
  9. BIN
      src/views/system/mapManagement/incubator.png
  10. 559
      src/views/system/mapManagement/index.vue
  11. 1
      src/views/system/mapManagement/map/accessAGV.json
  12. 2
      src/views/system/mapManagement/map/lab0522xiezuo(1).json

3
.env.development

@ -2,5 +2,6 @@
ENV = development ENV = development
# 本地环境接口地址 # 本地环境接口地址
VITE_API_URL = http://localhost:5005 # VITE_API_URL = http://localhost:5005
VITE_API_URL = http://192.168.88.206:5005
# VITE_API_URL = http://192.168.88.76:5005 # VITE_API_URL = http://192.168.88.76:5005

2
public/config.js

@ -3,5 +3,5 @@ window.__env__ = {
"VITE_OPEN": "false", "VITE_OPEN": "false",
"VITE_OPEN_CDN": "false", "VITE_OPEN_CDN": "false",
"VITE_PUBLIC_PATH": "", "VITE_PUBLIC_PATH": "",
"VITE_API_URL": "http://localhost:5005" "VITE_API_URL": "http://192.168.88.206:5005"
} }

12
src/theme/dark.scss

@ -2,18 +2,22 @@
------------------------------- */ ------------------------------- */
[data-theme='dark'] { [data-theme='dark'] {
// 变量(自定义时只需修改这里的值) // 变量(自定义时只需修改这里的值)
--next-bg-main: #1f1f1f; // --next-bg-main: #1f1f1f;
--next-bg-main: rgb(11,11,40);
--next-color-white: #ffffff; --next-color-white: #ffffff;
--next-color-disabled: #191919; // --next-color-disabled: #191919;
--next-color-disabled:rgb(11,11,40);
--next-color-bar: #dadada; --next-color-bar: #dadada;
--next-color-primary: #303030; // --next-color-primary: #303030;
--next-color-primary: rgb(41,41,80);
--next-border-color: #424242; --next-border-color: #424242;
--next-border-black: #333333; --next-border-black: #333333;
--next-border-columns: #2a2a2a; --next-border-columns: #2a2a2a;
--next-color-seting: #505050; --next-color-seting: #505050;
--next-text-color-regular: #9b9da1; --next-text-color-regular: #9b9da1;
--next-text-color-placeholder: #7a7a7a; --next-text-color-placeholder: #7a7a7a;
--next-color-hover: #3c3c3c; // --next-color-hover: #3c3c3c;
--next-color-hover: rgb(61,61,110);
--next-color-hover-rgba: rgba(0, 0, 0, 0.3); --next-color-hover-rgba: rgba(0, 0, 0, 0.3);
// root // root

68
src/views/home/index.vue

@ -18,8 +18,10 @@
</el-row> --> </el-row> -->
<el-row :gutter="15" class="home-card-two mb15"> <el-row :gutter="15" class="home-card-two mb15">
<el-col :xs="24" :sm="13" :md="13" :lg="13" :xl="12"> <el-col :xs="24" :sm="13" :md="13" :lg="13" :xl="12">
<div class="home-card-item" style="height: 300px;"> <div class="home-card-item" style="height: 400px;">
<el-row style="height: 100%"> <div class="home-card-item-title">社区生命数据存储分析</div>
<userChart />
<!-- <el-row style="height: 100%">
<el-col :span="8"> <el-col :span="8">
<div class="home-card-item-title">用户分析</div> <div class="home-card-item-title">用户分析</div>
<div class="content-box"> <div class="content-box">
@ -36,10 +38,10 @@
<el-col :span="16"> <el-col :span="16">
<div style="height: 100%" ref="homeLineRef"></div> <div style="height: 100%" ref="homeLineRef"></div>
</el-col> </el-col>
</el-row> </el-row> -->
</div> </div>
<div class="home-card-item" style="margin-top: 15px;height: 520px;"> <div class="home-card-item" style="margin-top: 15px;height: 520px;">
<div class="home-card-item-title">冷库分析18</div> <div class="home-card-item-title">冷库分析6</div>
<div class="home-monitor" style="height: auto;margin-bottom: 10px;"> <div class="home-monitor" style="height: auto;margin-bottom: 10px;">
<div class="flex-warp"> <div class="flex-warp">
<div class="flex-warp-item" v-for="(v, k) in state.homeThree" :key="k"> <div class="flex-warp-item" v-for="(v, k) in state.homeThree" :key="k">
@ -63,32 +65,32 @@
:src="item.idView" :src="item.idView"
fit="fit"></el-image> fit="fit"></el-image>
<div class="cold-storage-content-tips" style="top: 110px; left: -15%;"> <div class="cold-storage-content-tips" style="top: 110px; left: -15%;">
<span class="cold-storage-content-tips-text">密封腔湿度1%</span> <span class="cold-storage-content-tips-text">密封腔湿度{{ item.shi }}</span>
<span class="cold-storage-content-tips-line blue" style="width: 50px;"></span> <span class="cold-storage-content-tips-line blue" style="width: 50px;"></span>
</div> </div>
<div class="cold-storage-content-tips" style="top: 170px; left: -15%;"> <div class="cold-storage-content-tips" style="top: 170px; left: -15%;">
<span class="cold-storage-content-tips-text">液氮上限</span> <span class="cold-storage-content-tips-text">液氮上限 195mm</span>
<span class="cold-storage-content-tips-line red"></span> <span class="cold-storage-content-tips-line red"></span>
</div> </div>
<div class="cold-storage-content-tips" style="top: 240px; left: -15%;"> <div class="cold-storage-content-tips" style="top: 240px; left: -15%;">
<span class="cold-storage-content-tips-text">液氮下限</span> <span class="cold-storage-content-tips-text">液氮下限 125mm</span>
<span class="cold-storage-content-tips-line red"></span> <span class="cold-storage-content-tips-line red"></span>
</div> </div>
<div class="cold-storage-content-tips" style="top: 110px; right: -23%;"> <div class="cold-storage-content-tips" style="top: 110px; right: -23%;">
<span class="cold-storage-content-tips-line blue"></span> <span class="cold-storage-content-tips-line blue"></span>
<span class="cold-storage-content-tips-text">-150</span> <span class="cold-storage-content-tips-text">{{item.top}}</span>
</div> </div>
<div class="cold-storage-content-tips" style="top: 170px; right: -23%;"> <div class="cold-storage-content-tips" style="top: 170px; right: -23%;">
<span class="cold-storage-content-tips-line blue"></span> <span class="cold-storage-content-tips-line blue"></span>
<span class="cold-storage-content-tips-text">-178</span> <span class="cold-storage-content-tips-text">{{item.center}}</span>
</div> </div>
<div class="cold-storage-content-tips" style="top: 240px; right: -23%;"> <div class="cold-storage-content-tips" style="top: 240px; right: -23%;">
<span class="cold-storage-content-tips-line blue"></span> <span class="cold-storage-content-tips-line blue"></span>
<span class="cold-storage-content-tips-text">-196</span> <span class="cold-storage-content-tips-text">{{item.bottom}}</span>
</div> </div>
<div> <div>
<span>液氮高度123 mm</span> <span>液氮高度{{ item.height }} mm</span>
<span style="margin-left: 60px;" class="">转运区<span style="color: red;">无桶</span></span> <span style="margin-left: 60px;" class="">转运区<span :style="{color: item.status === 0?'red':'green'}">{{item.status === 0?'无桶':'有桶'}}</span></span>
</div> </div>
</div> </div>
@ -98,8 +100,8 @@
</div> </div>
</el-col> </el-col>
<el-col :xs="24" :sm="11" :md="11" :lg="11" :xl="12" class="home-media"> <el-col :xs="24" :sm="11" :md="11" :lg="11" :xl="12" class="home-media">
<div class="home-card-item" style="height: 500px;"> <div class="home-card-item" style="height: 600px;">
<div class="home-card-item-title">机器人20</div> <div class="home-card-item-title">机器人2</div>
<div class="home-monitor" style="height: 60px;"> <div class="home-monitor" style="height: 60px;">
<div class="flex-warp"> <div class="flex-warp">
<div class="flex-warp-item" v-for="(v, k) in state.homeFour" :key="k" style="width: 25%;height: 55px;"> <div class="flex-warp-item" v-for="(v, k) in state.homeFour" :key="k" style="width: 25%;height: 55px;">
@ -128,7 +130,7 @@
<div class="item" style="width: 80px; height: 50px; right: -1px; top: 275px"></div> <div class="item" style="width: 80px; height: 50px; right: -1px; top: 275px"></div>
<img :src="carYellow" alt="" width="50px" height="50px" style="position: absolute; right: 85px; top: 48%"> <img :src="carYellow" alt="" width="50px" height="50px" style="position: absolute; right: 85px; top: 48%">
<img :src="carGreen" alt="" width="50px" height="50px" style="position: absolute; left: 85px; top: 40%"> --> <img :src="carGreen" alt="" width="50px" height="50px" style="position: absolute; left: 85px; top: 40%"> -->
<laboratory /> <mapManagement />
</div> </div>
<!-- <div style="height: 100%" ref="homePieRef"></div> --> <!-- <div style="height: 100%" ref="homePieRef"></div> -->
</div> </div>
@ -155,7 +157,7 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="状态"> <!-- <el-form-item label="状态">
<el-select <el-select
v-model="state.queryDictTypeParams.name" v-model="state.queryDictTypeParams.name"
placeholder="Select" placeholder="Select"
@ -165,7 +167,7 @@
:value="1" :value="1"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item> -->
<!-- <el-form-item label="字典编码"> <!-- <el-form-item label="字典编码">
<el-input v-model="state.queryDictTypeParams.code" placeholder="字典编码" clearable /> <el-input v-model="state.queryDictTypeParams.code" placeholder="字典编码" clearable />
</el-form-item> --> </el-form-item> -->
@ -200,7 +202,8 @@ import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig'; import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes'; import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { getAddInfo } from '/@/api/user'; import { getAddInfo } from '/@/api/user';
import laboratory from '../laboratory/laboratory.vue'; import mapManagement from '../system/mapManagement/index.vue';
import userChart from './user.vue';
import imgUrl from '/@/assets/M9.png' import imgUrl from '/@/assets/M9.png'
import carYellow from '/@/assets/car_yellow.png' import carYellow from '/@/assets/car_yellow.png'
import carGreen from '/@/assets/car_green.png' import carGreen from '/@/assets/car_green.png'
@ -233,39 +236,42 @@ const state = reactive({
], ],
className: "", className: "",
images: [ images: [
{id: 0, idView: imgUrl}, {id: 0, idView: imgUrl, top: '-180.1℃', center: '-192.2℃', bottom: '-195.1℃', shi: '1%',height: 162, status: 0},
{id: 1, idView: imgUrl}, {id: 1, idView: imgUrl, top: '-181.6℃', center: '-190.6℃', bottom: '-195.3℃', shi: '1.3%',height: 166, status: 1},
{id: 2, idView: imgUrl}, {id: 2, idView: imgUrl, top: '-182.4℃', center: '-192.4℃', bottom: '-195.5℃', shi: '2.1%',height: 162, status: 1},
{id: 3, idView: imgUrl, top: '-183.1℃', center: '-191.5℃', bottom: '-195.6℃', shi: '1.7%',height: 168, status: 0},
{id: 4, idView: imgUrl, top: '-180.9℃', center: '-190.2℃', bottom: '-195.3℃', shi: '3.1%',height: 166, status: 1},
{id: 5, idView: imgUrl, top: '-182.2℃', center: '-192.9℃', bottom: '-195.4℃', shi: '2.3%',height: 169, status: 0},
], ],
homeThree: [ homeThree: [
{ {
icon: 'iconfont icon-yangan', icon: 'iconfont icon-yangan',
label: '存入次数', label: '存入次数',
value: '999', value: '3658',
iconColor: '#F72B3F', iconColor: '#F72B3F',
}, },
{ {
icon: 'iconfont icon-wendu', icon: 'iconfont icon-wendu',
label: '取出次数', label: '取出次数',
value: '999', value: '3587',
iconColor: '#91BFF8', iconColor: '#91BFF8',
}, },
{ {
icon: 'iconfont icon-shidu', icon: 'iconfont icon-shidu',
label: '离线', label: '离线盒位',
value: '2', value: '2',
iconColor: '#88D565', iconColor: '#88D565',
}, },
{ {
icon: 'iconfont icon-shidu', icon: 'iconfont icon-shidu',
label: '可取盒位', label: '可取盒位',
value: '23', value: '2586',
iconColor: '#88D565', iconColor: '#88D565',
}, },
{ {
icon: 'iconfont icon-zaosheng', icon: 'iconfont icon-zaosheng',
label: '总盒位', label: '总盒位',
value: '566', value: '2604',
iconColor: '#FBD4A0', iconColor: '#FBD4A0',
}, },
], ],
@ -273,25 +279,25 @@ const state = reactive({
{ {
icon: 'iconfont icon-yangan', icon: 'iconfont icon-yangan',
label: '工作', label: '工作',
value: '999', value: '2',
iconColor: '#F72B3F', iconColor: '#F72B3F',
}, },
{ {
icon: 'iconfont icon-wendu', icon: 'iconfont icon-wendu',
label: '充电', label: '充电',
value: '999', value: '0',
iconColor: '#91BFF8', iconColor: '#91BFF8',
}, },
{ {
icon: 'iconfont icon-shidu', icon: 'iconfont icon-shidu',
label: '故障', label: '故障',
value: '2', value: '0',
iconColor: '#88D565', iconColor: '#88D565',
}, },
{ {
icon: 'iconfont icon-zaosheng', icon: 'iconfont icon-zaosheng',
label: '等待', label: '等待',
value: '566', value: '0',
iconColor: '#FBD4A0', iconColor: '#FBD4A0',
}, },
], ],
@ -418,7 +424,7 @@ watch(
$homeNavLengh: 8; $homeNavLengh: 8;
// $agvBorder: #d1d2e1; // $agvBorder: #d1d2e1;
.agv { .agv {
height: 370px; height: 470px;
border: 1px solid #d1d2e1; border: 1px solid #d1d2e1;
position: relative; position: relative;
.item { .item {

190
src/views/home/user.vue

@ -0,0 +1,190 @@
<template>
<div class="user-container layout-pd">
<div style="height: 100%" ref="homeLineRef"></div>
</div>
</template>
<script setup lang="ts" name="user-chart">
import { reactive, onMounted, ref} from 'vue';
import * as echarts from 'echarts';
import { DataZoomComponent } from 'echarts/components';
echarts.use([DataZoomComponent]);
//
const homeLineRef = ref()
const state = reactive({
charts: {
theme: '',
bgColor: '',
color: '#303133',
},
});
//
const city = reactive([
{ value: 35835, name: '松山湖' },
{ value: 12335, name: '惠州' },
{ value: 14835, name: '广州' },
{ value: 11935, name: '佛山' },
{ value: 7335, name: '河源' },
{ value: 8933, name: '深州' },
{ value: 14275, name: '南昌' },
{ value: 16635, name: '长沙' },
{ value: 13510, name: '武汉' },
{ value: 6474, name: '岳阳' },
{ value: 17374, name: '衡水' },
{ value: 5374, name: '襄阳' },
{ value: 18774, name: '深圳' },
{ value: 6974, name: '肇庆' },
{ value: 13474, name: '湛江' },
{ value: 15235, name: '重庆' },
{ value: 13280, name: '杭州' }
])
const cityName = reactive([]) // -citynamecityName
const cityValue = reactive([]) // -cityvaluecityValue\
// option
const axisAlign = () => {
var myChart = echarts.init(homeLineRef.value, state.charts.theme);
let option = {
// 线 x0, y0, x2, y2, 0 - 1 globalCoord `true`
color:{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#00fefb' // 0%
}, {
offset: 1, color: '#0063ce' // 100%
}],
global: false // false
},
/* 鼠标移入的工具提示 */
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
},
backgroundColor : 'rgba(0,0,0,0.4)', /* 背景色 */
borderColor: 'transparent', //
textStyle: { //
color : 'rgba(255,255,255,0.8)'
}
},
/* x y 轴的文字样式 */
textStyle:{
color: '#4c9bfd'
},
//
axisTick: {
lineStyle : { color : '#096b80' }
},
/* 设置滚动条,处理数据过多的挤压问题 */
dataZoom : [
{
type: 'slider',
show: true,
/* start和end表示滚动条默认展示的比例,这里为1~50% */
start: 1,
end: 80,
height:15, //
bottom:5, //
borderColor : '#4c9bfd', //
/* 滑块内数据的样式 */
dataBackground : {
// 线
lineStyle : {
color : '#4c9bfd'
},
/* 滑块内阴影的颜色 */
areaStyle: {
color : '#4c9bfd'
}
},
/* 滑块内选中数据的样式 */
selectedDataBackground : {
// 线
lineStyle : {
color : '#4c9bfd'
},
/* 滑块内阴影的颜色 */
areaStyle: {
color : '#4c9bfd'
}
},
xAxisIndex: [0], // xAxisdata0[0,2]0~2
handleSize: '50%', /* 滚动条的左右滑块大小 */
moveHandleSize : 5, //
moveHandleStyle : { //
color : '#4c9bfd'
},
textStyle: { //
color : '#4c9bfd'
}
},
],
/* 布局 */
grid: {
left: '0%',
right: '0%',
bottom: '10%',
top: '4%',
show: true, // true
containLabel: true,
borderColor: '#096b80' /* 边框的颜色 */
},
/* 直角坐标系 grid 中的 x 轴 */
xAxis: [
{
type: 'category',
data: cityName, /* 数据 */
axisLabel: {
interval: 0,
rotate: 30
},
axisTick: {
alignWithLabel: true
},
}
],
/* 直角坐标系 grid 中的 y 轴 */
yAxis: [
{
type: 'value',
splitLine: { // y线
show:true,
lineStyle: {
color: "#096b80",
}
}
},
],
/* 整体配置 */
series: [
{
name: '生物样本',
type: 'bar',
barWidth: '60%',
data: cityValue,
}
]
};
myChart.setOption(option);
}
//
onMounted(() => {
city.map(city => {
cityName.push(city.name);
cityValue.push(city.value);
})
axisAlign();
});
</script>
<style scoped lang="scss">
.user-container {
height: 100%;
}
</style>

BIN
src/views/laboratory/img/SafetyCabinet.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 239 KiB

After

Width:  |  Height:  |  Size: 124 KiB

BIN
src/views/laboratory/img/platform.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 664 KiB

After

Width:  |  Height:  |  Size: 390 KiB

BIN
src/views/system/mapManagement/centrifugal.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
src/views/system/mapManagement/incubator.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 620 KiB

559
src/views/system/mapManagement/index.vue

@ -1,6 +1,6 @@
<template> <template>
<div class="sys-role-container"> <div class="sys-role-container full-table" style="height: 100%;" v-loading="state.loading">
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }"> <!-- <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
<el-form :model="state.queryParams" ref="queryForm" :inline="true"> <el-form :model="state.queryParams" ref="queryForm" :inline="true">
<el-form-item> <el-form-item>
<el-button-group> <el-button-group>
@ -8,23 +8,30 @@
</el-button-group> </el-button-group>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-card> </el-card> -->
<el-card class="full-table" shadow="hover" style="margin-top: 5px" v-loading="state.loading" element-loading-text="Loading..."> <!-- <el-card class="full-table" shadow="hover" style="margin-top: 5px" v-loading="state.loading" element-loading-text="Loading..."> -->
<div id="container" class="container" /> <div id="container" class="container" />
</el-card> <!-- </el-card> -->
</div> </div>
</template> </template>
<script lang="ts" setup name="sysRole"> <script lang="ts" setup name="sysRole">
import { onMounted, reactive, ref } from 'vue'; import { onMounted, reactive, ref } from 'vue';
import Konva from 'konva'; import Konva from 'konva';
import { ElMessageBox, ElMessage } from 'element-plus'; // import { ElMessageBox, ElMessage } from 'element-plus';
import mapData from './map/lab0522xiezuo(1).json'; import mapData from './map/lab0522xiezuo(1).json';
import accessAGV from './map/accessAGV.json';
import platform from '../../laboratory/img/platform.png'
import SafetyCabinet from '../../laboratory/img/SafetyCabinet.png'
import agv from '../../laboratory/img/AGV01.png' import agv from '../../laboratory/img/AGV01.png'
import agv02 from '../../laboratory/img/AGV02.png'
import m9 from './m9.png' import m9 from './m9.png'
import centrifugal from './centrifugal.png'
import incubator from './incubator.png'
const state = reactive({ const state = reactive({
loading: false, loading: false,
isBeginning: true,
advancedPointObj: {}, advancedPointObj: {},
queryParams: { queryParams: {
name: undefined, name: undefined,
@ -37,6 +44,34 @@ const state = reactive({
height: 3, height: 3,
src: m9 src: m9
}, },
platform: {
x: -7.037,
y:-0.8,
width: 1.5,
height: 5,
src: platform
},
incubator: {
x: -4.247,
y:-3.3,
width: 1.1,
height: 4.9,
src: incubator
},
SafetyCabinet: {
x: -4.237,
y:-3.3,
width: 1.7,
height: 1.2,
src: SafetyCabinet
},
centrifugal: {
x: -2.537,
y:-3.3,
width: 2,
height: 1.2,
src: centrifugal
},
}); });
const mapCanvas = reactive<Record<string, any>>({ const mapCanvas = reactive<Record<string, any>>({
// JSON // JSON
@ -50,6 +85,8 @@ const mapCanvas = reactive<Record<string, any>>({
text: null, text: null,
// canvas // canvas
stage: null, stage: null,
width: 0,
height: 0,
// //
widthScale: 0, widthScale: 0,
heightScale: 0, heightScale: 0,
@ -76,7 +113,7 @@ const mapCanvas = reactive<Record<string, any>>({
// //
const draw = () => { const draw = () => {
const { normalPosList, advancedPointList, advancedCurveList } = mapCanvas.mapData; const { normalPosList, advancedPointList, advancedCurveList } = mapCanvas.mapData;
console.log(77777, advancedPointList, normalPosList?.length)
// //
if (normalPosList?.length) { if (normalPosList?.length) {
for (let i = 0; i < normalPosList.length; i += 3) { for (let i = 0; i < normalPosList.length; i += 3) {
@ -109,8 +146,8 @@ const draw = () => {
let rotation = (list.dir / Math.PI) * 180; let rotation = (list.dir / Math.PI) * 180;
rotation = isNaN(rotation) ? 0 : rotation; rotation = isNaN(rotation) ? 0 : rotation;
const color = list?.enable ? 'blue' : '#303133'; const color = list?.enable ? 'blue' : '#303133';
const width = 50; const width = 40;
const height = 37; const height = 27;
mapCanvas.rect = new Konva.Rect({ mapCanvas.rect = new Konva.Rect({
opacity: 0.5, opacity: 0.5,
x, x,
@ -145,96 +182,260 @@ const draw = () => {
mapCanvas.layer.add(group); mapCanvas.layer.add(group);
} }
console.log(888, state.advancedPointObj) console.log(888, state.advancedPointObj)
let width = (mapCanvas.widthScale < 50 ? 1.9 : 1.3) * mapCanvas.widthScale;
var coAgv = new Image(); var coAgv = new Image();
coAgv.src = mapCanvas.agvImg; coAgv.src = mapCanvas.agvImg;
coAgv.onload = function () { coAgv.onload = function () {
let list = state.advancedPointObj.LM7; let list = state.advancedPointObj.LM7;
if (list.dir) list.dir = parseFloat(list.dir).toFixed(3); if (list.dir) list.dir = parseFloat(list.dir).toFixed(3);
console.log(9999, list.pos?.x * mapCanvas.widthScale, list.pos?.y * mapCanvas.heightScale) // console.log(9999, list.pos?.x * mapCanvas.widthScale, list.pos?.y * mapCanvas.heightScale)
let rotation = (list.dir / Math.PI) * 180; let rotation = (list.dir / Math.PI) * 180 || 0;
var kImage = new Konva.Image({ var kImage = new Konva.Image({
image:coAgv, image:coAgv,
x: list.pos?.x * mapCanvas.widthScale, x: list.pos?.x * mapCanvas.widthScale,
y: list.pos?.y * mapCanvas.heightScale, y: list.pos?.y * mapCanvas.heightScale,
width: 100, width: width,
height: 100, height: width,
rotation, rotation,
offset: { x: 50, y: 50}, offset: { x: width/2, y: width/2},
}); });
console.log(999, kImage)
// //
mapCanvas.layer.add(kImage); mapCanvas.layer.add(kImage);
var velocity = 5; var arr = ['LM13', 'LM12', 'LM15', 'LM1', 'LM15', 'LM2', 'LM16', 'LM3', 'LM4', 'LM6', 'LM5', 'LM3', 'LM4', 'LM6', 'LM5',
var arr = ['LM13', 'LM12', 'LM15']; 'LM10', 'LM2', 'LM15', 'LM1', 'LM15', 'LM12', 'LM13', 'LM7'
];
let i = 0; let i = 0;
let stepX = -105;
let stepY = 0;
let timeOut = 0;
let starTime = 0;
var anim = new Konva.Animation(function (frame) { var anim = new Konva.Animation(function (frame) {
// ms -->s // ms -->s
var timeDiff = frame.timeDiff /1000;// var timeDiff = frame.timeDiff /2000;//
let now = state.advancedPointObj[arr[i]]; let now = state.advancedPointObj[arr[i]];
if (!now) return false; if (!now) return false;
let distX = now.pos.x - kImage.getAttr('x'); let distX = now.pos.x * mapCanvas.widthScale - kImage.getAttr('x');
let distY = now.pos.y - kImage.getAttr('y'); let distY = now.pos.y * mapCanvas.heightScale - kImage.getAttr('y');
if (Math.abs(distX) < 0.5 && Math.abs(distY) < 0.5) { if (frame.time - starTime < timeOut){
return false;
}
starTime = frame.time;
timeOut = 0;
if (Math.abs(distX) < 5 && Math.abs(distY) < 5) {
switch (arr[i]){
case 'LM1': timeOut = 8600; break;
case 'LM2': timeOut = 5000; break;
case 'LM3': timeOut = 5000; break;
case 'LM4': timeOut = 5000; break;
case 'LM5': timeOut = 5000; break;
case 'LM6': timeOut = 5000; break;
case 'LM7': timeOut = 5000; break;
default: break;
}
i++; i++;
if (i >= arr.length) i = 0; if (i >= arr.length) i = 0;
state.isBeginning = i == 0 || i == 1;
let next = state.advancedPointObj[arr[i]];
const distance = Math.sqrt(
Math.pow(next.pos.x* mapCanvas.widthScale - now.pos.x* mapCanvas.widthScale, 2) +
Math.pow(next.pos.y* mapCanvas.heightScale - now.pos.y* mapCanvas.heightScale, 2)
);
const time = distance / 105;
stepX = (next.pos.x * mapCanvas.widthScale - now.pos.x * mapCanvas.widthScale) / time;
stepY = (next.pos.y * mapCanvas.heightScale - now.pos.y * mapCanvas.heightScale) / time;
// console.log(2333, stepX, stepY, distance);
} }
var dist = timeDiff * velocity; // console.log(9999, kImage.getAttr('x'), now.pos.x * mapCanvas.widthScale , kImage.getAttr('y'), now.pos.y* mapCanvas.heightScale)
console.log(9999, kImage.getAttr('x')) kImage.move({x: stepX * timeDiff, y: stepY * timeDiff});
kImage.move({x: distX > 0 ? dist : (dist * -1), y: distY > 0 ? dist : (dist * -1)});
}, mapCanvas.layer); }, mapCanvas.layer);
// //
anim.start(); anim.start();
} }
// Konva.Image.fromURL(mapCanvas.agvImg, function(darthNode) {
// let list = state.advancedPointObj.LM1;
// if (list.dir) list.dir = parseFloat(list.dir).toFixed(3);
// let rotation = (list.dir / Math.PI) * 180;
// darthNode.setAttrs({
// x: list.pos?.x * mapCanvas.widthScale,
// y: list.pos?.y * mapCanvas.heightScale,
// width: 100,
// height: 100,
// rotation,
// offset: { x: 50, y: 50},
// });
// mapCanvas.layer.add(darthNode);
// mapCanvas.layer.batchDraw();
// });
var img = new Image(); var img = new Image();
img.src = state.m9.src; img.src = state.m9.src;
let textColor = '#f25f33'
let labelTextColor = '#666'
let fontTitleSize1 = (mapCanvas.widthScale < 50 ? 0.3 : 0.25) * mapCanvas.widthScale;
let fontContentSize1 = (mapCanvas.widthScale < 50 ? 0.25 : 0.2) * mapCanvas.widthScale;
let fontContentSize14 = (mapCanvas.widthScale < 50 ? 0.2 : 0.17) * mapCanvas.widthScale;
let offsetWidth10 = 0.13 * mapCanvas.widthScale;
let offsetHeight10 = 0.23 * mapCanvas.heightScale;
img.onload = function () { img.onload = function () {
let x = state.m9.x * mapCanvas.widthScale;
let y = state.m9.y * mapCanvas.heightScale;
const text1_1 = new Konva.Text({x: x+2*offsetWidth10,y: y-offsetHeight10,text: 'M9_01',fontSize: fontTitleSize1,fill: labelTextColor,scaleY: -1,});
const text1_2 = new Konva.Text({x: x+2*offsetWidth10,y: y-3.5*offsetHeight10,text: '温度:',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,});
const text1_3 = new Konva.Text({x: x+6*offsetWidth10,y: y-3.5*offsetHeight10,text: '-195.2',fontSize: fontContentSize1,fill: textColor,scaleY: -1,});
const text1_4 = new Konva.Text({x: x+2*offsetWidth10,y: y-5.5*offsetHeight10,text: '湿度:',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,});
const text1_5 = new Konva.Text({x: x+6*offsetWidth10,y: y-5.5*offsetHeight10,text: '12.1%',fontSize: fontContentSize1,fill: textColor,scaleY: -1,});
const text1_6 = new Konva.Text({x: x+2*offsetWidth10,y: y-7.5*offsetHeight10,text: '液氮:',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,});
const text1_7 = new Konva.Text({x: x+6*offsetWidth10,y: y-7.5*offsetHeight10,text: '26',fontSize: fontContentSize1,fill: textColor,scaleY: -1,});
const text2_1 = new Konva.Text({x: x+16*offsetWidth10,y: y-offsetHeight10,text: 'M9_02',fontSize: fontTitleSize1,fill: labelTextColor,scaleY: -1,});
const text2_2 = new Konva.Text({x: x+16*offsetWidth10,y: y-3.5*offsetHeight10,text: '温度:',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,});
const text2_3 = new Konva.Text({x: x+20*offsetWidth10,y: y-3.5*offsetHeight10,text: '-195.2',fontSize: fontContentSize1,fill: textColor,scaleY: -1,});
const text2_4 = new Konva.Text({x: x+16*offsetWidth10,y: y-5.5*offsetHeight10,text: '湿度:',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,});
const text2_5 = new Konva.Text({x: x+20*offsetWidth10,y: y-5.5*offsetHeight10,text: '12.1%',fontSize: fontContentSize1,fill: textColor,scaleY: -1,});
const text2_6 = new Konva.Text({x: x+16*offsetWidth10,y: y-7.5*offsetHeight10,text: '液氮:',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,});
const text2_7 = new Konva.Text({x: x+20*offsetWidth10,y: y-7.5*offsetHeight10,text: '26',fontSize: fontContentSize1,fill: textColor,scaleY: -1,});
const text3_1 = new Konva.Text({x: x+30*offsetWidth10,y: y-offsetHeight10,text: 'M9_03',fontSize: fontTitleSize1,fill: labelTextColor,scaleY: -1,});
const text3_2 = new Konva.Text({x: x+30*offsetWidth10,y: y-3.5*offsetHeight10,text: '温度:',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,});
const text3_3 = new Konva.Text({x: x+34*offsetWidth10,y: y-3.5*offsetHeight10,text: '-195.2',fontSize: fontContentSize1,fill: textColor,scaleY: -1,});
const text3_4 = new Konva.Text({x: x+30*offsetWidth10,y: y-5.5*offsetHeight10,text: '湿度:',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,});
const text3_5 = new Konva.Text({x: x+34*offsetWidth10,y: y-5.5*offsetHeight10,text: '12.1%',fontSize: fontContentSize1,fill: textColor,scaleY: -1,});
const text3_6 = new Konva.Text({x: x+30*offsetWidth10,y: y-7.5*offsetHeight10,text: '液氮:',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,});
const text3_7 = new Konva.Text({x: x+34*offsetWidth10,y: y-7.5*offsetHeight10,text: '26',fontSize: fontContentSize1,fill: textColor,scaleY: -1,});
const text4_1 = new Konva.Text({x: x+44*offsetWidth10,y: y-offsetHeight10,text: 'M9_04',fontSize: fontTitleSize1,fill: labelTextColor,scaleY: -1,});
const text4_2 = new Konva.Text({x: x+44*offsetWidth10,y: y-3.5*offsetHeight10,text: '温度:',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,});
const text4_3 = new Konva.Text({x: x+48*offsetWidth10,y: y-3.5*offsetHeight10,text: '-195.2',fontSize: fontContentSize1,fill: textColor,scaleY: -1,});
const text4_4 = new Konva.Text({x: x+44*offsetWidth10,y: y-5.5*offsetHeight10,text: '湿度:',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,});
const text4_5 = new Konva.Text({x: x+48*offsetWidth10,y: y-5.5*offsetHeight10,text: '12.1%',fontSize: fontContentSize1,fill: textColor,scaleY: -1,});
const text4_6 = new Konva.Text({x: x+44*offsetWidth10,y: y-7.5*offsetHeight10,text: '液氮:',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,});
const text4_7 = new Konva.Text({x: x+48*offsetWidth10,y: y-7.5*offsetHeight10,text: '26',fontSize: fontContentSize1,fill: textColor,scaleY: -1,});
const text5_1 = new Konva.Text({x: x+57.5*offsetWidth10,y: y-offsetHeight10,text: 'M9_05',fontSize: fontTitleSize1,fill: labelTextColor,scaleY: -1,});
const text5_2 = new Konva.Text({x: x+57.5*offsetWidth10,y: y-3.5*offsetHeight10,text: '温度:',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,});
const text5_3 = new Konva.Text({x: x+61.5*offsetWidth10,y: y-3.5*offsetHeight10,text: '-195.2',fontSize: fontContentSize1,fill: textColor,scaleY: -1,});
const text5_4 = new Konva.Text({x: x+57.5*offsetWidth10,y: y-5.5*offsetHeight10,text: '湿度:',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,});
const text5_5 = new Konva.Text({x: x+61.5*offsetWidth10,y: y-5.5*offsetHeight10,text: '12.1%',fontSize: fontContentSize1,fill: textColor,scaleY: -1,});
const text5_6 = new Konva.Text({x: x+57.5*offsetWidth10,y: y-7.5*offsetHeight10,text: '液氮:',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,});
const text5_7 = new Konva.Text({x: x+61.5*offsetWidth10,y: y-7.5*offsetHeight10,text: '26',fontSize: fontContentSize1,fill: textColor,scaleY: -1,});
const text6_1 = new Konva.Text({x: x+71.5*offsetWidth10,y: y-offsetHeight10,text: 'M9_06',fontSize: fontTitleSize1,fill: labelTextColor,scaleY: -1,});
const text6_2 = new Konva.Text({x: x+71.5*offsetWidth10,y: y-3.5*offsetHeight10,text: '温度:',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,});
const text6_3 = new Konva.Text({x: x+75.5*offsetWidth10,y: y-3.5*offsetHeight10,text: '-195.2',fontSize: fontContentSize1,fill: textColor,scaleY: -1,});
const text6_4 = new Konva.Text({x: x+71.5*offsetWidth10,y: y-5.5*offsetHeight10,text: '湿度:',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,});
const text6_5 = new Konva.Text({x: x+75.5*offsetWidth10,y: y-5.5*offsetHeight10,text: '12.1%',fontSize: fontContentSize1,fill: textColor,scaleY: -1,});
const text6_6 = new Konva.Text({x: x+71.5*offsetWidth10,y: y-7.5*offsetHeight10,text: '液氮:',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,});
const text6_7 = new Konva.Text({x: x+75.5*offsetWidth10,y: y-7.5*offsetHeight10,text: '26',fontSize: fontContentSize1,fill: textColor,scaleY: -1,});
var kImage = new Konva.Image({ var kImage = new Konva.Image({
image:img, image:img,
x: state.m9.x * mapCanvas.widthScale, x: x,
y: state.m9.y * mapCanvas.heightScale, y: y,
width: state.m9.width * mapCanvas.widthScale, width: state.m9.width * mapCanvas.widthScale,
height: state.m9.height * mapCanvas.heightScale, height: state.m9.height * mapCanvas.heightScale,
scale: {x:1, y: -1} scale: {x:1, y: -1}
}); });
// //
mapCanvas.layer.add(kImage); mapCanvas.layer.add(kImage, text1_1, text1_2, text1_3, text1_4, text1_5, text1_6, text1_7,
text2_1, text2_2, text2_3, text2_4, text2_5, text2_6, text2_7,
text3_1, text3_2, text3_3, text3_4, text3_5, text3_6, text3_7,
text4_1, text4_2, text4_3, text4_4, text4_5, text4_6, text4_7,
text5_1, text5_2, text5_3, text5_4, text5_5, text5_6, text5_7,
text6_1, text6_2, text6_3, text6_4, text6_5, text6_6, text6_7
);
}
//
var platformImg = new Image();
platformImg.src = state.platform.src;
platformImg.onload = function () {
let x = state.platform.x * mapCanvas.widthScale;
let y = state.platform.y * mapCanvas.heightScale;
let width = state.platform.width * mapCanvas.widthScale;
let height = state.platform.height * mapCanvas.heightScale;
const text1_1 = new Konva.Text({x: x-width+1*offsetWidth10,y: y+height-offsetHeight10,text: '原代培养平台',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,});
const text1_2 = new Konva.Text({x: x-width+1*offsetWidth10,y: y+height-3.5*offsetHeight10,text: '血清类型:',fontSize: fontContentSize14,fill: labelTextColor,scaleY: -1,});
const text1_3 = new Konva.Text({x: x-width+7.5*offsetWidth10,y: y+height-3.5*offsetHeight10,text: 'FBS',fontSize: fontContentSize14,fill: textColor,scaleY: -1,});
const text1_4 = new Konva.Text({x: x-width+1*offsetWidth10,y: y+height-6*offsetHeight10,text: '温度:',fontSize: fontContentSize14,fill: labelTextColor,scaleY: -1,});
const text1_5 = new Konva.Text({x: x-width+5*offsetWidth10,y: y+height-6*offsetHeight10,text: '37.3',fontSize: fontContentSize14,fill: textColor,scaleY: -1,});
const text1_6 = new Konva.Text({x: x-width+1*offsetWidth10,y: y+height-8.5*offsetHeight10,text: 'CO2:',fontSize: fontContentSize14,fill: labelTextColor,scaleY: -1,});
const text1_7 = new Konva.Text({x: x-width+5*offsetWidth10,y: y+height-8.5*offsetHeight10,text: '5.1%',fontSize: fontContentSize14,fill: textColor,scaleY: -1,});
const text1_8 = new Konva.Text({x: x-width+1*offsetWidth10,y: y+height-11*offsetHeight10,text: 'PH:',fontSize: fontContentSize14,fill: labelTextColor,scaleY: -1,});
const text1_9 = new Konva.Text({x: x-width+4*offsetWidth10,y: y+height-11*offsetHeight10,text: '7.3',fontSize: fontContentSize14,fill: textColor,scaleY: -1,});
var kImage2 = new Konva.Image({
image:platformImg,
x: x,
y: y,
width: width,
height: height,
scale: {x:1, y: -1},
rotation: 180,
});
//
mapCanvas.layer.add(kImage2, text1_1, text1_2, text1_3, text1_4, text1_5, text1_6, text1_7, text1_8, text1_9, );
}
//
let incubator = new Image();
incubator.src = state.incubator.src;
incubator.onload = function () {
let x = state.incubator.x * mapCanvas.widthScale;
let y = state.incubator.y * mapCanvas.heightScale;
let width = state.incubator.width * mapCanvas.widthScale;
let height = state.incubator.height * mapCanvas.heightScale;
const text1_2 = new Konva.Text({x: x-width-12*offsetWidth10,y: y-1*offsetHeight10,text: '1号培养箱:',fontSize: fontContentSize14,fill: labelTextColor,scaleY: -1,});
const text1_3 = new Konva.Text({x: x-width-4*offsetWidth10,y: y-1*offsetHeight10,text: '正常,温度37.1',fontSize: fontContentSize14,fill: textColor,scaleY: -1,});
const text1_4 = new Konva.Text({x: x-width-12*offsetWidth10,y: y-3*offsetHeight10,text: '2号培养箱:',fontSize: fontContentSize14,fill: labelTextColor,scaleY: -1,});
const text1_5 = new Konva.Text({x: x-width-4*offsetWidth10,y: y-3*offsetHeight10,text: '正常,温度37.2',fontSize: fontContentSize14,fill: textColor,scaleY: -1,});
const text1_6 = new Konva.Text({x: x-width-12*offsetWidth10,y: y-5*offsetHeight10,text: '3号培养箱:',fontSize: fontContentSize14,fill: labelTextColor,scaleY: -1,});
const text1_7 = new Konva.Text({x: x-width-4*offsetWidth10,y: y-5*offsetHeight10,text: '正常,温度37.1',fontSize: fontContentSize14,fill: textColor,scaleY: -1,});
var kImage2 = new Konva.Image({
image:incubator,
x: x,
y: y,
width: width,
height: height,
scale: {x:1, y: -1},
rotation: -90,
});
//
mapCanvas.layer.add(kImage2, text1_2, text1_3, text1_4, text1_5, text1_6, text1_7, );
}
let centrifugal = new Image();
centrifugal.src = state.centrifugal.src;
centrifugal.onload = function () {
let x = state.centrifugal.x * mapCanvas.widthScale;
let y = state.centrifugal.y * mapCanvas.heightScale;
let width = state.centrifugal.width * mapCanvas.widthScale;
let height = state.centrifugal.height * mapCanvas.heightScale;
const text1_1 = new Konva.Text({x: x-width+4*offsetWidth10,y: y,text: '生物安全柜',fontSize: fontContentSize1,fill: labelTextColor,scaleY: -1,});
const text1_2 = new Konva.Text({x: x-width+4*offsetWidth10,y: y-2*offsetHeight10,text: '血清类型:',fontSize: fontContentSize14,fill: labelTextColor,scaleY: -1,});
const text1_3 = new Konva.Text({x: x-width+10.5*offsetWidth10,y: y-2*offsetHeight10,text: 'FBS',fontSize: fontContentSize14,fill: textColor,scaleY: -1,});
const text1_4 = new Konva.Text({x: x-width+4*offsetWidth10,y: y-4*offsetHeight10,text: '温度:',fontSize: fontContentSize14,fill: labelTextColor,scaleY: -1,});
const text1_5 = new Konva.Text({x: x-width+8*offsetWidth10,y: y-4*offsetHeight10,text: '37.3',fontSize: fontContentSize14,fill: textColor,scaleY: -1,});
var kImage2 = new Konva.Image({
image:centrifugal,
x: x,
y: y,
width: width,
height: height,
scale: {x:1, y: -1},
});
//
mapCanvas.layer.add(kImage2, text1_1, text1_2, text1_3, text1_4, text1_5,);
}
let SafetyCabinet = new Image();
SafetyCabinet.src = state.SafetyCabinet.src;
SafetyCabinet.onload = function () {
let x = state.SafetyCabinet.x * mapCanvas.widthScale;
let y = state.SafetyCabinet.y * mapCanvas.heightScale;
let width = state.SafetyCabinet.width * mapCanvas.widthScale;
let height = state.SafetyCabinet.height * mapCanvas.heightScale;
const text1_1 = new Konva.Text({x: -33*offsetWidth10,y: 10*offsetHeight10,text: '协作机器人交接区',fontSize: fontContentSize1,fill: '#999',scaleY: -1,});
const text1_2 = new Konva.Text({x: -33*offsetWidth10,y: 7.5*offsetHeight10,text: '交接细胞:',fontSize: fontContentSize14,fill: '#999',scaleY: -1,});
const text1_3 = new Konva.Text({x: -26*offsetWidth10,y: 7.5*offsetHeight10,text: 'FBS',fontSize: fontContentSize14,fill: textColor,scaleY: -1,});
const text1_4 = new Konva.Text({x: -33*offsetWidth10,y: 5*offsetHeight10,text: '交接状态:',fontSize: fontContentSize14,fill: '#999',scaleY: -1,});
const text1_5 = new Konva.Text({x: -26*offsetWidth10,y: 5*offsetHeight10,text: '正常',fontSize: fontContentSize14,fill: textColor,scaleY: -1,});
const text1_6 = new Konva.Text({x: -33*offsetWidth10,y: 2.5*offsetHeight10,text: '转运桶温度:',fontSize: fontContentSize14,fill: '#999',scaleY: -1,});
const text1_7 = new Konva.Text({x: -25*offsetWidth10,y: 2.5*offsetHeight10,text: '-120',fontSize: fontContentSize14,fill: textColor,scaleY: -1,});
var kImage2 = new Konva.Image({
image:SafetyCabinet,
x: x,
y: y,
width: width,
height: height,
scale: {x:1, y: -1},
// rotation: 180,
});
//
mapCanvas.layer.add(kImage2, text1_1, text1_2, text1_3, text1_4, text1_5, text1_6, text1_7, );
} }
// Konva.Image.fromURL(state.m9.src, function(darthNode) {
// mapCanvas.layer.add(darthNode);
// darthNode.setAttrs({
// x: state.m9.x * mapCanvas.widthScale,
// y: state.m9.y * mapCanvas.heightScale,
// width: state.m9.width,
// height: state.m9.height,
// // rotation: 180,
// // offset: { x: 50, y: 50},
// });
// mapCanvas.layer.add(darthNode);
// mapCanvas.layer.draw();
// });
// 线 线 // 线 线
for (let i = 0; i < advancedCurveList.length; i += 2) { for (let i = 0; i < advancedCurveList.length; i += 2) {
const list = advancedCurveList[i]; const list = advancedCurveList[i];
const color = list?.enable ? '#c5b8af' : '#E6A23C'; const color = list?.enable ? '#c5b8af' : '#fff';
// mapCanvas.tableData[1].Interference.push({ name: list.instanceName, type: 'bezier', i: i / 2 }); // mapCanvas.tableData[1].Interference.push({ name: list.instanceName, type: 'bezier', i: i / 2 });
let arr = []; let arr = [];
arr[i] = {}; arr[i] = {};
@ -251,9 +452,10 @@ const draw = () => {
/* 绘制贝塞尔控制点 */ /* 绘制贝塞尔控制点 */
const bezierLine = new Konva.Shape({ const bezierLine = new Konva.Shape({
stroke: color, stroke: color,
strokeWidth: 2, strokeWidth: mapCanvas.widthScale < 50 ? 0.5 : 0.5,
perfectDrawEnabled: false, // perfectDrawEnabled: false, //
name: list.instanceName, name: list.instanceName,
dash: [7, 1, 0.001, 1],
draggable: false, draggable: false,
sceneFunc: (ctx, shape) => { sceneFunc: (ctx, shape) => {
ctx.globalCompositeOperation = 'destination-over'; // ctx.globalCompositeOperation = 'destination-over'; //
@ -321,9 +523,10 @@ const draw = () => {
const line = new Konva.Line({ const line = new Konva.Line({
points: [startPos.x, startPos.y, endPos.x, endPos.y], points: [startPos.x, startPos.y, endPos.x, endPos.y],
stroke: color, stroke: color,
strokeWidth: 2, strokeWidth: mapCanvas.widthScale < 50 ? 0.5 : 0.5,
perfectDrawEnabled: false, perfectDrawEnabled: false,
name: list.instanceName, name: list.instanceName,
dash: [7, 1, 0.001, 1],
draggable: false, draggable: false,
listening: false, listening: false,
}); });
@ -331,8 +534,43 @@ const draw = () => {
break; break;
} }
} }
}; };
const drawBackground = () => {//
var tempCanvas = document.createElement('canvas');
tempCanvas.width = 100; //
tempCanvas.height = 100; //
var tempContext = tempCanvas.getContext('2d');
//
tempContext.strokeStyle = '#000000'; //
tempContext.lineWidth = 2; //
tempContext.beginPath();
tempContext.moveTo(0, 20);
tempContext.lineTo(20, 0);
tempContext.stroke();
//
var pattern = tempContext.createPattern(tempCanvas, 'repeat');
//
var backgroundRect = new Konva.Rect({
x: 0,
y: 0,
width: mapCanvas.width,
height: mapCanvas.width,
fillPatternImage: tempCanvas,
fillPatternRepeat: 'repeat',
});
//
mapCanvas.layer.add(backgroundRect);
// //
// layer.draw();
}
const drawCircle = (x, y, radius, fill) => { const drawCircle = (x, y, radius, fill) => {
if (!mapCanvas.circle) { if (!mapCanvas.circle) {
mapCanvas.circle = new Konva.Circle({ mapCanvas.circle = new Konva.Circle({
@ -364,10 +602,10 @@ const drawArrow = (x, y, width, rotation) => {
y, y,
points: [0, 0, width, 0], points: [0, 0, width, 0],
stroke: '#FFFFF0', stroke: '#FFFFF0',
strokeWidth: 2, strokeWidth: mapCanvas.widthScale < 50 ? 1 : 0.5,
perfectDrawEnabled: false, perfectDrawEnabled: false,
pointerLength: 10, pointerLength: mapCanvas.widthScale < 50 ? 5 : 10,
pointerWidth: 15, pointerWidth: mapCanvas.widthScale < 50 ? 8 : 15,
offset: { offset: {
x: width / 2, x: width / 2,
y: 0, y: 0,
@ -387,7 +625,7 @@ const drawText = (x, y, width, height, text, verticalAlign, rotation) => {
x, x,
y, y,
text, text,
fontSize: 12, fontSize: 10,
fill: '#fff', fill: '#fff',
align: 'center', align: 'center',
verticalAlign, verticalAlign,
@ -456,6 +694,178 @@ const buildAnchor = (x, y, type, index) => {
return anchor; return anchor;
}; };
const drawAccess = () => {
const {advancedPointList, advancedCurveList} = accessAGV;
console.log(8998, advancedPointList)
const offsetX = 4.56;
const offsetY = 6.5;
let advancedPointObj ={};
for (let i = 0; i < advancedPointList.length; i++) {
const list = advancedPointList[i];
list.pos.x+=offsetX;
list.pos.y+=offsetY;
advancedPointObj[list.instanceName] = list;
const x = list.pos.x * mapCanvas.widthScale;
const y = list.pos.y * mapCanvas.heightScale;
const number = list.instanceName.substring(2);
const name = list.instanceName.substring(0, 2);
if (list.dir) list.dir = parseFloat(list.dir).toFixed(3);
let rotation = (list.dir / Math.PI) * 180;
rotation = isNaN(rotation) ? 0 : rotation;
const color = list?.enable ? 'blue' : '#303133';
const width = 50;
const height = 37;
mapCanvas.rect = new Konva.Rect({
opacity: 0.5,
x,
y,
width,
height,
color,
offset: { x: width / 2, y: height / 2 },
rotation,
draggable: false,
});
mapCanvas.rect.cache();
const group = new Konva.Group({ name: list.instanceName });
const rect = drawRect(x, y, rotation, color);
const circle = drawCircle(x, y, 3, 'red');
const arrow = drawArrow(x, y, width, rotation);
const text1 = drawText(x, y, width, height, name, 'top', rotation);
const text2 = drawText(x, y, width, height, number, 'bottom', rotation);
group.on('mouseover', () => (document.body.style.cursor = 'pointer'));
group.on('mouseout', () => (document.body.style.cursor = 'default'));
group.add(rect, circle, arrow, text1, text2);
mapCanvas.allGroup.push(group);
mapCanvas.layer.add(group);
}
var accessAgv = new Image();
accessAgv.src = agv02;
accessAgv.onload = function () {
let list = advancedPointObj.LM13;
if (list.dir) list.dir = parseFloat(list.dir).toFixed(3);
let rotation = (list.dir / Math.PI) * 180 || 0;
let width = (mapCanvas.widthScale < 50 ? 1.45 : 1) * mapCanvas.widthScale;
var kImage = new Konva.Image({
image:accessAgv,
x: list.pos?.x * mapCanvas.widthScale,
y: list.pos?.y * mapCanvas.heightScale,
width: width,
height: width,
rotation,
offset: { x: width/2, y: width/2},
});
//
mapCanvas.layer.add(kImage);
var arr = ['LM2', 'LM1', 'LM2', 'LM3', 'LM4', 'LM3', 'LM5', 'CP7', 'LM5', 'LM3', 'LM4', 'LM3','LM13'];
let i = 0;
let stepX = -105;
let stepY = 0;
let timeOut = 0;
let starTime = 0;
var anim = new Konva.Animation(function (frame) {
// ms -->s
var timeDiff = frame.timeDiff /2000;//
let now = advancedPointObj[arr[i]];
if (!now) return false;
let distX = now.pos.x * mapCanvas.widthScale - kImage.getAttr('x');
let distY = now.pos.y * mapCanvas.heightScale - kImage.getAttr('y');
if (!state.isBeginning && i == 0) {
starTime = frame.time;
return false;
}
if (frame.time - starTime < timeOut){
return false;
}
starTime = frame.time;
timeOut = 0;
if (Math.abs(distX) < 5 && Math.abs(distY) < 5) {
switch (arr[i]){
case 'LM1': timeOut = 5000; break;
case 'LM4': timeOut = 5000; break;
case 'LM13': timeOut = 5000; break;
case 'CP7': timeOut = 76000; break;
default: break;
}
// state.isBeginning = arr[i] == 'LM13';
i++;
if (i >= arr.length) i = 0;
let next = advancedPointObj[arr[i]];
const distance = Math.sqrt(
Math.pow(next.pos.x* mapCanvas.widthScale - now.pos.x* mapCanvas.widthScale, 2) +
Math.pow(next.pos.y* mapCanvas.heightScale - now.pos.y* mapCanvas.heightScale, 2)
);
const time = distance / 105;
stepX = (next.pos.x * mapCanvas.widthScale - now.pos.x * mapCanvas.widthScale) / time;
stepY = (next.pos.y * mapCanvas.heightScale - now.pos.y * mapCanvas.heightScale) / time;
// console.log(2333, stepX, stepY, distance);
}
// console.log(9999, kImage.getAttr('x'), now.pos.x * mapCanvas.widthScale , kImage.getAttr('y'), now.pos.y* mapCanvas.heightScale)
kImage.move({x: stepX * timeDiff, y: stepY * timeDiff});
}, mapCanvas.layer);
//
anim.start();
}
// 线 线
for (let i = 0; i < advancedCurveList.length; i += 2) {
const list = advancedCurveList[i];
const color = list?.enable ? '#c5b8af' : '#fff';
// mapCanvas.tableData[1].Interference.push({ name: list.instanceName, type: 'bezier', i: i / 2 });
let arr = [];
arr[i] = {};
const startPos = { x: (list.startPos.pos.x+offsetX) * mapCanvas.widthScale, y: (list.startPos.pos.y+offsetY) * mapCanvas.heightScale };
const endPos = { x: (list.endPos.pos.x+offsetX) * mapCanvas.widthScale, y: (list.endPos.pos.y+offsetY) * mapCanvas.heightScale };
switch (list.className) {
case 'BezierPath':
let control1 = { x: (list.controlPos1?.x+offsetX) * mapCanvas.widthScale, y: (list.controlPos1.y+offsetY) * mapCanvas.heightScale };
let control2 = { x: (list.controlPos2?.x+offsetX) * mapCanvas.widthScale, y: (list.controlPos2.y+offsetY) * mapCanvas.heightScale };
arr[i].control1 = buildAnchor(control1.x, control1.y, 1, i);
arr[i].control2 = buildAnchor(control2.x, control2.y, 2, i);
mapCanvas.anchorPoints.push({ startPos, control1, control2, endPos, instanceName: list.instanceName });
/* 绘制贝塞尔控制点 */
const bezierLine = new Konva.Shape({
stroke: color,
strokeWidth: mapCanvas.widthScale < 50 ? 0.5 : 0.5,
perfectDrawEnabled: false, //
name: list.instanceName,
draggable: false,
dash: [7, 1, 0.001, 1],
sceneFunc: (ctx, shape) => {
ctx.globalCompositeOperation = 'destination-over'; //
ctx.beginPath();
ctx.moveTo(startPos.x, startPos.y);
ctx.bezierCurveTo(arr[i].control1.x(), arr[i].control1.y(), arr[i].control2.x(), arr[i].control2.y(), endPos.x, endPos.y);
ctx.fillStrokeShape(shape);
},
}) as any;
bezierLine.startPos = startPos;
bezierLine.endPos = endPos;
mapCanvas.layer.add(bezierLine);
//mapCanvas.layer.add(bezierLine, updateDottedLines);//线线
break;
case 'StraightPath':
// 线
const line = new Konva.Line({
points: [startPos.x, startPos.y, endPos.x, endPos.y],
stroke: color,
strokeWidth: mapCanvas.widthScale < 50 ? 1 : 0.5,
perfectDrawEnabled: false,
name: list.instanceName,
draggable: false,
listening: false,
});
mapCanvas.layer.add(line);
break;
}
}
}
const initMap = () => { const initMap = () => {
state.loading = true; state.loading = true;
// this.mapData = await this.getMapInfos(); // this.mapData = await this.getMapInfos();
@ -469,14 +879,16 @@ const initMap = () => {
let xMax = parseFloat(Math.abs(header.maxPos.x).toFixed(3)); let xMax = parseFloat(Math.abs(header.maxPos.x).toFixed(3));
let yMax = parseFloat(Math.abs(header.maxPos.y).toFixed(3)); let yMax = parseFloat(Math.abs(header.maxPos.y).toFixed(3));
const Xlength = xMin + xMax; const Xlength = xMin + xMax;
const Ylength = yMin + yMax; const Ylength = yMin + yMax + 1;
mapCanvas.widthScale = Number(map.offsetWidth / Xlength); mapCanvas.widthScale = Number(map.offsetWidth / Xlength);
mapCanvas.heightScale = Number(map.offsetHeight / Ylength); mapCanvas.heightScale = Number(map.offsetHeight / Ylength);
mapCanvas.width = map.offsetWidth;
mapCanvas.height = map.offsetHeight;
console.log('scale', mapCanvas.widthScale, mapCanvas.heightScale)
mapCanvas.stage = new Konva.Stage({ mapCanvas.stage = new Konva.Stage({
container: '#container', container: '#container',
width: map.offsetWidth, width: map.offsetWidth,
height: map.offsetHeight - 70, height: map.offsetHeight,
x: xMin * mapCanvas.widthScale, x: xMin * mapCanvas.widthScale,
y: yMax * mapCanvas.heightScale, y: yMax * mapCanvas.heightScale,
scaleY: -1, scaleY: -1,
@ -525,6 +937,7 @@ const initMap = () => {
setTimeout(() => { setTimeout(() => {
draw(); draw();
drawAccess();
state.loading = false; state.loading = false;
}, 1200); }, 1200);
}; };
@ -547,26 +960,34 @@ const resetMap = () => {
mapCanvas.stage.add(mapCanvas.layer); mapCanvas.stage.add(mapCanvas.layer);
setTimeout(() => { setTimeout(() => {
drawAccess();
draw(); draw();
state.loading = false; state.loading = false;
}, 1200); }, 1200);
}; };
</script> </script>
<style>
</style>
<style scoped lang="scss"> <style scoped lang="scss">
.full-table { .full-table {
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #000; //background-color: #111;
background-image: linear-gradient(to right, #222 1px, transparent 1px), background-image: linear-gradient(to right, #333 1px, transparent 1px),
linear-gradient(to bottom, #222 1px, transparent 1px); linear-gradient(to bottom, #333 1px, transparent 1px);
//background: linear-gradient(
// 45deg,
// rgba(153, 153, 153, .5) 0, rgba(153, 153, 153, .5) 25%, transparent 25%, transparent 50%,
// rgba(153, 153, 153, .5) 50%, rgba(153, 153, 153, .5) 75%, transparent 75%, transparent
//);
background-size: 20px 20px; /* 网格的大小,根据需要调整 */ background-size: 20px 20px; /* 网格的大小,根据需要调整 */
overflow: hidden; overflow: hidden;
z-index: 99; z-index: 99;
border: 1px solid #666; border: 1px solid #666;
border-radius: 15px; //border-radius: 15px;
} }
} }
</style> </style>

1
src/views/system/mapManagement/map/accessAGV.json

File diff suppressed because one or more lines are too long

2
src/views/system/mapManagement/map/lab0522xiezuo(1).json

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save