优化消息上报全局状态

src/App.vue

@@ -1,12 +1,20 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from "vue-router";
-import HeaderBar from "@/components/HeaderBar.vue";
+	import { RouterView } from "vue-router";
+	import { createWebSocket, sharedWsUrl } from "./services/socket";
+	import { useEquipmentStatusStore } from "@/stores/equipmentStatus";
+	const equipmentStatusStore = useEquipmentStatusStore()
+	const wsClient = createWebSocket(sharedWsUrl);
+	wsClient.dataOb.subscribe((data:any) => {
+		if (data.type === "status") {
+			equipmentStatusStore.setEquipmentStatus(data['data'])
+		}
+	});
+	wsClient.connect();
 </script>
 
 <template>
 	<RouterView />
 </template>
-
 <style scoped>
 
 </style>

src/router/index.ts

@@ -8,6 +8,8 @@ import SprayView from "../views/SprayView.vue";
 import PrintView from "../views/PrintView.vue";
 import Debug from '../views/debug/index.vue'
 import SpurtPrint from '../views/spurtPrint/index.vue'
+import MatrixManage from '../views/matrixManage/matrixList.vue'
+
 
 const router = createRouter({
 	history: createWebHistory(import.meta.env.BASE_URL),
@@ -49,6 +51,10 @@ const router = createRouter({
 					path: "/spurtPrint",
 					name: "spurtPrint",
 					component: SpurtPrint
+				},{
+					path: "/matrixManage",
+					name: "matrixManage",
+					component: MatrixManage
 				}
 			],
 		},

src/services/globalCmd/cmdTypes.ts

@@ -6,9 +6,11 @@ export type ControlType = {
 };
 
 export type SyringeType = {
-	rotationSpeed: string | number;
+	params : {
+		rotationSpeed: number;
 		direction: string | number;
-	time: string | number;
+		time: number;
+	}
 };
 type PositionType = {
 	x: number;
@@ -27,3 +29,63 @@ export type WorkType = {
 	movementSpeed: number;
 	position: PositionListType;
 };
+
+
+export type MachineryType = {
+  axis: string,
+  position: string | number
+}
+
+export type ControlNitrogen = 'Dehumidification' | 'Cleaning' | 'Nozzle'
+
+export type VoltageType = {
+	params:{
+		voltage: number
+	}
+}
+
+export type ControlValueType = {
+	params: {
+		valveType: ControlNitrogen,
+		isOpen:boolean
+	}
+}
+
+export type EquipmentStatusType = {
+	emergencyStop: boolean //急停状态
+	pause: boolean,
+
+	//X轴电机状态
+	xAxisPosition: number //电机位置
+	xAxisSpeed: number //电机速度
+	xAxisMovementEnded: boolean
+	xAxisAtOrigin: boolean
+	xAxisLimited: boolean
+
+	//Y轴电机状态
+	yAxisPosition: number
+	yAxisSpeed: number
+	yAxisMovementEnded: boolean
+	yAxisAtOrigin: boolean
+	yAxisLimited:boolean
+
+	//Z轴电机状态
+	zAxisPosition: number
+	zAxisSpeed: number
+	zAxisMovementEnded: boolean
+	zAxisAtOrigin: boolean
+	zAxisLimited:boolean
+
+	//三通阀状态
+	threeWayValvePosition: string
+
+	// 流量计状态
+	flowRate: number
+
+	// 温湿度传感器状态
+	temperature:number
+	humidity: number
+
+	//注射泵状态
+	syringePumpNormal: boolean
+}

src/services/globalCmd/globalCmd.ts

@@ -1,6 +1,6 @@
 import httpRequest, { type BaseResponse } from "../httpRequest";
 import { addTxnRecord } from "../txn";
-import type { OperationCmd, ControlType, SyringeType, WorkType } from "./cmdTypes";
+import type { VoltageType, ControlValueType, SyringeType, WorkType } from "./cmdTypes";
 
 //移动电机
 export function moveMotorToPosition(params: { commandName: string; params: Record<string, any> }) {
@@ -23,13 +23,13 @@ export function switchThreeWayValve(params: { type: string }) {
 }
 
 //氮气三路
-export function controlValve(params: ControlType) {
+export function controlValve(params: ControlValueType) {
 	const commandId = addTxnRecord({ ...params, category: "debug" });
 	return httpRequest<BaseResponse<string>>({ url: "/api/cmd/controlValve", params: { ...params, commandId }, method: "POST" });
 }
 
 //电压控制 开启
-export function turnOnHighVoltage(params: { voltage: string | number }) {
+export function turnOnHighVoltage(params: VoltageType) {
 	const commandId = addTxnRecord({ ...params, category: "debug" });
 	return httpRequest<BaseResponse<string>>({
 		url: "/api/cmd/turnOnHighVoltage",
@@ -60,3 +60,7 @@ export function startWork(params: WorkType) {
 export function stopWork() {
 	return httpRequest<BaseResponse<string>>({ url: "/api/cmd/stopWork", method: "POST" });
 }
+
+export function rotate(params:any){
+	return httpRequest<BaseResponse<string>>({ url: "/api/cmd/rotate",params, method: "POST" });
+}

src/stores/equipmentStatus.ts

@@ -0,0 +1,18 @@
+import { defineStore } from "pinia";
+import {  ref } from "vue";
+import * as R from "ramda";
+import type { EquipmentStatusType } from '../services/globalCmd/cmdTypes'
+
+export const useEquipmentStatusStore = defineStore("equipmentStatus", () => {
+  const equipmentStatus = ref<EquipmentStatusType[] | undefined>();
+	const setEquipmentStatus = (data: EquipmentStatusType[]) => {
+    if (!R.equals(equipmentStatus.value, data)) {
+      equipmentStatus.value = data;
+    }
+	};
+
+  return {
+    equipmentStatus,
+    setEquipmentStatus
+  }
+})

src/views/debug/index.vue

@@ -10,7 +10,7 @@
       <div class="debug_axis">
         <div class="axis">
           <div>X轴：</div>
-          <input v-model="machineryForm.X" type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[80px]" />
+          <input v-model="machineryForm.X"  type="number"  class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[80px]" />
           <div class="ml-[10px]">毫米</div>
           <div class="ml-[10px]">
             <el-button type="primary" @click="onMoveMachinery('X')">移动</el-button>
@@ -18,7 +18,7 @@
         </div>
         <div class="axis ml-[100px]">
           Y轴：
-          <input v-model="machineryForm.Y" type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[80px]" />
+          <input v-model="machineryForm.Y"  type="number"  class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[80px]" />
           <div class="ml-[10px]">毫米</div>
           <div class="ml-[10px]">
             <el-button type="primary" @click="onMoveMachinery('Y')">移动</el-button>
@@ -26,7 +26,7 @@
         </div>
         <div class="axis ml-[100px]">
           Z轴：
-          <input v-model="machineryForm.Z" type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[80px]" />
+          <input v-model="machineryForm.Z"  type="number"  class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[80px]" />
           <div class="ml-[10px]">毫米</div>
           <div class="ml-[10px]">
             <el-button type="primary" @click="onMoveMachinery('Z')">移动</el-button>
@@ -42,7 +42,7 @@
                 电压控制器：
               </el-col>
               <el-col :span="6" class="ml-[20px]">
-                <input v-model="voltageValue" placeholder='0~5000v' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
+                <input v-model="voltageValue" placeholder='0~5000v'  type="number"  class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
               </el-col>
               <el-col :span="8">
                 <el-button type="primary" @click="onTurnOnHighVoltage">开启</el-button>
@@ -56,10 +56,10 @@
               </el-col>
               <el-col :span="20">
                 <div class="ml-[20px]">
-                  <input v-model="syringeForm.rotationSpeed" placeholder='转速' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />毫米/秒杀
+                  <input v-model="syringeForm.rotationSpeed" placeholder='转速'  type="number"  class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />毫米/秒杀
                 </div>
                 <div class="mt-[10px] ml-[20px]">
-                  <input v-model="syringeForm.time" placeholder='时间' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />秒
+                  <input v-model="syringeForm.time" placeholder='时间'  type="number"  class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />秒
                 </div>
                 <div class="ml-[20px]  mt-[10px]">
                   方向：
@@ -76,44 +76,42 @@
                 湿度：
               </el-col>
               <el-col :span="6" class="ml-[20px]">
-                <input placeholder='湿度' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
+                <input placeholder='湿度'  type="number"  class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
               </el-col>
               <el-col :span="4">
                 <el-button type="primary">确定</el-button>
               </el-col>
             </el-row>
             <el-divider />
+
             <el-row class="mt-[10px]">
-              <el-col :span="6" class="text-right">
-                电机速度：
-              </el-col>
-              <el-col :span="7" class="ml-[20px]">
-                <input placeholder='速度' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
-                毫米
-              </el-col>
-              <el-col :span="4" class="ml-[10px]">
-                <el-button type="primary">确定</el-button>
-              </el-col>
-            </el-row>
-            <el-row class="mt-[10px]">
-              <el-col :span="6" class="text-right">
-                电机移动时间：
-              </el-col>
-              <el-col :span="7" class="ml-[20px]">
-                <input placeholder='时间' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
-                秒
+              <el-col :span="4" class="text-right">
+                
               </el-col>
-              <el-col :span="4" class="ml-[10px]">
-                <el-button type="primary">确定</el-button>
+              <el-col :span="18">
+                <div>指定转速&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;指定时间：</div>
+                <el-radio-group v-model="rotateForm.axis">
+                  <el-radio value="X">X</el-radio>
+                  <el-radio value="Y">Y</el-radio>
+                  <el-radio value="Z">Z</el-radio>
+                </el-radio-group>
+                <div>
+                  转速:<input type="number" v-model="rotateForm.rotationSpeed" placeholder=''  class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />转
+                  时间:<input type="number" v-model="rotateForm.time" placeholder='' class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />毫秒
+                </div>
+                <div class="mt-[20px]">
+                  <el-button type="primary" @click="onRotate">确定</el-button>
+                  <el-button type="primary" @click="onStopRotate">停止</el-button>
+                </div>
               </el-col>
             </el-row>
-            <el-divider />
-            <el-row class="mt-[10px]">
+             
+            <!-- <el-row class="mt-[10px]">
               <el-col :span="6" class="text-right">
                 推基质容量：
               </el-col>
               <el-col :span="6" class="ml-[20px]">
-                <input placeholder='容量' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />ml
+                <input placeholder='容量'  type="number"  class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />ml
               </el-col>
               <el-col :span="4" class="ml-[10px]">
                 <el-button type="primary">确定</el-button>
@@ -124,12 +122,12 @@
                 预充基质：
               </el-col>
               <el-col :span="6" class="ml-[20px]">
-                <input placeholder='容量' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />ml
+                <input placeholder='容量'  type="number"  class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />ml
               </el-col>
               <el-col :span="4" class="ml-[10px]">
                 <el-button type="primary">确定</el-button>
               </el-col>
-            </el-row>
+            </el-row> -->
             
           </div>
         </div>
@@ -140,8 +138,8 @@
           <el-divider />
           <div>
             <div>切换三通</div>
-            <el-button type="primary" @cick="onSwitchThreeWayValve('clean')">管路切换到基质</el-button>
-            <el-button type="primary" @cick="onSwitchThreeWayValve('spray')">管路切换到清洗</el-button>
+            <el-button type="primary" @click="onSwitchThreeWayValve('clean')">管路切换到基质</el-button>
+            <el-button type="primary" @click="onSwitchThreeWayValve('spray')">管路切换到清洗</el-button>
           </div>
           <el-divider />
           <div>
@@ -157,6 +155,7 @@
           <el-divider />
           <div class="h-[13rem] bg-[#f4f4f4] p-[10px]">
             <div>状态反馈区</div>
+             
           </div>
         </div>
       </div>
@@ -179,49 +178,49 @@
 
             <div class="mt-[20px]">
               行间距：
-              <input v-model="workForm.space" placeholder='' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
+              <input v-model="workForm.space" placeholder=''  type="number"  class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
               毫米
             </div>
 
             <div class="mt-[20px]">
               氮气流速：
-              <input v-model="workForm.nitrogenFlowVelocity" placeholder='' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
+              <input v-model="workForm.nitrogenFlowVelocity" placeholder=''  type="number"  class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
               毫米/秒
             </div>
 
             <div class="mt-[20px]">
               氮气气压：
-              <input v-model="workForm.matrixFlowVelocity" placeholder='' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
+              <input v-model="workForm.matrixFlowVelocity" placeholder=''  type="number"  class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
               Mp
             </div>
 
             <div class="mt-[20px]">
               电压：
-              <input v-model="workForm.voltage " placeholder='' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
+              <input v-model="workForm.voltage " placeholder=''  type="number"  class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
               V
             </div>
 
             <div class="mt-[20px]">
               喷针距离玻片高度：
-              <input v-model="workForm.height " placeholder='' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
+              <input v-model="workForm.height " placeholder=''  type="number"  class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
               毫米
             </div>
 
             <div class="mt-[20px]">
               移速：
-              <input v-model="workForm.movementSpeed" placeholder='' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
+              <input v-model="workForm.movementSpeed" placeholder=''  type="number"  class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
               毫米/秒
             </div>
 
             <div>起始坐标：</div>
             <div>
-              X:<input v-model="startAxis.x" placeholder='' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
-              Y:<input v-model="startAxis.y" placeholder='' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
+              X:<input v-model="startAxis.x" placeholder=''  type="number"  class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
+              Y:<input v-model="startAxis.y" placeholder=''  type="number"  class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
             </div>
             <div class="mt-[10px]">结束坐标：</div>
             <div class="flex">
-              X:<input v-model="endAxis.x" placeholder='' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
-              Y:<input v-model="endAxis.y" placeholder='' type="text" class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
+              X:<input v-model="endAxis.x" placeholder=''  type="number"  class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
+              Y:<input v-model="endAxis.y" placeholder=''  type="number"  class="border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center w-[100px]" />
               
             </div>
             <div class="mt-[20px] text-center">
@@ -236,7 +235,13 @@
 <script lang="ts" setup>
   import { ref, onMounted, onUnmounted } from 'vue'
   import { createWebSocket, sharedWsUrl } from "@/services/socket";
-  import type { ControlNitrogen, MachineryType, SyringeType } from './type'
+  import type { 
+    ControlNitrogen, 
+    MachineryType, 
+    SyringeType,
+    VoltageType,
+    ControlValueType
+  } from '@/services/globalCmd/cmdTypes'
 import { 
   moveMotorToPosition, 
   switchThreeWayValve,
@@ -245,14 +250,20 @@ import {
   turnOffHighVoltage,
   turnOnSyringePump,
   turnOffSyringePump,
-  startWork
+  startWork,
+  rotate
 } from "@/services/globalCmd/globalCmd";
   const activeName = ref('debug')
   const voltageValue = ref()
-  const syringeForm = ref<Partial<SyringeType>>({})
+  const syringeForm = ref<Record<string, string>>({})
   const workForm = ref<Record<string, string>>({})
   const startAxis = ref<any>({})
   const endAxis = ref<any>({})
+
+  const axis = ref()
+  const rotationSpeed = ref()
+  const time = ref()
+  const rotateForm = ref<Record<string, string>>({})
   let subscription:any
   onMounted(()=>{
     //连接websocket
@@ -283,16 +294,21 @@ import {
   }
 
   const onSwitchThreeWayValve = (type:string) => {
-    switchThreeWayValve({type}).then(res => {
+    const params = <any>{
+      params:{type}
+    }
+    switchThreeWayValve(params).then(res => {
       console.log('---onSwitchThreeWayValve---res---', res)
     })
   }
 
   const onControlValve = (type:ControlNitrogen) => {
-    const params = {
+    const params = <ControlValueType>{
+      params:{
         valveType:type,
         isOpen:true
       }
+    }
     controlValve(params).then(res => {
       console.log('---onControlValve---res---', res)
     })
@@ -300,7 +316,10 @@ import {
 
   //电压控制 开启
   const onTurnOnHighVoltage = () => {
-    turnOnHighVoltage({voltage: voltageValue.value}).then(res => {
+    const params = <VoltageType>{
+      params:{voltage: +voltageValue.value}
+    }
+    turnOnHighVoltage(params).then(res => {
       console.log('---onTurnOnHighVoltage-  电压控制 on --res---', res)
     })
   }
@@ -316,10 +335,14 @@ import {
   const onTurnOnSyringePump = () => {
     // SyringeType
     const params = <SyringeType>{
-      ...syringeForm.value
+      params:{
+        rotationSpeed: 1,
+        direction: 2,
+        time: 3
+      }
     }
     turnOnSyringePump(params).then(res => {
-      console.log('---onTurnOffHighVoltage- 电压控制 off--res---', res)
+      console.log('---onTurnOffHighVoltage- 电泵开启--res---', res)
     })
   }
 
@@ -331,18 +354,35 @@ import {
 
   const onStartWork = () => {
     const params = <any>{
+      params:{
         ...workForm.value,
         position:<any>[
           startAxis.value,
           endAxis.value
         ]
       }
+    }
     console.log('params---', params)
     startWork(params).then(res => {
       console.log('startWork-----', startWork)
     })
   }
 
+  const onRotate = () => {
+    const params = {
+      params : {
+        ...rotateForm.value
+      }
+    }
+    rotate(params).then(res => {
+
+    })
+  }
+
+  const onStopRotate = () => {
+
+  }
+  
 </script>
 <style lang="scss" scoped>
   div{

src/views/debug/type.ts

@@ -1,12 +0,0 @@
-export type MachineryType = {
-  axis: string,
-  position: string | number
-}
-
-export type ControlNitrogen = 'Dehumidification' | 'Cleaning' | 'Nozzle'
-
-export type SyringeType = {
-  rotationSpeed: string | number,
-  direction:  string | number,
-  time: string | number,
-}

src/views/matrixManage/matrixList.vue

@@ -0,0 +1,56 @@
+<template>
+  <main>
+    <div class="opt_btn p-[3rem]">
+      <el-button type="primary" @click="onAdd">新增基质</el-button>
+      <el-button>编辑</el-button>
+      <el-button>删除</el-button>
+    </div>
+    <div class="matrix_list">
+
+    </div>
+    <el-dialog v-model="addVisible" width="20rem" align-center>
+      <template #header><h2>新增基质</h2></template>
+      <el-form ref="ruleFormRef" :model="addForm" label-width="auto" style="max-width: 600px;" :rules="rules">
+        <el-form-item label="基质名称" prop="name">
+          <el-input v-model="addForm.name" />
+        </el-form-item>
+      </el-form>
+      <div class="flex justify-center">
+        <el-button type="primary" @click="onSave">保存</el-button>
+        <el-button @click="onCancel">取消</el-button>
+      </div>
+    </el-dialog>
+  </main>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  const addVisible = ref(false)
+  const addForm = ref<Record<string,string>>({})
+  const rules = ref({
+    name: [{
+      required: true,
+      message: '请输入名称',
+      trigger: 'change',
+    }]
+  })
+  const matrixList = ref([])
+
+  const onAdd = () => {
+    addVisible.value = true;
+  }
+
+  const onSave = () => {
+    console.log('form----', addForm.value)
+  }
+
+  const onCancel = () => {
+    addForm.value = {}
+    addVisible.value = false;
+  }
+
+</script>
+<style lang="scss" scoped>
+  .el-button--primary{
+    background: linear-gradient(90deg, #0657c0 24%, #096ae0 101%);;
+  }
+</style>