增加主题色

This commit is contained in:
zyl
2025-12-10 09:31:25 +08:00
parent cdb483acc2
commit ac9fc5b660
22 changed files with 1281 additions and 865 deletions

View File

@ -1,6 +1,6 @@
server: server:
host: 127.0.0.1 host: 127.0.0.1
port: 8848 port: 8895
path: C:\Users\Administrator\AppData\Roaming\dzsp_shijingjun_offline_Y_save path: C:\Users\Administrator\AppData\Roaming\dzsp_shijingjun_offline_Y_save
poi: poi:
global: global:

View File

@ -33,6 +33,7 @@
src: url('../fonts/AlimamaShuHeiTi-Bold.ttf') format('truetype'); src: url('../fonts/AlimamaShuHeiTi-Bold.ttf') format('truetype');
} }
:root { :root {
--color-base1: 0, 255, 255; --color-base1: 0, 255, 255;
--color-sdk-auxiliary: 0, 66, 66; --color-sdk-auxiliary: 0, 66, 66;
@ -456,7 +457,8 @@
border: 1px solid rgba(var(--color-base1), 0.5); border: 1px solid rgba(var(--color-base1), 0.5);
} }
.YJ-custom-base-dialog>.content .table input {} .YJ-custom-base-dialog > .content .table input {
}
.YJ-custom-base-dialog > .content .table .tr { .YJ-custom-base-dialog > .content .table .tr {
display: flex; display: flex;
@ -569,7 +571,6 @@
} }
.YJ-custom-base-dialog > .content .table .tr .td .link-edit { .YJ-custom-base-dialog > .content .table .tr .td .link-edit {
min-height: 32px; min-height: 32px;
line-height: 18px; line-height: 18px;
@ -704,6 +705,7 @@
.YJ-custom-base-dialog > .content .input-number-unit input[type=number] { .YJ-custom-base-dialog > .content .input-number-unit input[type=number] {
padding: 0 16px 0 10px; padding: 0 16px 0 10px;
} }
.YJ-custom-base-dialog > .content .input-number-unit input[type=number]::-webkit-outer-spin-button, .YJ-custom-base-dialog > .content .input-number-unit input[type=number]::-webkit-outer-spin-button,
.YJ-custom-base-dialog > .content .input-number-unit input[type=number]::-webkit-inner-spin-button { .YJ-custom-base-dialog > .content .input-number-unit input[type=number]::-webkit-inner-spin-button {
margin-left: 5px; margin-left: 5px;
@ -2048,7 +2050,8 @@
} }
/* 填挖方分析 */ /* 填挖方分析 */
.YJ-custom-base-dialog.cut-fill>.content>div .row .label {} .YJ-custom-base-dialog.cut-fill > .content > div .row .label {
}
.YJ-custom-base-dialog.cut-fill > .content { .YJ-custom-base-dialog.cut-fill > .content {
width: 562px; width: 562px;
@ -2070,6 +2073,7 @@
.YJ-custom-base-dialog.cut-fill > .content > div .div-item:last-child .row .unit { .YJ-custom-base-dialog.cut-fill > .content > div .div-item:last-child .row .unit {
margin-left: 5px; margin-left: 5px;
} }
.YJ-custom-base-dialog.cut-fill > .content .firstTip { .YJ-custom-base-dialog.cut-fill > .content .firstTip {
position: absolute; position: absolute;
left: 340px; left: 340px;
@ -2134,6 +2138,7 @@
flex: 0 0 60px; flex: 0 0 60px;
justify-content: center; justify-content: center;
} }
.YJ-custom-base-dialog.submerge > .content .rangeWords { .YJ-custom-base-dialog.submerge > .content .rangeWords {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@ -2295,6 +2300,7 @@
.YJ-custom-base-dialog.circle-view-shed > .content { .YJ-custom-base-dialog.circle-view-shed > .content {
width: 290px; width: 290px;
} }
.YJ-custom-base-dialog.circle-view-shed > .content .firstTip { .YJ-custom-base-dialog.circle-view-shed > .content .firstTip {
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
@ -2732,7 +2738,8 @@
min-width: 410px; min-width: 410px;
} }
.YJ-custom-base-dialog.stand-text>.content>div .row .label {} .YJ-custom-base-dialog.stand-text > .content > div .row .label {
}
.YJ-custom-base-dialog.stand-text > .content > div .row textarea { .YJ-custom-base-dialog.stand-text > .content > div .row textarea {
min-width: 200px; min-width: 200px;
@ -3072,6 +3079,7 @@
background-size: 100% 100%; background-size: 100% 100%;
padding: 5px 5px 0px 5px; padding: 5px 5px 0px 5px;
} }
.popup-textarea textarea { .popup-textarea textarea {
width: 158px; width: 158px;
height: 95px; height: 95px;
@ -3079,6 +3087,7 @@
border: unset !important; border: unset !important;
color: #fff; color: #fff;
} }
.popup-textarea textarea::-webkit-scrollbar { .popup-textarea textarea::-webkit-scrollbar {
width: 8px !important; width: 8px !important;
/* height: 8px!important; */ /* height: 8px!important; */
@ -3687,11 +3696,13 @@
border: 1px solid rgba(var(--color-base1), 0.5); border: 1px solid rgba(var(--color-base1), 0.5);
border-right: none; border-right: none;
} }
.billboard-attribute-box .table .tr .th, .billboard-attribute-box .table .tr .td { .billboard-attribute-box .table .tr .th, .billboard-attribute-box .table .tr .td {
border-right: 1px solid rgba(var(--color-base1), 0.5); border-right: 1px solid rgba(var(--color-base1), 0.5);
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.billboard-attribute-box .table .tr .th:last-child, .billboard-attribute-box .table .tr .td:last-child { .billboard-attribute-box .table .tr .th:last-child, .billboard-attribute-box .table .tr .td:last-child {
border-right: none; border-right: none;
} }
@ -3740,18 +3751,17 @@
#YJ-custom-message.success { #YJ-custom-message.success {
/* background-color: #f0f9eb; /* background-color: #f0f9eb;
color: rgb(82, 196, 26); */ color: rgb(82, 196, 26); */
background: background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
linear-gradient(0deg, rgba(27, 248, 195, 0.5) 0%, rgba(27, 248, 195, 0) 100%); linear-gradient(0deg, rgba(27, 248, 195, 0.5) 0%, rgba(27, 248, 195, 0) 100%);
font-size: 14px !important; font-size: 14px !important;
font-weight: 500 !important; font-weight: 500 !important;
color: rgba(27, 248, 195, 1); color: rgba(27, 248, 195, 1);
} }
#YJ-custom-message.warning { #YJ-custom-message.warning {
/* background-color: #fdf6ec; /* background-color: #fdf6ec;
color: #e6a23c; */ color: #e6a23c; */
background: background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
linear-gradient(0deg, rgba(255, 161, 69, 0.5) 0%, rgba(255, 161, 69, 0) 100%); linear-gradient(0deg, rgba(255, 161, 69, 0.5) 0%, rgba(255, 161, 69, 0) 100%);
font-size: 14px !important; font-size: 14px !important;
font-weight: 500 !important; font-weight: 500 !important;

View File

@ -42,5 +42,15 @@
@font-face { @font-face {
font-family: 'SourceHanSans'; font-family: 'SourceHanSans';
src: url('../iconfont/SourceHanSansCN-ExtraLight.otf') format('opentype'); src: url('../iconfont/SourceHanSansCN-ExtraLight.ttf') format('opentype');
}
@font-face {
font-family: 'siyuanheitibold';
src: url('../iconfont/SourceHanSansCN-Bold.ttf') format('truetype');
}
@font-face {
font-family: 'siyuanheitiheavy';
src: url('../iconfont/SourceHanSansCN-Heavy.otf') format('opentype');
} }

View File

@ -108,7 +108,9 @@ div {
-webkit-box-shadow: inset 0 0 6px rgba(var(--color-base1), 1); -webkit-box-shadow: inset 0 0 6px rgba(var(--color-base1), 1);
background-color: rgba(var(--color-base1), 1); background-color: rgba(var(--color-base1), 1);
} }
.siyuanheitibold {
font-family: 'siyuanheitibold';
}
.oneLine { .oneLine {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;

View File

@ -0,0 +1,43 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="358.50830078125" height="60"
viewBox="0 0 358.50830078125 60" >
<path fill-rule="evenodd" fill-opacity="0.6"
d="M116.644 58.9285L133.685 58.9285L156.149 0L139.107 0L116.644 58.9285ZM144.53 58.9285L161.571 58.9285L184.035 0L166.994 0L144.53 58.9285ZM173.965 58.9285L191.007 58.9285L213.471 0L196.429 0L173.965 58.9285ZM218.893 58.9285L201.851 58.9285L224.315 0L241.357 0L218.893 58.9285ZM231.287 58.9285L248.329 58.9285L270.792 0L253.751 0L231.287 58.9285ZM276.215 58.9285L259.173 58.9285L281.637 0L298.679 0L276.215 58.9285ZM288.609 58.9285L305.65 58.9285L328.114 0L311.072 0L288.609 58.9285ZM333.536 58.9285L316.495 58.9285L338.959 0L356 0L333.536 58.9285ZM2.00024 59.9999L19.0418 59.9999L41.5057 1.07143L24.4641 1.07143L2.00024 59.9999ZM29.8865 59.9999L46.928 59.9999L69.3919 1.07143L52.3504 1.07143L29.8865 59.9999ZM59.3219 59.9999L76.3635 59.9999L98.8274 1.07143L81.7858 1.07143L59.3219 59.9999ZM104.25 59.9999L87.2081 59.9999L109.672 1.07143L126.714 1.07143L104.25 59.9999Z"></path>
<path fill-rule="evenodd" fill="url(#linear_fill_472_48_1)"
d="M116.644 58.9285L133.685 58.9285L156.149 0L139.107 0L116.644 58.9285ZM144.53 58.9285L161.571 58.9285L184.035 0L166.994 0L144.53 58.9285ZM173.965 58.9285L191.007 58.9285L213.471 0L196.429 0L173.965 58.9285ZM218.893 58.9285L201.851 58.9285L224.315 0L241.357 0L218.893 58.9285ZM231.287 58.9285L248.329 58.9285L270.792 0L253.751 0L231.287 58.9285ZM276.215 58.9285L259.173 58.9285L281.637 0L298.679 0L276.215 58.9285ZM288.609 58.9285L305.65 58.9285L328.114 0L311.072 0L288.609 58.9285ZM333.536 58.9285L316.495 58.9285L338.959 0L356 0L333.536 58.9285ZM2.00024 59.9999L19.0418 59.9999L41.5057 1.07143L24.4641 1.07143L2.00024 59.9999ZM29.8865 59.9999L46.928 59.9999L69.3919 1.07143L52.3504 1.07143L29.8865 59.9999ZM59.3219 59.9999L76.3635 59.9999L98.8274 1.07143L81.7858 1.07143L59.3219 59.9999ZM104.25 59.9999L87.2081 59.9999L109.672 1.07143L126.714 1.07143L104.25 59.9999Z"></path>
<rect x="4.181396484375" y="0" width="354.326904296875" height="60" fill="url(#linear_fill_472_49)"></rect>
<g clip-path="url(#clip-path-472_52)">
<path d="M18.0572 50.2342L18.5203 50.7048L18.5203 29.5283L16.205 31.8813L8.10146 40.1166L9.83793 41.8813L18.0572 50.2342ZM16.205 44.8225L11.6901 40.1166L16.205 35.4107L16.205 44.8225Z"
></path>
<g opacity="0.5">
<path d="M12.8487 49.8465L13.3118 50.3095L13.3118 29.4719L10.9965 31.7872L2.89298 39.8907L4.62944 41.6272L12.8487 49.8465ZM10.9965 44.5213L6.48165 39.8907L10.9965 35.2601L10.9965 44.5213Z"
></path>
</g>
</g>
<g clip-path="url(#clip-path-472_57)">
<path d="M339.596 50.2342L339.133 50.7048L339.133 29.5283L341.448 31.8813L349.551 40.1166L347.815 41.8813L339.596 50.2342ZM341.448 44.8225L345.963 40.1166L341.448 35.4107L341.448 44.8225Z"
></path>
<g opacity="0.5">
<path d="M344.805 49.8465L344.342 50.3095L344.342 29.4719L346.657 31.7872L354.76 39.8907L353.024 41.6272L344.805 49.8465ZM346.657 44.5213L351.172 39.8907L346.657 35.2601L346.657 44.5213Z"
></path>
</g>
</g>
<defs>
<linearGradient id="linear_fill_472_48_1" x1="186.551025390625" y1="43.8173828125" x2="186.550048828125"
y2="-13.4248046875" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0.2"/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="linear_fill_472_49" x1="4.181396484375" y1="30" x2="358.50830078125" y2="30"
gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0"/>
<stop offset="0.4891" stop-opacity="0.5"/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip-path-472_52">
<path d="M-2.67029e-05 26L-2.67029e-05 54.2353L27.7834 54.2353L27.7834 26L-2.67029e-05 26Z"/>
</clipPath>
<clipPath id="clip-path-472_57">
<path d="M357.654 26L357.654 54.2353L329.87 54.2353L329.87 26L357.654 26Z" />
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 4.1 KiB

View File

@ -8,47 +8,48 @@ let theme = {
} }
theme.color1.set("--color-base1", "0, 255, 255") theme.color1.set("--color-base1", "0, 255, 255")
theme.color1.set("--color-base1-half", "0, 255, 255,0.5")
theme.color1.set("--color-base2", "0, 255, 255") theme.color1.set("--color-base2", "0, 255, 255")
theme.color1.set("--color-border1", "rgb(0, 200, 255)") theme.color1.set("--color-border1", "rgb(0, 200, 255)")
theme.color1.set("--color-text2", "173, 241, 255") theme.color1.set("--color-text2", "173, 241, 255")
theme.color1.set("--color-text-shadow", "rgba(20, 118, 255, 1)") theme.color1.set("--color-text-shadow", "rgba(20, 118, 255, 1)")
theme.color2.set("--color-base1", "0, 194, 142") theme.color2.set("--color-base1", "0, 194, 142")
theme.color2.set("--color-base1-half", "0, 194, 142,0.5")
theme.color2.set("--color-base2", "220, 255, 196") theme.color2.set("--color-base2", "220, 255, 196")
theme.color2.set("--color-border1", "rgba(var(--color-base1), 1)") theme.color2.set("--color-border1", "rgba(var(--color-base1), 1)")
theme.color2.set("--color-text2", "var(--color-base2)") theme.color2.set("--color-text2", "var(--color-base2)")
theme.color2.set("--color-text-shadow", "rgba(var(--color-base2), 0)") theme.color2.set("--color-text-shadow", "rgba(var(--color-base2), 0)")
theme.color3.set("--color-base1", "0, 255, 200") theme.color3.set("--color-base1", "0, 255, 200")
theme.color3.set("--color-base1-half", "0, 255, 200,0.5")
theme.color3.set("--color-base2", "201, 252, 232") theme.color3.set("--color-base2", "201, 252, 232")
theme.color3.set("--color-border1", "rgba(var(--color-base1), 1)") theme.color3.set("--color-border1", "rgba(var(--color-base1), 1)")
theme.color3.set("--color-text2", "var(--color-base2)") theme.color3.set("--color-text2", "var(--color-base2)")
theme.color3.set("--color-text-shadow", "rgba(var(--color-base2), 0)") theme.color3.set("--color-text-shadow", "rgba(var(--color-base2), 0)")
theme.color4.set("--color-base1", "42, 200, 251") theme.color4.set("--color-base1", "42, 200, 251")
theme.color4.set("--color-base1-half", "42, 200, 251,0.5")
theme.color4.set("--color-base2", "198, 248, 255") theme.color4.set("--color-base2", "198, 248, 255")
theme.color4.set("--color-border1", "rgba(var(--color-base1), 1)") theme.color4.set("--color-border1", "rgba(var(--color-base1), 1)")
theme.color4.set("--color-text2", "var(--color-base2)") theme.color4.set("--color-text2", "var(--color-base2)")
theme.color4.set("--color-text-shadow", "rgba(var(--color-base2), 0)") theme.color4.set("--color-text-shadow", "rgba(var(--color-base2), 0)")
theme.color5.set("--color-base1", "229, 93, 93") theme.color5.set("--color-base1", "229, 93, 93")
theme.color5.set("--color-base1-half", "229, 93, 93,0.5")
theme.color5.set("--color-base2", "255, 224, 228") theme.color5.set("--color-base2", "255, 224, 228")
theme.color5.set("--color-border1", "rgba(var(--color-base1), 1)") theme.color5.set("--color-border1", "rgba(var(--color-base1), 1)")
theme.color5.set("--color-text2", "var(--color-base2)") theme.color5.set("--color-text2", "var(--color-base2)")
theme.color5.set("--color-text-shadow", "rgba(var(--color-base2), 0)") theme.color5.set("--color-text-shadow", "rgba(var(--color-base2), 0)")
theme.color6.set("--color-base1", "255, 165, 92") theme.color6.set("--color-base1", "255, 165, 92")
theme.color6.set("--color-base1-half", "255, 165, 92,0.5")
theme.color6.set("--color-base2", "255, 233, 207") theme.color6.set("--color-base2", "255, 233, 207")
theme.color6.set("--color-border1", "rgba(var(--color-base1), 1)") theme.color6.set("--color-border1", "rgba(var(--color-base1), 1)")
theme.color6.set("--color-text2", "var(--color-base2)") theme.color6.set("--color-text2", "var(--color-base2)")
theme.color6.set("--color-text-shadow", "rgba(var(--color-base2), 0)") theme.color6.set("--color-text-shadow", "rgba(var(--color-base2), 0)")
// theme.yingguangse.set("--svg-headColor1", "rgba(11, 37, 40, 0.6)") // theme.yingguangse.set("--svg-headColor1", "rgba(11, 37, 40, 0.6)")
// theme.yingguangse.set("--svg-headColor2", "rgba(11, 37, 40, 0.8)") // theme.yingguangse.set("--svg-headColor2", "rgba(11, 37, 40, 0.8)")
// theme.yingguangse.set("--svg-headColor3", "#0ff") // theme.yingguangse.set("--svg-headColor3", "#0ff")

View File

@ -2,14 +2,14 @@
<div> <div>
<div class="miniCabin" :style="!mini?'display:none':''"> <div class="miniCabin" :style="!mini?'display:none':''">
<div class="switch-node-outer" @click="mini=false"> <div class="switch-node-outer" @click="mini=false">
<div class="switch-node-inner"> <div class="switch-node-inner siyuanheitibold">
{{ t('ts.unfoldCabin') }} {{ t('ts.unfoldCabin') }}
</div> </div>
</div> </div>
</div> </div>
<div class="cabin" :style="mini?'display:none':''"> <div class="cabin" :style="mini?'display:none':''">
<div class="titleBox"> <div class="titleBox">
<span class="title">{{ t('ts.layerCabin') }}</span> <span class="title siyuanheitibold">{{ t('ts.layerCabin') }}</span>
<span class="close" @click="mini=true"> <span class="close" @click="mini=true">
<svg-icon :size="15" class="icon-svg-item" name="closeRightTs"/>{{ t('ts.fold') }} <svg-icon :size="15" class="icon-svg-item" name="closeRightTs"/>{{ t('ts.fold') }}
</span> </span>
@ -50,7 +50,7 @@ import {useTreeNode} from "../components/tree/hooks/treeNode";
import {$changeComponentShow} from "../../utils/communication"; import {$changeComponentShow} from "../../utils/communication";
import {debounce} from '@/utils' import {debounce} from '@/utils'
let canCheckType: Array<any> = ['directory', 'gdslImagery', 'terrain', 'tileset', 'arcgisWximagery', 'arcgisBlueImagery', 'gdlwImagery'] let canCheckType: Array<any> = ['layer', 'directory', 'gdslImagery', 'terrain', 'tileset', 'arcgisWximagery', 'arcgisBlueImagery', 'gdlwImagery']
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";
@ -284,6 +284,7 @@ const onClick = (event: MouseEvent, treeId: string, treeNode: any) => {
*/ */
const onCheck = async (event: any, treeId: any, treeNode: any) => { const onCheck = async (event: any, treeId: any, treeNode: any) => {
console.log(treeNode, 'treeNode') console.log(treeNode, 'treeNode')
let p_ids: any = [] let p_ids: any = []
let parentNode = treeNode.getParentNode(); let parentNode = treeNode.getParentNode();
if (parentNode) { if (parentNode) {
@ -358,6 +359,7 @@ const onCheck = async (event: any, treeId: any, treeNode: any) => {
sourceStatus(treeNode) sourceStatus(treeNode)
console.log("ids", ids) console.log("ids", ids)
return
const res = await TsApi.updateTreeShow(ids) const res = await TsApi.updateTreeShow(ids)
if (res.code == 0 || res.code == 200) { if (res.code == 0 || res.code == 200) {
ElMessage({ ElMessage({
@ -521,7 +523,7 @@ defineExpose({
.close { .close {
&:hover { &:hover {
color: #0ff; color: rgb(var(--color-base1));
cursor: pointer; cursor: pointer;
} }
} }
@ -580,7 +582,7 @@ defineExpose({
//clip-path: polygon(0% 0%, 100% 33px, 100% calc(100% - 33px), 0% 100%); //clip-path: polygon(0% 0%, 100% 33px, 100% calc(100% - 33px), 0% 100%);
padding: calc(3px * 1.42) 3px; padding: calc(3px * 1.42) 3px;
//padding: 4.6px 3px; //padding: 4.6px 3px;
background: #0ff; background: rgb(var(--color-base1));
.switch-node-inner { .switch-node-inner {
clip-path: polygon(0% 30px, clip-path: polygon(0% 30px,
@ -593,8 +595,8 @@ defineExpose({
padding: calc(30px * 1.1) 0; padding: calc(30px * 1.1) 0;
width: 30px; width: 30px;
line-height: 30px; line-height: 30px;
background: linear-gradient(to right, rgba(0, 255, 255, 0.3) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.8); background: linear-gradient(to right, rgba(var(--color-base1), 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.8);
color: #0ff; color: rgb(var(--color-base1));
letter-spacing: 2.5px; letter-spacing: 2.5px;
/* border: 1.5px solid rgba(0, 255, 255, 1); */ /* border: 1.5px solid rgba(0, 255, 255, 1); */
position: relative; position: relative;

View File

@ -8,7 +8,7 @@
<template v-for="(event,index) in eventList" :key="index"> <template v-for="(event,index) in eventList" :key="index">
<div class="row" :style="getStyle"> <div class="row" :style="getStyle">
<div class="bar oneLine" :style="progressStyle(event)" @dblclick="clickEventBar(event)" <div class="bar oneLine" :style="progressStyle(event)" @dblclick="clickEventBar(event)"
:title="event.name + event.duration_time "> :title="event.name ">
{{ event.name }} {{ event.name }}
</div> </div>
</div> </div>
@ -54,7 +54,6 @@ const refresh = () => {
window['refreshChart'] = refresh window['refreshChart'] = refresh
let scroll = (e) => { let scroll = (e) => {
console.log("ssss")
let scrollLeft = e.srcElement.scrollLeft let scrollLeft = e.srcElement.scrollLeft
let scrollTop = e.srcElement.scrollTop let scrollTop = e.srcElement.scrollTop
window['tsAction']({ window['tsAction']({
@ -121,7 +120,7 @@ let progressStyle = (task) => {
.bar { .bar {
position: absolute; position: absolute;
background: rgba(0, 255, 255, 0.5); background: rgba(var(--color-base1), 0.5);
color: #FFF; color: #FFF;
height: calc(100% - 1.1px); height: calc(100% - 1.1px);
overflow: hidden; overflow: hidden;

View File

@ -111,9 +111,9 @@ defineExpose({
.itemBox:hover { .itemBox:hover {
width: 100%; width: 100%;
background: rgba(0, 255, 255, 0.2); background: rgba(var(--color-base1), 0.2);
/* 悬停时的文字颜色 */ /* 悬停时的文字颜色 */
color: rgba(0, 255, 255, 1); color: rgb(var(--color-base1));
} }
.itemText { .itemText {

View File

@ -136,7 +136,10 @@ export const useRightOperate = () => {
let selectedNode = window.treeObj.getNodeByParam('id', parentId) let selectedNode = window.treeObj.getNodeByParam('id', parentId)
// //
console.log("添加到树上") console.log("添加到树上")
cusAddNodes(window.treeObj, selectedNode, [res.data], true) cusAddNodes(window.treeObj, selectedNode, [res.data], true).then((addNodes) => {
console.log("addNodes", addNodes)
addNodes.length && window['treeObj'].selectNode(addNodes[0])
})
}) })
} }
} }

View File

@ -26,7 +26,7 @@
trigger="manual" trigger="manual"
:teleported="false" :teleported="false"
v-model:visible="isPopoverShow" v-model:visible="isPopoverShow"
popper-style="background: transparent !important;color:#fff;padding:0;min-width:50px" popper-style="background: transparent !important;color:#fff;padding:0;min-width:50px;border:none"
> >
<template #reference> <template #reference>
<span class="" @click="handleReferenceClick">{{ TSOBJ._Store._multiplier }}×</span> <span class="" @click="handleReferenceClick">{{ TSOBJ._Store._multiplier }}×</span>
@ -154,6 +154,7 @@ 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)
level.value = props.TSOBJ.wheel
let handleMultiplierChange = (multiplier) => { let handleMultiplierChange = (multiplier) => {
props.TSOBJ._Store._multiplier = multiplier props.TSOBJ._Store._multiplier = multiplier
multiplierPopover.value?.hide(); multiplierPopover.value?.hide();
@ -402,7 +403,7 @@ eventBus.on('wheel-time', (num) => {
left: 0; left: 0;
height: 24.5vh; height: 24.5vh;
display: flex; display: flex;
background: linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.6); background: linear-gradient(180deg, rgba(var(--color-base1), 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.5);
backdrop-filter: blur(3.47px); backdrop-filter: blur(3.47px);
.layoutBox { .layoutBox {
@ -462,7 +463,7 @@ eventBus.on('wheel-time', (num) => {
.timelineCursorBox { .timelineCursorBox {
position: absolute; position: absolute;
border-right: 0.5px #0ff solid; border-right: 0.5px solid rgb(var(--color-base1));
height: calc(100% - 16px); height: calc(100% - 16px);
z-index: 9; z-index: 9;
//left: 10px; //left: 10px;
@ -495,7 +496,7 @@ eventBus.on('wheel-time', (num) => {
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
box-sizing: border-box; box-sizing: border-box;
border: 1.5px solid rgba(0, 255, 255, 1); border: 1.5px solid rgb(var(--color-base1));
span { span {
line-height: 25px; line-height: 25px;
@ -503,14 +504,14 @@ eventBus.on('wheel-time', (num) => {
.multiplier-item { .multiplier-item {
&:hover { &:hover {
background: rgba(0, 255, 255, 0.5); /* 高亮背景色 */ background: rgba(var(--color-base1), 0.5); /* 高亮背景色 */
} }
} }
.active { .active {
//background: rgba(0, 255, 255, 0.5); /* 高亮背景色 */ //background: rgba(0, 255, 255, 0.5); /* 高亮背景色 */
font-weight: 600; /* 加粗 */ font-weight: 600; /* 加粗 */
color: #0ff; color: rgb(var(--color-base1));
} }
} }
@ -524,7 +525,7 @@ eventBus.on('wheel-time', (num) => {
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
border-radius: 1em; border-radius: 1em;
background-color: rgba(0, 255, 255, 0.5); background-color: rgb(var(--color-base1));
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
@ -535,4 +536,3 @@ eventBus.on('wheel-time', (num) => {
} }
</style> </style>

View File

@ -533,7 +533,7 @@ eventBus.on('destroyComponent', (id) => {
} }
:deep(.el-slider__bar) { :deep(.el-slider__bar) {
background-color: #0ff; background-color: rgb(var(--color-base1));
} }
//} //}
@ -613,4 +613,24 @@ eventBus.on('destroyComponent', (id) => {
} }
} }
</style> </style>
<style lang="scss">
.custom_scroll_bar_ts {
&::-webkit-scrollbar {
width: 8px; /* 竖滚动条宽度(横滚动条用 height */
height: 8px; /* 横滚动条高度不需要可设为0 */
}
&::-webkit-scrollbar-thumb {
border-radius: 1em;
background-color: rgb(var(--color-base1));
}
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #f5f5f5;
}
}
</style>

View File

@ -2,14 +2,14 @@
<div> <div>
<div class="miniElement" :style="!mini?'display:none':''"> <div class="miniElement" :style="!mini?'display:none':''">
<div class="switch-node-outer" @click="mini=false"> <div class="switch-node-outer" @click="mini=false">
<div class="switch-node-inner"> <div class="switch-node-inner siyuanheitibold">
{{ t('ts.unfoldElement') }} {{ t('ts.unfoldElement') }}
</div> </div>
</div> </div>
</div> </div>
<div class="element" :style="mini?'display:none':''"> <div class="element" :style="mini?'display:none':''">
<div class="titleBox"> <div class="titleBox">
<span class="title">{{ t("ts.element") }}</span> <span class="title siyuanheitibold">{{ t("ts.element") }}</span>
<span class="close" @click="mini=true"> <span class="close" @click="mini=true">
<svg-icon :size="15" class="icon-svg-item" name="closeLeftTs"/>{{ t("ts.fold") }} <svg-icon :size="15" class="icon-svg-item" name="closeLeftTs"/>{{ t("ts.fold") }}
</span> </span>
@ -25,7 +25,7 @@
<div class="tabsBox"> <div class="tabsBox">
<div class="tabs"> <div class="tabs">
<div v-for="(item,index) in tabs" @click="handleTabClick(item,index)" :title=" t('ts.' + item.name)" <div v-for="(item,index) in tabs" @click="handleTabClick(item,index)" :title=" t('ts.' + item.name)"
:class="[index==activIndex?'active':'','oneLine']"> :class="[index==activIndex?'active':'','oneLine siyuanheitibold']">
{{ t('ts.' + item.name) }} {{ t('ts.' + item.name) }}
</div> </div>
</div> </div>
@ -49,11 +49,100 @@
</div> </div>
<div class="list custom_scroll_bar_ts" v-if="currentTypeId!=''"> <div class="list custom_scroll_bar_ts" v-if="currentTypeId!=''">
<div v-for="item in elementList" class="itemBox" @click="addMarker(item)"> <div v-for="item in elementList" class="itemBox" @click="addMarker(item)">
<div class="imgbg"> <div class="imgBox">
<svg
class="imgbg_svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="60.79296875"
height="60.77734375"
viewBox="0 0 60.79296875 60.77734375"
fill="none"
preserveAspectRatio="none"
>
<path
stroke="url(#linear_border_2296_2693_0)"
stroke-width="1"
d="M1.27148 0.26416L60.5204 0.26416"
/>
<path
stroke="url(#linear_border_2296_2694_0)"
stroke-width="1"
d="M0.271484 1.26416L0.271484 60.5136"
/>
<path
stroke="url(#linear_border_2296_2695_0)"
stroke-width="1"
d="M60.5215 1.26416L60.5215 60.5136"
/>
<path
stroke="url(#linear_border_2296_2696_0)"
stroke-width="1"
d="M1.27148 60.5132L60.5204 60.5132"
/>
<g opacity="0.5">
<rect
x="0.521484375"
y="0.51416015625"
width="60"
height="60"
fill="rgb(var(--color-base1))"
fill-opacity="0.5"
/>
</g>
<defs>
<linearGradient
id="linear_border_2296_2693_0"
x1="1.271484375"
y1="0.26416015625"
x2="60.5205078125"
y2="0.26416015625"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="rgb(var(--color-base1))" stop-opacity="0"/>
<stop offset="0.5555" stop-color="rgb(var(--color-base1))"/>
<stop offset="1" stop-color="rgb(var(--color-base1))" stop-opacity="0"/>
</linearGradient>
<linearGradient
id="linear_border_2296_2694_0"
x1="0.271484375"
y1="1.26416015625"
x2="0.271484375"
y2="60.513671875"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="rgb(var(--color-base1))" stop-opacity="0"/>
<stop offset="0.5555" stop-color="rgb(var(--color-base1))"/>
<stop offset="1" stop-color="rgb(var(--color-base1))" stop-opacity="0"/>
</linearGradient>
<linearGradient
id="linear_border_2296_2695_0"
x1="60.521484375"
y1="1.26416015625"
x2="60.521484375"
y2="60.513671875"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="rgb(var(--color-base1))" stop-opacity="0"/>
<stop offset="0.5555" stop-color="rgb(var(--color-base1))"/>
<stop offset="1" stop-color="rgb(var(--color-base1))" stop-opacity="0"/>
</linearGradient>
<linearGradient
id="linear_border_2296_2696_0"
x1="1.271484375"
y1="60.51318359375"
x2="60.5205078125"
y2="60.51318359375"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="rgb(var(--color-base1))" stop-opacity="0"/>
<stop offset="0.5555" stop-color="rgb(var(--color-base1))"/>
<stop offset="1" stop-color="rgb(var(--color-base1))" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
<img :src="service + (item.posterDataUrl||item.militaryDataUrl)"/> <img :src="service + (item.posterDataUrl||item.militaryDataUrl)"/>
</div> </div>
<!--fit="contain"-->
<div class="label"> <div class="label">
{{ item.modelName || item.militaryName }} {{ item.modelName || item.militaryName }}
</div> </div>
@ -303,6 +392,7 @@ let addMarker = (item, needSendEvent = true) => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.element { .element {
width: 16.3vw; width: 16.3vw;
height: 59.6vh; height: 59.6vh;
@ -310,8 +400,8 @@ let addMarker = (item, needSendEvent = true) => {
z-index: 99; z-index: 99;
top: 13.4259259259vh; top: 13.4259259259vh;
left: 1.5625vw; left: 1.5625vw;
border: 0.078125vw solid rgb(0, 255, 255); border: 0.078125vw solid rgb(var(--color-base1));
background: linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.5); background: linear-gradient(180deg, rgba(var(--color-base1), 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.5);
color: #fff; color: #fff;
padding: 0 5px; padding: 0 5px;
//display: flex; //display: flex;
@ -329,7 +419,7 @@ let addMarker = (item, needSendEvent = true) => {
.close { .close {
&:hover { &:hover {
color: #0ff; color: rgb(var(--color-base1));
cursor: pointer; cursor: pointer;
} }
} }
@ -355,7 +445,8 @@ let addMarker = (item, needSendEvent = true) => {
} }
.active { .active {
border-bottom: 2px solid #0ff; border-bottom: 2px solid rgb(var(--color-base1));
color: rgb(var(--color-base1));
} }
} }
@ -400,7 +491,27 @@ let addMarker = (item, needSendEvent = true) => {
white-space: normal; /* 允许文本换行(默认值,但需确保未被覆盖) */ white-space: normal; /* 允许文本换行(默认值,但需确保未被覆盖) */
word-break: break-all; word-break: break-all;
.imgbg {
/* .imgbg_svg {
width: 80px;
height: 79px;
}
img {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
width: 80px;
height: 79px;
}*/
/*.imgbg_svg {
position: absolute;
z-index: -1;
}*/
/*.imgbg {
width: 80px; width: 80px;
height: 79px; height: 79px;
margin: 0 auto; margin: 0 auto;
@ -411,6 +522,25 @@ let addMarker = (item, needSendEvent = true) => {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
}*/
.imgBox {
width: 80px;
height: 79px;
position: relative;
margin: 0 auto;
.imgbg_svg {
width: 100%;
height: 100%;
}
img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
} }
.label { .label {
@ -437,7 +567,7 @@ let addMarker = (item, needSendEvent = true) => {
} }
:deep(.el-tree-node__content:hover ) { :deep(.el-tree-node__content:hover ) {
--el-tree-node-hover-bg-color: rgba(0, 255, 255, 0.38); --el-tree-node-hover-bg-color: rgba(var(--color-base1-half)); // rgba(0, 255, 255, 0.38);
//--el-tree-node-hover-bg-color: linear-gradient(90deg, rgba(0, 255, 255, 0.5) 0%, rgba(0, 255, 255, 0) 100%) !important; //--el-tree-node-hover-bg-color: linear-gradient(90deg, rgba(0, 255, 255, 0.5) 0%, rgba(0, 255, 255, 0) 100%) !important;
/* &:hover { /* &:hover {
@ -452,10 +582,10 @@ let addMarker = (item, needSendEvent = true) => {
:deep(.el-tree-node.is-current ) { :deep(.el-tree-node.is-current ) {
& > .el-tree-node__content { & > .el-tree-node__content {
background: linear-gradient(90deg, rgba(0, 255, 255, 0.5) 0%, rgba(0, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(var(--color-base1-half)) 0%, rgba(0, 255, 255, 0) 100%);
& > .el-tree-node__label { & > .el-tree-node__label {
color: #0ff; color: rgb(var(--color-base1));
} }
} }
} }
@ -470,6 +600,7 @@ let addMarker = (item, needSendEvent = true) => {
left: 0; left: 0;
top: 35%; top: 35%;
.switch-node-outer { .switch-node-outer {
position: relative; position: relative;
clip-path: polygon(0% 0%, clip-path: polygon(0% 0%,
@ -477,7 +608,7 @@ let addMarker = (item, needSendEvent = true) => {
100% calc(100% - 30px - 3px), 100% calc(100% - 30px - 3px),
0% 100%); 0% 100%);
padding: calc(3px * 1.42) 3px; padding: calc(3px * 1.42) 3px;
background: #0ff; background: rgb(var(--color-base1));
.switch-node-inner { .switch-node-inner {
clip-path: polygon(0% 3px, clip-path: polygon(0% 3px,
@ -489,8 +620,8 @@ let addMarker = (item, needSendEvent = true) => {
padding: calc(30px * 1.1) 0; padding: calc(30px * 1.1) 0;
width: 30px; width: 30px;
line-height: 30px; line-height: 30px;
background: linear-gradient(to right, rgba(0, 255, 255, 0.3) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.8); background: linear-gradient(to right, rgba(var(--color-base1), 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.8);
color: #0ff; color: rgb(var(--color-base1));
letter-spacing: 2.5px; letter-spacing: 2.5px;
/* border: 1.5px solid rgba(0, 255, 255, 1); */ /* border: 1.5px solid rgba(0, 255, 255, 1); */
position: relative; position: relative;

View File

@ -8,18 +8,72 @@
<span>{{ t(`week.${date.week}`) }}</span> <span>{{ t(`week.${date.week}`) }}</span>
</div> </div>
</div> </div>
<div class="titles">实景三维态势推演系统</div> <div class="titles siyuanheitibold">实景三维态势推演系统</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>
</svg> </svg>
<div class="svgBox">
<el-tooltip
class="box-item"
effect="dark"
:content="t('ts.exitTs')"
placement="top"
>
<svg class="icon icon-tuichudenglu" @click="back" aria-hidden="true"> <svg class="icon icon-tuichudenglu" @click="back" aria-hidden="true">
<use xlink:href="#icon-tuichudenglu"></use> <use xlink:href="#icon-tuichudenglu"></use>
</svg> </svg>
</el-tooltip>
</div>
<div class="list-container"> <div class="list-container">
<div class="sub-title"> <div class="sub-title siyuanheitibold">
<span>{{ t('ts.historyDeduce') }}</span> <span>{{ t('ts.historyDeduce') }}</span>
<svg class="icon icon-title" aria-hidden="true"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="358.50830078125"
<use xlink:href="#icon-title"></use> height="60"
viewBox="0 0 358.50830078125 60" fill=" rgb(var(--color-base1))">
<path fill-rule="evenodd" fill-opacity="0.6"
d="M116.644 58.9285L133.685 58.9285L156.149 0L139.107 0L116.644 58.9285ZM144.53 58.9285L161.571 58.9285L184.035 0L166.994 0L144.53 58.9285ZM173.965 58.9285L191.007 58.9285L213.471 0L196.429 0L173.965 58.9285ZM218.893 58.9285L201.851 58.9285L224.315 0L241.357 0L218.893 58.9285ZM231.287 58.9285L248.329 58.9285L270.792 0L253.751 0L231.287 58.9285ZM276.215 58.9285L259.173 58.9285L281.637 0L298.679 0L276.215 58.9285ZM288.609 58.9285L305.65 58.9285L328.114 0L311.072 0L288.609 58.9285ZM333.536 58.9285L316.495 58.9285L338.959 0L356 0L333.536 58.9285ZM2.00024 59.9999L19.0418 59.9999L41.5057 1.07143L24.4641 1.07143L2.00024 59.9999ZM29.8865 59.9999L46.928 59.9999L69.3919 1.07143L52.3504 1.07143L29.8865 59.9999ZM59.3219 59.9999L76.3635 59.9999L98.8274 1.07143L81.7858 1.07143L59.3219 59.9999ZM104.25 59.9999L87.2081 59.9999L109.672 1.07143L126.714 1.07143L104.25 59.9999Z"></path>
<path fill-rule="evenodd" fill="url(#linear_fill_472_48_1)"
d="M116.644 58.9285L133.685 58.9285L156.149 0L139.107 0L116.644 58.9285ZM144.53 58.9285L161.571 58.9285L184.035 0L166.994 0L144.53 58.9285ZM173.965 58.9285L191.007 58.9285L213.471 0L196.429 0L173.965 58.9285ZM218.893 58.9285L201.851 58.9285L224.315 0L241.357 0L218.893 58.9285ZM231.287 58.9285L248.329 58.9285L270.792 0L253.751 0L231.287 58.9285ZM276.215 58.9285L259.173 58.9285L281.637 0L298.679 0L276.215 58.9285ZM288.609 58.9285L305.65 58.9285L328.114 0L311.072 0L288.609 58.9285ZM333.536 58.9285L316.495 58.9285L338.959 0L356 0L333.536 58.9285ZM2.00024 59.9999L19.0418 59.9999L41.5057 1.07143L24.4641 1.07143L2.00024 59.9999ZM29.8865 59.9999L46.928 59.9999L69.3919 1.07143L52.3504 1.07143L29.8865 59.9999ZM59.3219 59.9999L76.3635 59.9999L98.8274 1.07143L81.7858 1.07143L59.3219 59.9999ZM104.25 59.9999L87.2081 59.9999L109.672 1.07143L126.714 1.07143L104.25 59.9999Z"></path>
<rect x="4.181396484375" y="0" width="354.326904296875" height="60" fill="url(#linear_fill_472_49)"></rect>
<g clip-path="url(#clip-path-472_52)">
<path
d="M18.0572 50.2342L18.5203 50.7048L18.5203 29.5283L16.205 31.8813L8.10146 40.1166L9.83793 41.8813L18.0572 50.2342ZM16.205 44.8225L11.6901 40.1166L16.205 35.4107L16.205 44.8225Z"
></path>
<g opacity="0.5">
<path
d="M12.8487 49.8465L13.3118 50.3095L13.3118 29.4719L10.9965 31.7872L2.89298 39.8907L4.62944 41.6272L12.8487 49.8465ZM10.9965 44.5213L6.48165 39.8907L10.9965 35.2601L10.9965 44.5213Z"
></path>
</g>
</g>
<g clip-path="url(#clip-path-472_57)">
<path
d="M339.596 50.2342L339.133 50.7048L339.133 29.5283L341.448 31.8813L349.551 40.1166L347.815 41.8813L339.596 50.2342ZM341.448 44.8225L345.963 40.1166L341.448 35.4107L341.448 44.8225Z"
></path>
<g opacity="0.5">
<path
d="M344.805 49.8465L344.342 50.3095L344.342 29.4719L346.657 31.7872L354.76 39.8907L353.024 41.6272L344.805 49.8465ZM346.657 44.5213L351.172 39.8907L346.657 35.2601L346.657 44.5213Z"
></path>
</g>
</g>
<defs>
<linearGradient id="linear_fill_472_48_1" x1="186.551025390625" y1="43.8173828125" x2="186.550048828125"
y2="-13.4248046875" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0.2"/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="linear_fill_472_49" x1="4.181396484375" y1="30" x2="358.50830078125" y2="30"
gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0"/>
<stop offset="0.4891" stop-opacity="0.5"/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip-path-472_52">
<path d="M-2.67029e-05 26L-2.67029e-05 54.2353L27.7834 54.2353L27.7834 26L-2.67029e-05 26Z"/>
</clipPath>
<clipPath id="clip-path-472_57">
<path d="M357.654 26L357.654 54.2353L329.87 54.2353L329.87 26L357.654 26Z"/>
</clipPath>
</defs>
</svg> </svg>
</div> </div>
<div class="search"> <div class="search">
@ -74,23 +128,6 @@
<el-table-column align="center" prop="createdAt" :label="t('ts.creationTime')" sortable width="180"/> <el-table-column align="center" prop="createdAt" :label="t('ts.creationTime')" sortable width="180"/>
<el-table-column align="center" :label="t('ts.operation')" width="160"> <el-table-column align="center" :label="t('ts.operation')" width="160">
<template #default="scope"> <template #default="scope">
<!--<el-button text size="small" type="primary" :icon="Edit" @click="toTSEdit(scope.row)">编辑</el-button>-->
<!-- <el-popconfirm
confirm-button-text="确定"
cancel-button-text="取消"
icon-color="#626AEF"
title="确定删除吗?"
@confirm="delPlan(scope.row.id)"
>
<template #reference>
<el-button text size="small" type="primary" :icon="Delete">删除
</el-button>
&lt;!&ndash;<el-button>Delete</el-button>&ndash;&gt;
</template>
</el-popconfirm>-->
<div style="display: flex;justify-content: space-evenly"> <div style="display: flex;justify-content: space-evenly">
<el-tooltip <el-tooltip
class="box-item" class="box-item"
@ -123,19 +160,7 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- <el-auto-resizer>
<template #default="{ height, width }">
<el-table-v2
:sort-by="sortState"
:columns="columns"
:data="data"
:width="width"
:height="height"
fixed
@column-sort="onSort"
/>
</template>
</el-auto-resizer>-->
</div> </div>
<div class="pageBox"> <div class="pageBox">
<el-config-provider :locale="locale"> <el-config-provider :locale="locale">
@ -229,8 +254,8 @@ const getList = (params: any = null) => {
TsApi.planList(formData).then(res => { TsApi.planList(formData).then(res => {
console.log(res) console.log(res)
if (res.code == 200) { if (res.code == 200) {
/* let arr = [] let arr = []
for (let i = 0; i < 50; i++) { /*for (let i = 0; i < 50; i++) {
arr.push(res.data.records[0]) arr.push(res.data.records[0])
}*/ }*/
tableData.value = res.data.records tableData.value = res.data.records
@ -435,20 +460,24 @@ onUnmounted(() => {
position: absolute; position: absolute;
} }
.icon-tuichudenglu { .svgBox {
cursor: pointer;
position: absolute; position: absolute;
z-index: 999; z-index: 999;
top: 8px;
right: 8px;
.icon-tuichudenglu {
cursor: pointer;
width: 26px; width: 26px;
height: 26px; height: 26px;
right: 8px;
top: 8px;
fill: #fff; fill: #fff;
&:hover { &:hover {
fill: #0ff; fill: rgb(var(--color-base1));
} }
} }
}
.list-container { .list-container {
border: 1px solid #0ff; border: 1px solid #0ff;
@ -460,8 +489,9 @@ onUnmounted(() => {
height: 72vh; height: 72vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.6); background: linear-gradient(180deg, rgba(var(--color-base1), 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.6);
border-image: linear-gradient(137.95deg, rgba(0, 255, 255, 1) 6.25%, rgba(0, 200, 255, 1) 100%) 2; border-image: linear-gradient(137.95deg, var(--color-border1) 6.25%, var(--color-border1) 100%) 2;
//border-image: linear-gradient(137.95deg, #f00 6.25%, #f00 100%) 2;
backdrop-filter: blur(2px); backdrop-filter: blur(2px);
& > div { & > div {
@ -474,27 +504,33 @@ onUnmounted(() => {
.sub-title { .sub-title {
font-size: 32px; font-size: 32px;
width: 15.4350566864vw; width: 300px;
height: 5.0740740741vh; height: 50px;
//padding: vh(20); //padding: vh(20);
position: relative; position: relative;
padding: 0; padding: 15px 0;
span { span {
position: absolute; position: absolute;
left: 50%; //left: 50%;
//top: 50%; //top: 50%;
width: 100%; width: 100%;
transform: translateX(-50%); //transform: translateX(-50%);
//font-family: W7; //font-family: W7;
user-select: none; user-select: none;
text-align: center; text-align: center;
z-index: 9;
} }
.icon-title { .icon-title {
width: 15.4350566864vw; width: 15.4350566864vw;
height: 5.0740740741vh; height: 5.0740740741vh;
} }
& > svg {
width: 300px;
height: 50px
}
} }
.search { .search {
@ -512,6 +548,7 @@ onUnmounted(() => {
width: auto; width: auto;
margin: unset; margin: unset;
align-self: end; align-self: end;
padding-right: 15px;
} }
} }
} }
@ -526,7 +563,7 @@ onUnmounted(() => {
//表格行hover和表头的背景色 //表格行hover和表头的背景色
:deep(.el-table__header-wrapper), :deep(.el-table__header-wrapper),
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell ) { :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell ) {
background-color: rgba(0, 255, 255, 0.2); background-color: rgba(var(--color-base1-half));
} }
:deep(.el-button) { :deep(.el-button) {
@ -539,9 +576,9 @@ onUnmounted(() => {
} }
:deep(.el-button:hover) { :deep(.el-button:hover) {
color: #0ff; color: rgb(var(--color-base1)) !important;
//background-color: transparent !important; //background-color: transparent !important;
background: rgba(0, 255, 255, 0.2) !important; //background: rgba(0, 255, 255, 0.2) !important;
} }
:deep(.el-input__wrapper), :deep(.el-range-input), :deep(.el-range-separator) { :deep(.el-input__wrapper), :deep(.el-range-input), :deep(.el-range-separator) {
@ -616,7 +653,15 @@ background-color: transparent;
--el-border-color-light: #414243; --el-border-color-light: #414243;
--el-border-color-lighter: #363637; --el-border-color-lighter: #363637;
--el-border-color-extra-light: #2B2B2C; --el-border-color-extra-light: #2B2B2C;
}
:deep(.el-input) {
--el-border-color: var(--color-border1)
}
:deep(.el-date-editor) {
//--el-border-color
--el-input-border-color: var(--color-border1);
} }
:deep(.el-pagination ) { :deep(.el-pagination ) {
@ -628,4 +673,30 @@ background-color: transparent;
background: linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.6) !important; background: linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.6) !important;
} }
.icon-svg-item-color {
fill: rgb(var(--color-base1)) !important;
}
/*.siyuanheitibold {
font-family: 'siyuanheitibold';
}*/
</style>
<style lang="scss">
.custom_scroll_bar_ts, {
&::-webkit-scrollbar {
width: 8px; /* 竖滚动条宽度(横滚动条用 height */
height: 8px; /* 横滚动条高度不需要可设为0 */
}
&::-webkit-scrollbar-thumb {
border-radius: 1em;
background-color: rgb(var(--color-base1));
}
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #f5f5f5;
}
}
</style> </style>

View File

@ -3,8 +3,58 @@
<div class="set_pup_header"> <div class="set_pup_header">
<div class="system_title"> <div class="system_title">
<span style="position: absolute; left: 50%;
transform: translateX(-50%);">{{ t("ts.situationEvent") }}</span>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="229"
height="34"
viewBox="0 0 358.50830078125 60" fill=" rgb(var(--color-base1))">
<path fill-rule="evenodd" fill-opacity="0.6"
d="M116.644 58.9285L133.685 58.9285L156.149 0L139.107 0L116.644 58.9285ZM144.53 58.9285L161.571 58.9285L184.035 0L166.994 0L144.53 58.9285ZM173.965 58.9285L191.007 58.9285L213.471 0L196.429 0L173.965 58.9285ZM218.893 58.9285L201.851 58.9285L224.315 0L241.357 0L218.893 58.9285ZM231.287 58.9285L248.329 58.9285L270.792 0L253.751 0L231.287 58.9285ZM276.215 58.9285L259.173 58.9285L281.637 0L298.679 0L276.215 58.9285ZM288.609 58.9285L305.65 58.9285L328.114 0L311.072 0L288.609 58.9285ZM333.536 58.9285L316.495 58.9285L338.959 0L356 0L333.536 58.9285ZM2.00024 59.9999L19.0418 59.9999L41.5057 1.07143L24.4641 1.07143L2.00024 59.9999ZM29.8865 59.9999L46.928 59.9999L69.3919 1.07143L52.3504 1.07143L29.8865 59.9999ZM59.3219 59.9999L76.3635 59.9999L98.8274 1.07143L81.7858 1.07143L59.3219 59.9999ZM104.25 59.9999L87.2081 59.9999L109.672 1.07143L126.714 1.07143L104.25 59.9999Z"></path>
<path fill-rule="evenodd" fill="url(#linear_fill_472_48_1)"
d="M116.644 58.9285L133.685 58.9285L156.149 0L139.107 0L116.644 58.9285ZM144.53 58.9285L161.571 58.9285L184.035 0L166.994 0L144.53 58.9285ZM173.965 58.9285L191.007 58.9285L213.471 0L196.429 0L173.965 58.9285ZM218.893 58.9285L201.851 58.9285L224.315 0L241.357 0L218.893 58.9285ZM231.287 58.9285L248.329 58.9285L270.792 0L253.751 0L231.287 58.9285ZM276.215 58.9285L259.173 58.9285L281.637 0L298.679 0L276.215 58.9285ZM288.609 58.9285L305.65 58.9285L328.114 0L311.072 0L288.609 58.9285ZM333.536 58.9285L316.495 58.9285L338.959 0L356 0L333.536 58.9285ZM2.00024 59.9999L19.0418 59.9999L41.5057 1.07143L24.4641 1.07143L2.00024 59.9999ZM29.8865 59.9999L46.928 59.9999L69.3919 1.07143L52.3504 1.07143L29.8865 59.9999ZM59.3219 59.9999L76.3635 59.9999L98.8274 1.07143L81.7858 1.07143L59.3219 59.9999ZM104.25 59.9999L87.2081 59.9999L109.672 1.07143L126.714 1.07143L104.25 59.9999Z"></path>
<rect x="4.181396484375" y="0" width="354.326904296875" height="60"
fill="url(#linear_fill_472_49)"></rect>
<g clip-path="url(#clip-path-472_52)">
<path
d="M18.0572 50.2342L18.5203 50.7048L18.5203 29.5283L16.205 31.8813L8.10146 40.1166L9.83793 41.8813L18.0572 50.2342ZM16.205 44.8225L11.6901 40.1166L16.205 35.4107L16.205 44.8225Z"
></path>
<g opacity="0.5">
<path
d="M12.8487 49.8465L13.3118 50.3095L13.3118 29.4719L10.9965 31.7872L2.89298 39.8907L4.62944 41.6272L12.8487 49.8465ZM10.9965 44.5213L6.48165 39.8907L10.9965 35.2601L10.9965 44.5213Z"
></path>
</g>
</g>
<g clip-path="url(#clip-path-472_57)">
<path
d="M339.596 50.2342L339.133 50.7048L339.133 29.5283L341.448 31.8813L349.551 40.1166L347.815 41.8813L339.596 50.2342ZM341.448 44.8225L345.963 40.1166L341.448 35.4107L341.448 44.8225Z"
></path>
<g opacity="0.5">
<path
d="M344.805 49.8465L344.342 50.3095L344.342 29.4719L346.657 31.7872L354.76 39.8907L353.024 41.6272L344.805 49.8465ZM346.657 44.5213L351.172 39.8907L346.657 35.2601L346.657 44.5213Z"
></path>
</g>
</g>
<defs>
<linearGradient id="linear_fill_472_48_1" x1="186.551025390625" y1="43.8173828125" x2="186.550048828125"
y2="-13.4248046875" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0.2"/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="linear_fill_472_49" x1="4.181396484375" y1="30" x2="358.50830078125" y2="30"
gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0"/>
<stop offset="0.4891" stop-opacity="0.5"/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip-path-472_52">
<path d="M-2.67029e-05 26L-2.67029e-05 54.2353L27.7834 54.2353L27.7834 26L-2.67029e-05 26Z"/>
</clipPath>
<clipPath id="clip-path-472_57">
<path d="M357.654 26L357.654 54.2353L329.87 54.2353L329.87 26L357.654 26Z"/>
</clipPath>
</defs>
</svg>
{{ t("ts.situationEvent") }}
</div> </div>
</div> </div>
<div class="set_detail"> <div class="set_detail">
@ -41,9 +91,18 @@
<template v-if="!['display','hide'].includes(currentKey)"> <template v-if="!['display','hide'].includes(currentKey)">
<el-form-item :label="t('ts.持续时间')"> <el-form-item :label="t('ts.持续时间')">
<div class="duration"> <div class="duration">
<span><el-input v-model="hour"/>{{ t('ts.hour') }}</span> <span><el-input v-model="hour"
<span><el-input v-model="minute"/>{{ t('ts.minute') }} </span> oninput="value=value.replace(/[^0-9.]/g, '').replace(/^\./, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')"/>{{
<span><el-input v-model="second"/>{{ t('ts.second') }}</span> t('ts.hour')
}}</span>
<span><el-input v-model="minute"
oninput="value=value.replace(/[^0-9.]/g, '').replace(/^\./, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')"/>{{
t('ts.minute')
}} </span>
<span><el-input v-model="second" :maxlength="2"
oninput="value=value.replace(/[^0-9.]/g, '').replace(/^\./, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')"/>{{
t('ts.second')
}}</span>
</div> </div>
</el-form-item> </el-form-item>
</template> </template>
@ -167,7 +226,8 @@ const addEvent = () => {
console.log(zNode.value) console.log(zNode.value)
let startTime = form.datetime.getTime() let startTime = form.datetime.getTime()
let obj: any = {} let obj: any = {}
let duration_S = (hour.value * 3600 + minute.value * 60 + second.value) * 1
let duration_S = Number(hour.value * 3600) + Number(minute.value * 60) + Number(second.value)
// 数据是否合法有效 // 数据是否合法有效
let isRight = true let isRight = true
let errorFields = []//数据错误的字段 let errorFields = []//数据错误的字段
@ -345,9 +405,10 @@ eventBus.on('event-startTime', (data) => {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 570px; width: 570px;
height: 320px; height: 320px;
border: 1px solid #0ff; border: 1px solid rgb(var(--color-base1));
border-radius: 3px; border-radius: 3px;
background: rgba(0, 0, 0, 0.5); background: linear-gradient(180deg, rgba(var(--color-base1), 0.2) 0%, rgba(241, 108, 85, 0) 100%), rgba(0, 0, 0, 0.5);;
backdrop-filter: blur(20px);
.set_pup_header { .set_pup_header {
@ -359,8 +420,6 @@ eventBus.on('event-startTime', (data) => {
padding-bottom: 20px; padding-bottom: 20px;
.system_title { .system_title {
background: url('@/assets/images/titlebg.png') no-repeat;
background-size: 100% 100%;
width: 229px; width: 229px;
height: 34px; height: 34px;
line-height: 34px; line-height: 34px;
@ -446,8 +505,6 @@ eventBus.on('event-startTime', (data) => {
width: 20px; width: 20px;
} }
} }
} }
@ -465,9 +522,12 @@ eventBus.on('event-startTime', (data) => {
&:deep(.el-tree-node.is-current > .el-tree-node__content>.el-tree-node__label ) { &:deep(.el-tree-node.is-current > .el-tree-node__content>.el-tree-node__label ) {
//background-color: #e6f7ff; /* 浅蓝色高亮,可自定义 */ //background-color: #e6f7ff; /* 浅蓝色高亮,可自定义 */
--el-text-color: #0ff !important; --el-text-color: rgb(var(--color-base1)) !important;
} }
&:deep(.el-tree-node__content > .el-tree-node__expand-icon) {
display: block !important;
}
} }
:deep(.el-text ) { :deep(.el-text ) {

View File

@ -4,10 +4,61 @@
<template #header> <template #header>
<template v-if="!currentPlanId"> <template v-if="!currentPlanId">
<div class="set_pup_header"> <div class="set_pup_header">
<div class="system_title"> <div class="system_title siyuanheitibold">
{{ t('ts.createPlan') }} {{ t('ts.createPlan') }}
</div> </div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="296"
height="44"
viewBox="0 0 358.50830078125 60" fill=" rgb(var(--color-base1))">
<path fill-rule="evenodd" fill-opacity="0.6"
d="M116.644 58.9285L133.685 58.9285L156.149 0L139.107 0L116.644 58.9285ZM144.53 58.9285L161.571 58.9285L184.035 0L166.994 0L144.53 58.9285ZM173.965 58.9285L191.007 58.9285L213.471 0L196.429 0L173.965 58.9285ZM218.893 58.9285L201.851 58.9285L224.315 0L241.357 0L218.893 58.9285ZM231.287 58.9285L248.329 58.9285L270.792 0L253.751 0L231.287 58.9285ZM276.215 58.9285L259.173 58.9285L281.637 0L298.679 0L276.215 58.9285ZM288.609 58.9285L305.65 58.9285L328.114 0L311.072 0L288.609 58.9285ZM333.536 58.9285L316.495 58.9285L338.959 0L356 0L333.536 58.9285ZM2.00024 59.9999L19.0418 59.9999L41.5057 1.07143L24.4641 1.07143L2.00024 59.9999ZM29.8865 59.9999L46.928 59.9999L69.3919 1.07143L52.3504 1.07143L29.8865 59.9999ZM59.3219 59.9999L76.3635 59.9999L98.8274 1.07143L81.7858 1.07143L59.3219 59.9999ZM104.25 59.9999L87.2081 59.9999L109.672 1.07143L126.714 1.07143L104.25 59.9999Z"></path>
<path fill-rule="evenodd" fill="url(#linear_fill_472_48_1)"
d="M116.644 58.9285L133.685 58.9285L156.149 0L139.107 0L116.644 58.9285ZM144.53 58.9285L161.571 58.9285L184.035 0L166.994 0L144.53 58.9285ZM173.965 58.9285L191.007 58.9285L213.471 0L196.429 0L173.965 58.9285ZM218.893 58.9285L201.851 58.9285L224.315 0L241.357 0L218.893 58.9285ZM231.287 58.9285L248.329 58.9285L270.792 0L253.751 0L231.287 58.9285ZM276.215 58.9285L259.173 58.9285L281.637 0L298.679 0L276.215 58.9285ZM288.609 58.9285L305.65 58.9285L328.114 0L311.072 0L288.609 58.9285ZM333.536 58.9285L316.495 58.9285L338.959 0L356 0L333.536 58.9285ZM2.00024 59.9999L19.0418 59.9999L41.5057 1.07143L24.4641 1.07143L2.00024 59.9999ZM29.8865 59.9999L46.928 59.9999L69.3919 1.07143L52.3504 1.07143L29.8865 59.9999ZM59.3219 59.9999L76.3635 59.9999L98.8274 1.07143L81.7858 1.07143L59.3219 59.9999ZM104.25 59.9999L87.2081 59.9999L109.672 1.07143L126.714 1.07143L104.25 59.9999Z"></path>
<rect x="4.181396484375" y="0" width="354.326904296875" height="60"
fill="url(#linear_fill_472_49)"></rect>
<g clip-path="url(#clip-path-472_52)">
<path
d="M18.0572 50.2342L18.5203 50.7048L18.5203 29.5283L16.205 31.8813L8.10146 40.1166L9.83793 41.8813L18.0572 50.2342ZM16.205 44.8225L11.6901 40.1166L16.205 35.4107L16.205 44.8225Z"
></path>
<g opacity="0.5">
<path
d="M12.8487 49.8465L13.3118 50.3095L13.3118 29.4719L10.9965 31.7872L2.89298 39.8907L4.62944 41.6272L12.8487 49.8465ZM10.9965 44.5213L6.48165 39.8907L10.9965 35.2601L10.9965 44.5213Z"
></path>
</g>
</g>
<g clip-path="url(#clip-path-472_57)">
<path
d="M339.596 50.2342L339.133 50.7048L339.133 29.5283L341.448 31.8813L349.551 40.1166L347.815 41.8813L339.596 50.2342ZM341.448 44.8225L345.963 40.1166L341.448 35.4107L341.448 44.8225Z"
></path>
<g opacity="0.5">
<path
d="M344.805 49.8465L344.342 50.3095L344.342 29.4719L346.657 31.7872L354.76 39.8907L353.024 41.6272L344.805 49.8465ZM346.657 44.5213L351.172 39.8907L346.657 35.2601L346.657 44.5213Z"
></path>
</g>
</g>
<defs>
<linearGradient id="linear_fill_472_48_1" x1="186.551025390625" y1="43.8173828125" x2="186.550048828125"
y2="-13.4248046875" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0.2"/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="linear_fill_472_49" x1="4.181396484375" y1="30" x2="358.50830078125" y2="30"
gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0"/>
<stop offset="0.4891" stop-opacity="0.5"/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip-path-472_52">
<path d="M-2.67029e-05 26L-2.67029e-05 54.2353L27.7834 54.2353L27.7834 26L-2.67029e-05 26Z"/>
</clipPath>
<clipPath id="clip-path-472_57">
<path d="M357.654 26L357.654 54.2353L329.87 54.2353L329.87 26L357.654 26Z"/>
</clipPath>
</defs>
</svg>
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div class="detailTitle"> <div class="detailTitle">
@ -31,6 +82,7 @@
</el-form-item> </el-form-item>
<el-form-item :label="t('ts.startTime')" prop="simulationStartTime" required> <el-form-item :label="t('ts.startTime')" prop="simulationStartTime" required>
<el-date-picker <el-date-picker
:editable="false"
:readonly="Boolean(currentPlanId)" :readonly="Boolean(currentPlanId)"
v-model="sizeForm.simulationStartTime" v-model="sizeForm.simulationStartTime"
popper-class="ts-zyl" popper-class="ts-zyl"
@ -38,6 +90,8 @@
timezone="Asia/Shanghai" timezone="Asia/Shanghai"
value-format="YYYY-MM-DDTHH:mm:ss" value-format="YYYY-MM-DDTHH:mm:ss"
:placeholder="t('ts.startTimePlaceholder')" :placeholder="t('ts.startTimePlaceholder')"
@keydown.native.prevent
@input.native="handleInput"
/> />
</el-form-item> </el-form-item>
<el-form-item :label="t('ts.deduceDesc')" prop="desc" required> <el-form-item :label="t('ts.deduceDesc')" prop="desc" required>
@ -128,6 +182,11 @@ const rules = reactive<FormRules<RuleForm>>({
], ],
}) })
const handleInput = (e) => {
console.log("sssssssss")
// 强制清空手动输入的内容,只保留选择器选择的值
e.target.value = sizeForm.simulationStartTime || ''
}
const submitForm = async (formEl: FormInstance | undefined) => { const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return if (!formEl) return
await formEl.validate((valid, fields) => { await formEl.validate((valid, fields) => {
@ -216,14 +275,21 @@ defineExpose({
<style lang="scss" scoped> <style lang="scss" scoped>
.newPlan { .newPlan {
width: 40vw;
height: 50vh;
:deep(.el-dialog) { :deep(.el-dialog) {
background: linear-gradient(180deg, rgba(var(--color-base1), 0.2) 0%, rgba(var(--color-base1), 0) 100%), background: linear-gradient(180deg, rgba(var(--color-base1), 0.2) 0%, rgba(var(--color-base1), 0) 100%),
rgba(0, 0, 0, 0.6); rgba(0, 0, 0, 0.6) !important;
border: 1px solid var(--color-border1); border: 1px solid rgba(var(--color-base1)) !important;
padding-left: 0 !important; padding-left: 0 !important;
width: 380px;
padding: 0;
height: 480px;
}
:deep(.el-dialog__header) {
height: 60px;
padding: 0;
position: relative;
} }
:deep(.el-dialog__body) { :deep(.el-dialog__body) {
@ -246,7 +312,7 @@ defineExpose({
} }
:deep(.el-dialog__headerbtn .el-dialog__close) { :deep(.el-dialog__headerbtn .el-dialog__close) {
color: #f00; color: #fff;
} }
.set_detail { .set_detail {
@ -256,19 +322,8 @@ defineExpose({
overflow-y: hidden; overflow-y: hidden;
} }
:deep(.el-dialog) {
background: linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%),
rgba(0, 0, 0, 0.6);
border: 1px solid #00c9ff;
padding: 0 !important;
/*:deep(.el-dialog__headerbtn) {
width: 380px;
//height: 630px;
height: 480px;
}
:deep(.el-dialog__headerbtn) {
height: 30px; height: 30px;
width: 30px; width: 30px;
border-bottom-left-radius: 80%; border-bottom-left-radius: 80%;
@ -286,25 +341,24 @@ defineExpose({
:deep(.el-dialog__headerbtn .el-dialog__close) { :deep(.el-dialog__headerbtn .el-dialog__close) {
color: #fff; color: #fff;
} }
*/
.set_pup_header { .set_pup_header {
width: 100%; position: absolute;
height: 100%; left: 50%;
// background-color: #00ffff; top: 50%;
display: flex; transform: translate(-50%, -50%);
justify-content: center; height: 44px;
align-items: center;
//padding-bottom: 20px;
.system_title { .system_title {
background: url('@/assets/images/titlebg.png') no-repeat; //background: url('@/assets/images/titlebg.png') no-repeat;
background-size: 100% 100%; //background-size: 100% 100%;
width: 229px; //width: 229px;
height: 34px; position: absolute;
line-height: 34px; left: 50%;
text-align: center; transform: translateX(-50%);
font-family: 'alimamashuheiti'; line-height: 44px;
font-size: 18px; font-family: 'alimamashuheiti', serif;
font-size: 24px;
color: #fff; color: #fff;
//font-weight: 700; //font-weight: 700;
} }

View File

@ -34,6 +34,14 @@ export class Store {
_panelWidth //面板宽度 _panelWidth //面板宽度
constructor(option) { constructor(option) {
// 大格级别的档数
let preMainIndex = Math.ceil(option.wheel / 3)
// 小格宽度的选值【3,5,8】
let index = option.wheel % 3
this._scales.preMainIndex = preMainIndex
this._scales.distanceOfTicTiny = this._scales.distanceOfTicTinyRange[index]
this._scales.preSecondPx = this._scales.distanceOfTicMain / this._scales.preMains[this._scales.preMainIndex]
this._multiplier = option.multiplier || 1 this._multiplier = option.multiplier || 1
this._panelWidth = option.panelWidth this._panelWidth = option.panelWidth
this._tasks = option.tasks this._tasks = option.tasks

View File

@ -7,12 +7,14 @@ export class TS extends Tools {
private _Store: Store; private _Store: Store;
private _Clock: Clock; private _Clock: Clock;
private name; private name;
private wheel;
constructor(option) { constructor(option) {
super(); super();
this._Store = new Store(option) this._Store = new Store(option)
this._Clock = new Clock() this._Clock = new Clock()
this.name = option.name this.name = option.name
this.wheel = option.wheel
this._Store._scales.fullHeight = this._Store._tasks.length * this._Store._scales.cellHeight this._Store._scales.fullHeight = this._Store._tasks.length * this._Store._scales.cellHeight
} }
@ -26,7 +28,7 @@ export class TS extends Tools {
renderLabel(obj) { renderLabel(obj) {
let nums = Math.floor(obj.left / this._Store.getScale('distanceOfTicMain')) let nums = Math.floor(obj.left / this._Store.getScale('distanceOfTicMain'))
let all = this._Store.getScale('ticMain') + nums + 1 let all = this._Store.getScale('ticMain') + nums + 1
console.log("renderLabel", nums) // console.log("renderLabel", nums)
let allTimeLabels = [] let allTimeLabels = []
for (let i = 0; i < all; i++) { for (let i = 0; i < all; i++) {
let timeOfMain = this._Store.getScale('preMains')[this._Store.getScale('preMainIndex')] let timeOfMain = this._Store.getScale('preMains')[this._Store.getScale('preMainIndex')]