Compare commits
28 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 peterlu14
|
c960a8228c | ||
|
peterlu14
|
6c8583e139 | ||
|
peterlu14
|
f3817694cf | ||
|
peterlu14
|
73eced5f52 | ||
|
peterlu14
|
5453928bc1 | ||
|
peterlu14
|
814cfa8b86 | ||
|
peterlu14
|
0dc8cc4344 | ||
|
peterlu14
|
9358ad7ffa | ||
|
peterlu14
|
95203486e2 | ||
|
peterlu14
|
164a658870 | ||
|
peterlu14
|
d4c71fd4f9 | ||
|
peterlu14
|
4b60975782 | ||
|
peterlu14
|
d1b8683387 | ||
|
peterlu14
|
fd4a677173 | ||
|
peterlu14
|
6f4d96fb17 | ||
|
peterlu14
|
3ad822bde1 | ||
|
peterlu14
|
2b2dd50f41 | ||
|
peterlu14
|
ca57978763 | ||
|
peterlu14
|
6c41341392 | ||
|
peterlu14
|
4a5f07da18 | ||
|
peterlu14
|
17492ccc98 | ||
|
peterlu14
|
e5603cd80e | ||
|
peterlu14
|
99898dc862 | ||
|
peterlu14
|
66bdf13955 | ||
|
peterlu14
|
89ffad6fbe | ||
|
peterlu14
|
079ba2023d | ||
|
peterlu14
|
9158697bdc | ||
|
peterlu14
|
0b20104133 |
Generated
+43
-9
@@ -17021,13 +17021,29 @@
|
||||
"integrity": "sha512-VPNCOTZK6WZy73lcWc+R7IW1uaBFEO3/Csrs5CzWVOdvE30V8Y1+BE/BtTlcEmeDGx0eqdE7bSCg55Jj37PMJg=="
|
||||
},
|
||||
"v-tooltip": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.0.3.tgz",
|
||||
"integrity": "sha512-KZZY3s+dcijzZmV2qoDH4rYmjMZ9YKGBVoUznZKQX0e3c2GjpJm3Sldzz8HHH2Ud87JqhZPB4+4gyKZ6m98cKQ==",
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.1.3.tgz",
|
||||
"integrity": "sha512-xXngyxLQTOx/yUEy50thb8te7Qo4XU6h4LZB6cvEfVd9mnysUxLEoYwGWDdqR+l69liKsy3IPkdYff3J1gAJ5w==",
|
||||
"requires": {
|
||||
"lodash": "^4.17.15",
|
||||
"popper.js": "^1.16.0",
|
||||
"vue-resize": "^0.4.5"
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"lodash": "^4.17.21",
|
||||
"popper.js": "^1.16.1",
|
||||
"vue-resize": "^1.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.20.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.1.tgz",
|
||||
"integrity": "sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.10"
|
||||
}
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.13.11",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
|
||||
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"v8-compile-cache": {
|
||||
@@ -17327,9 +17343,27 @@
|
||||
}
|
||||
},
|
||||
"vue-resize": {
|
||||
"version": "0.4.5",
|
||||
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
|
||||
"integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg=="
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
|
||||
"integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.13.10"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.20.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.1.tgz",
|
||||
"integrity": "sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.10"
|
||||
}
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.13.11",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
|
||||
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "3.3.4",
|
||||
|
||||
+1
-1
@@ -46,7 +46,7 @@
|
||||
"regenerator-runtime": "^0.13.3",
|
||||
"register-service-worker": "^1.6.2",
|
||||
"streamsaver": "^2.0.5",
|
||||
"v-tooltip": "^2.0.2",
|
||||
"v-tooltip": "^2.1.3",
|
||||
"vee-validate": "^2.2.13",
|
||||
"vue": "^2.6.10",
|
||||
"vue-axios": "^3.2.0",
|
||||
|
||||
@@ -33,6 +33,8 @@ import localforage from 'localforage'
|
||||
import SlideOut from '@hyjiacan/vue-slideout'
|
||||
import '@hyjiacan/vue-slideout/lib/slideout.css'
|
||||
|
||||
import VTooltip from 'v-tooltip'
|
||||
|
||||
import '../metrics'
|
||||
import '../registerServiceWorker'
|
||||
|
||||
@@ -108,6 +110,8 @@ Vue.use(SlideOut, {
|
||||
// set default props here
|
||||
})
|
||||
|
||||
Vue.use(VTooltip)
|
||||
|
||||
Vue.prototype.API = api
|
||||
Vue.prototype.GLOBAL = global_
|
||||
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="#FFFFFF" d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>
|
||||
|
After Width: | Height: | Size: 477 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.3334 1.83337H9.16671C8.15562 1.83337 7.33337 2.65562 7.33337 3.66671V7.33337H3.66671C2.65562 7.33337 1.83337 8.15562 1.83337 9.16671V18.3334C1.83337 19.3445 2.65562 20.1667 3.66671 20.1667H12.8334C13.8445 20.1667 14.6667 19.3445 14.6667 18.3334V14.6667H18.3334C19.3445 14.6667 20.1667 13.8445 20.1667 12.8334V3.66671C20.1667 2.65562 19.3445 1.83337 18.3334 1.83337ZM3.66671 18.3334V9.16671H12.8334L12.8352 18.3334H3.66671ZM18.3334 12.8334H14.6667V9.16671C14.6667 8.15562 13.8445 7.33337 12.8334 7.33337H9.16671V3.66671H18.3334V12.8334Z" fill="#B8C3CC"/>
|
||||
<path d="M5.5 11H11V12.8333H5.5V11ZM5.5 14.6667H11V16.5H5.5V14.6667Z" fill="#B8C3CC"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 757 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M23.3333 2.33325H11.6666C10.3798 2.33325 9.33331 3.37975 9.33331 4.66659V9.33325H4.66665C3.37981 9.33325 2.33331 10.3798 2.33331 11.6666V23.3333C2.33331 24.6201 3.37981 25.6666 4.66665 25.6666H16.3333C17.6201 25.6666 18.6666 24.6201 18.6666 23.3333V18.6666H23.3333C24.6201 18.6666 25.6666 17.6201 25.6666 16.3333V4.66659C25.6666 3.37975 24.6201 2.33325 23.3333 2.33325ZM4.66665 23.3333V11.6666H16.3333L16.3356 23.3333H4.66665ZM23.3333 16.3333H18.6666V11.6666C18.6666 10.3798 17.6201 9.33325 16.3333 9.33325H11.6666V4.66659H23.3333V16.3333Z" fill="white"/>
|
||||
<path d="M7 14H14V16.3333H7V14ZM7 18.6667H14V21H7V18.6667Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 743 B |
|
Before Width: | Height: | Size: 710 B After Width: | Height: | Size: 710 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.2132 12.6274L6.97054 8.38479L2.7279 12.6274L1.31369 11.2132L5.55633 6.97058L1.31369 2.72794L2.7279 1.31373L6.97054 5.55637L11.2132 1.31373L12.6274 2.72794L8.38475 6.97058L12.6274 11.2132L11.2132 12.6274Z" fill="#B8C3CC" stroke="#B8C3CC" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 379 B |
|
Before Width: | Height: | Size: 536 B After Width: | Height: | Size: 536 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="14" height="14" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 18C2.45 18 1.97933 17.8043 1.588 17.413C1.196 17.021 1 16.55 1 16V3H0V1H5V0H11V1H16V3H15V16C15 16.55 14.8043 17.021 14.413 17.413C14.021 17.8043 13.55 18 13 18H3ZM13 3H3V16H13V3ZM5 14H7V5H5V14ZM9 14H11V5H9V14Z" fill="#FF6C63"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 343 B |
@@ -0,0 +1,8 @@
|
||||
<svg width="36" height="38" viewBox="0 0 36 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="mask0_3_20" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="38">
|
||||
<rect width="36" height="38" fill="#D9D9D9"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_3_20)">
|
||||
<path d="M25.737 18.6561C25.5543 18.849 25.5543 19.151 25.737 19.3439L30.8113 24.7L29.4 26.1897L22.5888 19L29.4 11.8103L30.8113 13.3L25.737 18.6561ZM5 28V25.8333H23.5V28H5ZM5 20.0833V17.9167H19V20.0833H5ZM5 12.1667V10H23.5V12.1667H5Z" fill="#768B9B" stroke="#768B9B" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 592 B |
|
Before Width: | Height: | Size: 233 B After Width: | Height: | Size: 233 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.75012 18.7498V11.2498H1.25012V8.74976H8.75012V1.24976H11.2501V8.74976H18.7501V11.2498H11.2501V18.7498H8.75012Z" fill="white" stroke="white" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 281 B |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="25" height="22" viewBox="0 0 25 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.7246 13.3226L23.2481 20.2889L22.872 20.6372L15.2354 13.5662L14.627 13.0029L13.9608 13.4964C13.3939 13.9164 12.7313 14.257 11.9636 14.5122C11.2143 14.7612 10.4084 14.8889 9.54002 14.8889C7.37746 14.8889 5.59555 14.2043 4.13159 12.8488C2.66996 11.4954 1.96002 9.88006 1.96002 7.94444C1.96002 6.00883 2.66996 4.39346 4.13159 3.04009C5.59555 1.68457 7.37746 1 9.54002 1C11.7026 1 13.485 1.68458 14.95 3.04027C16.4105 4.39351 17.12 6.00882 17.12 7.94444C17.12 8.7236 16.9867 9.44582 16.7256 10.1191C16.4567 10.8127 16.0964 11.4153 15.6473 11.9351L15.0157 12.6662L15.7246 13.3226ZM14.4273 12.5749L14.4279 12.5744C15.7797 11.3218 16.48 9.76006 16.48 7.94444C16.48 6.12883 15.7797 4.56711 14.4279 3.3145L14.4273 3.31398C13.0775 2.06509 11.4285 1.44444 9.54002 1.44444C7.65159 1.44444 6.00256 2.06509 4.65273 3.31398L4.65217 3.3145C3.30039 4.56711 2.60002 6.12883 2.60002 7.94444C2.60002 9.76006 3.30039 11.3218 4.65217 12.5744L4.65273 12.5749C6.00256 13.8238 7.65158 14.4444 9.54002 14.4444C11.4285 14.4444 13.0775 13.8238 14.4273 12.5749Z" fill="#2C4053" stroke="#B8C3CC" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 172 B After Width: | Height: | Size: 172 B |
@@ -4,34 +4,25 @@
|
||||
<template slot="header">
|
||||
<div class="row">
|
||||
<div class="flex d-flex xs5 sm5 lg5 xl5">
|
||||
<va-icon name="fa fa-bluetooth-b" color="primary"/>
|
||||
<h5 class="mb-0">PROJECTS</h5>
|
||||
<p class="project-view-header">PROJECTS</p>
|
||||
</div>
|
||||
<div class="flex xs7 sm7 lg7 xl7" style="text-align: right;">
|
||||
<!-- <va-button v-if="projectConfigList.length !== 0" class="ma-0 circle-button" @click="closePanel"> -->
|
||||
<va-icon v-if="projectConfigList.length !== 0" @click.native="closePanel"
|
||||
name="fa fa-times"
|
||||
color="black"
|
||||
/>
|
||||
<!-- </va-button> -->
|
||||
<img class="img-vertical-center" src="@/assets/img/project/menu_close.svg" @click="closePanel">
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="flex d-flex xl5 lg5 sm5 xs5 ma-0">
|
||||
<va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
|
||||
<h5 class="mb-0">PROJECTS</h5>
|
||||
</div>
|
||||
<div class="flex d-flex xl7 lg7 sm7 xs7 ma-0" style="text-align: right;">
|
||||
<va-button v-if="projectConfigList.length !== 0" class="pa-0 ma-0 circle-button" small color="dark" @click="closePanel">
|
||||
<va-icon
|
||||
name="fa fa-times"
|
||||
color="white"
|
||||
/>
|
||||
</va-button>
|
||||
</div> -->
|
||||
</template>
|
||||
<div class="flex d-flex m12 xs12 md12 xl12">
|
||||
<div>
|
||||
<va-button @click="createProject({ api: API })" icon="fa fa-plus"></va-button>
|
||||
<div class="input-icons input-style flex sm12 xs12 md7 xl7 pa-0">
|
||||
<img class="icon" src="@/assets/img/project/search.svg">
|
||||
<input class="input-field" type="text" v-model="filterText">
|
||||
</div>
|
||||
<div class="ml-1 pa-0" style="text-align: right;">
|
||||
<button class="project-copy-btn" @click="copyProject({ project: getSelectProject, index: index, api: API })">
|
||||
<img class="img-vertical-center" src="@/assets/img/project/copy-alt.svg">
|
||||
</button>
|
||||
<button class="project-copy-btn ml-1" @click="createProject({ api: API })">
|
||||
<img class="img-vertical-center" src="@/assets/img/project/plus.svg">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -42,15 +33,15 @@
|
||||
</va-tabs>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<project-manager-list v-if='tabValue == 0'/>
|
||||
<running-project-manager-list v-if='tabValue == 1'/>
|
||||
<project-manager-list v-if='tabValue == 0' :filterText="filterText"/>
|
||||
<running-project-manager-list v-if='tabValue == 1' :filterText="filterText"/>
|
||||
</div>
|
||||
</va-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import { mapFields } from 'vuex-map-fields'
|
||||
import types from '@/store/modules/project/types'
|
||||
import ProjectManagerList from '@/components/project/manager/ProjectManagerList'
|
||||
@@ -63,6 +54,10 @@ export default {
|
||||
RunningProjectManagerList,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('project', [
|
||||
'getSelectProject',
|
||||
]),
|
||||
|
||||
...mapFields('project', [
|
||||
'lockMode',
|
||||
'projectList',
|
||||
@@ -75,6 +70,7 @@ export default {
|
||||
return {
|
||||
tabValue: 0,
|
||||
tabTitles: ['CONFIG', 'RUNNING'],
|
||||
filterText: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -86,6 +82,9 @@ export default {
|
||||
...mapActions('project',
|
||||
[
|
||||
types.project.create,
|
||||
types.project.copy,
|
||||
types.project.select,
|
||||
types.project.delete,
|
||||
],
|
||||
),
|
||||
closePanel: function () {
|
||||
@@ -100,4 +99,39 @@ export default {
|
||||
|
||||
<style>
|
||||
|
||||
.input-icons img {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.input-icons {
|
||||
width: 67%;
|
||||
|
||||
/* margin-bottom: 10px; */
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: grey;
|
||||
min-width: 40px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
width: 100%;
|
||||
padding: 9px;
|
||||
text-align: right;
|
||||
background: #f1f1f1;
|
||||
border: none;
|
||||
border-radius: 6px 6px 0 0;
|
||||
border-bottom: 1.5px solid #758b9a;
|
||||
}
|
||||
|
||||
.project-copy-btn {
|
||||
width: 50px;
|
||||
height: 38px;
|
||||
background: #858dd6;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="flex xs12 lg12 md12">
|
||||
<va-item class="mb-1" v-for="(project, index) in projectConfigList" :key="index" @click="selectProject({index: index})" clickable>
|
||||
<va-item :class="(selectProjectIndex === index) ? 'project-list-text project-list-focus': 'project-list-text project-list'" v-for="(project, index) in configList" :key="index" @click="select(index)">
|
||||
<va-item-section @dblclick.native="switchEdit('name', index)">
|
||||
<div v-if="projectTable.name == index">
|
||||
<va-input
|
||||
:ref="'input_ref'"
|
||||
v-model="project.name"
|
||||
style="width: 100px;"
|
||||
style="min-width: 100px;"
|
||||
@blur="switchEdit('name', -1, project)"
|
||||
@keyup.enter="switchEdit('name', -1, project)"
|
||||
/>
|
||||
@@ -14,13 +15,11 @@
|
||||
<div v-else>
|
||||
{{ project.name }}
|
||||
</div>
|
||||
<!-- <va-item-label>
|
||||
{{ project.name }}
|
||||
</va-item-label> -->
|
||||
</va-item-section>
|
||||
<va-item-section side>
|
||||
<va-icon class="fa fa-copy mr-2" color="bloack" @click.native.stop="copyProject({ project: project, index: index, api: API })"></va-icon>
|
||||
<va-icon class="fa fa-close" color="danger" @click.native.stop="deleteProject({ project: project, index: index, api: API })"></va-icon>
|
||||
<img class="mr-2" src="@/assets/img/project/copy-alt-grey.svg" @click="copyProject({ project: project, index: index, api: API })">
|
||||
<img v-if="selectDeleteIndex !== index" class="mr-2" src="@/assets/img/project/cross.svg" @click.stop="confirmDelete($event, index)">
|
||||
<img v-else class="mr-2" src="@/assets/img/project/delete14_14.svg" @click.stop="_deleteProject(project, index)">
|
||||
</va-item-section>
|
||||
</va-item>
|
||||
</div>
|
||||
@@ -33,9 +32,21 @@ import types from '@/store/modules/project/types'
|
||||
|
||||
export default {
|
||||
name: 'project-manager-list',
|
||||
props: {
|
||||
filterText: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
configList () {
|
||||
if (this.filterText === '') return this.projectConfigList
|
||||
return this.projectConfigList.filter(ele => ele.name.includes(this.filterText))
|
||||
},
|
||||
|
||||
...mapFields('project', [
|
||||
'projectConfigList',
|
||||
'projectSelectIndex',
|
||||
]),
|
||||
},
|
||||
data () {
|
||||
@@ -43,15 +54,47 @@ export default {
|
||||
projectTable: {
|
||||
name: -1,
|
||||
},
|
||||
selectProjectIndex: -1,
|
||||
selectDeleteIndex: -1,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reset: function () {
|
||||
this.selectProjectIndex = -1
|
||||
this.selectDeleteIndex = -1
|
||||
},
|
||||
resetDelete: function (e) {
|
||||
if (e.target.classList.contains('clicked')) {
|
||||
e.target.classList.remove('clicked')
|
||||
return
|
||||
}
|
||||
this.selectDeleteIndex = -1
|
||||
},
|
||||
confirmDelete: function (e, index) {
|
||||
e.target.classList.add('clicked')
|
||||
this.selectProjectIndex = index
|
||||
this.selectDeleteIndex = index
|
||||
window.addEventListener('mousedown', this.resetDelete, { once: true })
|
||||
},
|
||||
_deleteProject: async function (project, index) {
|
||||
this.reset()
|
||||
await this.deleteProject({ project: project, index: index, api: this.API })
|
||||
},
|
||||
select: function (index) {
|
||||
this.selectProjectIndex = index
|
||||
this.selectDeleteIndex = -1
|
||||
this.selectProject({ index: index })
|
||||
},
|
||||
|
||||
switchEdit: function (tag, index, project) {
|
||||
if (this.projectTable[tag] >= 0) {
|
||||
this.projectTable[tag] = -1
|
||||
project && this.API.project.update(project.id, { name: project.name })
|
||||
} else {
|
||||
this.projectTable[tag] = index
|
||||
this.$nextTick(() => {
|
||||
this.$refs.input_ref[0].$refs.input.focus()
|
||||
})
|
||||
}
|
||||
},
|
||||
...mapActions('project',
|
||||
@@ -66,3 +109,32 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.project-list-text {
|
||||
// font
|
||||
font-family: 'Inter-Regular';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #768b9b;
|
||||
}
|
||||
|
||||
.project-list-focus {
|
||||
/* Rectangle 5 */
|
||||
|
||||
background: #ebedff;
|
||||
border: 1px solid #dbdcf0;
|
||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.project-list-focus:hover {
|
||||
opacity: 0.8;
|
||||
background: #ebedff;
|
||||
}
|
||||
|
||||
.project-list:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<project-task-config-device v-if="taskViewPanel.type===1"></project-task-config-device>
|
||||
<project-task-config-condition v-if="taskViewPanel.type===2" :actionType="'start'"></project-task-config-condition>
|
||||
<project-task-config-condition v-if="taskViewPanel.type===3" :actionType="'stop'"></project-task-config-condition>
|
||||
<project-task-config-parameter v-if="taskViewPanel.type===4"></project-task-config-parameter>
|
||||
<project-task-config-parameter v-show="taskViewPanel.type===4"></project-task-config-parameter>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<device-parameter-recording
|
||||
:ref="'device_parameter_ref'"
|
||||
:parameter="parameter"
|
||||
:library="device.library"
|
||||
:library="library"
|
||||
:place="'scheduler'"
|
||||
@setParameter="setParameter"
|
||||
@setParameterWithDebounce="setParameterWithDebounce"
|
||||
@@ -27,6 +27,11 @@ export default {
|
||||
DeviceParameterRecording,
|
||||
},
|
||||
computed: {
|
||||
library () {
|
||||
if (this.device === null || this.device === undefined) return null
|
||||
return this.device.library
|
||||
},
|
||||
|
||||
...mapGetters('project', [
|
||||
types.task.getSelect,
|
||||
types.task.getParameterSet,
|
||||
@@ -37,6 +42,7 @@ export default {
|
||||
'taskViewPanel',
|
||||
'taskSelectKey',
|
||||
'deviceSelectKey',
|
||||
'projectSelectIndex',
|
||||
]),
|
||||
},
|
||||
data () {
|
||||
@@ -79,6 +85,7 @@ export default {
|
||||
resetParameter: function (mode) {
|
||||
// get Device
|
||||
this.device = this.getDeviceProject(this.deviceSelectKey)
|
||||
if (this.device === undefined) return
|
||||
// get Config
|
||||
if (typeof this.device.library === 'string') { // string
|
||||
this.config = configTable.getConfig(this.device.library)
|
||||
@@ -112,13 +119,12 @@ export default {
|
||||
),
|
||||
},
|
||||
mounted () {
|
||||
// init parameter
|
||||
this.resetParameter()
|
||||
},
|
||||
watch: {
|
||||
// refresh parameter when click different task's parameter
|
||||
taskSelectKey: {
|
||||
handler: function () {
|
||||
this.device = null
|
||||
this.parameter = {}
|
||||
this.parameterUUID = ''
|
||||
this.resetParameter()
|
||||
@@ -126,6 +132,15 @@ export default {
|
||||
},
|
||||
deviceSelectKey: {
|
||||
handler: function () {
|
||||
this.device = null
|
||||
this.parameter = {}
|
||||
this.parameterUUID = ''
|
||||
this.resetParameter()
|
||||
},
|
||||
},
|
||||
projectSelectIndex: {
|
||||
handler: function () {
|
||||
this.device = null
|
||||
this.parameter = {}
|
||||
this.parameterUUID = ''
|
||||
this.resetParameter()
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <pre>{{ getSelectProject }} </pre> -->
|
||||
<va-card style="height: 88vh; overflow: auto; display: block;">
|
||||
<va-card style="height: 88vh; overflow: auto; display: block;" @mousemove.native="mousemove">
|
||||
<div id="project-view-show-btn" v-if="!projectManagerPanel.show" @click="showProjectManagerPanel">
|
||||
<img id="project-view-show-btn-img" src="@/assets/img/project/arrow-right.svg">
|
||||
</div>
|
||||
<template slot="header">
|
||||
<p class="project-view-header">{{ getSelectProject ? getSelectProject.name : '' }}</p>
|
||||
</template>
|
||||
@@ -14,13 +17,13 @@
|
||||
<div align="right" v-if="lockMode === false">
|
||||
<button class="project-start-btn" @click="start">
|
||||
<div>
|
||||
<img src='@/assets/img/play.svg'>
|
||||
<img src='@/assets/img/project/play.svg' alt="start">
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div align="right" v-if="lockMode === true">
|
||||
<button class="project-stop-btn" @click="stop">
|
||||
<img src='@/assets/img/stop.svg'>
|
||||
<img src='@/assets/img/project/stop.svg' alt="stop">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -50,6 +53,7 @@ export default {
|
||||
'deviceConnectList',
|
||||
'projectSelectIndex',
|
||||
'projectLibrary',
|
||||
'projectManagerPanel',
|
||||
]),
|
||||
},
|
||||
data () {
|
||||
@@ -57,6 +61,37 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showProjectManagerPanel: function () {
|
||||
this.projectManagerPanel.show = true
|
||||
},
|
||||
mousemove: function (e) {
|
||||
// define constant
|
||||
const DETECT_X_MAX = 50
|
||||
const DETECT_X_MIN = 0
|
||||
// get element
|
||||
const element = document.getElementById('project-view-show-btn')
|
||||
if (!element) return
|
||||
|
||||
let x = e.offsetX
|
||||
// console.log('e', e, e.srcElement.className, e.srcElement.id)
|
||||
// if mouse on project
|
||||
if (e.srcElement.id === 'project-view-show-btn' || e.srcElement.id === 'project-view-show-btn-img') {
|
||||
element.style.opacity = 0.7
|
||||
element.style.transform = 'rotate(90deg) translate(40vh, 25px)'
|
||||
return
|
||||
}
|
||||
if (e.srcElement.className !== 'va-card__body' && e.srcElement.className !== 'va-card') {
|
||||
element.style.transform = 'rotate(90deg) translate(40vh, 75px)'
|
||||
return
|
||||
}
|
||||
if (x >= DETECT_X_MAX) x = DETECT_X_MAX
|
||||
if (x < DETECT_X_MIN) x = DETECT_X_MIN
|
||||
|
||||
const offsetPercentage = Math.round(((DETECT_X_MAX - x) / DETECT_X_MAX) * 4) / 4
|
||||
const newOffset = 75 - offsetPercentage * 50
|
||||
element.style.opacity = offsetPercentage * 0.7
|
||||
element.style.transform = 'rotate(90deg) translate(40vh, ' + String(newOffset) + 'px)'
|
||||
},
|
||||
start: function () {
|
||||
this.$emit('start_project', this.getSelectProject)
|
||||
},
|
||||
@@ -83,8 +118,28 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
#project-view-show-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
border-radius: 100px 100px 0 0;
|
||||
background-color: #495057;
|
||||
transform: rotate(90deg) translate(40vh, 75px);
|
||||
transition: transform 0.1s linear;
|
||||
}
|
||||
|
||||
#project-view-show-btn-img {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: 30px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.project-view-header {
|
||||
margin: 1rem 0 2rem 0;
|
||||
margin: 0.3rem 0 2rem 0;
|
||||
font-family: 'Inter-ExtraBold';
|
||||
// font-style: normal;
|
||||
// font-weight: 800;
|
||||
|
||||
@@ -1,29 +1,31 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="flex d-flex">
|
||||
<!-- <switch-project/> -->
|
||||
<add-task/>
|
||||
<!-- <add-device @showDeviceModal="showDeviceModal"/> -->
|
||||
<div class="flex d-flex sm12 xs12 md6 xl4 px-0">
|
||||
<add-task/>
|
||||
<div>
|
||||
<button class="add-cycle-btn" @click="showCycleModal">
|
||||
<div class="add-cycle-text">
|
||||
<p>Add Cycle</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="copy-project-btn" @click="copyTask({ project: getSelectProject, index: projectTableSelectIndex})">
|
||||
<img class="img-vertical-center" src="@/assets/img/copy.svg">
|
||||
<img class="img-vertical-center" src="@/assets/img/project/copy.svg">
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="copy-project-btn" @click="saveProject">
|
||||
<img class="img-vertical-center" src="@/assets/img/save.svg">
|
||||
<img class="img-vertical-center" src="@/assets/img/project/save.svg">
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="copy-project-btn" @click="deleteTask({ project: getSelectProject, index: projectTableSelectIndex})">
|
||||
<img class="img-vertical-center" src="@/assets/img/delete.svg">
|
||||
<img class="img-vertical-center" src="@/assets/img/project/delete.svg">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<project-device @showDeviceModal="showDeviceModal"></project-device>
|
||||
|
||||
<new-device-modal ref="device_modal_ref" @detect="detect"></new-device-modal>
|
||||
<cycle-modal ref="cycle_modal_ref" @createCycle="createCycle"></cycle-modal>
|
||||
</div>
|
||||
@@ -114,7 +116,7 @@ export default {
|
||||
font-family: 'Inter-Bold';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
|
||||
@@ -52,7 +52,7 @@ export default {
|
||||
font-family: 'Inter-Bold';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
|
||||
@@ -1,24 +1,43 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="flex d-flex project-device-header-text">
|
||||
<p>Devices</p>
|
||||
<div class="flex d-flex sm12 xs12 md12 xl12 pa-0" style="align-items: center; margin-left: 0.6rem; margin-top: -12px;">
|
||||
<!-- header -->
|
||||
<div class="flex sm3 xs3 md3 xl1 px-0 project-device-header-text">
|
||||
<p>Device</p>
|
||||
</div>
|
||||
<!-- create persudo devcie -->
|
||||
<div class="flex d-flex" v-if="showLibrary === true">
|
||||
<va-button small @click="clickShowDevice('EDC')">EDC</va-button>
|
||||
<va-button small @click="clickShowDevice('EIS')">EIS</va-button>
|
||||
<va-button small @click="cancelSelectDevice()">X</va-button>
|
||||
<div class="flex d-flex pa-0 sm12 xs12 md6 xl3">
|
||||
<div>
|
||||
<button class="pair-button" @click="clickShowDevice('EDC')">
|
||||
<span class="pair-button-text">EDC</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<button class="pair-button" @click="clickShowDevice('EIS')">
|
||||
<span class="pair-button-text">EIS</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<button class="pair-button" @click="cancelSelectDevice()">
|
||||
<span class="pair-button-text">X</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex d-flex" style="align-items: center;" v-if="showDevice === false && showLibrary === false">
|
||||
<!-- device list -->
|
||||
<div class="flex d-flex" v-if="showDevice === false && showLibrary === false">
|
||||
<draggable class="d-flex" :list="deviceListInOrder" :move="handleMove" @end="handleDragEnd">
|
||||
<!-- devices -->
|
||||
<div class="mr-2" v-for="(device, index) in deviceListInOrder" :key="index">
|
||||
<button :class="device[1].pairStatus === 1 ? 'pair-button mr-2' : 'not-pair-button mr-2'" @click="showDeviceModal(device[0], device[1])">
|
||||
<span class="pair-button-text">{{ getDeviceShowNameProject(device[0]) }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- append device -->
|
||||
<div v-if="deviceListInOrder.length < 4">
|
||||
<button class="add-button" icon="fa fa-plus" @click="clickShowLibrary"><span class="add-button-text">+</span></button>
|
||||
</div>
|
||||
</draggable>
|
||||
<div>
|
||||
<button class="add-button" icon="fa fa-plus" @click="clickShowLibrary"><span class="add-button-text">+</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -162,8 +181,8 @@ export default {
|
||||
.not-pair-button {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
background: #858dd6;
|
||||
border: 1px #ffffff dashed;
|
||||
background: #e0e0e0;
|
||||
border: 0;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
@@ -171,7 +190,7 @@ export default {
|
||||
font-family: 'Inter-Regular';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
@@ -179,14 +198,15 @@ export default {
|
||||
|
||||
.project-device-header-text {
|
||||
align-items: center;
|
||||
font-family: 'Inter-Regular';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
// font-family: 'Inter-Regular';
|
||||
// font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 29px;
|
||||
|
||||
/* identical to box height */
|
||||
color: #768b9b;
|
||||
color: rgb(52, 73, 94);
|
||||
// color: #768b9b;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
<template>
|
||||
<div class="markup-tables project-table flex d-flex sm12 xl12 md12 xs12 px-0 mx-0" id="scro" style="width: 100%; height: 55vh; overflow: auto;">
|
||||
<div class="markup-tables project-table flex d-flex sm12 xl12 md12 xs12 px-0 mx-0" id="scro" style="width: 100%; height: 55vh; overflow: auto; padding-top: 0;">
|
||||
<div class="table-wrapper" style="width: 100%;">
|
||||
<table class="va-table">
|
||||
<table class="va-table project-table-text">
|
||||
<thead>
|
||||
<tr>
|
||||
<th align="center" style="min-width: 50px;">order</th>
|
||||
<tr class="project-table-header">
|
||||
<th align="center" style="min-width: 50px; padding: 0;">order</th>
|
||||
<th align="center" style="min-width: 100px;">name</th>
|
||||
<th align="center" @click="openConfig(1)">device</th>
|
||||
<th align="center" style="min-width: 100px;">start</th>
|
||||
<th align="center" style="min-width: 100px;">stop</th>
|
||||
<th align="center" style="min-width: 100px;">parameter</th>
|
||||
<th v-if="lockMode" align="center">cycle</th>
|
||||
<th align="center"></th>
|
||||
<!-- <th v-if="lockMode" align="center">cycle</th> -->
|
||||
<th align="center" style="min-width: 50px;"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<!-- <tbody> -->
|
||||
<vuedraggable :disabled="lockMode === true" class="draggable" :list="getSelectProject.task" @end="rearrangeTask({ project: getSelectProject })" tag="tbody" animation="500">
|
||||
<vuedraggable :disabled="lockMode === true || inputMode === true" class="draggable" :list="getSelectProject.task" @end="rearrangeTask({ project: getSelectProject })" tag="tbody" animation="500">
|
||||
<template class="item" v-for="(task, taskIndex) in getSelectProject.task">
|
||||
<tr
|
||||
v-if="task.type === 'cycle'"
|
||||
@@ -72,8 +72,20 @@
|
||||
<td align="center">
|
||||
{{ taskIndex + 1 }}
|
||||
</td>
|
||||
<td align="center">
|
||||
{{ task.name }}
|
||||
<!-- name -->
|
||||
<td align="center" @dblclick="switchInput('name', taskIndex)">
|
||||
<div v-if="tableColumn.name == taskIndex && lockMode === false">
|
||||
<va-input
|
||||
:ref="'input_ref'"
|
||||
v-model="task.name"
|
||||
style="width: 100px;"
|
||||
@blur="switchInput('name', -1)"
|
||||
@keyup.enter="switchInput('name', -1)"
|
||||
/>
|
||||
</div>
|
||||
<div v-else align="center">
|
||||
{{ task.name }}
|
||||
</div>
|
||||
</td>
|
||||
<td align="center">
|
||||
<va-button :flat="true" @click="openConfig(1, taskIndex)" small>+</va-button>
|
||||
@@ -92,16 +104,18 @@
|
||||
v-else
|
||||
height="50px"
|
||||
:class="taskIndex === projectTableSelectIndex ? 'table-row-focus' : ''"
|
||||
v-for="(deviceUUID, index) in task.device"
|
||||
:key="String(taskIndex) + ' ' + String(deviceUUID)"
|
||||
:key="String(taskIndex)"
|
||||
@click="() => { projectTableSelectIndex = taskIndex }"
|
||||
>
|
||||
<td v-if="index === 0" :rowspan="task.device.length" align="center">
|
||||
<!-- order -->
|
||||
<td align="center">
|
||||
{{ taskIndex + 1 }}
|
||||
</td>
|
||||
<td v-if="index === 0" :rowspan="task.device.length" align="center" @dblclick="switchInput('name', taskIndex)">
|
||||
<!-- name -->
|
||||
<td align="center" @dblclick="switchInput('name', taskIndex)">
|
||||
<div v-if="tableColumn.name == taskIndex && lockMode === false">
|
||||
<va-input
|
||||
:ref="'input_ref'"
|
||||
v-model="task.name"
|
||||
style="width: 100px;"
|
||||
@blur="switchInput('name', -1)"
|
||||
@@ -120,16 +134,16 @@
|
||||
</va-button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<va-button :flat="true" @click="openConfig(1, taskIndex, deviceUUID)" small>
|
||||
<span>{{ getDeviceShowNameProject(deviceUUID)}}</span>
|
||||
</va-button>
|
||||
<div class="flex project-table-cell" v-for="(deviceUUID) in task.device" :key="deviceUUID" @click="openConfig(1, taskIndex, deviceUUID)">
|
||||
<p>{{ getDeviceShowNameProject(deviceUUID)}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<!-- device end -->
|
||||
<!-- start -->
|
||||
<td align="center">
|
||||
<div class="flex">
|
||||
<div v-if="Object.values(task.action).filter(ele => ele.type === 'start').length === 0">
|
||||
<div class="flex project-table-cell" v-for="(deviceUUID) in task.device" :key="deviceUUID">
|
||||
<div v-if="Object.values(task.action).filter(ele => ele.type === 'start' && ele.target === deviceUUID).length === 0">
|
||||
+
|
||||
</div>
|
||||
<div v-for="(action, actionKey) in task.action" :key="actionKey">
|
||||
@@ -140,9 +154,7 @@
|
||||
<div v-else v-for="conditionKey in action.condition" :key="conditionKey">
|
||||
<div v-if="action.type == 'start' && task.condition[conditionKey].type === 'previous_task_done'">
|
||||
<div v-if=" taskIndex === 0"> - </div>
|
||||
<!-- {{ task.condition[conditionKey].type }} {{ task.condition[conditionKey].value }} -->
|
||||
<div v-else> Follow {{ getSelectProject.task[taskIndex - 1].name }} </div>
|
||||
<!-- <va-icon class="fa fa-close" @click.native="delAction(task, actionKey, conditionKey)"/> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -151,9 +163,9 @@
|
||||
</td>
|
||||
<!-- start end -->
|
||||
<!-- stop -->
|
||||
<td align="center" @click="openConfig(3, taskIndex, deviceUUID)">
|
||||
<div class="flex">
|
||||
<div v-if="Object.values(task.action).filter(ele => ele.type === 'stop').length === 0">
|
||||
<td align="center">
|
||||
<div class="flex project-table-cell" v-for="(deviceUUID) in task.device" :key="deviceUUID" @click="openConfig(3, taskIndex, deviceUUID)">
|
||||
<div v-if="Object.values(task.action).filter(ele => ele.type === 'stop' && ele.target === deviceUUID).length === 0">
|
||||
+
|
||||
</div>
|
||||
<div v-for="(action, actionKey) in task.action" :key="actionKey">
|
||||
@@ -172,42 +184,53 @@
|
||||
</div>
|
||||
</td>
|
||||
<!-- stop end -->
|
||||
|
||||
<td align="center" @click="openConfig(4, taskIndex, deviceUUID)">
|
||||
<div v-if="Object.keys(task.parameter_set).length === 0">
|
||||
<p>
|
||||
+
|
||||
</p>
|
||||
</div>
|
||||
<div v-else class="flex d-flex">
|
||||
<div v-for="(parameterSet, parameterSetKey) in getParameterSetTask(taskIndex, deviceUUID)" :key="parameterSetKey">
|
||||
<div v-for="(parameter, parameterKey) in parameterSet" :key="parameterKey">
|
||||
<span v-if="parameterKey === 'MODE'">
|
||||
<td align="center">
|
||||
<div class="flex project-table-cell" v-for="(deviceUUID) in task.device" :key="deviceUUID" @click="openConfig(4, taskIndex, deviceUUID)">
|
||||
<div v-if="Object.values(task.parameter_set).filter(ele => ele.target === deviceUUID).length === 0" >
|
||||
<p>
|
||||
+
|
||||
</p>
|
||||
</div>
|
||||
<div style="height: auto;" v-for="(parameterSet, parameterSetKey) in getParameterSetTask(taskIndex, deviceUUID)" :key="parameterSetKey">
|
||||
<v-popover
|
||||
placement="right"
|
||||
trigger="hover"
|
||||
popoverBaseClass="tooltip popover test"
|
||||
:disabled="!Object.keys(parameterSet).filter(ele=>ele !== 'MODE' && ele !== 'target').length > 0"
|
||||
>
|
||||
<div class="tooltip-target">
|
||||
{{ parameterName('MODE', deviceUUID) }} : {{ parameterValue('MODE', parameterSet.MODE, deviceUUID) }}
|
||||
</div>
|
||||
<template slot="popover">
|
||||
<div>
|
||||
{{ parameterName(parameterKey, deviceUUID) }} : {{ parameterValue(parameterKey, parameter, deviceUUID) }}
|
||||
<div v-for="(parameter) in parameterShow(parameterSet.MODE, deviceUUID)" :key="parameter + parameterSet.MODE">
|
||||
<p>
|
||||
{{ parameterName(parameter, deviceUUID) }} : {{ parameterValue(parameter, parameterSet[parameter], deviceUUID) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</v-popover>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<!-- <td align="center" v-if="lockMode === false">
|
||||
<va-icon v-if="String(taskIndex) !== '0'" class="fa fa-toggle-up" @click.native="swapTask(taskIndex, 0)"/>
|
||||
<td align="center" v-if="lockMode === false">
|
||||
<!-- <va-icon v-if="String(taskIndex) !== '0'" class="fa fa-toggle-up" @click.native="swapTask(taskIndex, 0)"/>
|
||||
<va-icon v-if="parseInt(taskIndex) !== getSelectProject.task.length - 1" class="fa fa-toggle-down" @click.native="swapTask(taskIndex, 1)"/>
|
||||
<va-icon class="fa fa-copy ml-1" @click.native="() => copyTask({ project: getSelectProject, index: taskIndex})"></va-icon>
|
||||
<va-icon class="fa fa-close ml-1" @click.native="() => deleteTask({ project: getSelectProject, index: taskIndex})"></va-icon>
|
||||
</td> -->
|
||||
<td align="center" v-if="lockMode === true">
|
||||
<va-icon class="fa fa-copy ml-1" @click.native="() => copyTask({ project: getSelectProject, index: taskIndex})"></va-icon> -->
|
||||
<va-icon class="fa fa-close" color="#B8C3CC" @click.native="() => deleteTask({ project: getSelectProject, index: taskIndex})"></va-icon>
|
||||
</td>
|
||||
<!-- <td align="center" v-if="lockMode === true">
|
||||
<div v-if="task.cycle > 0 && task.status === 2 && task.cycle_count === 0">
|
||||
{{ task.cycle }}/{{ task.cycle }}
|
||||
</div>
|
||||
<div v-else-if="task.cycle > 0">
|
||||
{{ task.cycle_count }}/{{ task.cycle }}
|
||||
</div>
|
||||
</td>
|
||||
<td v-if="lockMode === true && Object.values(task.condition).findIndex(ele => ele.type == 'until_button_trigger') != -1 && task.status === 1">
|
||||
</td> -->
|
||||
<!-- <td v-if="lockMode === true && Object.values(task.condition).findIndex(ele => ele.type == 'until_button_trigger') != -1 && task.status === 1">
|
||||
<va-button icon="fa fa-play" @click="trigger_button(getSelectProject)" flat></va-button>
|
||||
<td/>
|
||||
<td/> -->
|
||||
<td align="center" v-if="lockMode === true">
|
||||
<!-- {{ task.status }} -->
|
||||
<fulfilling-bouncing-circle-spinner
|
||||
@@ -221,7 +244,10 @@
|
||||
</tr>
|
||||
</template>
|
||||
</vuedraggable>
|
||||
<!-- </tbody> -->
|
||||
<!-- </tbody> -->
|
||||
<tr class="table-row-add-task" v-if="lockMode === false">
|
||||
<td align="center" colspan="7" class="table-row-add-task-text" @click="createTask">+ task</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
@@ -280,6 +306,7 @@ export default {
|
||||
inputSaved: '',
|
||||
index: -1,
|
||||
futureIndex: -1,
|
||||
inputMode: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -368,9 +395,18 @@ export default {
|
||||
}))
|
||||
},
|
||||
switchInput: function (tag, index) {
|
||||
this.tableColumn[tag] >= 0
|
||||
? this.tableColumn[tag] = -1
|
||||
: this.tableColumn[tag] = index
|
||||
if (this.tableColumn[tag] === -1) {
|
||||
if (index !== -1) {
|
||||
this.inputMode = true
|
||||
this.tableColumn[tag] = index
|
||||
this.$nextTick(() => {
|
||||
this.$refs.input_ref[0].$refs.input.focus()
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.inputMode = false
|
||||
this.tableColumn[tag] = -1
|
||||
}
|
||||
},
|
||||
switchCycle: function (tag, index, projectID, task) {
|
||||
this.switchInput(tag, index)
|
||||
@@ -409,6 +445,12 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
parameterShow (mode, deviceKey) {
|
||||
const config = configTable.getConfig(this.getDeviceLibraryProject(deviceKey))
|
||||
if (config !== undefined && Object.keys(config) !== 0) {
|
||||
return config.MODE[mode].parameter
|
||||
}
|
||||
},
|
||||
parameterName (name, deviceKey) {
|
||||
const config = configTable.getConfig(this.getDeviceLibraryProject(deviceKey))
|
||||
if (config !== undefined && Object.keys(config) !== 0) {
|
||||
@@ -423,15 +465,16 @@ export default {
|
||||
},
|
||||
parameterValue (name, value, deviceKey) {
|
||||
const config = configTable.getConfig(this.getDeviceLibraryProject(deviceKey))
|
||||
const _value = (value === undefined) ? config[name].defaultValue : value
|
||||
if (config !== undefined && Object.keys(config) !== 0) {
|
||||
if (name === 'MODE') {
|
||||
return config.MODE[value].name
|
||||
return config.MODE[_value].name
|
||||
}
|
||||
if (config[name].type === 'number') {
|
||||
const scale = config[name].unit[config[name].defaultUnit]
|
||||
return `${config[name].outputReadabilityData(value, scale)} ${config[name].defaultUnit}`
|
||||
return `${config[name].outputReadabilityData(_value, scale)} ${config[name].defaultUnit}`
|
||||
} else if (config[name].type === 'array') {
|
||||
return `${config[name].outputReadabilityData(value)}`
|
||||
return `${config[name].outputReadabilityData(_value)}`
|
||||
} else if (config[name].type === 'none') {
|
||||
return ''
|
||||
}
|
||||
@@ -462,6 +505,7 @@ export default {
|
||||
return false // disable sort
|
||||
},
|
||||
...mapActions('project', [
|
||||
types.task.create,
|
||||
types.task.copy,
|
||||
types.task.delete,
|
||||
types.task.rearrange,
|
||||
@@ -501,22 +545,15 @@ export default {
|
||||
max-height: 100px;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
font-size: 1.1rem;
|
||||
// border: 1px solid #ffffff;
|
||||
}
|
||||
|
||||
td:hover {
|
||||
// background: #ebedff;
|
||||
opacity: 0.8;
|
||||
// border: 1px solid #dbdcf0;
|
||||
// box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
|
||||
// border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 0 0 0 0;
|
||||
margin: 0;
|
||||
// padding: 0 0 0;
|
||||
// margin: 0;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
}
|
||||
@@ -527,4 +564,164 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.table-row-add-task {
|
||||
height: 50px;
|
||||
background: #f4f4f4;
|
||||
border: 1px dashed #c7c7c7;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.table-row-add-task-text {
|
||||
font-family: 'Inter-Regular';
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
color: #c7c7c7;
|
||||
}
|
||||
|
||||
.project-table-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: white;
|
||||
font-family: 'Inter-Bold';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
color: #2c4053;
|
||||
}
|
||||
|
||||
.project-table-text {
|
||||
font-family: 'Inter-Regular';
|
||||
font-style: normal;
|
||||
// font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
color: #2c4053;
|
||||
}
|
||||
|
||||
.project-table-cell:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
display: block !important;
|
||||
z-index: 10000;
|
||||
|
||||
.tooltip-inner {
|
||||
// background: red !important;
|
||||
color: white;
|
||||
border-radius: 16px;
|
||||
padding: 5px 10px 4px;
|
||||
box-shadow: rgba(108, 127, 238, 0.6) 0 2px 3px 0;
|
||||
background-color: #ebedff !important;
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
margin: 5px;
|
||||
border-color: black;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&[x-placement^="top"] {
|
||||
margin-bottom: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 5px 0 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
bottom: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] {
|
||||
margin-top: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 0 5px 5px 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
top: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="right"] {
|
||||
margin-left: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 5px 5px 0;
|
||||
border-left-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
left: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="left"] {
|
||||
margin-right: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
right: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.popover {
|
||||
$color: #ebedff;
|
||||
|
||||
.popover-inner {
|
||||
background: $color;
|
||||
color: black;
|
||||
padding: 24px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 5px 30px rgba(black, 0.1);
|
||||
}
|
||||
|
||||
.popover-arrow {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-hidden='true'] {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s, visibility 0.15s;
|
||||
}
|
||||
|
||||
&[aria-hidden='false'] {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
}
|
||||
|
||||
.test {
|
||||
left: -175px !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
</div>
|
||||
<!-- split because of styling problem(treenode), combine together furture -->
|
||||
<!-- EIS -->
|
||||
<div v-if="library.includes('EIS')">
|
||||
<div v-if="library && library.includes('EIS')">
|
||||
<component
|
||||
v-for="name in parameterArrayInMode"
|
||||
:key="name"
|
||||
@@ -44,7 +44,7 @@
|
||||
/>
|
||||
</div>
|
||||
<!-- ZM15-PulseSensingMode -->
|
||||
<div v-else-if="parameter.MODE === 14">
|
||||
<div v-else-if="library && library.includes('EDC') && parameter.MODE === 14">
|
||||
<EliteParameterRecordingElitePulseSensing
|
||||
:parameter="parameter"
|
||||
:device="device"
|
||||
@@ -55,7 +55,7 @@
|
||||
/>
|
||||
</div>
|
||||
<!-- ZM15-DPVMode -->
|
||||
<div v-else-if="parameter.MODE === 15">
|
||||
<div v-else-if="library && library.includes('EDC') && parameter.MODE === 15">
|
||||
<EliteParameterRecordingEliteDPV
|
||||
:parameter="parameter"
|
||||
:device="device"
|
||||
@@ -66,7 +66,7 @@
|
||||
/>
|
||||
</div>
|
||||
<!-- ZM15-OtherModes -->
|
||||
<div v-else>
|
||||
<div v-else-if="library && library.includes('EDC')">
|
||||
<va-tree-category
|
||||
v-for="name in parameterArrayInMode"
|
||||
:key="name"
|
||||
@@ -94,7 +94,7 @@
|
||||
<!-- guide picture button -->
|
||||
<div>
|
||||
<vue-final-modal
|
||||
v-if="library.includes('Elite_EDC')"
|
||||
v-if="library && library.includes('EDC')"
|
||||
v-model="showModal"
|
||||
classes="modal-container"
|
||||
content-class="modal-content"
|
||||
@@ -248,8 +248,9 @@ export default {
|
||||
refresh () {
|
||||
},
|
||||
workingModeSelectChange (val) {
|
||||
if (val === undefined) return
|
||||
this.workingModeSelect = val
|
||||
console.log('workingModeSelectChange', this.workingModeSelect.id, this.parameter.MODE)
|
||||
// console.log('workingModeSelectChange', this.workingModeSelect, this.parameter.MODE)
|
||||
|
||||
if (this.workingModeSelect.id !== this.parameter.MODE) {
|
||||
this.parameterChange('MODE', this.workingModeSelect.id)
|
||||
@@ -279,9 +280,11 @@ export default {
|
||||
// this.developerMode === true
|
||||
// ? this.workingModeOptions = this.workingModeDevOptions
|
||||
// : this.workingModeOptions = this.workingModeNoDevOptions
|
||||
this.workingModeOptions = this.parameterTable.MODE_OPTIONS
|
||||
// init mode
|
||||
this.workingModeSelect = (this.parameter.MODE !== undefined) ? this.workingModeOptions.find(ele => ele.id === this.parameter.MODE) : this.workingModeOptions[0]
|
||||
if (this.parameterTable !== null) {
|
||||
this.workingModeOptions = this.parameterTable.MODE_OPTIONS
|
||||
// init mode
|
||||
this.workingModeSelect = (this.parameter.MODE !== undefined) ? this.workingModeOptions.find(ele => ele.id === this.parameter.MODE) : this.workingModeOptions[0]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
parameter: {
|
||||
@@ -291,6 +294,13 @@ export default {
|
||||
this.workingModeSelect = (this.parameter.MODE !== undefined) ? this.workingModeOptions.find(ele => ele.id === this.parameter.MODE) : this.workingModeOptions[0]
|
||||
},
|
||||
},
|
||||
library: {
|
||||
handler: function () {
|
||||
if (!this.parameterTable) return
|
||||
this.workingModeOptions = this.parameterTable.MODE_OPTIONS
|
||||
this.workingModeSelect = (this.parameter.MODE !== undefined) ? this.workingModeOptions.find(ele => ele.id === this.parameter.MODE) : this.workingModeOptions[0]
|
||||
},
|
||||
},
|
||||
},
|
||||
destroyed () {
|
||||
},
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export default {
|
||||
name: 'Potentiostatic Electrochemical Impedance Spectroscopy',
|
||||
name: 'Constant Frequency',
|
||||
parameter: ['CF_DC_BIAS', 'CF_AC_AMP', 'CF_FREQ', 'CF_PPD', 'CF_SCALE', 'CF_DELAY', 'CF_AVERAGE_NUM', 'GENERAL_HS_RTIA'], // 這個mode用到的參數
|
||||
showParameter: ['CF_DC_BIAS', 'CF_AC_AMP', 'CF_FREQ', 'CF_PPD', 'CF_SCALE', 'CF_DELAY', 'CF_AVERAGE_NUM', 'GENERAL_HS_RTIA'], // 有要秀給user看的參數
|
||||
headerParameter: () => ['CF_DC_BIAS', 'CF_AC_AMP', 'CF_FREQ', 'CF_PPD', 'CF_SCALE', 'CF_DELAY', 'CF_AVERAGE_NUM', 'GENERAL_HS_RTIA'], // 有要秀給user看的參數
|
||||
@@ -111,7 +111,7 @@ export default {
|
||||
7: {
|
||||
name: 'Phase',
|
||||
unit: {
|
||||
'°': 1,
|
||||
'°': 1e3,
|
||||
},
|
||||
downloadUnit: null,
|
||||
defaultUnit: '°',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export default {
|
||||
name: 'Potentiostatic Electrochemical Impedance Spectroscopy',
|
||||
name: 'EIS',
|
||||
parameter: ['EIS_DC_BIAS', 'EIS_AC_AMP', 'EIS_FREQ', 'EIS_PPD', 'EIS_SCALE', 'EIS_DELAY', 'EIS_AVERAGE_NUM', 'GENERAL_HS_RTIA'], // 這個mode用到的參數
|
||||
showParameter: ['EIS_DC_BIAS', 'EIS_AC_AMP', 'EIS_FREQ', 'EIS_PPD', 'EIS_SCALE', 'EIS_DELAY', 'EIS_AVERAGE_NUM', 'GENERAL_HS_RTIA'], // 有要秀給user看的參數
|
||||
headerParameter: () => ['EIS_DC_BIAS', 'EIS_AC_AMP', 'EIS_FREQ', 'EIS_PPD', 'EIS_SCALE', 'EIS_DELAY', 'EIS_AVERAGE_NUM', 'GENERAL_HS_RTIA'], // 有要秀給user看的參數
|
||||
@@ -111,7 +111,7 @@ export default {
|
||||
7: {
|
||||
name: 'Phase',
|
||||
unit: {
|
||||
'°': 1,
|
||||
'°': 1e3,
|
||||
},
|
||||
downloadUnit: null,
|
||||
defaultUnit: '°',
|
||||
|
||||
@@ -249,7 +249,7 @@ const EliteEIS = {
|
||||
{ value: 3, label: '8' },
|
||||
],
|
||||
range: ['2', '4', '6', '8'],
|
||||
defaultValue: 3,
|
||||
defaultValue: 0,
|
||||
outputRawData: (val) => {
|
||||
const numArr = ['2', '4', '6', '8']
|
||||
return numArr.indexOf(val.toString())
|
||||
@@ -555,10 +555,10 @@ const EliteEIS = {
|
||||
id: 4,
|
||||
description: 'RT',
|
||||
},
|
||||
// {
|
||||
// id: 5,
|
||||
// description: 'Constant Frequency',
|
||||
// },
|
||||
{
|
||||
id: 5,
|
||||
description: 'Constant Frequency',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
description: 'Dev Tools',
|
||||
|
||||
@@ -61,6 +61,7 @@ const serialNumberMappingTable = {
|
||||
* @returns {Object} : config
|
||||
*/
|
||||
function getConfig (type) {
|
||||
if (type === undefined || type === null) return
|
||||
if (typeof type === 'number') {
|
||||
const deviceList = store.getters.getField('taskContent').deviceListNew
|
||||
if (deviceList === undefined) return
|
||||
|
||||
@@ -91,6 +91,7 @@ const projectActs = {
|
||||
*/
|
||||
[typePath.delete]: async ({ state, getters, commit }, payload) => {
|
||||
const { project, index, api } = payload
|
||||
if (project === undefined) return
|
||||
await api.project.update(project.id, { deleted: true })
|
||||
await api.project.del()
|
||||
state.projectList.splice(index, 1)
|
||||
@@ -105,6 +106,7 @@ const projectActs = {
|
||||
*/
|
||||
[typePath.copy]: async ({ state, getters, commit }, payload) => {
|
||||
const { project, api } = payload
|
||||
if (project === undefined) return
|
||||
const copyProject = JSON.parse(JSON.stringify(project))
|
||||
|
||||
copyProject.name += ' copy'
|
||||
|
||||
@@ -52,7 +52,7 @@ const taskActs = {
|
||||
const max = cycleInfo.cycle
|
||||
const useID = cycleInfo.useID
|
||||
const id = cycleInfo.id
|
||||
const count = 1
|
||||
const count = 0
|
||||
const cycleLength = selectProject.cycle.length + 1
|
||||
const name = 'Loop' + cycleLength
|
||||
|
||||
|
||||
@@ -17,6 +17,8 @@ const projectGets = {
|
||||
},
|
||||
|
||||
[typePath.getDevice]: (state, getters) => (deviceKey) => {
|
||||
/** if project is undefined */
|
||||
if (getters[typePath.getSelect] === undefined) return
|
||||
return getters[typePath.getSelect].device[deviceKey]
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user