1、开发首页ui及功能
chris
1 month ago
parent
c725addaa1
commit
36fc52e00b
@ -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="1736840615222" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="37902" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M540.159325 256.00096C377.983528 256.00096 245.759693 388.224795 245.759693 550.400592S377.983528 844.800224 540.159325 844.800224s294.399632-132.223835 294.399632-294.399632S702.335122 256.00096 540.159325 256.00096z m0 477.234603c-100.198275 0-182.834971-81.602458-182.834972-182.834971 0-100.198275 81.602458-182.834971 182.834972-182.834971 100.198275 0 182.834971 81.602458 182.834971 182.834971 0 100.198275-82.636697 182.834971-182.834971 182.834971z" fill="#0CAA5A" p-id="37903"></path><path d="M543.323481 1024c-31.84124 0-57.518008-25.640928-57.518008-57.430968 0-31.79516 25.676768-57.430968 57.518008-57.430968 202.331907 0 365.634103-164.085555 365.634103-365.091384 0-31.79004 25.676768-57.425848 57.518008-57.425848s57.518008 25.635808 57.518008 57.425848c1.023999 264.591029-214.660852 479.95332-480.670119 479.95332z m0-851.198936c-31.84124 0-57.518008-25.635808-57.518008-57.425848V57.944248c0-20.510694 11.299826-39.99739 28.759004-50.252738 17.459178-10.255347 40.05371-10.255347 57.512888 0s28.759004 29.742043 28.759004 50.252738v57.430968c0 31.79516-25.676768 57.430968-57.512888 57.430968zM281.420448 281.513888c-22.599652 22.563812-59.571126 22.563812-82.170777 0l-41.082829-41.021389c-22.594532-22.558692-22.594532-59.478966 0-82.042777 22.599652-22.558692 59.571126-22.558692 82.165658 0l41.087948 41.021389c22.594532 22.563812 22.594532 59.484086 0 82.042777zM172.543784 543.027801c0 31.79516-25.676768 57.430968-57.518008 57.430968H57.518008C25.676768 600.453649 0 574.812721 0 543.022681c0-31.79516 25.676768-57.430968 57.518008-57.430968h57.512888c31.84124 0 57.518008 25.640928 57.518008 57.430968z m108.871544 261.513913c22.594532 22.558692 22.594532 59.478966 0 82.042778l-41.087948 41.021388c-22.594532 22.558692-59.566006 22.558692-82.165658 0-22.594532-22.563812-22.594532-59.484086 0-82.042777l41.082829-41.021389c22.599652-22.563812 59.571126-22.563812 82.170777 0zM805.221393 281.508768c-22.599652-22.558692-22.599652-59.478966 0-82.042777l41.082829-41.021389c22.594532-22.558692 59.571126-22.558692 82.165657 0 22.594532 22.563812 22.594532 59.484086 0 82.042777l-41.082828 41.021389c-22.594532 21.539813-59.571126 21.539813-82.165658 0z" fill="#FFC114" p-id="37904"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@ -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="1736840200885" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34445" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M1024 512c0 282.752-229.248 512-512 512S0 794.752 0 512 229.248 0 512 0s512 229.248 512 512z" fill="#308CFF" p-id="34446"></path><path d="M861.0816 493.7472c6.8864 36.8128-0.7168 76.9536-23.296 107.008-24.576 32.896-58.1888 51.84-99.8912 51.9168-146.0224 0.3328-292.096 0.128-438.1184 0.128-25.984 0-50.7648-2.6368-74.2144-16.512-86.1696-50.8928-88.5504-185.1392 3.5072-231.9872 2.816-1.408 6.144-4.2496 6.8096-7.0656 1.5616-6.6816 1.2288-13.824 2.5344-20.6592 3.5072-18.9696 4.7616-38.9632 11.7248-56.6528 11.008-27.8528 28.3392-52.6848 51.7888-71.6288 77.696-62.6944 195.4304-55.5008 259.3024 23.9872 4.8128 6.016 8.5504 4.608 14.0288 2.6112 61.7472-22.6816 156.0576-15.8976 190.5408 49.1264 9.2928 17.4848 17.9968 43.6224 18.176 63.616 0.0768 10.752 5.248 14.9504 13.0048 18.6368 35.6096 16.8448 57.1648 50.5088 64.1024 87.4752zM425.9328 810.0352c-2.048-4.6848-5.8112-9.3696-5.9648-14.1312-0.768-16.896-0.9728-33.8688 0.0768-50.688 0.3328-4.736 4.6592-11.3408 8.7552-13.1328 6.528-2.8416 13.824-0.512 17.664 6.8608 1.3312 2.6624 2.56 5.9392 2.4576 8.8576-0.3328 17.152-0.7424 34.2016-1.9712 51.2768-0.3328 3.8144-4.096 7.3728-6.2208 10.9568h-14.7968z m156.0576 0c-2.0992-5.1456-5.8624-10.24-5.888-15.3856-0.1792-17.92 1.0752-35.7632 1.6384-53.632 0.3328-10.8544 8.1408-9.4464 15.1552-9.5488 7.3984-0.1792 9.7536 5.4528 9.9072 10.752 0.5376 19.0976 0.4096 38.1952 0 57.3184-0.0768 3.5072-2.56 6.9888-3.968 10.496h-16.8448z m-240.384-91.5456c0-8.832 0.4608-17.664-0.0768-26.4192-0.5888-8.7552 4.992-13.3376 11.4432-13.1072 5.4016 0.2304 11.2896 4.7872 15.6928 8.7552 2.2528 2.048 2.4064 7.168 2.304 10.8288a1573.4016 1573.4016 0 0 1-1.9712 48.1792c-0.512 8.6528-6.2208 13.0048-14.2336 12.032-7.936-0.9216-14.1568-4.6848-13.2864-14.8736 0.7168-8.448 0.128-16.9472 0.128-25.3952z m156.032-0.0768c0-8.832 0.512-17.6896-0.128-26.5216-0.5632-8.2688 4.7872-12.8256 10.7008-12.8256 5.5552 0 11.8528 4.0192 16.3328 7.936 2.4576 2.0992 2.56 7.7824 2.4576 11.8784a927.8464 927.8464 0 0 1-2.1248 49.3056c-0.5888 7.7824-6.144 12.0064-13.8752 10.6752-7.2192-1.3056-13.5168-4.6592-13.3632-13.9008 0.128-8.8576 0-17.664 0-26.5472z m186.4704-1.28c-1.024 10.752-1.6896 21.2224-3.2 31.488-1.0752 7.0912-5.7856 11.0592-13.184 10.3168-6.4768-0.5888-12.0064-2.688-11.9552-10.9312 0-19.712 0.0768-39.5008-0.1792-59.2384-0.0768-7.5776 5.0688-10.8288 10.3936-9.9328 5.2992 0.896 13.0304 4.5312 14.336 8.704 3.072 9.3696 2.7648 19.84 3.7888 29.568z" fill="#FFFFFF" p-id="34447"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@ -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="1736839475823" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10821" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 773.12m-82.944 0a82.944 82.944 0 1 0 165.888 0 82.944 82.944 0 1 0-165.888 0Z" fill="#EFD152" p-id="10822"></path><path d="M512 750.592c-26.624 0-48.128-21.504-48.128-48.128V410.624c0-26.624 21.504-48.128 48.128-48.128s48.128 21.504 48.128 48.128v291.84c0 26.624-21.504 48.128-48.128 48.128z" fill="#EFD152" p-id="10823"></path><path d="M254.976 900.096c-72.704-2.048-132.096-61.44-132.096-135.168V259.072C122.88 184.32 184.32 122.88 259.072 122.88h32.768V31.744h-32.768c-124.928 0-227.328 102.4-227.328 227.328v504.832c0 123.904 99.328 224.256 223.232 226.304v-90.112zM764.928 31.744h-32.768V122.88h32.768C839.68 122.88 901.12 184.32 901.12 259.072v504.832c0 73.728-58.368 133.12-132.096 136.192v91.136c122.88-2.048 223.232-103.424 223.232-226.304V259.072c0-124.928-102.4-227.328-227.328-227.328zM686.08 620.544V198.656c0-96.256-77.824-174.08-174.08-174.08s-174.08 77.824-174.08 174.08v105.472h39.936c8.192 0 14.336 6.144 14.336 14.336 0 8.192-6.144 14.336-14.336 14.336H337.92v53.248h39.936c8.192 0 14.336 6.144 14.336 14.336 0 8.192-6.144 14.336-14.336 14.336H337.92v53.248h39.936c8.192 0 14.336 6.144 14.336 14.336s-6.144 14.336-14.336 14.336H337.92v124.928c-35.84 40.96-55.296 93.184-55.296 148.48 0 125.952 102.4 229.376 228.352 229.376s228.352-102.4 228.352-229.376c1.024-55.296-18.432-107.52-53.248-149.504z m-174.08 286.72c-75.776 0-138.24-61.44-138.24-138.24 0-36.864 14.336-71.68 41.984-98.304l13.312-13.312V198.656c0-46.08 36.864-82.944 82.944-82.944s82.944 36.864 82.944 82.944v458.752l13.312 13.312c26.624 26.624 41.984 61.44 41.984 98.304 0 76.8-62.464 138.24-138.24 138.24z" fill="#009F72" p-id="10824"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@ -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="1736839863714" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21399" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M512 0C229.236364 0 0 229.236364 0 512s229.236364 512 512 512 512-229.236364 512-512S794.763636 0 512 0z m0 985.196606C250.616242 985.196606 38.803394 773.306182 38.803394 512S250.616242 38.803394 512 38.803394 985.196606 250.693818 985.196606 512 773.306182 985.196606 512 985.196606z" fill="#00B661" p-id="21400"></path><path d="M520.983273 90.003394v170.759758c134.733576 4.654545 242.532848 115.432727 242.532848 251.236848 0 76.350061-34.055758 144.802909-87.862303 190.960485l136.905697 105.549576C887.730424 732.253091 934.167273 627.603394 934.167273 512c0-230.136242-184.149333-417.326545-413.199515-421.996606z" fill="#ED5454" p-id="21401"></path><path d="M512 260.499394v-170.666667C278.807273 89.832727 89.832727 278.807273 89.832727 512a420.615758 420.615758 0 0 0 116.224 290.940121l142.27394-99.979636A250.973091 250.973091 0 0 1 260.499394 512c0-138.860606 112.64-251.500606 251.516121-251.500606z" fill="#167DDB" p-id="21402"></path><path d="M418.676364 429.180121c-2.435879 28.470303-17.873455 44.016485-46.452364 46.436849-29.277091-2.420364-45.180121-17.873455-47.600485-46.436849 2.420364-28.470303 18.323394-44.016485 47.616-46.436848 28.470303 2.420364 44.00097 17.873455 46.436849 46.436848z m-24.436364 1.256727c-1.613576-13.824-9.340121-21.566061-23.179636-23.164121-13.824 1.613576-20.743758 9.340121-20.743758 23.164121 0.806788 13.032727 7.726545 19.93697 20.743758 20.759273 14.646303-0.822303 22.372848-7.726545 23.179636-20.759273z m233.270303 67.180607h-69.616485c-3.227152-23.614061-16.694303-35.84-40.339394-36.631273-26.841212 0.806788-40.680727 22.807273-41.487515 65.939394-0.806788 40.680727 13.839515 61.067636 44.016485 61.067636 22.000485 0 34.583273-12.660364 37.903515-37.903515h70.873212c-8.176485 57.840485-44.016485 87.939879-107.52 90.360242-76.536242-2.420364-116.053333-41.146182-118.473697-116.053333 4.033939-74.100364 41.130667-113.63297 111.104-118.473697 68.359758 0.806788 106.278788 31.340606 113.63297 91.61697l-0.093091 0.093091z" fill="#00B661" p-id="21403"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
@ -0,0 +1,98 @@
|
||||
export const pestDeviceParamsDict = {
|
||||
insecticideTem: {
|
||||
name: "杀虫仓温度",
|
||||
svg: "temperature",
|
||||
},
|
||||
dryingTem: {
|
||||
name: "干燥仓温度",
|
||||
svg: "temperature2",
|
||||
},
|
||||
rain: {
|
||||
name: "降雨状态",
|
||||
svg: "rain",
|
||||
},
|
||||
illum: {
|
||||
name: "光照强度",
|
||||
svg: "light",
|
||||
},
|
||||
mode: {
|
||||
name: "运行模式",
|
||||
svg: "",
|
||||
status: {
|
||||
0: "手动",
|
||||
1: "自动",
|
||||
},
|
||||
},
|
||||
attractWorm: {
|
||||
name: "诱虫灯",
|
||||
svg: "",
|
||||
status: {
|
||||
0: "关闭",
|
||||
1: "开启",
|
||||
},
|
||||
},
|
||||
rainFlap: {
|
||||
name: "虫雨挡板",
|
||||
svg: "",
|
||||
status: {
|
||||
0: "关闭",
|
||||
1: "打开",
|
||||
},
|
||||
},
|
||||
wormFlap: {
|
||||
name: "杀虫挡板",
|
||||
svg: "",
|
||||
status: {
|
||||
0: "关闭",
|
||||
1: "打开",
|
||||
},
|
||||
},
|
||||
dryingFlap: {
|
||||
name: "烘干挡板",
|
||||
svg: "",
|
||||
status: {
|
||||
0: "关闭",
|
||||
1: "打开",
|
||||
},
|
||||
},
|
||||
moveWorm: {
|
||||
name: "移虫装置",
|
||||
svg: "",
|
||||
status: {
|
||||
0: "关闭",
|
||||
1: "打开",
|
||||
},
|
||||
},
|
||||
shake: {
|
||||
name: "震动装置",
|
||||
svg: "",
|
||||
status: {
|
||||
0: "关闭",
|
||||
1: "启动",
|
||||
},
|
||||
},
|
||||
fillLight: {
|
||||
name: "补光灯",
|
||||
svg: "",
|
||||
status: {
|
||||
0: "关闭",
|
||||
1: "启动",
|
||||
},
|
||||
},
|
||||
insecticide: {
|
||||
name: "杀虫控制",
|
||||
svg: "",
|
||||
status: {
|
||||
0: "关闭",
|
||||
1: "启动",
|
||||
},
|
||||
},
|
||||
drying: {
|
||||
name: "烘干控制",
|
||||
svg: "",
|
||||
status: {
|
||||
0: "关闭",
|
||||
1: "启动",
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,69 +1,79 @@
|
||||
import router from './router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import NProgress from 'nprogress'
|
||||
import 'nprogress/nprogress.css'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import { isHttp, isPathMatch } from '@/utils/validate'
|
||||
import { isRelogin } from '@/utils/request'
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import usePermissionStore from '@/store/modules/permission'
|
||||
import router from "./router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import NProgress from "nprogress";
|
||||
import "nprogress/nprogress.css";
|
||||
import { getToken } from "@/utils/auth";
|
||||
import { isHttp, isPathMatch } from "@/utils/validate";
|
||||
import { isRelogin } from "@/utils/request";
|
||||
import useUserStore from "@/store/modules/user";
|
||||
import useSettingsStore from "@/store/modules/settings";
|
||||
import usePermissionStore from "@/store/modules/permission";
|
||||
|
||||
NProgress.configure({ showSpinner: false })
|
||||
NProgress.configure({ showSpinner: false });
|
||||
|
||||
const whiteList = ['/login', '/register']
|
||||
const whiteList = ["/login", "/register"];
|
||||
|
||||
const isWhiteList = (path) => {
|
||||
return whiteList.some(pattern => isPathMatch(pattern, path))
|
||||
}
|
||||
return whiteList.some((pattern) => isPathMatch(pattern, path));
|
||||
};
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
NProgress.start()
|
||||
// TODO 测试，先跳过
|
||||
next();
|
||||
return;
|
||||
NProgress.start();
|
||||
if (getToken()) {
|
||||
to.meta.title && useSettingsStore().setTitle(to.meta.title)
|
||||
to.meta.title && useSettingsStore().setTitle(to.meta.title);
|
||||
/* has token*/
|
||||
if (to.path === '/login') {
|
||||
next({ path: '/' })
|
||||
NProgress.done()
|
||||
if (to.path === "/login") {
|
||||
next({ path: "/" });
|
||||
NProgress.done();
|
||||
} else if (isWhiteList(to.path)) {
|
||||
next()
|
||||
next();
|
||||
} else {
|
||||
if (useUserStore().roles.length === 0) {
|
||||
isRelogin.show = true
|
||||
isRelogin.show = true;
|
||||
// 判断当前用户是否已拉取完user_info信息
|
||||
useUserStore().getInfo().then(() => {
|
||||
isRelogin.show = false
|
||||
usePermissionStore().generateRoutes().then(accessRoutes => {
|
||||
// 根据roles权限生成可访问的路由表
|
||||
accessRoutes.forEach(route => {
|
||||
if (!isHttp(route.path)) {
|
||||
router.addRoute(route) // 动态添加可访问路由表
|
||||
}
|
||||
})
|
||||
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
|
||||
useUserStore()
|
||||
.getInfo()
|
||||
.then(() => {
|
||||
isRelogin.show = false;
|
||||
usePermissionStore()
|
||||
.generateRoutes()
|
||||
.then((accessRoutes) => {
|
||||
// 根据roles权限生成可访问的路由表
|
||||
accessRoutes.forEach((route) => {
|
||||
if (!isHttp(route.path)) {
|
||||
router.addRoute(route); // 动态添加可访问路由表
|
||||
}
|
||||
});
|
||||
next({ ...to, replace: true }); // hack方法 确保addRoutes已完成
|
||||
});
|
||||
})
|
||||
}).catch(err => {
|
||||
useUserStore().logOut().then(() => {
|
||||
ElMessage.error(err)
|
||||
next({ path: '/' })
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
useUserStore()
|
||||
.logOut()
|
||||
.then(() => {
|
||||
ElMessage.error(err);
|
||||
next({ path: "/" });
|
||||
});
|
||||
});
|
||||
} else {
|
||||
next()
|
||||
next();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 没有token
|
||||
if (isWhiteList(to.path)) {
|
||||
// 在免登录白名单，直接进入
|
||||
next()
|
||||
next();
|
||||
} else {
|
||||
next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
|
||||
NProgress.done()
|
||||
next(`/login?redirect=${to.fullPath}`); // 否则全部重定向到登录页
|
||||
NProgress.done();
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
router.afterEach(() => {
|
||||
NProgress.done()
|
||||
})
|
||||
NProgress.done();
|
||||
});
|
||||
|
||||
@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div class="sort-info" ref="sortInfoRef">
|
||||
<el-row :gutter="8">
|
||||
<el-col :span="index == 0 ? 6 : 3" v-for="(item, index) in infoItems" :key="index">
|
||||
<div class="info-item" data-type="infoItem" :style="`background-color: ${colorList[item.type].color}`" @mouseover.self="handleHoverItem($event, item)" @mouseleave.self="winVisible = false">
|
||||
<Icon :icon="colorList[item.type].icon" class="info-item__icon"/>
|
||||
<div class="info-msg">
|
||||
<p class="msg-title">{{ item.title }}</p>
|
||||
<span class="msg-num">{{ item.num }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="device-win" ref="deviceWinRef" v-show="winVisible" @mouseover="winVisible = true" @mouseleave="winVisible = false">
|
||||
测试窗口
|
||||
<!-- <div class="search-box">
|
||||
<el-input placeholder="请输入设备名称" class="search-input" v-model="searchValue" />
|
||||
<el-button type="primary" class="search-btn" @click="searchDevices">搜索</el-button>
|
||||
</div>
|
||||
<el-table :data="deviceData" stripe style="width: 100%">
|
||||
<el-table-column prop="date" label="Date" />
|
||||
<el-table-column prop="name" label="Name" />
|
||||
</el-table> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const colorList = readonly({
|
||||
device:{
|
||||
icon: 'carbon:devices',
|
||||
color: '#329874'
|
||||
},
|
||||
pest:{
|
||||
icon: 'carbon:pest',
|
||||
color: '#b47a3e'
|
||||
},
|
||||
environment:{
|
||||
icon: 'carbon:radar-weather',
|
||||
color: '#396a98'
|
||||
},
|
||||
soil:{
|
||||
icon: 'carbon:soil-moisture',
|
||||
color: '#45969f'
|
||||
},
|
||||
online:{
|
||||
icon: 'carbon:link',
|
||||
color: '#3aa534'
|
||||
},
|
||||
offline:{
|
||||
icon: 'carbon:unlink',
|
||||
color: '#808890'
|
||||
},
|
||||
abnormal:{
|
||||
icon: 'carbon:warning',
|
||||
color: '#c04747'
|
||||
}
|
||||
})
|
||||
|
||||
const infoItems = reactive([
|
||||
{
|
||||
type: 'device',
|
||||
title: '设备总数',
|
||||
num: 12
|
||||
},
|
||||
{
|
||||
type: 'pest',
|
||||
title: '虫情监测设备',
|
||||
num: 6
|
||||
},
|
||||
{
|
||||
type: 'environment',
|
||||
title: '环境监测设备',
|
||||
num: 2
|
||||
},
|
||||
{
|
||||
type: 'soil',
|
||||
title: '土壤监测设备',
|
||||
num: 2
|
||||
},
|
||||
{
|
||||
type: 'online',
|
||||
title: '在线设备',
|
||||
num: 18
|
||||
},
|
||||
{
|
||||
type: 'offline',
|
||||
title: '离线设备',
|
||||
num: 2
|
||||
},
|
||||
{
|
||||
type: 'abnormal',
|
||||
title: '异常设备',
|
||||
num: 2
|
||||
}
|
||||
])
|
||||
|
||||
const deviceWinRef = ref(null)
|
||||
const sortInfoRef = ref(null)
|
||||
|
||||
const winVisible = ref(false)
|
||||
const searchValue = ref('')
|
||||
const deviceData = reactive([])
|
||||
|
||||
function searchDevices () {
|
||||
console.log('searchValue:', searchValue.value)
|
||||
}
|
||||
|
||||
function handleHoverItem (e, item) {
|
||||
const target = e.target;
|
||||
const { right } = target.getBoundingClientRect();
|
||||
const parent = document.body.getBoundingClientRect();
|
||||
console.log(e, item, target.getBoundingClientRect(), parent)
|
||||
winVisible.value = true;
|
||||
nextTick(() => {
|
||||
|
||||
deviceWinRef.value.style.transform = `translate(${target.offsetLeft - 2}px`
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sort-info {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
$infoIconSize: 38px;
|
||||
|
||||
.info-item {
|
||||
@apply flex justify-between items-center;
|
||||
padding: 12px 15px;
|
||||
color: #fff;
|
||||
background-color: #25598a;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
&.device-num {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.info-msg {
|
||||
@apply text-right;
|
||||
}
|
||||
|
||||
.msg-title {
|
||||
font-size: 16px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.msg-num {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.info-item__icon {
|
||||
width: $infoIconSize;
|
||||
height: $infoIconSize;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.info-item__icon,
|
||||
.info-msg {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.device-win {
|
||||
position: absolute;
|
||||
top: 76px;
|
||||
height: 400px;
|
||||
width: 460px;
|
||||
z-index: 99;
|
||||
background-color: var(--el-bg-color);
|
||||
box-shadow: 0 0 8px #999;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue