修改bug，增加需求
This commit is contained in:
@ -8,12 +8,25 @@ export const TsApi = {
|
|||||||
data
|
data
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
queryPlan: async (data: any) => {
|
||||||
|
return await request.post({
|
||||||
|
url: '/tsPlan/query',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
},
|
||||||
planList: async (data: any) => {
|
planList: async (data: any) => {
|
||||||
return await request.post({
|
return await request.post({
|
||||||
url: '/tsPlan/list',
|
url: '/tsPlan/list',
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
updatePlan: async (data) => {
|
||||||
|
return await request.post({
|
||||||
|
url: '/tsPlan/update',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
},
|
||||||
delPlan: async (data: any) => {
|
delPlan: async (data: any) => {
|
||||||
return await request.post({
|
return await request.post({
|
||||||
url: '/tsPlan/delete',
|
url: '/tsPlan/delete',
|
||||||
|
|||||||
@ -25,3 +25,5 @@ $designHeight: 1080;
|
|||||||
@function px2font($size) {
|
@function px2font($size) {
|
||||||
@return math.div($size, $designWidth) * 100vw;
|
@return math.div($size, $designWidth) * 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
1
src/renderer/src/icons/svg/backTs.svg
Normal file
1
src/renderer/src/icons/svg/backTs.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35.39990234375" height="38.08203125" viewBox="0 0 35.39990234375 38.08203125" fill="none"><g filter="url(#filter_1626_119)"><path d="M25.8174 18.7626C25.4442 17.878 24.9101 17.0837 24.2299 16.4018C23.5498 15.7199 22.7575 15.1845 21.8752 14.8103C20.9612 14.4227 19.9908 14.2262 18.991 14.2262L11.8587 14.2262L15.5605 10.515C15.8874 10.1871 15.8874 9.65567 15.5605 9.32789C15.2335 9.00008 14.7034 9.00008 14.3764 9.32789L9.24535 14.4721C9.23557 14.4819 9.22606 14.4919 9.21675 14.5022C9.21237 14.507 9.20824 14.512 9.20402 14.517C9.19935 14.5224 9.19462 14.5277 9.19009 14.5332C9.18484 14.5396 9.17986 14.5462 9.17484 14.5527C9.17158 14.5569 9.16825 14.5611 9.16503 14.5654C9.1597 14.5726 9.15461 14.5799 9.14952 14.5873C9.14688 14.5911 9.14418 14.5948 9.14159 14.5987C9.1365 14.6062 9.13167 14.6139 9.12685 14.6217C9.12446 14.6255 9.12198 14.6293 9.11966 14.6332C9.11508 14.6408 9.11077 14.6485 9.10646 14.6563C9.10405 14.6605 9.10162 14.6648 9.0993 14.6691C9.09539 14.6764 9.09173 14.6838 9.08804 14.6912C9.08554 14.6962 9.08302 14.7011 9.08061 14.7062C9.07744 14.713 9.07444 14.7198 9.07143 14.7266C9.06882 14.7325 9.06621 14.7384 9.0637 14.7444C9.0612 14.7504 9.05888 14.7565 9.05654 14.7626C9.05388 14.7695 9.0512 14.7764 9.04872 14.7833C9.04682 14.7887 9.04506 14.7941 9.04327 14.7994C9.04071 14.8072 9.03812 14.815 9.03575 14.8228C9.03432 14.8276 9.03302 14.8324 9.03166 14.8372C9.02927 14.8457 9.02699 14.8541 9.02483 14.8626C9.02371 14.8671 9.02275 14.8716 9.0217 14.8762C9.01967 14.885 9.01768 14.8937 9.01592 14.9027C9.01503 14.9072 9.01431 14.9119 9.01346 14.9165C9.01188 14.9252 9.01032 14.934 9.00902 14.9429C9.00824 14.9482 9.00768 14.9535 9.00699 14.9589C9.00596 14.967 9.00487 14.9751 9.00406 14.9833C9.00335 14.9904 9.00295 14.9976 9.00246 15.0048C9.00199 15.0112 9.00136 15.0177 9.00105 15.0242C9.00036 15.038 9 15.0519 9 15.0657L9 15.0658C9 15.0796 9.00036 15.0934 9.00105 15.1072C9.00136 15.1138 9.00199 15.1202 9.00246 15.1268C9.00295 15.1339 9.00335 15.141 9.00406 15.1481C9.00487 15.1563 9.00596 15.1645 9.00701 15.1727C9.00768 15.1779 9.00824 15.1832 9.00902 15.1885C9.01034 15.1974 9.0119 15.2062 9.01351 15.215C9.01434 15.2196 9.01503 15.2241 9.01592 15.2287C9.01768 15.2376 9.01969 15.2465 9.02173 15.2553C9.02275 15.2598 9.02371 15.2642 9.02481 15.2687C9.02693 15.2773 9.0293 15.2857 9.03168 15.2942C9.03305 15.299 9.03432 15.3037 9.03573 15.3085C9.03812 15.3164 9.04073 15.3242 9.04332 15.3321C9.04508 15.3374 9.04682 15.3427 9.0487 15.348C9.0512 15.355 9.05388 15.3619 9.05658 15.3689C9.0589 15.3749 9.0612 15.3809 9.06368 15.3869C9.06618 15.393 9.06884 15.3989 9.07148 15.4049C9.07444 15.4116 9.07741 15.4184 9.08056 15.4251C9.083 15.4302 9.08556 15.4353 9.08811 15.4403C9.09175 15.4476 9.09539 15.455 9.09925 15.4622C9.10162 15.4666 9.1041 15.4709 9.10653 15.4752C9.1108 15.4829 9.11508 15.4905 9.11962 15.4981C9.12198 15.5021 9.12448 15.5059 9.12692 15.5098C9.1317 15.5175 9.1365 15.5251 9.14152 15.5327C9.14413 15.5366 9.1469 15.5404 9.14958 15.5442C9.15463 15.5515 9.15967 15.5588 9.16497 15.566C9.16823 15.5703 9.1716 15.5745 9.1749 15.5788C9.1799 15.5852 9.18482 15.5917 9.19 15.5981C9.1946 15.6037 9.19938 15.6091 9.20413 15.6145C9.20833 15.6194 9.21237 15.6243 9.21668 15.6291C9.22599 15.6394 9.2355 15.6494 9.24531 15.6593L14.3764 20.8034C14.5399 20.9674 14.7541 21.0493 14.9684 21.0493C15.1827 21.0492 15.397 20.9673 15.5604 20.8034C15.8874 20.4756 15.8874 19.9442 15.5604 19.6164L11.8586 15.9051L18.9909 15.9051C22.1529 15.9051 24.7254 18.4841 24.7254 21.6542C24.7254 24.8243 22.153 27.4033 18.991 27.4033L12.9741 27.4033C12.5117 27.4033 12.1368 27.7791 12.1368 28.2427C12.1368 28.7062 12.5117 29.082 12.9741 29.082L18.991 29.082C19.9908 29.082 20.9612 28.8855 21.8752 28.498C22.7575 28.1238 23.5498 27.5883 24.2299 26.9064C24.9101 26.2245 25.4442 25.4303 25.8174 24.5456C26.204 23.6293 26.4 22.6565 26.4 21.6541C26.4 20.6517 26.204 19.6789 25.8174 18.7626Z" fill="#FFFFFF" ></path></g><defs><filter id="filter_1626_119" x="0" y="0" width="35.39990234375" height="38.08203125" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="feFloodId_1626_119"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha_1626_119"/><feOffset dx="0" dy="0"/><feGaussianBlur stdDeviation="4.5"/><feComposite in2="hardAlpha_1626_119" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0.0784313725490196 0 0 0 0 0.4627450980392157 0 0 0 0 1 0 0 0 1 0"/><feBlend mode="normal" in2="feFloodId_1626_119" result="dropShadow_1_1626_119"/><feBlend mode="normal" in="SourceGraphic" in2="dropShadow_1_1626_119" result="shape_1626_119"/></filter></defs></svg>
|
||||||
|
After Width: | Height: | Size: 4.7 KiB |
1
src/renderer/src/icons/svg/des_detail.svg
Normal file
1
src/renderer/src/icons/svg/des_detail.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="16.199951171875" viewBox="0 0 20 16.199951171875" fill="none"><path d="M17.6077 10.4801C17.6037 10.4722 17.5996 10.4644 17.5954 10.4567C17.5911 10.449 17.5868 10.4414 17.5823 10.4338C17.5778 10.4262 17.5732 10.4187 17.5684 10.4113C17.5636 10.4039 17.5587 10.3965 17.5537 10.3893C17.5487 10.382 17.5436 10.3749 17.5383 10.3678C17.533 10.3607 17.5277 10.3538 17.5222 10.3469C17.5167 10.34 17.511 10.3332 17.5053 10.3265C17.4996 10.3198 17.4937 10.3133 17.4878 10.3068C17.4818 10.3003 17.4757 10.2939 17.4695 10.2876C17.4634 10.2813 17.4571 10.2751 17.4507 10.2691C17.4443 10.263 17.4378 10.257 17.4312 10.2512C17.4246 10.2453 17.4179 10.2396 17.4111 10.234C17.4043 10.2284 17.3974 10.2229 17.3904 10.2175C17.3834 10.2121 17.3763 10.2069 17.3692 10.2018C17.362 10.1966 17.3548 10.1916 17.3474 10.1867C17.3401 10.1818 17.3326 10.1771 17.3251 10.1725C17.3176 10.1678 17.31 10.1633 17.3024 10.159C17.2947 10.1546 17.287 10.1504 17.2792 10.1463C17.2714 10.1421 17.2635 10.1382 17.2556 10.1344C17.2476 10.1305 17.2396 10.1268 17.2315 10.1233C17.2235 10.1197 17.2153 10.1163 17.2071 10.113C17.199 10.1097 17.1907 10.1066 17.1824 10.1036C17.1741 10.1006 17.1658 10.0978 17.1574 10.095C17.149 10.0923 17.1405 10.0898 17.1321 10.0874C17.1236 10.0849 17.1151 10.0827 17.1065 10.0805C17.0979 10.0784 17.0893 10.0764 17.0807 10.0746C17.0721 10.0728 17.0634 10.0711 17.0547 10.0696C17.046 10.068 17.0373 10.0666 17.0286 10.0654C17.0198 10.0642 17.0111 10.0631 17.0023 10.0621C16.9935 10.0612 16.9848 10.0604 16.976 10.0598C16.9672 10.0592 16.9584 10.0587 16.9495 10.0584C16.9407 10.058 16.9319 10.0578 16.9231 10.0578L11.5385 10.0578L13.3385 5.58172L15.0385 9.52806C15.1538 9.79678 15.4154 9.98105 15.7154 9.98872C16.0077 9.99639 16.2846 9.84285 16.4231 9.58179L17.3154 7.90037L19.2308 7.90037C19.6538 7.90037 20 7.55487 20 7.13261C20 6.71034 19.6538 6.36484 19.2308 6.36484L17.2077 6.36484C16.7077 6.36484 16.2462 6.64124 16.0154 7.07887L15.8231 7.43971L14.5846 4.56826C14.3923 4.09223 13.9462 3.78513 13.3154 3.73906C12.7692 3.74673 12.2846 4.07687 12.0769 4.5836L9.87693 10.0425L9.82307 10.0425L6.97692 0.944359C6.97146 0.927955 6.9657 0.911661 6.95961 0.895481C6.95353 0.879286 6.94715 0.86321 6.94045 0.847256C6.93378 0.831301 6.92682 0.815479 6.91952 0.799795C6.91226 0.78411 6.90469 0.768558 6.89683 0.753144C6.88896 0.737742 6.8808 0.722492 6.87237 0.707392C6.86395 0.692293 6.85525 0.677348 6.84623 0.662563C6.83724 0.647792 6.82798 0.633194 6.81842 0.618769C6.80887 0.604344 6.79906 0.590096 6.78897 0.576031C6.77889 0.56198 6.76855 0.548117 6.75794 0.534441C6.74734 0.520765 6.7365 0.507298 6.72537 0.494043C6.71428 0.480772 6.70292 0.467719 6.69132 0.454882C6.67974 0.442032 6.66788 0.429413 6.6558 0.417026C6.64372 0.404625 6.63142 0.392457 6.61889 0.380519C6.60636 0.368582 6.5936 0.356886 6.58062 0.34543C6.56766 0.333974 6.55448 0.322763 6.54109 0.311802C6.52771 0.300826 6.5141 0.290112 6.5003 0.279659C6.48651 0.269207 6.47252 0.259017 6.45834 0.249091C6.44417 0.239149 6.42981 0.229484 6.41525 0.220097C6.40072 0.21071 6.386 0.201593 6.3711 0.192745C6.35623 0.183898 6.34118 0.175335 6.32596 0.167058C6.31077 0.15878 6.29541 0.150788 6.2799 0.14308C6.2644 0.135387 6.24873 0.12798 6.23296 0.120857C6.21718 0.113749 6.20125 0.106933 6.1852 0.10041C6.16916 0.0938871 6.153 0.0876639 6.13673 0.0817407C6.12046 0.0758324 6.10407 0.0702241 6.08758 0.0649157C6.07108 0.0596224 6.05449 0.0546363 6.03782 0.0499577C6.02114 0.045279 6.0044 0.0409077 5.98756 0.036844C5.97073 0.0327953 5.9538 0.0290614 5.93681 0.0256424C5.91984 0.0222234 5.9028 0.0191268 5.8857 0.0163526C5.86862 0.0135634 5.85147 0.0111042 5.83427 0.00897488C5.8171 0.00683043 5.79986 0.00500845 5.7826 0.00350891C5.76536 0.00202432 5.74807 0.000854791 5.73076 0C5.17692 0 4.66154 0.330157 4.43846 0.852227L2.16924 6.40322L0.76923 6.40322C0.346154 6.40322 0 6.74871 0 7.171C0 7.59327 0.346154 7.93877 0.76923 7.93877L2.68461 7.93877C3 7.93877 3.27692 7.74683 3.39999 7.46274L5.67693 1.90408L8.22307 10.0578L3.07692 10.0578C2.7846 10.0578 2.51539 10.2191 2.39229 10.4801L0.0846139 15.0867C-0.0307707 15.3247 -0.0230769 15.6088 0.115385 15.8315C0.253846 16.0618 0.499999 16.2 0.76923 16.2L19.2308 16.2C19.5 16.2 19.7461 16.0618 19.8846 15.8391C20.0231 15.6165 20.0385 15.3324 19.9154 15.0944L17.6077 10.4801ZM2.01538 14.6644L3.55385 11.5934L8.7 11.5934L9.03077 12.6529C9.13076 12.96 9.40768 13.175 9.73847 13.1903L9.76923 13.1903C10.0846 13.1903 10.3615 12.9984 10.4846 12.7066L10.9308 11.5934L16.4539 11.5934L17.9923 14.6644L2.01538 14.6644Z" fill="#FFFFFF" ></path></svg>
|
||||||
|
After Width: | Height: | Size: 4.5 KiB |
1
src/renderer/src/icons/svg/ersan_ts.svg
Normal file
1
src/renderer/src/icons/svg/ersan_ts.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37.10009765625" height="38" viewBox="0 0 37.10009765625 38" fill="none"><g filter="url(#filter_1626_116)"><path d="M10.8205 25.363L16.2769 25.363L16.2769 27.1803L9 27.1803L9 10.8173L16.2769 10.8173L16.2769 12.6346L10.8205 12.6346L10.8205 25.363ZM20.8231 25.363L22.6411 25.363L22.6411 27.1803L20.8231 27.1803L20.8231 25.363ZM23.5513 25.363L25.3693 25.363L25.3693 27.1803L23.5513 27.1803L23.5513 25.363ZM26.282 27.1827L26.282 25.363L28.1 25.363L28.1 27.1803L26.282 27.1803L26.282 27.1827ZM26.282 20.8185L26.282 19.0012L28.1 19.0012L28.1 20.8185L26.282 20.8185ZM26.282 23.5457L26.282 21.7284L28.1 21.7284L28.1 23.5457L26.282 23.5457ZM26.282 18.0914L26.282 16.2741L28.1 16.2741L28.1 18.0914L26.282 18.0914ZM26.282 15.3642L26.282 13.5469L28.1 13.5469L28.1 15.3642L26.282 15.3642ZM26.282 12.637L26.282 10.8197L28.1 10.8197L28.1 12.637L26.282 12.637ZM25.3718 12.637L23.5538 12.637L23.5538 10.8197L25.3718 10.8197L25.3718 12.637ZM22.6436 12.637L20.8256 12.637L20.8256 10.8197L22.6436 10.8197L22.6436 12.637ZM18.0949 9L19.9129 9L19.9129 29L18.0949 29L18.0949 9Z" fill="#FFFFFF" ></path></g><defs><filter id="filter_1626_116" x="0" y="0" width="37.10009765625" height="38" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="feFloodId_1626_116"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha_1626_116"/><feOffset dx="0" dy="0"/><feGaussianBlur stdDeviation="4.5"/><feComposite in2="hardAlpha_1626_116" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0.0784313725490196 0 0 0 0 0.4627450980392157 0 0 0 0 1 0 0 0 1 0"/><feBlend mode="normal" in2="feFloodId_1626_116" result="dropShadow_1_1626_116"/><feBlend mode="normal" in="SourceGraphic" in2="dropShadow_1_1626_116" result="shape_1626_116"/></filter></defs></svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
1
src/renderer/src/icons/svg/exitTs.svg
Normal file
1
src/renderer/src/icons/svg/exitTs.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 24 KiB |
1
src/renderer/src/icons/svg/playTs.svg
Normal file
1
src/renderer/src/icons/svg/playTs.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 31 KiB |
@ -3,13 +3,24 @@
|
|||||||
<div>
|
<div>
|
||||||
<span>仿真演练图层指挥舱</span>
|
<span>仿真演练图层指挥舱</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div style="display: flex">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="input2"
|
v-model="searchKey"
|
||||||
class="responsive-input"
|
class="responsive-input"
|
||||||
placeholder="搜索"
|
placeholder="搜索"
|
||||||
:prefix-icon="Search"
|
:prefix-icon="Search"
|
||||||
|
@input="clearResult"
|
||||||
|
id="keyword"
|
||||||
/>
|
/>
|
||||||
|
<!--@click="searchPlace"-->
|
||||||
|
<!--:loading="loading"-->
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
@click="searchPlace"
|
||||||
|
id="queryButton"
|
||||||
|
>搜索
|
||||||
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
<div class="treeBox">
|
<div class="treeBox">
|
||||||
<ul id="treeDemos" class="ztree"></ul>
|
<ul id="treeDemos" class="ztree"></ul>
|
||||||
@ -24,17 +35,19 @@ import {Search} from '@element-plus/icons-vue'
|
|||||||
import rightMenuTs from './components/rightMenuTs.vue'
|
import rightMenuTs from './components/rightMenuTs.vue'
|
||||||
import {useTreeNode} from "../components/tree/hooks/treeNode";
|
import {useTreeNode} from "../components/tree/hooks/treeNode";
|
||||||
import {$changeComponentShow} from "../../utils/communication";
|
import {$changeComponentShow} from "../../utils/communication";
|
||||||
|
import {debounce} from '@/utils'
|
||||||
|
|
||||||
const {getSelectedNodes, cusSelectNode, getSameLevel, cusNodeIcon, nodeType} = useTreeNode()
|
const {getSelectedNodes, cusSelectNode, getSameLevel, cusNodeIcon, nodeType} = useTreeNode()
|
||||||
import {showRightMenuTs} from "./tree"
|
import {showRightMenuTs} from "./tree"
|
||||||
import {TsApi} from "../../api/ts";
|
import {TsApi} from "../../api/ts";
|
||||||
import {initMapData} from "./entity";
|
import {initMapData} from "./entity";
|
||||||
|
import {ElMessage} from "element-plus";
|
||||||
|
|
||||||
const rightMenuRef: any = ref()
|
const rightMenuRef: any = ref()
|
||||||
const treeObj = ref() //树形的实例
|
const treeObj = ref() //树形的实例
|
||||||
let zNodes: any = ref([])//树形结构数据
|
let zNodes: any = ref([])//树形结构数据
|
||||||
let nodes: any = ref([])//选中的node节点
|
let nodes: any = ref([])//选中的node节点
|
||||||
let input2 = ref('')
|
let searchKey = ref('')
|
||||||
let formData = new FormData()
|
let formData = new FormData()
|
||||||
formData.append('id', window["planId"])
|
formData.append('id', window["planId"])
|
||||||
|
|
||||||
@ -44,6 +57,34 @@ onMounted(() => {
|
|||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
|
const clearResult = () => {
|
||||||
|
let string = searchKey.value.trim()
|
||||||
|
|
||||||
|
if (string == '') {
|
||||||
|
let arr = []
|
||||||
|
if ((window as any).searchPlaceMap) {
|
||||||
|
arr = Array.from((window as any).searchPlaceMap)
|
||||||
|
}
|
||||||
|
if (arr.length) {
|
||||||
|
const target = (window as any).searchPlaceMap.get(arr[0][0])
|
||||||
|
if (target && typeof target.remove === 'function') {
|
||||||
|
target.remove()
|
||||||
|
;(window as any).searchPlaceMap.clear()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*poiOptions.value = []
|
||||||
|
value.value = ''*/
|
||||||
|
;(window as any) && (window as any).treeSearchCb('')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const searchPlace = debounce(function () {
|
||||||
|
if (!searchKey.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// poiOptions.value = []
|
||||||
|
// value.value = ''
|
||||||
|
;(window as any).treeSearchCb(searchKey.value)
|
||||||
|
}, 500)
|
||||||
const initTreeCallBack = () => {
|
const initTreeCallBack = () => {
|
||||||
TsApi.queryTsSource(formData).then(async res => {
|
TsApi.queryTsSource(formData).then(async res => {
|
||||||
console.log('queryTsSource', res)
|
console.log('queryTsSource', res)
|
||||||
@ -60,7 +101,15 @@ const initTreeCallBack = () => {
|
|||||||
})*/
|
})*/
|
||||||
console.log("zNodes.value", zNodes.value)
|
console.log("zNodes.value", zNodes.value)
|
||||||
treeObj.value = $.fn.zTree.init($(`#treeDemos`), setting, zNodes.value)
|
treeObj.value = $.fn.zTree.init($(`#treeDemos`), setting, zNodes.value)
|
||||||
window.treeObj = treeObj.value
|
window.treeObj = treeObj.value;
|
||||||
|
|
||||||
|
(window as any).newFuzzySearch(
|
||||||
|
`treeDemos`,
|
||||||
|
"#keyword",
|
||||||
|
["bim", "sonShp", "gdbShp"],
|
||||||
|
true,
|
||||||
|
"#queryButton"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("initTreeCallBack++++++++++++++++++++", zNodes.value)
|
console.log("initTreeCallBack++++++++++++++++++++", zNodes.value)
|
||||||
|
|||||||
@ -25,6 +25,8 @@ const eventBus: any = inject('bus')
|
|||||||
const props = defineProps(['eventList', 'hr', 'originHrOffset', 'scrollLeft'])
|
const props = defineProps(['eventList', 'hr', 'originHrOffset', 'scrollLeft'])
|
||||||
let clickEventBar = (event) => {
|
let clickEventBar = (event) => {
|
||||||
console.log("点击事件块", selectedEventId.value, event.id)
|
console.log("点击事件块", selectedEventId.value, event.id)
|
||||||
|
let entity = window['_entityMap'].get(event.sourceId)
|
||||||
|
entity && entity.flyTo()
|
||||||
selectedEventId.value = (selectedEventId.value == null || selectedEventId.value != event.id) ? event.id : null
|
selectedEventId.value = (selectedEventId.value == null || selectedEventId.value != event.id) ? event.id : null
|
||||||
eventBus.emit('click-event-show-plane', selectedEventId.value ? event : null)
|
eventBus.emit('click-event-show-plane', selectedEventId.value ? event : null)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -19,15 +19,23 @@
|
|||||||
<RefreshLeft/>
|
<RefreshLeft/>
|
||||||
</el-icon>
|
</el-icon>
|
||||||
<el-popover
|
<el-popover
|
||||||
placement="bottom"
|
ref="multiplierPopover"
|
||||||
title="Title"
|
placement="top"
|
||||||
:width="200"
|
:width="92"
|
||||||
trigger="click"
|
trigger="click"
|
||||||
content="this is content, this is content, this is content"
|
:teleported="false"
|
||||||
|
popper-style="background: transparent !important;color:#fff;padding:0;min-width:50px"
|
||||||
>
|
>
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<span class="el-icon">{{ TSOBJ._Store._multiplier }}×</span>
|
<span class="el-icon">{{ TSOBJ._Store._multiplier }}×</span>
|
||||||
</template>
|
</template>
|
||||||
|
<div class="multiplierBox">
|
||||||
|
<span v-for="item in multipliers"
|
||||||
|
class="multiplier-item"
|
||||||
|
@click="handleMultiplierChange(item)"
|
||||||
|
:class="{ 'active': item === TSOBJ._Store._multiplier }"
|
||||||
|
>{{ item }}×</span>
|
||||||
|
</div>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
|
|
||||||
|
|
||||||
@ -48,12 +56,12 @@
|
|||||||
<!-- 左侧事件列表 -->
|
<!-- 左侧事件列表 -->
|
||||||
<grid :eventList="TSOBJ._Store._tasks"></grid>
|
<grid :eventList="TSOBJ._Store._tasks"></grid>
|
||||||
<!--右侧时间轴容器-->
|
<!--右侧时间轴容器-->
|
||||||
<div class="TLContainer">
|
<div class="TLContainer" id="custom-container">
|
||||||
<div class="timelineCursorBox" :style="{ left: `${cursorLeft || 0}px` }">
|
<div class="timelineCursorBox" :style="{ left: `${cursorLeft || 0}px` }">
|
||||||
<!--@mousedown="mousedown" :style="cursorStyle"-->
|
<!--@mousedown="mousedown" :style="cursorStyle"-->
|
||||||
<!--@mouseup="mouseup"-->
|
<!--@mouseup="mouseup"-->
|
||||||
<!--@mousemove="mousemove"-->
|
<!--@mousemove="mousemove" timing-->
|
||||||
<!--<span class="timeline-icon16" v-drags="timing"></span>-->
|
<span class="drag-item timeline-icon16 " v-drag-left-right="handleDrag"></span>
|
||||||
</div>
|
</div>
|
||||||
<!-- 时间轴刻度线 -->
|
<!-- 时间轴刻度线 -->
|
||||||
<timeScale :ticTiny="ticTiny" :ticMain="ticMain" :distanceOfTicTiny="distanceOfTicTiny"
|
<timeScale :ticTiny="ticTiny" :ticMain="ticMain" :distanceOfTicTiny="distanceOfTicTiny"
|
||||||
@ -79,8 +87,21 @@ import EventParams from "./components/eventParams.vue"
|
|||||||
import Grid from "./components/grid.vue"
|
import Grid from "./components/grid.vue"
|
||||||
import TimeScale from "./components/timeScale.vue"
|
import TimeScale from "./components/timeScale.vue"
|
||||||
import Chart from "./components/chart.vue"
|
import Chart from "./components/chart.vue"
|
||||||
import {ref, onBeforeUnmount} from "vue"
|
import {ref, onBeforeUnmount, getCurrentInstance} from "vue"
|
||||||
|
import {ElPopover} from 'element-plus'; // 确保导入ElPopover（按需导入时）
|
||||||
|
// import {dragElement} from "./util/drag.js";
|
||||||
|
import dragLeftRight from './util/dragLeftRight.js';
|
||||||
|
|
||||||
|
const instance = getCurrentInstance();
|
||||||
|
if (instance) {
|
||||||
|
// 2. 注册局部指令（kebab-case 命名，与模板中一致）
|
||||||
|
// instance.appContext.config.globalProperties.$directive('drag-left-right', dragLeftRight);
|
||||||
|
instance.appContext.app.directive('drag-left-right', dragLeftRight)
|
||||||
|
}
|
||||||
|
// 注册拖拽指令
|
||||||
|
// 1. 创建ref引用，绑定到el-popover组件
|
||||||
|
const multiplierPopover = ref<InstanceType<typeof ElPopover> | null>(null);
|
||||||
|
let multipliers = [16, 8, 4, 2, 1, 0.5, 0.25]
|
||||||
let currentStamp = ref(window['tsObj']._Store._startTimestamp)
|
let currentStamp = ref(window['tsObj']._Store._startTimestamp)
|
||||||
let maxLevel = ref(24)
|
let maxLevel = ref(24)
|
||||||
let minLevel = ref(1)
|
let minLevel = ref(1)
|
||||||
@ -120,6 +141,10 @@ window['updateProp'] = (key: string, val: any) => {
|
|||||||
const level = ref(20)
|
const level = ref(20)
|
||||||
const props = defineProps(['TSOBJ'])
|
const props = defineProps(['TSOBJ'])
|
||||||
console.log(props.TSOBJ)
|
console.log(props.TSOBJ)
|
||||||
|
let handleMultiplierChange = (multiplier) => {
|
||||||
|
props.TSOBJ._Store._multiplier = multiplier
|
||||||
|
multiplierPopover.value?.hide();
|
||||||
|
}
|
||||||
let formatTime = (timeStamp) => {
|
let formatTime = (timeStamp) => {
|
||||||
return props.TSOBJ.parseTime(timeStamp)
|
return props.TSOBJ.parseTime(timeStamp)
|
||||||
}
|
}
|
||||||
@ -245,6 +270,20 @@ let eventCallback = () => {
|
|||||||
if (props.TSOBJ._Clock._status == 'play')
|
if (props.TSOBJ._Clock._status == 'play')
|
||||||
fun(dataMap)
|
fun(dataMap)
|
||||||
}
|
}
|
||||||
|
// 拖拽时间指示器预览
|
||||||
|
let timing = () => {
|
||||||
|
console.log("拖拽时间指示器预览")
|
||||||
|
}
|
||||||
|
const handleDrag = (newLeft: number) => {
|
||||||
|
console.log("handleDrag", newLeft)
|
||||||
|
// cursorLeft.value = newLeft;
|
||||||
|
// 同步到Store（如果需要保存拖拽后的位置到全局状态）
|
||||||
|
// props.TSOBJ._Store.setScale('cursorLeft', newLeft);
|
||||||
|
// 可选：拖拽时暂停播放（避免动画与拖拽冲突）
|
||||||
|
/*if (props.TSOBJ._Clock._status === 'play') {
|
||||||
|
stopCallBack('pause');
|
||||||
|
}*/
|
||||||
|
};
|
||||||
let add = (num) => {
|
let add = (num) => {
|
||||||
// 大格12个取值，小格间距3个取值，level，8-1
|
// 大格12个取值，小格间距3个取值，level，8-1
|
||||||
|
|
||||||
@ -293,6 +332,7 @@ onBeforeUnmount(() => {
|
|||||||
margin: 0 2px;
|
margin: 0 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
left: 62.5%;
|
left: 62.5%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -333,7 +373,7 @@ onBeforeUnmount(() => {
|
|||||||
|
|
||||||
.timelineCursorBox {
|
.timelineCursorBox {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-right: 0.5px red solid;
|
border-right: 0.5px #0ff solid;
|
||||||
height: calc(100% - 16px);
|
height: calc(100% - 16px);
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
//left: 10px;
|
//left: 10px;
|
||||||
@ -343,12 +383,13 @@ onBeforeUnmount(() => {
|
|||||||
.timeline-icon16 {
|
.timeline-icon16 {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 16px;
|
width: 13px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
//width: vw(16);
|
//width: vw(16);
|
||||||
//height: vw(16);
|
//height: vw(16);
|
||||||
transform: translate(-50%, -16px);
|
transform: translate(-50%, -16px);
|
||||||
background: url("../../assets/img/indicator.png") no-repeat;
|
background: url("./img/indicator.png") no-repeat;
|
||||||
|
background-size: contain;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -357,4 +398,33 @@ onBeforeUnmount(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.multiplierBox) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1.5px solid rgba(0, 255, 255, 1);
|
||||||
|
|
||||||
|
span {
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multiplier-item {
|
||||||
|
&:hover {
|
||||||
|
background: rgba(0, 255, 255, 0.5); /* 高亮背景色 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
//background: rgba(0, 255, 255, 0.5); /* 高亮背景色 */
|
||||||
|
font-weight: 600; /* 加粗 */
|
||||||
|
color: #0ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,20 +1,116 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="edit ts-zyl ">
|
<div class="edit ts-zyl ">
|
||||||
<svg class="icon icon-tuichu" @click="closeSituationEdit" aria-hidden="true">
|
<div class="leftTimeDesc">
|
||||||
<use xlink:href="#icon-tuichu"></use>
|
<span>作战时间：{{ stamp }}</span>
|
||||||
|
<el-tooltip
|
||||||
|
class="box-item"
|
||||||
|
effect="dark"
|
||||||
|
content="推演描述"
|
||||||
|
placement="top"
|
||||||
|
>
|
||||||
|
<svg-icon @click="isShowPup = true" :size="20" class="icon-svg-item" name="des_detail"/>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
<div class="titles">实景三维态势推演系统</div>
|
||||||
|
<svg class="icon icon-top" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-top"></use>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
|
<div class="icon-svg">
|
||||||
|
<template v-for="(item,index) in rightMenus">
|
||||||
|
<el-tooltip
|
||||||
|
class="box-item"
|
||||||
|
effect="dark"
|
||||||
|
:content="item.name"
|
||||||
|
placement="top"
|
||||||
|
>
|
||||||
|
<svg-icon @click="item.fun" :size="35" class="icon-svg-item" :name="item.iconName"/>
|
||||||
|
</el-tooltip>
|
||||||
|
<template v-if="index!=rightMenus.length-1">
|
||||||
|
<div class="border"></div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div id="earthContainer" class="fullSize"></div>
|
<div id="earthContainer" class="fullSize"></div>
|
||||||
<cabin ref="cabin"></cabin>
|
<cabin ref="cabin"></cabin>
|
||||||
<element></element>
|
<element></element>
|
||||||
<deduction :TSOBJ="tsOBJ"></deduction>
|
<deduction :TSOBJ="tsOBJ"></deduction>
|
||||||
<newEvent></newEvent>
|
<newEvent></newEvent>
|
||||||
<addDirectory class="adddirectoryBox absolute zIndex999"></addDirectory>
|
<addDirectory class="adddirectoryBox absolute zIndex999"></addDirectory>
|
||||||
|
|
||||||
|
<!-- 方案描述编辑框 -->
|
||||||
|
<!--<div class="dialogBox">-->
|
||||||
|
<el-dialog width="20vw" v-model="isShowPup" :modal="false" draggable>
|
||||||
|
<template #header>
|
||||||
|
<div class="set_pup_header">
|
||||||
|
<div class="system_title">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="229" height="35"
|
||||||
|
viewBox="0 0 229 35" fill="none" preserveAspectRatio="none">
|
||||||
|
<path
|
||||||
|
d="M74 34L85 34L99.5 6L88.5 6L74 34ZM92 34L103 34L117.5 6L106.5 6L92 34ZM111 34L122 34L136.5 6L125.5 6L111 34ZM140 34L129 34L143.5 6L154.5 6L140 34ZM148 34L159 34L173.5 6L162.5 6L148 34ZM177 34L166 34L180.5 6L191.5 6L177 34ZM185 34L196 34L210.5 6L199.5 6L185 34ZM214 34L203 34L217.5 6L228.5 6L214 34ZM0 34L11 34L25.5 6.5L14.5 6.5L0 34ZM18 34L29 34L43.5 6.5L32.5 6.5L18 34ZM37 34L48 34L62.5 6.5L51.5 6.5L37 34ZM66 34L55 34L69.5 6.5L80.5 6.5L66 34Z"
|
||||||
|
fill-rule="evenodd" fill="url(#linear_fill_2442_1053)"/>
|
||||||
|
<rect x="0" y="0" width="229" height="34" fill="url(#linear_fill_2442_1054)"/>
|
||||||
|
<g clip-path="url(#clip-path-2442_1055)">
|
||||||
|
<path
|
||||||
|
d="M10.3993 32.7333L10.666 33L10.666 21L9.33267 22.3333L4.66602 27L5.66602 28L10.3993 32.7333ZM9.33267 29.6667L6.73267 27L9.33267 24.3333L9.33267 29.6667Z"
|
||||||
|
fill="rgb(var(--color-base1))"/>
|
||||||
|
<g opacity="0.5">
|
||||||
|
<path
|
||||||
|
d="M7.39934 32.7333L7.66602 33L7.66602 21L6.33267 22.3333L1.66602 27L2.66602 28L7.39934 32.7333ZM6.33267 29.6667L3.73267 27L6.33267 24.3333L6.33267 29.6667Z"
|
||||||
|
fill="rgb(var(--color-base1))"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g clip-path="url(#clip-path-2442_1059)">
|
||||||
|
<path
|
||||||
|
d="M218.601 32.7333L218.334 33L218.334 21L219.667 22.3333L224.334 27L223.334 28L218.601 32.7333ZM219.667 29.6667L222.267 27L219.667 24.3333L219.667 29.6667Z"
|
||||||
|
fill="rgb(var(--color-base1))"/>
|
||||||
|
<g opacity="0.5">
|
||||||
|
<path
|
||||||
|
d="M221.601 32.7333L221.334 33L221.334 21L222.667 22.3333L227.334 27L226.334 28L221.601 32.7333ZM222.667 29.6667L225.267 27L222.667 24.3333L222.667 29.6667Z"
|
||||||
|
fill="rgb(var(--color-base1))"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="linear_fill_2442_1053" x1="119.1239013671875" y1="33.99998474121094"
|
||||||
|
x2="119.1231689453125" y2="6" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop offset="0" stop-color="rgb(var(--color-base1))" stop-opacity="0.2"/>
|
||||||
|
<stop offset="1" stop-color="rgb(var(--color-base1))" stop-opacity="0"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="linear_fill_2442_1054" x1="0" y1="17" x2="229" y2="17"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop offset="0" stop-color="rgb(var(--color-base1))" stop-opacity="0"/>
|
||||||
|
<stop offset="0.4891" stop-color="rgb(var(--color-base1))" stop-opacity="0.4"/>
|
||||||
|
<stop offset="1" stop-color="rgb(var(--color-base1))" stop-opacity="0"/>
|
||||||
|
</linearGradient>
|
||||||
|
<clipPath id="clip-path-2442_1055">
|
||||||
|
<path d="M0 19L0 35L16 35L16 19L0 19Z" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
<clipPath id="clip-path-2442_1059">
|
||||||
|
<path d="M229 19L229 35L213 35L213 19L229 19Z" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
{{ params.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="set_detail">
|
||||||
|
<el-input type="textarea" :rows="7" v-model="des_detail"></el-input>
|
||||||
|
</div>
|
||||||
|
<div style="text-align: right;">
|
||||||
|
<el-button @click="submit">保存</el-button>
|
||||||
|
<el-button @click="isShowPup=false">取消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
<!--</div>-->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
//@ts-nocheck
|
//@ts-nocheck
|
||||||
import {ref, reactive, onMounted, nextTick} from "vue";
|
import {ref, reactive, onMounted, nextTick, onUnmounted} from "vue";
|
||||||
import {useRouter, useRoute} from "vue-router";
|
import {useRouter, useRoute} from "vue-router";
|
||||||
import Cabin from "./cabin.vue"
|
import Cabin from "./cabin.vue"
|
||||||
import Element from "./element.vue"
|
import Element from "./element.vue"
|
||||||
@ -24,7 +120,41 @@ import AddDirectory from './components/tsdirectory.vue'
|
|||||||
import {TS} from "./sdk";
|
import {TS} from "./sdk";
|
||||||
import * as domain from "domain";
|
import * as domain from "domain";
|
||||||
import {TsApi} from "../../api/ts";
|
import {TsApi} from "../../api/ts";
|
||||||
|
import {ElMessage} from "element-plus";
|
||||||
|
|
||||||
|
const isShowPup = ref(false)
|
||||||
|
const des_detail = ref("")
|
||||||
|
const stamp = ref("")
|
||||||
|
const rightMenus = ref([
|
||||||
|
|
||||||
|
{
|
||||||
|
name: "进入推演页面", iconName: "playTs", fun: () => {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "二三维模式", iconName: "ersan_ts", fun: () => {
|
||||||
|
if (YJ.Global.multiViewportMode.getSdk().sdkD) {
|
||||||
|
YJ.Global.multiViewportMode.off(window['earth_ts'])
|
||||||
|
} else {
|
||||||
|
// eventBus.emit('closeSplitScreen')
|
||||||
|
YJ.Global.multiViewportMode.on(window['earth_ts'])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
{
|
||||||
|
name: "返回", iconName: "backTs", fun: () => {
|
||||||
|
router.back()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "退出方案库", iconName: "exitTs", fun: () => {
|
||||||
|
router.push({path: '/home'})
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
])
|
||||||
let cabin = ref()
|
let cabin = ref()
|
||||||
let tsOBJ = ref({})
|
let tsOBJ = ref({})
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@ -39,8 +169,28 @@ for (const routeQueryKey in route.query) {
|
|||||||
}
|
}
|
||||||
console.log("params", params)
|
console.log("params", params)
|
||||||
window.planId = params.id
|
window.planId = params.id
|
||||||
|
let data = new FormData()
|
||||||
|
data.append("id", planId)
|
||||||
|
TsApi.queryPlan(data).then(res => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
des_detail.value = res.data.desc
|
||||||
|
}
|
||||||
|
})
|
||||||
const eventBus: any = inject('bus')
|
const eventBus: any = inject('bus')
|
||||||
|
|
||||||
|
let submit = () => {
|
||||||
|
let obj = {
|
||||||
|
id: params.id,
|
||||||
|
name: params.name,
|
||||||
|
desc: des_detail.value,
|
||||||
|
}
|
||||||
|
TsApi.updatePlan(obj).then(res => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
ElMessage({type: 'success', message: "操作成功"})
|
||||||
|
}
|
||||||
|
isShowPup.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
// 通过planID获取方案包含的所有事件
|
// 通过planID获取方案包含的所有事件
|
||||||
let getEventList = () => {
|
let getEventList = () => {
|
||||||
let events: any = []
|
let events: any = []
|
||||||
@ -105,13 +255,158 @@ const createEarth = async () => {
|
|||||||
console.log("createEarth++++++++++++++++++++")
|
console.log("createEarth++++++++++++++++++++")
|
||||||
cabin.value.initTreeCallBack()
|
cabin.value.initTreeCallBack()
|
||||||
}
|
}
|
||||||
const closeSituationEdit = () => {
|
const timer = setInterval(() => {
|
||||||
router.back()
|
const date = new Date();
|
||||||
}
|
// 配置年-月-日 时:分:秒 格式
|
||||||
|
const formattedDate = date.toLocaleString('zh-CN', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: '2-digit',
|
||||||
|
day: '2-digit',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
second: '2-digit',
|
||||||
|
hour12: false // 禁用12小时制，使用24小时制
|
||||||
|
}).replace(/\//g, '-');
|
||||||
|
stamp.value = formattedDate
|
||||||
|
}, 1000)
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(timer)
|
||||||
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.edit {
|
.edit {
|
||||||
|
/*.dialogBox {
|
||||||
|
width: 100px;*/
|
||||||
|
|
||||||
|
.set_pup_header {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
// background-color: rgba(var(--color-base1), 1);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.system_title {
|
||||||
|
// background: url('@/assets/images/titlebg.png') no-repeat;
|
||||||
|
// background-size: 100% 100%;
|
||||||
|
width: 229px;
|
||||||
|
height: 34px;
|
||||||
|
line-height: 34px;
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'alimamashuheiti';
|
||||||
|
font-size: 18px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
> svg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-dialog) {
|
||||||
|
background: linear-gradient(180deg, rgba(var(--color-base1), 0.2) 0%, rgba(var(--color-base1), 0) 100%),
|
||||||
|
rgba(0, 0, 0, 0.6);
|
||||||
|
border: 1px solid var(--color-border1);
|
||||||
|
//padding-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-textarea__inner) {
|
||||||
|
resize: none;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-dialog__headerbtn .el-dialog__close) {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-dialog__headerbtn) {
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
border-bottom-left-radius: 80%;
|
||||||
|
background-color: rgba(var(--color-base1), 0.5);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(var(--color-base1), 1);
|
||||||
|
|
||||||
|
.el-dialog__close {
|
||||||
|
color: rgba(0, 66, 66, 1); // 悬停时改变关闭图标为红色
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//}
|
||||||
|
|
||||||
|
.leftTimeDesc {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
left: 0;
|
||||||
|
top: 0.462962963vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.icon-svg-item {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-svg-item {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-svg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.462962963vh;
|
||||||
|
z-index: 999;
|
||||||
|
/* width: 1.25vw !important;
|
||||||
|
height: 2.2222222222vh !important;*/
|
||||||
|
//height: 25px;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
|
||||||
|
.border {
|
||||||
|
//left: 45px;
|
||||||
|
//top: 0px;
|
||||||
|
width: 1px;
|
||||||
|
height: 22px;
|
||||||
|
opacity: 1;
|
||||||
|
background: linear-gradient(180deg, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 1) 55.56%, rgba(204, 204, 204, 0) 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.titles {
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
font-size: 40px;
|
||||||
|
top: 19px;
|
||||||
|
line-height: 50px;
|
||||||
|
font-family: "alimamashuheiti";
|
||||||
|
z-index: 999;
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 96px;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 99;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
.icon-tuichu {
|
.icon-tuichu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.462962963vh;
|
top: 0.462962963vh;
|
||||||
|
|||||||
BIN
src/renderer/src/views/TS/img/indicator.png
Normal file
BIN
src/renderer/src/views/TS/img/indicator.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 231 B |
@ -1,6 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="index">
|
<div class="index">
|
||||||
<!--<span @click="back">态势</span>-->
|
<!--<span @click="back">态势</span>-->
|
||||||
|
<div class="dateTime">
|
||||||
|
<span>{{ date.hms }}</span>
|
||||||
|
<div class="ymd_week">
|
||||||
|
<span>{{ date.ymd }}</span>
|
||||||
|
<span>星期{{ date.week }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="titles">实景三维态势推演系统</div>
|
<div class="titles">实景三维态势推演系统</div>
|
||||||
<svg class="icon icon-top" aria-hidden="true">
|
<svg class="icon icon-top" aria-hidden="true">
|
||||||
<use xlink:href="#icon-top"></use>
|
<use xlink:href="#icon-top"></use>
|
||||||
@ -29,6 +36,8 @@
|
|||||||
clearable
|
clearable
|
||||||
/></span>
|
/></span>
|
||||||
<span>创建时间 <el-date-picker
|
<span>创建时间 <el-date-picker
|
||||||
|
:teleported="false"
|
||||||
|
class="dark-time-picker"
|
||||||
v-model="searchParams.datetime"
|
v-model="searchParams.datetime"
|
||||||
type="datetimerange"
|
type="datetimerange"
|
||||||
start-placeholder="开始日期"
|
start-placeholder="开始日期"
|
||||||
@ -49,17 +58,22 @@
|
|||||||
<div class="tableBox">
|
<div class="tableBox">
|
||||||
<el-table
|
<el-table
|
||||||
:data="tableData"
|
:data="tableData"
|
||||||
:default-sort="{ prop: 'date', order: 'descending' }"
|
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
>
|
>
|
||||||
<el-table-column align="center" prop="name" label="推演名称"/>
|
<el-table-column align="center" prop="name" label="推演名称"/>
|
||||||
<el-table-column align="center" prop="desc" label="推演描述"/>
|
<el-table-column align="center" label="推演描述" :class-name="'ellipsis-column'">
|
||||||
<el-table-column align="center" prop="createdBy" label="创建人"/>
|
<template #default="scope">
|
||||||
|
{{ scope.row.desc }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" prop="createdBy" label="创建人" sortable/>
|
||||||
<el-table-column align="center" prop="createdAt" label="创建日期" sortable/>
|
<el-table-column align="center" prop="createdAt" label="创建日期" sortable/>
|
||||||
<el-table-column align="center" label="操作">
|
<el-table-column align="center" label="操作">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-button text size="small" type="primary" :icon="Edit" @click="toTSEdit(scope.row)">编辑</el-button>
|
|
||||||
<el-popconfirm
|
<!--<el-button text size="small" type="primary" :icon="Edit" @click="toTSEdit(scope.row)">编辑</el-button>-->
|
||||||
|
<!-- <el-popconfirm
|
||||||
confirm-button-text="确定"
|
confirm-button-text="确定"
|
||||||
cancel-button-text="取消"
|
cancel-button-text="取消"
|
||||||
icon-color="#626AEF"
|
icon-color="#626AEF"
|
||||||
@ -70,9 +84,14 @@
|
|||||||
<el-button text size="small" type="primary" :icon="Delete">删除
|
<el-button text size="small" type="primary" :icon="Delete">删除
|
||||||
</el-button>
|
</el-button>
|
||||||
|
|
||||||
<!--<el-button>Delete</el-button>-->
|
<!–<el-button>Delete</el-button>–>
|
||||||
</template>
|
</template>
|
||||||
</el-popconfirm>
|
</el-popconfirm>-->
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Edit style="width: 16px; height: 16px; " @click="toTSEdit(scope.row)"></Edit>
|
||||||
|
<Delete style="width: 16px; height: 16px;" @click="delPlanBtn(scope.row.id)"/>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@ -90,53 +109,58 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-auto-resizer>-->
|
</el-auto-resizer>-->
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="pageBox">
|
<div class="pageBox">
|
||||||
|
|
||||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
|
||||||
:page-sizes="[5, 10, 50, 100]" :page-size="pageSize"
|
:page-sizes="[5, 10, 50, 100]" :page-size="pageSize"
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
:total="total">
|
:total="total">
|
||||||
</el-pagination>
|
</el-pagination>
|
||||||
</div>-->
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<NewPlan @addCallback="getList(searchParams.value)"></NewPlan>
|
<NewPlan @addCallback="getList(searchParams.value)"></NewPlan>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {ref} from "vue";
|
import {ref, onUnmounted} from "vue";
|
||||||
import {useRouter} from "vue-router";
|
import {useRouter} from "vue-router";
|
||||||
import {Delete, Edit, CirclePlus, Download, Upload} from '@element-plus/icons-vue'
|
import {Delete, Edit, CirclePlus, Download, Upload} from '@element-plus/icons-vue'
|
||||||
import {ElMessage, TableV2SortOrder} from 'element-plus'
|
import {ElMessage, ElMessageBox, TableV2SortOrder} from 'element-plus'
|
||||||
import type {SortBy} from 'element-plus'
|
import type {SortBy} from 'element-plus'
|
||||||
import {TsApi} from "../../api/ts";
|
import {TsApi} from "../../api/ts";
|
||||||
import NewPlan from "./newPlan.vue"
|
import NewPlan from "./newPlan.vue"
|
||||||
|
|
||||||
|
const date = ref({
|
||||||
|
ymd: '',
|
||||||
|
hms: '',
|
||||||
|
week: 0
|
||||||
|
})
|
||||||
const eventBus: any = inject('bus')
|
const eventBus: any = inject('bus')
|
||||||
const {ipcRenderer} = require('electron')
|
const {ipcRenderer} = require('electron')
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
let searchParams:any = ref({
|
let searchParams: any = ref({
|
||||||
name: "",
|
name: "",
|
||||||
createdBy: "",
|
createdBy: "",
|
||||||
datetime: "",
|
datetime: "",
|
||||||
})
|
})
|
||||||
|
|
||||||
let pageSize:any = ref(5)
|
let pageSize: any = ref(10)
|
||||||
let pageNum:any = ref(1)
|
let pageNum: any = ref(1)
|
||||||
let total:any = ref(0)
|
let total: any = ref(0)
|
||||||
const back = () => {
|
const back = () => {
|
||||||
ipcRenderer.send('toggle-fullscreen', false)
|
ipcRenderer.send('toggle-fullscreen', false)
|
||||||
router.push({path: '/home'})
|
router.push({path: '/home'})
|
||||||
}
|
}
|
||||||
const handleSizeChange = (val) => {
|
const handleSizeChange = (val) => {
|
||||||
pageSize = val
|
pageSize.value = val
|
||||||
getList();
|
getList();
|
||||||
}
|
}
|
||||||
const handleCurrentChange = (val) => {
|
const handleCurrentChange = (val) => {
|
||||||
pageNum = val
|
pageNum.value = val
|
||||||
getList();
|
getList();
|
||||||
}
|
}
|
||||||
const getList = (params:any = null) => {
|
const getList = (params: any = null) => {
|
||||||
console.log(params)
|
console.log(params)
|
||||||
let formData = new FormData()
|
let formData = new FormData()
|
||||||
formData.append('pageSize', pageSize.value)
|
formData.append('pageSize', pageSize.value)
|
||||||
@ -160,6 +184,7 @@ const getList = (params:any = null) => {
|
|||||||
console.log(res)
|
console.log(res)
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
tableData.value = res.data.records
|
tableData.value = res.data.records
|
||||||
|
total.value = res.data.total
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -178,7 +203,17 @@ const toTSEdit = (row) => {
|
|||||||
console.log("当前推演方案", row)
|
console.log("当前推演方案", row)
|
||||||
router.push({
|
router.push({
|
||||||
name: 'tsEdit', // 必须用 name 匹配路由，不能用 path
|
name: 'tsEdit', // 必须用 name 匹配路由，不能用 path
|
||||||
query: {id: row.id, name: row.name, start_time: new Date(row.simulationStartTime).getTime()}
|
query: {id: row.id, name: row.name, desc: row.desc, start_time: new Date(row.simulationStartTime).getTime(),}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const delPlanBtn = (id) => {
|
||||||
|
ElMessageBox.confirm('确定要永久删除此推演方案吗？此操作不可撤销', {
|
||||||
|
type: 'warning',
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消'
|
||||||
|
}).then(() => {
|
||||||
|
delPlan(id)
|
||||||
|
}).catch(() => {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const delPlan = (id) => {
|
const delPlan = (id) => {
|
||||||
@ -242,6 +277,33 @@ const onSort = (sortBy: SortBy) => {
|
|||||||
sortState.value = sortBy
|
sortState.value = sortBy
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
|
const setTime = () => {
|
||||||
|
let date1 = new Date()
|
||||||
|
let year: any = date1.getFullYear()
|
||||||
|
let month: any = date1.getMonth() + 1
|
||||||
|
let day: any = date1.getDate()
|
||||||
|
let hours: any = date1.getHours()
|
||||||
|
if (hours < 10) {
|
||||||
|
hours = '0' + hours
|
||||||
|
}
|
||||||
|
let minutes: any = date1.getMinutes()
|
||||||
|
if (minutes < 10) {
|
||||||
|
minutes = '0' + minutes
|
||||||
|
}
|
||||||
|
let seconds: any = date1.getSeconds()
|
||||||
|
if (seconds < 10) {
|
||||||
|
seconds = '0' + seconds
|
||||||
|
}
|
||||||
|
date.value.ymd = year + '-' + month + '-' + day
|
||||||
|
date.value.hms = hours + ':' + minutes + ':' + seconds
|
||||||
|
|
||||||
|
date.value.week = ["天", "一", "二", "三", "四", "五", "六"][date1.getDay()]
|
||||||
|
}
|
||||||
|
// 添加定时器，每秒更新一次时间
|
||||||
|
const timer = setInterval(setTime, 1000)
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(timer)
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -254,6 +316,45 @@ const onSort = (sortBy: SortBy) => {
|
|||||||
height: 100vh !important;
|
height: 100vh !important;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
.dateTime {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
left: 20px;
|
||||||
|
//top: 15px;
|
||||||
|
top: 0.55vw;
|
||||||
|
height: 50px;
|
||||||
|
//border: 1px solid red;
|
||||||
|
//width: 200px;
|
||||||
|
// color: var(--svg-headColor3);
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-family: 'alimamashuheiti';
|
||||||
|
|
||||||
|
& > span:first-child {
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-family: 'alimamashuheiti';
|
||||||
|
margin-right: 10px;
|
||||||
|
width: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ymd_week {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
& > span:first-child {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > span:last-child {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.titles {
|
.titles {
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
@ -268,7 +369,7 @@ const onSort = (sortBy: SortBy) => {
|
|||||||
|
|
||||||
.icon-top {
|
.icon-top {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 95px;
|
height: 96px;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
@ -376,6 +477,10 @@ const onSort = (sortBy: SortBy) => {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.el-input__inner) {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
:deep(.el-input__inner:focus) {
|
:deep(.el-input__inner:focus) {
|
||||||
border-color: #f00;
|
border-color: #f00;
|
||||||
}
|
}
|
||||||
@ -388,6 +493,11 @@ const onSort = (sortBy: SortBy) => {
|
|||||||
border-bottom: none !important;
|
border-bottom: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.el-table__row .ellipsis-column .cell) {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
:deep(.el-table__row .el-table__cell) {
|
:deep(.el-table__row .el-table__cell) {
|
||||||
border-bottom: 1px solid rgba(152, 152, 152, 0.5);
|
border-bottom: 1px solid rgba(152, 152, 152, 0.5);
|
||||||
}
|
}
|
||||||
@ -406,4 +516,33 @@ background-color: transparent;
|
|||||||
:deep(.el-table-v2__header-wrapper) {
|
:deep(.el-table-v2__header-wrapper) {
|
||||||
background-color: rgba(0, 255, 255, 0.2);
|
background-color: rgba(0, 255, 255, 0.2);
|
||||||
}*/
|
}*/
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<style scoped>
|
||||||
|
:deep(.el-picker-panel) {
|
||||||
|
color: var(--el-text-color-regular);
|
||||||
|
background: var(--el-bg-color-overlay);
|
||||||
|
border-radius: var(--el-popper-border-radius, var(--el-border-radius-base));
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-date-range-picker) {
|
||||||
|
color-scheme: dark;
|
||||||
|
|
||||||
|
--el-bg-color-page: #0a0a0a;
|
||||||
|
--el-bg-color: #141414;
|
||||||
|
--el-bg-color-overlay: #1d1e1f;
|
||||||
|
--el-text-color-primary: #E5EAF3;
|
||||||
|
--el-text-color-regular: #CFD3DC;
|
||||||
|
--el-text-color-secondary: #A3A6AD;
|
||||||
|
--el-text-color-placeholder: #8D9095;
|
||||||
|
--el-text-color-disabled: #6C6E72;
|
||||||
|
--el-border-color-darker: #636466;
|
||||||
|
--el-border-color-dark: #58585B;
|
||||||
|
--el-border-color: #4C4D4F;
|
||||||
|
--el-border-color-light: #414243;
|
||||||
|
--el-border-color-lighter: #363637;
|
||||||
|
--el-border-color-extra-light: #2B2B2C;
|
||||||
|
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,93 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="newEvent" v-if="isShowPup">
|
<div class="newEvent" v-if="isShowPup">
|
||||||
<!-- <el-dialog v-model="isShowPup" :modal="true" draggable :close-on-click-modal="false">
|
|
||||||
<template #header>
|
|
||||||
<div class="set_pup_header">
|
|
||||||
<div class="system_title">
|
|
||||||
态势事件
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div class="set_detail">
|
|
||||||
<div class="sort">
|
|
||||||
<el-tree
|
|
||||||
ref="treeRef"
|
|
||||||
style="max-width: 600px"
|
|
||||||
:data="eventTree"
|
|
||||||
:props="defaultProps"
|
|
||||||
node-key="id"
|
|
||||||
:check-on-click-node="true"
|
|
||||||
@node-click="handleNodeClick"
|
|
||||||
:default-expanded-keys="['normal']"
|
|
||||||
:current-node-key="currentKey"
|
|
||||||
:class="{'custom-tree': true}"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="eventDetail">
|
|
||||||
<template v-if="currentKey&¤tKey!='normal'">
|
|
||||||
<el-form label-width="auto" :model="form" style="max-width: 600px">
|
|
||||||
<el-form-item label="事件名称">
|
|
||||||
<el-input v-model="form.name"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="开始时间">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="form.datetime"
|
|
||||||
type="datetime"
|
|
||||||
placeholder="选择触发时间"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="持续时间">
|
|
||||||
<div class="duration">
|
|
||||||
<span>
|
|
||||||
<el-input v-model="hour"/>时
|
|
||||||
</span>
|
|
||||||
<span>
|
|
||||||
<el-input v-model="minute"/>分
|
|
||||||
</span><span>
|
|
||||||
<el-input v-model="second"/>秒
|
|
||||||
</span>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<template v-if="currentKey=='flicker'">
|
|
||||||
<el-form-item label="闪烁间隔">
|
|
||||||
<div class="duration">
|
|
||||||
<span>
|
|
||||||
<el-input v-model="times"/>秒
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="闪烁次数">
|
|
||||||
<div class="duration">
|
|
||||||
<span>
|
|
||||||
<el-input v-model="numbers"/>次
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
</template>
|
|
||||||
<template v-if="currentKey=='move'">
|
|
||||||
<el-form-item label="路径是否包含元素点位" label-width="160">
|
|
||||||
<el-switch v-model="isContainModelPosition"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-button @click="drawLine">绘制路径</el-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
<el-form-item>
|
|
||||||
<div class="optionbtn">
|
|
||||||
<el-button @click="addEvent">确定</el-button>
|
|
||||||
<el-button>取消</el-button>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="placeholder"></div>
|
|
||||||
</div>
|
|
||||||
</el-dialog>-->
|
|
||||||
<div class="set_pup_header">
|
<div class="set_pup_header">
|
||||||
<div class="system_title">
|
<div class="system_title">
|
||||||
态势事件
|
态势事件
|
||||||
@ -116,6 +29,7 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="开始时间">
|
<el-form-item label="开始时间">
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
|
popper-class="ts_dark_theme"
|
||||||
v-model="form.datetime"
|
v-model="form.datetime"
|
||||||
type="datetime"
|
type="datetime"
|
||||||
placeholder="选择触发时间"
|
placeholder="选择触发时间"
|
||||||
@ -492,4 +406,54 @@ eventBus.on('openAddEvent', (data, cb, type) => {
|
|||||||
:deep(.el-form-item) {
|
:deep(.el-form-item) {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.el-input__inner) {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-input__wrapper) {
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
|
||||||
|
.ts_dark_theme {
|
||||||
|
.el-picker-panel {
|
||||||
|
background: #1d1e1f !important;
|
||||||
|
color: #CFD3DC !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-date-picker {
|
||||||
|
--el-datepicker-text-color: var(--el-text-color-regular);
|
||||||
|
--el-datepicker-off-text-color: var(--el-text-color-placeholder);
|
||||||
|
--el-datepicker-header-text-color: var(--el-text-color-regular);
|
||||||
|
--el-datepicker-icon-color: var(--el-text-color-primary);
|
||||||
|
--el-datepicker-border-color: var(--el-disabled-border-color);
|
||||||
|
--el-datepicker-inner-border-color: var(--el-border-color-light);
|
||||||
|
--el-datepicker-inrange-bg-color: var(--el-border-color-extra-light);
|
||||||
|
--el-datepicker-inrange-hover-bg-color: var(--el-border-color-extra-light);
|
||||||
|
--el-datepicker-active-color: var(--el-color-primary);
|
||||||
|
--el-datepicker-hover-text-color: var(--el-color-primary);
|
||||||
|
--el-bg-color-page: #0a0a0a;
|
||||||
|
--el-bg-color: #141414;
|
||||||
|
--el-bg-color-overlay: #1d1e1f;
|
||||||
|
--el-text-color-primary: #E5EAF3;
|
||||||
|
--el-text-color-regular: #CFD3DC;
|
||||||
|
--el-text-color-secondary: #A3A6AD;
|
||||||
|
--el-text-color-placeholder: #8D9095;
|
||||||
|
--el-text-color-disabled: #6C6E72;
|
||||||
|
--el-border-color-darker: #636466;
|
||||||
|
--el-border-color-dark: #58585B;
|
||||||
|
--el-border-color: #4C4D4F;
|
||||||
|
--el-border-color-light: #414243;
|
||||||
|
--el-border-color-lighter: #363637;
|
||||||
|
--el-border-color-extra-light: #2B2B2C;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -104,7 +104,9 @@ const addPlan = async (formEl: FormInstance | undefined) => {
|
|||||||
})
|
})
|
||||||
emit('addCallback');
|
emit('addCallback');
|
||||||
}
|
}
|
||||||
$(".newPlan")[0].style.display = "none"
|
isShowPup.value = false
|
||||||
|
formEl.resetFields()
|
||||||
|
// $(".newPlan")[0].style.display = "none"
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
console.log('提交失败', fields)
|
console.log('提交失败', fields)
|
||||||
|
|||||||
168
src/renderer/src/views/TS/util/drag.js
Normal file
168
src/renderer/src/views/TS/util/drag.js
Normal file
@ -0,0 +1,168 @@
|
|||||||
|
export let dragElement = {
|
||||||
|
inserted: function (el, binding) {
|
||||||
|
console.log("binding", binding)
|
||||||
|
let startX,
|
||||||
|
startY,
|
||||||
|
currentX = 0,
|
||||||
|
currentY = 0;
|
||||||
|
// el.style.position = "relative";
|
||||||
|
// el.parentNode.style.position = "relative";
|
||||||
|
el.style.cursor = "pointer";
|
||||||
|
// currentX = el.style.left
|
||||||
|
el.addEventListener("mousedown", function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
startX = event.pageX - currentX;
|
||||||
|
startY = event.pageY - currentY;
|
||||||
|
console.log("mousedown", startX)
|
||||||
|
console.log("currentX", currentX)
|
||||||
|
console.log("currentX", event.pageX)
|
||||||
|
|
||||||
|
document.addEventListener("mousemove", onMouseMove);
|
||||||
|
document.addEventListener("mouseup", onMouseUp);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* el.addEventListener("touchstart", function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
startX = event.touches[0].clientX - currentX;
|
||||||
|
startY = event.touches[0].clientY - currentY;
|
||||||
|
document.addEventListener("touchmove", onTouchMove);
|
||||||
|
document.addEventListener("touchend", onTouchEnd);
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
function onMouseUp() {
|
||||||
|
|
||||||
|
// window.dispatchEvent(window.EventsNameMap.get("changeStampEventBox"));
|
||||||
|
document.removeEventListener("mousemove", onMouseMove);
|
||||||
|
document.removeEventListener("mouseup", onMouseUp);
|
||||||
|
clearInterval(window.intervalID)
|
||||||
|
window.intervalID = null
|
||||||
|
}
|
||||||
|
|
||||||
|
/* function onTouchEnd() {
|
||||||
|
document.removeEventListener("touchmove", onTouchMove);
|
||||||
|
document.removeEventListener("touchend", onTouchEnd);
|
||||||
|
}*/
|
||||||
|
|
||||||
|
/* function onTouchMove(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
currentX = event.touches[0].clientX - startX;
|
||||||
|
currentY = event.touches[0].clientY - startY;
|
||||||
|
drag(el);
|
||||||
|
}*/
|
||||||
|
|
||||||
|
function onMouseMove(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
currentX = event.pageX - startX;
|
||||||
|
currentY = event.pageY - startY;
|
||||||
|
|
||||||
|
/* console.log("currentX", currentX)
|
||||||
|
console.log("event.pageX", event.pageX)
|
||||||
|
console.log("startX", startX)*/
|
||||||
|
// drag(event, el);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drag(event, el) {
|
||||||
|
// el.style.top = currentY + "px";
|
||||||
|
// el.parentNode.style.left = currentX /*- TSTYOBJ.store.scales.scrollLeft*/ + "px";
|
||||||
|
// if (TSTYOBJ.store.editorMode == TSTYOBJ.editorMode.EDITING)
|
||||||
|
let newX = currentX + startX - TSTYOBJ.store.scales.gridWidth
|
||||||
|
let isSide = (newX > TSTYOBJ.store.panelWidth - 50) || (newX < 50)
|
||||||
|
|
||||||
|
console.log(isSide)
|
||||||
|
// 到达边界之后，先滚动滚条
|
||||||
|
if (isSide) {
|
||||||
|
if (window.intervalID)
|
||||||
|
return
|
||||||
|
if (newX <= 0) {
|
||||||
|
newX = 0
|
||||||
|
TSTYOBJ.store.scales.cursorLeft = newX
|
||||||
|
} else if (newX < 50) {
|
||||||
|
// 如果已经滚动到最左边，则直接减少
|
||||||
|
|
||||||
|
if (TSTYOBJ.store.scales.scrollLeft == 0) {
|
||||||
|
TSTYOBJ.store.scales.cursorLeft = newX
|
||||||
|
clearInterval(window.intervalID);
|
||||||
|
window.intervalID = null
|
||||||
|
} else {
|
||||||
|
/*let newLeft = TSTYOBJ.store.scales.scrollLeft - 10;
|
||||||
|
let finalX = newLeft
|
||||||
|
// 如果滚动条不够滚，则直接变为0
|
||||||
|
if (newLeft < 0)
|
||||||
|
finalX = 0
|
||||||
|
TSTYOBJ.store.scales.scrollLeft = finalX*/
|
||||||
|
/* let fun=()=>{
|
||||||
|
let newLeft = TSTYOBJ.store.scales.scrollLeft - 1;
|
||||||
|
let finalX = newLeft
|
||||||
|
if (newLeft < 0)
|
||||||
|
finalX = 0
|
||||||
|
TSTYOBJ.store.scales.scrollLeft = finalX
|
||||||
|
}*/
|
||||||
|
window.intervalID = setInterval(() => {
|
||||||
|
let newLeft = TSTYOBJ.store.scales.scrollLeft - 1;
|
||||||
|
let finalX = newLeft
|
||||||
|
if (newLeft < 0)
|
||||||
|
finalX = 0
|
||||||
|
TSTYOBJ.store.scales.scrollLeft = finalX
|
||||||
|
}, 10)
|
||||||
|
}
|
||||||
|
} else if (newX + TSTYOBJ.store.scales.scrollLeft >= TSTYOBJ.store.scales.fullWidth) {
|
||||||
|
newX = TSTYOBJ.store.panelWidth
|
||||||
|
TSTYOBJ.store.scales.cursorLeft = newX
|
||||||
|
} else {
|
||||||
|
let maxScroll = TSTYOBJ.store.scales.fullWidth - TSTYOBJ.store.panelWidth
|
||||||
|
if (TSTYOBJ.store.scales.scrollLeft == maxScroll) {
|
||||||
|
TSTYOBJ.store.scales.cursorLeft = newX
|
||||||
|
clearInterval(window.intervalID);
|
||||||
|
window.intervalID = null
|
||||||
|
} else {
|
||||||
|
/* let fun = () => {
|
||||||
|
console.log("intervalID",intervalID)
|
||||||
|
let newLeft = TSTYOBJ.store.scales.scrollLeft + 1;
|
||||||
|
let finalX = newLeft
|
||||||
|
if (newLeft >= maxScroll) {
|
||||||
|
TSTYOBJ.store.scales.cursorLeft = newX
|
||||||
|
clearInterval(intervalID);
|
||||||
|
window.intervalID=null
|
||||||
|
finalX = maxScroll
|
||||||
|
}
|
||||||
|
TSTYOBJ.store.scales.scrollLeft = finalX
|
||||||
|
}*/
|
||||||
|
// fun()
|
||||||
|
window.intervalID = setInterval(() => {
|
||||||
|
// console.log("intervalID",intervalID)
|
||||||
|
let newLeft = TSTYOBJ.store.scales.scrollLeft + 1;
|
||||||
|
let finalX = newLeft
|
||||||
|
if (newLeft >= maxScroll) {
|
||||||
|
TSTYOBJ.store.scales.cursorLeft = newX
|
||||||
|
clearInterval(window.intervalID);
|
||||||
|
window.intervalID = null
|
||||||
|
finalX = maxScroll
|
||||||
|
}
|
||||||
|
TSTYOBJ.store.scales.scrollLeft = finalX
|
||||||
|
}, 10)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log("intervalID", intervalID)
|
||||||
|
clearInterval(window.intervalID)
|
||||||
|
window.intervalID = null
|
||||||
|
// window.intervalID=null
|
||||||
|
TSTYOBJ.store.scales.cursorLeft = newX
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
binding.value()
|
||||||
|
/*let transform = el.parentNode.style.transform
|
||||||
|
let translate = 0
|
||||||
|
if (transform) {
|
||||||
|
let arr = transform.split("translateX(")
|
||||||
|
translate = arr[1].split("px")[0]
|
||||||
|
translate = Number(translate)
|
||||||
|
|
||||||
|
}
|
||||||
|
console.log("translate", translate)
|
||||||
|
el.parentNode.style.transform = `translateX(${currentX}px)`// Number(translate) + currentX + "px";//currentX*/
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
63
src/renderer/src/views/TS/util/dragLeftRight.js
Normal file
63
src/renderer/src/views/TS/util/dragLeftRight.js
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
// util/dragLeftRight.js
|
||||||
|
export default {
|
||||||
|
mounted(el, binding) {
|
||||||
|
let startX,
|
||||||
|
startY,
|
||||||
|
currentX = 0,
|
||||||
|
currentY = 0;
|
||||||
|
|
||||||
|
// 鼠标按下事件
|
||||||
|
const handleMousedown = (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
startX = event.pageX - currentX;
|
||||||
|
startY = event.pageY - currentY;
|
||||||
|
document.addEventListener("mousemove", handleMousemove);
|
||||||
|
document.addEventListener("mouseup", handleMouseup);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 鼠标移动事件
|
||||||
|
const handleMousemove = (event) => {
|
||||||
|
console.log("move")
|
||||||
|
event.preventDefault();
|
||||||
|
currentX = event.pageX - startX;
|
||||||
|
currentY = event.pageY - startY;
|
||||||
|
// drag(event, el)
|
||||||
|
};
|
||||||
|
|
||||||
|
// 鼠标松开事件
|
||||||
|
const handleMouseup = () => {
|
||||||
|
document.removeEventListener("mousemove", handleMousemove);
|
||||||
|
document.removeEventListener("mouseup", handleMouseup);
|
||||||
|
clearInterval(window.intervalID)
|
||||||
|
window.intervalID = null
|
||||||
|
};
|
||||||
|
|
||||||
|
// 给元素绑定鼠标按下事件
|
||||||
|
el.addEventListener('mousedown', handleMousedown);
|
||||||
|
|
||||||
|
// 组件卸载时移除事件监听（避免内存泄漏）
|
||||||
|
el._dragCleanup = () => {
|
||||||
|
el.removeEventListener('mousedown', handleMousedown);
|
||||||
|
document.removeEventListener('mousemove', handleMousemove);
|
||||||
|
document.removeEventListener('mouseup', handleMouseup);
|
||||||
|
};
|
||||||
|
|
||||||
|
function drag(event, el) {
|
||||||
|
let newX = currentX + startX - (window['tsObj']._Store._scales.gridWidth || 400)
|
||||||
|
let isSide = (newX > window['tsObj']._Store._panelWidth - 50) || (newX < 50)
|
||||||
|
console.log("isSide", isSide)
|
||||||
|
console.log("newX", newX)
|
||||||
|
if (isSide) {
|
||||||
|
} else {
|
||||||
|
clearInterval(window.intervalID)
|
||||||
|
window.intervalID = null
|
||||||
|
window['tsObj']._Store.setScale("cursorLeft", newX)
|
||||||
|
}
|
||||||
|
binding.value(newX)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
unmounted(el) {
|
||||||
|
// 组件卸载时执行清理
|
||||||
|
if (el._dragCleanup) el._dragCleanup();
|
||||||
|
}
|
||||||
|
};
|
||||||
78
src/renderer/src/views/TS/util/dragLeftRight1.js
Normal file
78
src/renderer/src/views/TS/util/dragLeftRight1.js
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
// util/dragLeftRight.js
|
||||||
|
export default {
|
||||||
|
mounted(el, binding) {
|
||||||
|
let startX = 0; // 鼠标起始X坐标
|
||||||
|
let startLeft = 0; // 元素起始left值
|
||||||
|
let isDragging = false; // 拖拽状态标记
|
||||||
|
|
||||||
|
// 鼠标按下事件
|
||||||
|
const handleMousedown = (e) => {
|
||||||
|
console.log("点击了元素")
|
||||||
|
isDragging = true;
|
||||||
|
startX = e.clientX;
|
||||||
|
startLeft = el.offsetLeft; // 获取元素初始left偏移
|
||||||
|
|
||||||
|
// 阻止默认行为和冒泡，避免影响其他元素
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
// 绑定鼠标移动和松开事件到document（全局监听，避免鼠标移出元素后失效）
|
||||||
|
document.addEventListener('mousemove', handleMousemove);
|
||||||
|
document.addEventListener('mouseup', handleMouseup);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 鼠标移动事件
|
||||||
|
const handleMousemove = (e) => {
|
||||||
|
if (!isDragging) return;
|
||||||
|
|
||||||
|
// 计算鼠标移动距离
|
||||||
|
const moveX = e.clientX - startX;
|
||||||
|
// 计算新的left值（仅水平拖动，不改变top）
|
||||||
|
let newLeft = startLeft + moveX;
|
||||||
|
|
||||||
|
// 获取父容器（时间轴容器）的边界，限制拖拽范围
|
||||||
|
const container = el.parentElement; // 父容器是 .TLContainer
|
||||||
|
const containerWidth = container.offsetWidth;
|
||||||
|
const elWidth = el.offsetWidth;
|
||||||
|
|
||||||
|
// 限制left最小值为0，最大值为容器宽度 - 元素自身宽度（避免超出容器）
|
||||||
|
newLeft = Math.max(0, Math.min(newLeft, containerWidth - elWidth));
|
||||||
|
|
||||||
|
// 设置元素新位置（通过left属性控制）
|
||||||
|
el.style.left = `${newLeft}px`;
|
||||||
|
|
||||||
|
// 同步到组件的cursorLeft变量（更新视图）
|
||||||
|
if (binding.value && typeof binding.value === 'function') {
|
||||||
|
binding.value(newLeft); // 回调函数传递最新left值
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
currentX = event.pageX - startX;
|
||||||
|
currentY = event.pageY - startY;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 鼠标松开事件
|
||||||
|
const handleMouseup = () => {
|
||||||
|
isDragging = false;
|
||||||
|
// 移除全局事件监听（避免内存泄漏）
|
||||||
|
document.removeEventListener('mousemove', handleMousemove);
|
||||||
|
document.removeEventListener('mouseup', handleMouseup);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 给元素绑定鼠标按下事件
|
||||||
|
el.addEventListener('mousedown', handleMousedown);
|
||||||
|
|
||||||
|
// 组件卸载时移除事件监听（避免内存泄漏）
|
||||||
|
el._dragCleanup = () => {
|
||||||
|
el.removeEventListener('mousedown', handleMousedown);
|
||||||
|
document.removeEventListener('mousemove', handleMousemove);
|
||||||
|
document.removeEventListener('mouseup', handleMouseup);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
unmounted(el) {
|
||||||
|
// 组件卸载时执行清理
|
||||||
|
if (el._dragCleanup) el._dragCleanup();
|
||||||
|
}
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user