唐润平：添加右下角面板阈值刻度线

src/components/content/badGasInfo/childComps/GasInfoItem.vue

@@ -1,6 +1,9 @@
 <template>
   <div id="gas-info-item">
-    <div class="info" ref="container"></div>
+    <div class="point" ref="point">
+      <div class="info" ref="container"></div>
+    </div>
+
     <div class="name">{{ gasInfo.name }}</div>
   </div>
 </template>
@@ -85,6 +88,8 @@ onMounted(handleOnMounted);
 function handleOnMounted() {
   e_info = Echarts.init(container.value);
   e_info.setOption(option);
+  // 设置阈值
+  setPoint();
 }
 watch(
   () => params.gasInfo.value,
@@ -101,13 +106,41 @@ watch(
     e_info.setOption(option);
   }
 );
+
+// 获取阈值dom元素
+const point = ref(null);
+//手写js实现阈值的在表盘的刻度的位置
+function setPoint() {
+  const deg = 360 * (params.gasInfo.point / params.gasInfo.max);
+  point.value.style.transform = `rotate(${deg}deg)`; //旋转指定度数
+  point.value.children[0].style.transform = `rotate(${-deg}deg)`; //注意子元素逆向旋转
+}
 </script>
 
 <style lang="scss" scoped>
 #gas-info-item {
   width: 231px;
-
   text-align: center;
+
+  //旋转定位阈值位于的刻度
+  .point {
+    width: 200px;
+    height: 200px;
+
+    position: relative;
+  }
+  //用伪元素标记阈值
+  .point::after {
+    content: "";
+    display: block;
+    height: 22px;
+    width: 4px;
+    background: white;
+    position: absolute;
+    bottom: 0px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
   .info {
     width: 200px;
     height: 200px;

src/main.js

@@ -1,23 +1,23 @@
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
+import { createApp } from "vue";
+import { createPinia } from "pinia";
 
-import App from './App.vue'
-import router from './router'
+import App from "./App.vue";
+import router from "./router";
 
-import ElementPlus from 'element-plus'
-import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import ElementPlus from "element-plus";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
 //导入图标组件
-import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+import "element-plus/dist/index.css";
 
-import '@/assets/styles/index.scss'
+import "@/assets/styles/index.scss";
 
-const app = createApp(App)
+const app = createApp(App);
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
+  app.component(key, component);
 }
-app.use(ElementPlus,{locale: zhCn})
-app.use(createPinia())
-app.use(router)
+app.use(ElementPlus, { locale: zhCn });
+app.use(createPinia());
+app.use(router);
 
-app.mount('#app')
+app.mount("#app");

src/views/login/index.vue

@@ -1,95 +1,112 @@
 <template>
   <div class="login-box" id="login-box">
     <el-form
-        :model="loginForm"
-        ref="formInstance"
-        :rules="rules"
-        label-width="65px"
+      :model="loginForm"
+      ref="formInstance"
+      :rules="rules"
+      label-width="65px"
     >
       <h3>FateVerse</h3>
       <el-form-item prop="username" label="账号">
-        <el-input v-model="loginForm.username" :prefix-icon="User" ></el-input>
+        <el-input v-model="loginForm.username" :prefix-icon="User"></el-input>
       </el-form-item>
       <el-form-item prop="password" label="密码">
-        <el-input v-model="loginForm.password" type="password" :prefix-icon="Lock" ></el-input>
+        <el-input
+          v-model="loginForm.password"
+          type="password"
+          :prefix-icon="Lock"
+        ></el-input>
       </el-form-item>
-      <el-form-item prop="code" label="验证码" >
+      <el-form-item prop="code" label="验证码">
         <div class="code">
-          <el-input v-model="loginForm.code" :prefix-icon="key" @keyup.enter.native="handleLogin(formInstance)"></el-input>
-          <img :src="codeImg" alt="" @click="getCode">
+          <el-input
+            v-model="loginForm.code"
+            :prefix-icon="key"
+            @keyup.enter.native="handleLogin(formInstance)"
+          ></el-input>
+          <img :src="codeImg" alt="" @click="getCode" />
         </div>
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleLogin(formInstance)"  type="primary">登录</el-button>
+        <el-button @click="handleLogin(formInstance)" type="primary"
+          >登录</el-button
+        >
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router';
-import { getCodeImg } from '../../api/login';
-import { useAuthStore } from '@/store/userstore'
-import { ElLoading } from 'element-plus'
-import { User,Lock, Key } from '@element-plus/icons-vue'
-const router = useRouter()
-const authStore = useAuthStore()
+import { useRouter } from "vue-router";
+import { getCodeImg } from "../../api/login";
+import { useAuthStore } from "@/store/userstore";
+import { ElLoading } from "element-plus";
+import { User, Lock, Key } from "@element-plus/icons-vue";
+const router = useRouter();
+const authStore = useAuthStore();
 const loginForm = reactive({
-  username: 'admin',
-  password: '123456',
-  code: '',
-  uuid: ''
-})
-const codeImg = ref('')
-const formInstance = ref()
-const rules =  reactive({
-  username: [
-    { required: true, message: '请输入账户名', trigger: 'blur' },
-  ],
-  password: [
-    { required: true, message: '请输入密码', trigger: 'blur' },
-  ],
-  code: [
-    { required: true, message: '请输入验证码', trigger: 'blur' },
-  ]
-})
+  username: "admin",
+  password: "123456",
+  code: "",
+  uuid: "",
+});
+const codeImg = ref("");
+const formInstance = ref();
+const rules = reactive({
+  username: [{ required: true, message: "请输入账户名", trigger: "blur" }],
+  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+  code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
+});
 
 //获取二维码
 const getCode = () => {
-  getCodeImg().then(res=>{
-    loginForm.uuid = res.data.uuid
-    codeImg.value = 'data:image/gif;base64,' + res.data.img
-  })
-}
+  getCodeImg().then((res) => {
+    loginForm.uuid = res.data.uuid;
+    codeImg.value = "data:image/gif;base64," + res.data.img;
+  });
+};
 
 const handleLogin = (instance) => {
-  if(!instance) return
-  instance.validate( async (valid, fields)=>{
-    if (!valid) return
+  if (!instance) return;
+  instance.validate(async (valid, fields) => {
+    if (!valid) return;
     // 发送请求
-    await authStore.userLogin(loginForm).then(res=>{
-      if(res) {
-        ElLoading.service({text: '正在加载系统资源',background: '#409eff',lock: true})
-        router.push('/')
-      }else {
-        getCode()
+    await authStore.userLogin(loginForm).then((res) => {
+      if (res) {
+        ElLoading.service({
+          text: "正在加载系统资源",
+          background: "#409eff",
+          lock: true,
+        });
+        router.push("/");
+      } else {
+        getCode();
       }
-    })
-  })
-}
+    });
+  });
+};
 
-getCode()
+getCode();
 
 onBeforeUnmount(() => {
-  ElLoading.service({text: '正在加载系统资源',background: '#409eff',lock: true}).close()
-})
+  ElLoading.service({
+    text: "正在加载系统资源",
+    background: "#409eff",
+    lock: true,
+  }).close();
+});
 </script>
 
 <style lang="scss" scoped>
 .login-box {
   height: 100%;
-  background-color: #4158D0;
-  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
+  background-color: #4158d0;
+  background-image: linear-gradient(
+    43deg,
+    #4158d0 0%,
+    #c850c0 46%,
+    #ffcc70 100%
+  );
   display: flex;
   justify-content: center;
   align-items: center;