功能选择按钮修改
@@ -1,14 +1,18 @@
|
||||
<template>
|
||||
<!--element-plus语言国际化,全局修改为中文-->
|
||||
<el-config-provider :locale='locale' :size="assemblySize" :button="buttonConfig">
|
||||
<router-view />
|
||||
<el-config-provider
|
||||
:locale="locale"
|
||||
:size="assemblySize"
|
||||
:button="buttonConfig"
|
||||
>
|
||||
<router-view :key="$route.fullPath" />
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
<script lang="ts" setup>
|
||||
defineOptions({
|
||||
name: 'App',
|
||||
})
|
||||
name: "App",
|
||||
});
|
||||
import { onMounted, reactive, computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { getBrowserLang } from "@/utils";
|
||||
@@ -46,9 +50,6 @@ const assemblySize = computed(() => globalStore.assemblySize);
|
||||
// element button config
|
||||
const buttonConfig = reactive({ autoInsertSpace: false });
|
||||
|
||||
document.getElementById('loadingPage')?.remove()
|
||||
|
||||
document.getElementById("loadingPage")?.remove();
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
63
frontend/src/api/plan/static.json
Normal file
@@ -0,0 +1,63 @@
|
||||
{
|
||||
"code": "200",
|
||||
"data": [
|
||||
{
|
||||
"name": "未检测",
|
||||
"children": [
|
||||
{
|
||||
"id": 4,
|
||||
"pid": 1,
|
||||
"name": "检测计划1"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"pid": 1,
|
||||
"name": "检测计划2"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"pid": 1,
|
||||
"name": "检测计划3"
|
||||
}
|
||||
],
|
||||
"id": 1
|
||||
},
|
||||
{
|
||||
"name": "检测中",
|
||||
"children": [
|
||||
{
|
||||
"id": 7,
|
||||
"pid": 2,
|
||||
"name": "检测计划4"
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"pid": 2,
|
||||
"name": "检测计划5"
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"pid": 2,
|
||||
"name": "检测计划6"
|
||||
}
|
||||
],
|
||||
"id": 2
|
||||
},
|
||||
{
|
||||
"name": "检测完成",
|
||||
"children": [
|
||||
{
|
||||
"id": 10,
|
||||
"pid": 3,
|
||||
"name": "检测计划7"
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"pid": 3,
|
||||
"name": "检测计划8"
|
||||
}
|
||||
],
|
||||
"id": 3
|
||||
}
|
||||
]
|
||||
}
|
||||
1
frontend/src/assets/icons/out_login.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724675866949" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7939" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M336.64 186.368a42.666667 42.666667 0 0 1-12.970667 58.965333C228.693333 306.048 170.666667 408.32 170.666667 520.021333c0 181.589333 152.533333 329.386667 341.333333 329.386667s341.333333-147.797333 341.333333-329.386667c0-109.994667-56.32-210.901333-148.821333-272a42.666667 42.666667 0 1 1 47.018667-71.253333C867.584 253.44 938.666667 380.885333 938.666667 520.064c0 229.333333-191.317333 414.72-426.666667 414.72s-426.666667-185.386667-426.666667-414.72C85.333333 378.709333 158.634667 249.6 277.674667 173.44a42.666667 42.666667 0 0 1 58.922666 12.928zM512 85.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v256a42.666667 42.666667 0 0 1-85.333334 0V128a42.666667 42.666667 0 0 1 42.666667-42.666667z" fill="#ffffff" p-id="7940"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
frontend/src/assets/images/plan/static/1.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724723425531" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11027" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M815.36 126.72H244.48c-57.6 0-103.68 46.08-103.68 103.68v363.52c0 57.6 46.08 103.68 103.68 103.68h570.88c57.6 0 103.68-46.08 103.68-103.68V231.68c0-57.6-46.08-104.96-103.68-104.96z m52.48 467.2c0 28.16-23.04 52.48-52.48 52.48H244.48c-28.16 0-52.48-23.04-52.48-52.48V231.68c0-28.16 23.04-52.48 52.48-52.48h570.88c28.16 0 52.48 23.04 52.48 52.48v362.24zM686.08 750.08H373.76c-14.08 0-25.6 11.52-25.6 25.6s11.52 25.6 25.6 25.6H684.8c14.08 0 25.6-11.52 25.6-25.6 1.28-14.08-10.24-25.6-24.32-25.6z m0 0" p-id="11028" fill="#ffffff"></path><path d="M789.76 439.04H679.68L524.8 290.56c-5.12-5.12-12.8-7.68-20.48-7.68s-14.08 3.84-19.2 10.24L373.76 439.04H270.08c-14.08 0-25.6 11.52-25.6 25.6s11.52 25.6 25.6 25.6h116.48c7.68 0 15.36-3.84 20.48-10.24l101.12-133.12 140.8 135.68c5.12 5.12 11.52 7.68 17.92 7.68H787.2c14.08 0 25.6-11.52 25.6-25.6 2.56-14.08-8.96-25.6-23.04-25.6z m0 0" p-id="11029" fill="#ffffff"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
frontend/src/assets/images/plan/static/2.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724723519397" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12615" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M539.2896 518.1952c27.5456 0 58.368 25.6 79.2576 47.104 11.5712 11.8784 56.1152 65.3824 67.2256 89.4464 5.376-17.408 192.9728-75.008 243.8144 48.2304 2.816 6.7584 23.3984 77.9776 17.92 128-5.888 51.9168-12.288 103.8336-95.5392 134.8608a193.024 193.024 0 0 1-68.4032 13.1584c-47.0016 0-87.5008-19.4048-130.304-40.1408l-11.0592-5.2224c-66.9696-32.0512-115.3024-58.5728-115.8144-58.7264-28.2624-13.568-40.6528-48.64-27.2896-78.336a57.6 57.6 0 0 1 51.8656-34.048c8.4992 0 16.64 1.8944 24.32 5.5808l53.0432 26.88c-12.3904-34.4576-35.328-96.0512-54.4256-130.2016a126.5664 126.5664 0 0 0-45.3632-48.9984c-9.1136-6.3488-17.92-12.288-24.576-22.3232a50.7904 50.7904 0 0 1-6.144-43.4176 46.592 46.592 0 0 1 27.8528-29.3888 39.5776 39.5776 0 0 1 13.6192-2.4576z m-302.1824 208.64a346.624 346.624 0 0 0 217.1904 111.0016l-0.0512 69.8368-16.2304-1.8432a416.0512 416.0512 0 0 1-253.4912-133.5808l52.5824-45.4144zM463.2064 76.8v139.52a278.016 278.016 0 0 0-217.5488 401.8176l6.656 12.3904-60.672 34.7136 0.4096-0.1536 0.0512 0.1536-60.2112 34.7136-0.2048-0.4608A416.9216 416.9216 0 0 1 463.2064 76.8z m30.5152 242.0736a173.7216 173.7216 0 0 1 173.7216 173.7216l-0.3072 7.3216-112.4864-40.704a69.4784 69.4784 0 1 0-99.9936 90.88l-0.1536 111.7696a173.7728 173.7728 0 0 1 39.2192-342.9888zM563.2 81.4592a417.024 417.024 0 0 1 337.2544 502.8352l-99.072-35.84c2.3552-13.1072 3.8912-26.5216 4.608-40.192l0.3584-15.6672a312.832 312.832 0 0 0-243.1488-304.896V81.408z" fill="#ffffff" fill-opacity=".6" p-id="12616"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
1
frontend/src/assets/images/plan/static/3.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724723580925" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13723" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M151.935625 0C85.567833 0 32 52.799835 32 118.207631v787.581538C32 971.196965 85.567833 1023.9968 151.935625 1023.9968h328.318974a39.679876 39.679876 0 0 0 40.191875-39.615876 39.679876 39.679876 0 0 0-40.191875-39.615876h-328.318974a39.679876 39.679876 0 0 1-40.191874-39.551877V117.567633a39.679876 39.679876 0 0 1 40.191874-39.679876h719.485752a39.679876 39.679876 0 0 1 40.191874 39.679876v501.822431c0 22.015931 17.919944 39.679876 40.191875 39.679876a39.679876 39.679876 0 0 0 40.191874-39.679876V117.567633C991.357002 52.799835 937.789169 0 871.421377 0H151.935625z" fill="#ffffff" p-id="13724"></path><path d="M846.397455 789.565533l-64.831797-64.895798a41.59987 41.59987 0 1 1 58.879816-58.815816l122.111618 122.239618a41.72787 41.72787 0 0 1 6.015981 7.551977 41.72787 41.72787 0 0 1 7.615976 64.831797l-122.239618 122.175618a41.59987 41.59987 0 0 1-58.815816-58.879816l51.071841-51.00784h-415.358702a41.59987 41.59987 0 1 1 0-83.19974h415.550701zM482.046594 329.790969H261.055284A36.799885 36.799885 0 0 1 223.9994 292.863085c0-20.479936 16.447949-36.863885 37.055884-36.863885h220.99131c20.543936 0 36.991884 16.383949 36.991884 36.863885a37.119884 37.119884 0 0 1-36.991884 36.927884zM702.397905 549.886282H261.119284A36.799885 36.799885 0 0 1 223.9994 513.022397c0-20.479936 16.447949-36.863885 37.055884-36.863885h441.918619c20.607936 0 37.055884 16.383949 37.055884 36.863885a37.695882 37.695882 0 0 1-37.631882 36.863885z" fill="#ffffff" p-id="13725"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
1
frontend/src/assets/images/plan/static/4.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724723665723" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17548" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M959 782.69V346.57c0-41.31-26.76-79.5-67.59-89.92-11.76-3-23.2-2.94-35.07-2.94H732.77v-31.66c0-10.66-0.12-20.76-2.08-31.38-4.11-22.32-18.2-41.12-35.94-54.53s-39-17-60.5-17H397.53c-13.89 0-27.79-0.43-41.3 3.67-39.23 11.9-65 48.13-65 88.8v42.14H159.32c-2.17 0-4.35 0-6.52 0.06A92.56 92.56 0 0 0 79 296c-11.92 18.18-14 38.78-14 59.71v456.56a98.54 98.54 0 0 0 9 41.1c14.65 32.66 49 51.54 84 51.54h710.39c30.75-0.35 57.35-15.42 75.13-40.11 10.52-14.61 15.4-33.47 15.46-51.3 0.02-10.27 0.02-20.5 0.02-30.81zM886.81 320.1a10.19 10.19 0 0 1-1.42-1.1c0.09-0.07 0.69 0.44 1.42 1.1zM660.59 185.5a11.17 11.17 0 0 1-1.42-1.1c0.1-0.07 0.7 0.43 1.42 1.1z m-303 5.78a10.19 10.19 0 0 1-1.1 1.42c-0.05-0.09 0.51-0.7 1.12-1.42z m-0.26 0.57l0.76-1.1c1.05-1.1 2.24-2.29 2.35-2.4 1-1 2.13-1.91 3.17-2.88a62.09 62.09 0 0 1 6.38-3.68 64.4 64.4 0 0 1 7.9-2.15c9.09-0.69 18.44-0.14 27.47-0.14H612.2c11.06 0 22.57-0.78 33.71 0.1a64.76 64.76 0 0 1 8.08 2.2 60 60 0 0 1 6 3.44c0.37 0.24 0.73 0.5 1.1 0.75 1.1 1 2.29 2.25 2.4 2.36 1 1 1.91 2.13 2.88 3.17a61.17 61.17 0 0 1 3.68 6.37 66.49 66.49 0 0 1 2.19 8.08c0.89 11.25 0.1 22.87 0.1 34.06v6.12h-304c-5.56 0-11.13-0.06-16.71-0.12v-6c0-11.19-0.79-22.81 0.11-34.06a64.4 64.4 0 0 1 2.19-8.09 62 62 0 0 1 3.42-6.03zM134.25 323c1-1 2.13-1.9 3.17-2.87a59.43 59.43 0 0 1 6.37-3.68 64.69 64.69 0 0 1 7.74-2.13c7.11-0.5 14.38-0.17 21.46-0.17H867.67c1.6 0 3.19 0.07 4.77 0.17a65 65 0 0 1 7.76 2.13 60.86 60.86 0 0 1 6 3.44c0.37 0.25 0.74 0.5 1.1 0.76 1.11 1 2.3 2.24 2.41 2.35 1 1 1.9 2.13 2.87 3.17a58.61 58.61 0 0 1 3.68 6.38 64.94 64.94 0 0 1 2.11 7.64c0.33 5.05 0.19 10.15 0.19 15.2v43.28H143.77c-6.13 0-12.25 0-18.37-0.05 0-18-0.15-35.95 0-53.92 0-1.46 0.06-2.92 0.16-4.37a65 65 0 0 1 2.13-7.79 59 59 0 0 1 3.45-6c0.24-0.37 0.5-0.74 0.75-1.1 1.05-1.19 2.24-2.38 2.36-2.44z m-2.85 2.93a10.68 10.68 0 0 1-1.11 1.42c-0.06-0.14 0.44-0.74 1.11-1.47z m5.78 512.63a10.68 10.68 0 0 1 1.42 1.11c-0.1 0.01-0.7-0.49-1.42-1.16z m582.2 6H156.31c-1.59 0-3.18-0.06-4.77-0.16a65.52 65.52 0 0 1-7.76-2.13 59 59 0 0 1-6-3.45c-0.37-0.24-0.73-0.5-1.1-0.75-1.11-1-2.29-2.24-2.4-2.36-1-1-1.91-2.13-2.88-3.17a61.17 61.17 0 0 1-3.68-6.37 63.17 63.17 0 0 1-2.1-7.65c-0.33-5.05-0.19-10.14-0.19-15.2V459h164.06v78.2c0 15.8 13.89 30.93 30.2 30.2s30.2-13.27 30.2-30.2V459h325.4v78.2c0 15.8 13.89 30.93 30.2 30.2s30.2-13.27 30.2-30.2V459h144.53c6.12 0 12.24 0.05 18.37 0.06V759c0 18.33 0.15 36.68 0 55 0 1.46-0.07 2.91-0.16 4.37a63.66 63.66 0 0 1-2.14 7.79 60.86 60.86 0 0 1-3.44 6c-0.25 0.37-0.5 0.74-0.76 1.1-1.05 1.11-2.24 2.29-2.35 2.4-1 1-2.13 1.91-3.17 2.88a60.3 60.3 0 0 1-6.38 3.68 63.66 63.66 0 0 1-7.79 2.14c-1.34 0.08-2.67 0.14-4 0.15h-149z m173.2-11.78a11.56 11.56 0 0 1 1.11-1.42c0.07 0.05-0.44 0.64-1.11 1.37z" p-id="17549" fill="#ffffff"></path></svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
1
frontend/src/assets/images/plan/static/5.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724723721837" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20735" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M128 128h768v608H128z" fill="#ffffff" p-id="20736"></path><path d="M544 768v128h256v32H224v-32h256v-128H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32h768a32 32 0 0 1 32 32v608a32 32 0 0 1-32 32H544zM128 128v608h768V128H128z" fill="#ffffff" p-id="20737"></path><path d="M192 192h224v32H192V192z m0 128h96v32H192v-32z m0 96h64v32H192v-32z m0 96h64v32H192v-32z m0 96h96v32H192v-32z" fill="#ffffff" p-id="20738"></path><path d="M512 320h96v32h-96v-32z m-96 96h320v32H416v-32z m-32 96h384v32H384v-32z m64 96h160v32h-160v-32z" fill="#ffffff" p-id="20739"></path><path d="M735.04 752.16a288 288 0 1 1 43.008-34.912 31.872 31.872 0 0 1 11.2 7.264l135.776 135.744a32 32 0 0 1-45.248 45.28l-135.776-135.776a31.84 31.84 0 0 1-8.96-17.6zM576 736a224 224 0 1 0 0-448 224 224 0 0 0 0 448z" fill="#ffffff" p-id="20740"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
frontend/src/assets/images/plan/static/6.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724723757133" class="icon" viewBox="0 0 1032 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21861" width="30.234375" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M563.2 42.666667v640c0 23.466667-19.2 42.666667-42.666667 42.666666s-42.666667-19.2-42.666666-42.666666V42.666667c0-23.466667 19.2-42.666667 42.666666-42.666667s42.666667 19.2 42.666667 42.666667" fill="#ffffff" p-id="21862"></path><path d="M806.1952 457.275733L550.5792 712.900267a42.7776 42.7776 0 0 1-60.330667 0c-16.597333-16.605867-16.597333-43.776 0-60.330667l255.616-255.624533a42.7776 42.7776 0 0 1 60.330667 0 42.7776 42.7776 0 0 1 0 60.330666" fill="#ffffff" p-id="21863"></path><path d="M490.350933 712.8832L234.734933 457.275733a42.7776 42.7776 0 0 1 0-60.330666c16.597333-16.605867 43.776-16.605867 60.330667 0l255.616 255.616a42.7776 42.7776 0 0 1 0 60.330666 42.7776 42.7776 0 0 1-60.330667 0" fill="#ffffff" p-id="21864"></path><path d="M904.533333 1024H136.533333c-70.570667 0-128-57.429333-128-128V640c0-23.594667 19.072-42.666667 42.666667-42.666667s42.666667 19.072 42.666667 42.666667v256c0 23.552 19.114667 42.666667 42.666666 42.666667h768c23.552 0 42.666667-19.114667 42.666667-42.666667V640c0-23.594667 19.072-42.666667 42.666667-42.666667s42.666667 19.072 42.666666 42.666667v256c0 70.570667-57.429333 128-128 128" fill="#ffffff" p-id="21865"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -31,7 +31,8 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
const customData: any = ref({}),
|
||||
legendData: any = ref({});
|
||||
legendData: any = ref({}),
|
||||
chart: any = ref();
|
||||
const init = () => {
|
||||
customData.value = {
|
||||
title: "", //标题
|
||||
@@ -50,7 +51,7 @@ const init = () => {
|
||||
itemGap: 0, // 设置图例项之间的间隔为20
|
||||
...props.legendData,
|
||||
};
|
||||
var chart = chartsRef.value && echarts.init(chartsRef.value);
|
||||
chart.value = chartsRef.value && echarts.init(chartsRef.value)
|
||||
var option = {
|
||||
title: {
|
||||
text: customData.value.title,
|
||||
@@ -90,26 +91,24 @@ const init = () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
option && chart.setOption(option);
|
||||
option &&chart.value&& chart.value.setOption(option);
|
||||
setTimeout(() => {
|
||||
chart.resize();
|
||||
chart.value.resize();
|
||||
}, 0);
|
||||
};
|
||||
const resizeCharts = () => {
|
||||
var chart = chartsRef.value && echarts.init(chartsRef.value);
|
||||
if (chart) {
|
||||
chart.resize();
|
||||
if (chart.value) {
|
||||
chart.value.resize();
|
||||
}
|
||||
};
|
||||
window.addEventListener("resize", resizeCharts);
|
||||
onUnmounted(() => {
|
||||
var chart = chartsRef.value && echarts.init(chartsRef.value);
|
||||
if (chart) {
|
||||
chart.resize();
|
||||
if (chart.value) {
|
||||
chart.value.resize();
|
||||
}
|
||||
window.removeEventListener("resize", resizeCharts);
|
||||
if (chart) {
|
||||
chart.dispose();
|
||||
if (chart.value != null && chart.value.dispose) {
|
||||
chart.value.dispose(); // 销毁图表
|
||||
}
|
||||
});
|
||||
watch(
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<div class="avatar">
|
||||
<img src="@/assets/icons/loginout.svg" alt="avatar" @click="logout" />
|
||||
<img src="@/assets/icons/out_login.svg" alt="avatar" @click="logout" />
|
||||
</div>
|
||||
<!-- infoDialog -->
|
||||
<InfoDialog ref="infoRef"></InfoDialog>
|
||||
@@ -91,6 +91,7 @@ const changeMode = () => {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
@@ -1,229 +0,0 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="main_container">
|
||||
<div class="mode" v-for="(item, index) in modeList" :key="index">
|
||||
<div class="mode_top">
|
||||
<div class="mode_name">
|
||||
<p>
|
||||
{{ item.name }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="test_button">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="handelOpen(item.isActive)"
|
||||
>进入检测</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mode_img">
|
||||
<img :src="item.img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useUserInfoStore } from "@/stores/modules/user";
|
||||
import { ElMessage } from "element-plus";
|
||||
const router = useRouter();
|
||||
const modeList = [
|
||||
{
|
||||
name: "模拟式模式",
|
||||
subName: "未启用模拟式检测计划",
|
||||
img: "/src/assets/images/dashboard/1.svg",
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
name: "数字式模式",
|
||||
subName: "启用数字检测计划",
|
||||
img: "/src/assets/images/dashboard/2.svg",
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
name: "对比式模式",
|
||||
subName: "启用对比式检测计划",
|
||||
img: "/src/assets/images/dashboard/3.svg",
|
||||
isActive: false,
|
||||
}
|
||||
];
|
||||
const handelOpen = (isActive: any) => {
|
||||
if (isActive) {
|
||||
router.push({ path: "/admin/user-boot/preDetection" });
|
||||
} else {
|
||||
ElMessage({
|
||||
message: "当前模式未配置",
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
};
|
||||
const handleSelect = (key: string, keyPath: string[]) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
onMounted(() => {
|
||||
console.log();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.main_container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 140px);
|
||||
// overflow-y: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
// padding: 20px 2%;
|
||||
.mode {
|
||||
// width: 31.5%;
|
||||
// height: 100%;
|
||||
flex: none;
|
||||
width: 32.5%;
|
||||
height: 100%;
|
||||
border: 1px solid #eee;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
// justify-content: space-around;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 20px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 153, 255, 1) 0%,
|
||||
rgba(0, 153, 255, 1) 0%,
|
||||
rgba(0, 102, 255, 1) 65%,
|
||||
rgba(0, 51, 255, 1) 100%,
|
||||
rgba(0, 51, 255, 1) 100%
|
||||
);
|
||||
// padding: 40px 0;
|
||||
.mode_top {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #008aff;
|
||||
border-radius: 6px 6px 0 0;
|
||||
.mode_name {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
p {
|
||||
font-family: "微软雅黑 Bold", "微软雅黑", "微软雅黑", sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
// background: #fff;
|
||||
line-height: 40px;
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
// margin-top: 20px;
|
||||
}
|
||||
.mode_subName {
|
||||
font-family: "微软雅黑", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
padding: 5px 0 0 10px;
|
||||
// margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.test_button {
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
.mode_img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// padding: 30px 0 50px;
|
||||
margin-top: 100px;
|
||||
img:nth-child(1) {
|
||||
width: 60%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
img:nth-child(2) {
|
||||
width: 70%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
img:nth-child(3) {
|
||||
width: 60%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.mode_test {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
.test_button {
|
||||
width: 120px;
|
||||
height: 100%;
|
||||
border: 1px solid rgba(121, 121, 121, 1);
|
||||
border-radius: 5px;
|
||||
font-family: "微软雅黑", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #fff;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.test_button:hover {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mode:nth-child(3n + 3) {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 153, 255, 1) 0%,
|
||||
rgba(0, 153, 255, 1) 0%,
|
||||
rgba(0, 102, 255, 1) 39%,
|
||||
rgba(102, 51, 204, 1) 100%,
|
||||
rgba(102, 51, 204, 1) 100%
|
||||
);
|
||||
}
|
||||
.mode_off {
|
||||
.mode_name,
|
||||
.mode_subName,
|
||||
.test_button {
|
||||
color: #fff !important;
|
||||
}
|
||||
.test_button:hover {
|
||||
// background: rgba(0, 0, 0, 0.2) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-sub-menu__title {
|
||||
border-bottom: 0 !important;
|
||||
outline: none !important;
|
||||
}
|
||||
</style>
|
||||
@@ -12,6 +12,7 @@
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
:default-checked-keys="defaultChecked"
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
</el-tree>
|
||||
@@ -24,13 +25,16 @@ const data: any = ref([]);
|
||||
const defaultProps = {
|
||||
children: "children",
|
||||
label: "name",
|
||||
pid:"pid",
|
||||
};
|
||||
const searchForm = ref({
|
||||
planName: "",
|
||||
});
|
||||
const defaultChecked=ref([])
|
||||
const getTreeData = (val: any) => {
|
||||
console.log(val, ",,,,");
|
||||
defaultChecked.value=[]
|
||||
data.value = val;
|
||||
defaultChecked.value.push(data.value[0].children[0].id)
|
||||
};
|
||||
const filterText = ref("");
|
||||
const treeRef = ref();
|
||||
@@ -63,6 +67,7 @@ defineExpose({ getTreeData });
|
||||
flex-direction: column;
|
||||
padding: 5px;
|
||||
height: calc(100% - 70px);
|
||||
background-color: #fff;
|
||||
.el-input {
|
||||
width: 100%;
|
||||
margin: 0 10px 10px 0;
|
||||
|
||||
@@ -6,53 +6,10 @@
|
||||
</div>
|
||||
<!-- <span class="new_span">测试scss颜色</span> -->
|
||||
<div class="right_container">
|
||||
<div class="container_charts">
|
||||
<div class="charts_info">
|
||||
<pie
|
||||
:customData="{
|
||||
title: '检测状态',
|
||||
textAlign: 'right',
|
||||
}"
|
||||
:legendData="{
|
||||
icon: 'circle',
|
||||
left: 'left',
|
||||
}"
|
||||
:chartsData="chartsData1"
|
||||
ref="pieRef1"
|
||||
></pie>
|
||||
</div>
|
||||
<div class="charts_info">
|
||||
<pie
|
||||
:customData="{
|
||||
title: '检测结果',
|
||||
textAlign: 'right',
|
||||
}"
|
||||
:legendData="{
|
||||
icon: 'circle',
|
||||
left: 'left',
|
||||
}"
|
||||
:chartsData="chartsData2"
|
||||
ref="pieRef2"
|
||||
></pie>
|
||||
</div>
|
||||
<div class="charts_info">
|
||||
<pie
|
||||
:customData="{
|
||||
title: '报告状态',
|
||||
textAlign: 'right',
|
||||
}"
|
||||
:legendData="{
|
||||
icon: 'circle',
|
||||
left: 'left',
|
||||
}"
|
||||
:chartsData="chartsData3"
|
||||
ref="pieRef3"
|
||||
></pie>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 筛选条件 -->
|
||||
<div class="container_title">
|
||||
<el-form :model="form" label-width="80px" :inline="true">
|
||||
<el-form-item label="功能选择">
|
||||
<!-- <el-form-item label="功能选择">
|
||||
<el-select v-model="form.activeTabs" @change="changeSelect">
|
||||
<el-option
|
||||
v-for="(item, index) in tabsList"
|
||||
@@ -61,7 +18,7 @@
|
||||
:key="index"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="检测状态" v-if="form.activeTabs != 5">
|
||||
<el-select v-model="form.checkStatus" @change="changeSelect">
|
||||
<el-option
|
||||
@@ -146,7 +103,71 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 功能选择 -->
|
||||
<div class="container_function">
|
||||
<div
|
||||
class="function_item"
|
||||
:class="
|
||||
item.checked ? 'function_item checked_function' : 'function_item'
|
||||
"
|
||||
v-for="(item, index) in tabsList"
|
||||
:key="index"
|
||||
@click="handleCheckFunction(index)"
|
||||
>
|
||||
<div class="item_img">
|
||||
<img :src="item.img" alt="" />
|
||||
</div>
|
||||
<div class="item_text">
|
||||
<p>{{ item.label }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 饼图 -->
|
||||
<div class="container_charts">
|
||||
<div class="charts_info">
|
||||
<pie
|
||||
:customData="{
|
||||
title: '检测状态',
|
||||
textAlign: 'right',
|
||||
}"
|
||||
:legendData="{
|
||||
icon: 'circle',
|
||||
left: 'left',
|
||||
}"
|
||||
:chartsData="chartsData1"
|
||||
ref="pieRef1"
|
||||
></pie>
|
||||
</div>
|
||||
<div class="charts_info">
|
||||
<pie
|
||||
:customData="{
|
||||
title: '检测结果',
|
||||
textAlign: 'right',
|
||||
}"
|
||||
:legendData="{
|
||||
icon: 'circle',
|
||||
left: 'left',
|
||||
}"
|
||||
:chartsData="chartsData2"
|
||||
ref="pieRef2"
|
||||
></pie>
|
||||
</div>
|
||||
<div class="charts_info">
|
||||
<pie
|
||||
:customData="{
|
||||
title: '报告状态',
|
||||
textAlign: 'right',
|
||||
}"
|
||||
:legendData="{
|
||||
icon: 'circle',
|
||||
left: 'left',
|
||||
}"
|
||||
:chartsData="chartsData3"
|
||||
ref="pieRef3"
|
||||
></pie>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 列表数据 -->
|
||||
<div class="container_table">
|
||||
<Table></Table>
|
||||
</div>
|
||||
@@ -155,11 +176,13 @@
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { getStaticTreeData } from "@/api/plan/static";
|
||||
import { getStaticTreeData } from "@/api/plan/static.ts";
|
||||
import pie from "@/components/echarts/pie/default.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import tree from "../components/tree.vue";
|
||||
import Table from "../components/table.vue";
|
||||
import {data} from "@/api/plan/static.json"
|
||||
console.log(data,"??????????185");
|
||||
const treeRef = ref();
|
||||
const form: any = ref({
|
||||
activeTabs: 0, //功能选择
|
||||
@@ -173,32 +196,44 @@ const form: any = ref({
|
||||
const router = useRouter();
|
||||
localStorage.setItem("color", "red");
|
||||
//功能选择数据
|
||||
const tabsList = [
|
||||
const tabsList = ref([
|
||||
{
|
||||
label: "自动检测",
|
||||
value: 0,
|
||||
img: "/src/assets/images/plan/static/1.svg",
|
||||
checked: true,
|
||||
},
|
||||
{
|
||||
label: "手动检测",
|
||||
value: 1,
|
||||
img: "/src/assets/images/plan/static/2.svg",
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
label: "报告生成",
|
||||
value: 2,
|
||||
img: "/src/assets/images/plan/static/3.svg",
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
label: "设备归档",
|
||||
value: 3,
|
||||
img: "/src/assets/images/plan/static/4.svg",
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
label: "设备浏览",
|
||||
value: 4,
|
||||
img: "/src/assets/images/plan/static/5.svg",
|
||||
checked: false,
|
||||
},
|
||||
{
|
||||
label: "设备导入",
|
||||
value: 5,
|
||||
img: "/src/assets/images/plan/static/6.svg",
|
||||
checked: false,
|
||||
},
|
||||
];
|
||||
]);
|
||||
//检测状态数据
|
||||
const checkStatusList = [
|
||||
{
|
||||
@@ -297,7 +332,7 @@ const manufacturerList = [
|
||||
value: 2,
|
||||
},
|
||||
];
|
||||
form.value.activeTabs = tabsList[0].value;
|
||||
form.value.activeTabs = tabsList.value[0].value;
|
||||
const pieRef1 = ref(),
|
||||
pieRef2 = ref(),
|
||||
pieRef3 = ref();
|
||||
@@ -331,7 +366,8 @@ const getPieData = () => {
|
||||
const getTree = () => {
|
||||
getStaticTreeData({ userName: "zhangsan", planName: "111" }).then((res) => {
|
||||
console.log(res, "99999999");
|
||||
treeRef.value.getTreeData(res.data);
|
||||
// treeRef.value.getTreeData(res.data);
|
||||
treeRef.value.getTreeData(data);
|
||||
});
|
||||
};
|
||||
//前往检测
|
||||
@@ -346,6 +382,17 @@ const planDetail = () => {
|
||||
path: "/plan/planList",
|
||||
});
|
||||
};
|
||||
//功能选择css切换
|
||||
const handleCheckFunction = (val: any) => {
|
||||
tabsList.value.map((item: any, index: any) => {
|
||||
if (val == index) {
|
||||
item.checked = true;
|
||||
} else {
|
||||
item.checked = false;
|
||||
}
|
||||
});
|
||||
form.value.activeTabs=val;
|
||||
};
|
||||
onMounted(() => {
|
||||
console.log();
|
||||
getTree();
|
||||
@@ -355,7 +402,7 @@ onMounted(() => {
|
||||
<style lang="scss" scoped>
|
||||
.static {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: calc(100vh - 120px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #eee;
|
||||
@@ -366,7 +413,7 @@ onMounted(() => {
|
||||
}
|
||||
.right_container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
// width: 100%;
|
||||
padding: 0 10px 0 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -397,9 +444,68 @@ onMounted(() => {
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
}
|
||||
.container_function {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 50px;
|
||||
box-sizing: border-box;
|
||||
.function_item {
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
// border: 1px solid var(--el-color-primary);
|
||||
.item_img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: #c6c6c6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
width: 30px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.item_img:nth-child(3),
|
||||
.item_img:nth-child(6) {
|
||||
padding: 10px !important;
|
||||
img {
|
||||
width: 20px !important;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.item_text {
|
||||
p {
|
||||
margin: 0;
|
||||
color: var(--el-color-primary);
|
||||
font-weight: 800;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.function_item:hover,
|
||||
.checked_function {
|
||||
.item_img {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
.item_text {
|
||||
p {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.container_charts {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
height: 200px;
|
||||
// border: 2px solid green;
|
||||
background-color: #eee;
|
||||
display: flex;
|
||||
@@ -416,7 +522,7 @@ onMounted(() => {
|
||||
}
|
||||
.container_table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex:1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
:style="{
|
||||
height: authStore.showMenuFlag
|
||||
? 'calc(100vh - 120px)'
|
||||
: 'calc(100vh - 100px)',
|
||||
: 'calc(100vh - 80px)',
|
||||
}"
|
||||
>
|
||||
<div class="mode" v-for="(item, index) in modeList" :key="index">
|
||||
@@ -38,7 +38,6 @@ import { useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useAuthStore } from "@/stores/modules/auth.ts";
|
||||
const authStore = useAuthStore();
|
||||
console.log(authStore.showMenuFlagGet, "????????????????33333333");
|
||||
const activeIndex = ref("1-1");
|
||||
const router = useRouter();
|
||||
const modeList = [
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="table-box">
|
||||
<div class="table-box planList">
|
||||
<ProTable
|
||||
ref="proTable"
|
||||
:columns="columns"
|
||||
@@ -49,7 +49,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">搜索</el-button>
|
||||
<el-button type="primary">查询</el-button>
|
||||
<el-button>重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
@@ -194,19 +194,21 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
|
||||
{
|
||||
prop: "planName",
|
||||
label: "计划名称",
|
||||
width:120,
|
||||
},
|
||||
// { prop: "checkMode", label: "检测模式", width: 120 ,render: scope => {
|
||||
// return( <span v-if="scope,row.checkMode===0">模拟式<span/>)
|
||||
|
||||
// }},
|
||||
{ prop: "checkFrom", label: "检测源", minWidth: 120 },
|
||||
{
|
||||
prop: "checkMode",
|
||||
label: "检测模式",
|
||||
width: 120 ,
|
||||
},
|
||||
{ prop: "checkFrom", label: "检测源", Width: 120 },
|
||||
{ prop: "numberFromName", label: "数字源名称", width: 120 },
|
||||
{ prop: "checkExe", label: "检测脚本", width: 120 },
|
||||
{ prop: "wctx", label: "误差体系", width: 120 },
|
||||
{ prop: "checkStatus", label: "检测状态", width: 120 },
|
||||
{ prop: "checkReport", label: "检测报告", width: 120 },
|
||||
{ prop: "checkResult", label: "检测结果", width: 120 },
|
||||
{ prop: "parentNode", label: "父节点", width: 120 },
|
||||
{ prop: "parentNode", label: "父节点", width: 90 },
|
||||
{
|
||||
prop: "createTime",
|
||||
label: "创建时间",
|
||||
@@ -269,6 +271,10 @@ onMounted(()=>{
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.planList {
|
||||
width: 100%;
|
||||
height: calc(100vh - 100px);
|
||||
}
|
||||
::v-deep .el-select {
|
||||
width: 180px !important;
|
||||
}
|
||||
|
||||