新增套组

src/components/card-box/index.vue

+<template>
+  <div class="container">
+    <div v-if="title">
+      <h1>{{ title }}</h1>
+      <div><solt name="left-btn"></solt></div>
+    </div>
+    <div>
+      <solt name="right-btn"></solt>
+    </div>
+    <!-- 这里可以添加变压器运行状态的具体内容 -->
+    <!-- 例如：电压、电流、温度等监测数据 -->
+  </div>
+</template>
+<script>
+export default {
+  name: 'TransformerStatus',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    getType(e) {
+      console.log(e)
+    }
+  }
+}
+</script>
+<style>
+body {
+  font-family: Arial, sans-serif;
+  margin: 20px;
+  line-height: 1.6;
+}
+h1 {
+  color: #333;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
+}
+.container {
+  max-width: 800px;
+  background: #EBF1FF;
+  margin: 0 auto;
+}
+</style>

src/views/index/index.vue

 <template>
-  <div>
+  <div class="pageindex">
+    <el-row :gutter="20">
+      <el-col :span="12">
         <div class="left-bar">
-      <el-button :type="type == 1" @click="getType(1)">第一视角</el-button>
-      <el-button :type="type == 2" @click="getType(2)">第二视角</el-button>
-      <el-button :type="type == 3" @click="getType(3)">第三视角</el-button>
-      <el-button :type="type == 4" @click="getType(4)">第四视角</el-button>
-      <el-button :type="type == 5" @click="getType(5)">第五视角</el-button>
-      <el-button :type="type == 6" @click="getType(6)">第六视角</el-button>
+          <button
+            :class="type == 1 ? 'active-btn' : 'default-btn'"
+            @click="getType(1)"
+          >
+            第一视角
+          </button>
+          <button
+            :class="type == 2 ? 'active-btn' : 'default-btn'"
+            @click="getType(2)"
+          >
+            第二视角
+          </button>
+          <!-- <button
+            :class="type == 3 ? 'active-btn' : 'default-btn'"
+            @click="getType(3)"
+          >
+            第三视角
+          </button>
+          <button
+            :class="type == 4 ? 'active-btn' : 'default-btn'"
+            @click="getType(4)"
+          >
+            第四视角
+          </button>
+          <button
+            :class="type == 5 ? 'active-btn' : 'default-btn'"
+            @click="getType(5)"
+          >
+            第五视角
+          </button>
+          <button
+            :class="type == 6 ? 'active-btn' : 'default-btn'"
+            @click="getType(6)"
+          >
+            第六视角
+          </button> -->
         </div>
-    <pie> </pie>
+        <pie ref="zutai" :backgroundImage="pic1"> </pie>
+      </el-col>
+    </el-row>
   </div>
 </template>
 <script>
 import pie from '@/views/makePie/index.vue'
+import pic1 from '@/assets/image/变压器抠图-1.png'
+import pic2 from '@/assets/image/变压器抠图-2.png'
 export default {
   components: {
     pie: pie
@@ -20,7 +56,9 @@ export default {
   data() {
     return {
       name: '特变电压器',
-      type: 1
+      type: 1,
+      pic1,
+      pic2
     }
   },
   getType(e) {
@@ -30,9 +68,22 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.default-btn {
+  width: 145px;
+  height: 58px;
+  background: #ffffff;
+  border-radius: 29px;
+}
+.active-btn {
+  width: 145px;
+  height: 58px;
+  background: #ffffff;
+  border-radius: 29px;
+}
 .pageindex {
   width: 100%;
   height: 100%;
+
   .index-top {
     display: flex;
     .top-left {

vue.config.js

@@ -61,7 +61,7 @@ module.exports = {
       [process.env.VUE_APP_BASE_API]: {
         // target: `http://49.232.167.247:20014/`,
         // target: `http://192.168.10.185:8084/`,
-        target: `http://192.168.1.19:8082/`,
+        target: `http://106.3.97.198:20162/`,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''
         }