diff --git a/imt-ui/src/assets/biaoti.ttf b/imt-ui/src/assets/biaoti.ttf
new file mode 100644
index 0000000..3729151
Binary files /dev/null and b/imt-ui/src/assets/biaoti.ttf differ
diff --git a/imt-ui/src/assets/images/equipdetails/alarm_icon.png b/imt-ui/src/assets/images/equipdetails/alarm_icon.png
new file mode 100644
index 0000000..cb6a5c6
Binary files /dev/null and b/imt-ui/src/assets/images/equipdetails/alarm_icon.png differ
diff --git a/imt-ui/src/assets/images/equipdetails/equip_icon.png b/imt-ui/src/assets/images/equipdetails/equip_icon.png
new file mode 100644
index 0000000..dd61f97
Binary files /dev/null and b/imt-ui/src/assets/images/equipdetails/equip_icon.png differ
diff --git a/imt-ui/src/assets/images/equipdetails/fault_icon.png b/imt-ui/src/assets/images/equipdetails/fault_icon.png
new file mode 100644
index 0000000..6199bc1
Binary files /dev/null and b/imt-ui/src/assets/images/equipdetails/fault_icon.png differ
diff --git a/imt-ui/src/assets/images/equipdetails/item_title.png b/imt-ui/src/assets/images/equipdetails/item_title.png
new file mode 100644
index 0000000..3954ca5
Binary files /dev/null and b/imt-ui/src/assets/images/equipdetails/item_title.png differ
diff --git a/imt-ui/src/assets/images/equipdetails/middle_back.png b/imt-ui/src/assets/images/equipdetails/middle_back.png
new file mode 100644
index 0000000..d85322f
Binary files /dev/null and b/imt-ui/src/assets/images/equipdetails/middle_back.png differ
diff --git a/imt-ui/src/assets/images/equipdetails/run_status1.png b/imt-ui/src/assets/images/equipdetails/run_status1.png
new file mode 100644
index 0000000..e3c299f
Binary files /dev/null and b/imt-ui/src/assets/images/equipdetails/run_status1.png differ
diff --git a/imt-ui/src/assets/images/equipdetails/run_status1_back.png b/imt-ui/src/assets/images/equipdetails/run_status1_back.png
new file mode 100644
index 0000000..3728c88
Binary files /dev/null and b/imt-ui/src/assets/images/equipdetails/run_status1_back.png differ
diff --git a/imt-ui/src/assets/images/equipdetails/run_status_icon1.png b/imt-ui/src/assets/images/equipdetails/run_status_icon1.png
new file mode 100644
index 0000000..8910fd9
Binary files /dev/null and b/imt-ui/src/assets/images/equipdetails/run_status_icon1.png differ
diff --git a/imt-ui/src/assets/images/equipdetails/run_status_icon2.png b/imt-ui/src/assets/images/equipdetails/run_status_icon2.png
new file mode 100644
index 0000000..b6552b1
Binary files /dev/null and b/imt-ui/src/assets/images/equipdetails/run_status_icon2.png differ
diff --git a/imt-ui/src/assets/images/equipdetails/run_status_icon3.png b/imt-ui/src/assets/images/equipdetails/run_status_icon3.png
new file mode 100644
index 0000000..8a947eb
Binary files /dev/null and b/imt-ui/src/assets/images/equipdetails/run_status_icon3.png differ
diff --git a/imt-ui/src/assets/images/equipdetails/run_status_icon4.png b/imt-ui/src/assets/images/equipdetails/run_status_icon4.png
new file mode 100644
index 0000000..cb74363
Binary files /dev/null and b/imt-ui/src/assets/images/equipdetails/run_status_icon4.png differ
diff --git a/imt-ui/src/views/system/equip/equipdetails/index.vue b/imt-ui/src/views/system/equip/equipdetails/index.vue
new file mode 100644
index 0000000..ccbfca2
--- /dev/null
+++ b/imt-ui/src/views/system/equip/equipdetails/index.vue
@@ -0,0 +1,1279 @@
+<template>
+  <div class="company-line-wrap">
+    <div class="company-column">
+      <div>
+        <div class="item-title">
+          <div class="title"><span style="margin-left:3%">设备运行状态</span>
+            <dict-tag
+              :type="DICT_TYPE.TREND_ANALY_STATUS"
+              :value="equipInfo.status"
+            />
+          </div>
+          <div class="underline"></div>
+        </div>
+        <div class="item-content">
+          <div class="calcu-info">
+            <div class="alarm-info">
+              <span class="alarm-icon"></span>
+              <div class="alarm-detail">
+                <span class="info-title">累计报警次数：</span>
+                <span class="info-num">{{ alarmTimes }}</span>
+              </div>
+            </div>
+            <div class="alarm-info">
+              <span class="fault-icon"></span>
+              <div class="alarm-detail">
+                <span class="info-title">累计故障次数：</span>
+                <span class="info-num">{{ faultTimes }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="info-list">
+            <div class="single-row">
+              <span class="list-name">{{ "客户名称：" }}</span>
+              <span class="list-content">{{ equipInfo.customerName }}</span>
+            </div>
+            <div class="twice-row">
+              <div class="single-row">
+                <span class="list-name">{{ "设备型号：" }}</span>
+                <span class="list-content">{{ equipInfo.modelName }}</span>
+              </div>
+              <div class="divider"></div>
+              <div class="single-row">
+                <span class="list-name">{{ "设备编号：" }}</span>
+                <span class="list-content">{{ equipInfo.equipNo }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="divider-with-text">
+            <div class="divider-line"></div>
+            <div class="text-center">技术参数</div>
+            <div class="divider-line"></div>
+          </div>
+          <div class="list-wrap">
+            <div
+              v-for="(item, index) in techParamsList"
+              :key="index"
+              class="data-item"
+            >
+              <div>{{ item.name }}</div>
+              <div>{{ item.value }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div class="item-title">
+          <div class="title"><span style="margin-left:3%">设备运行情况</span>
+          </div>
+          <div class="underline"></div>
+        </div>
+        <div class="item-content">
+          <div class="equ-status">
+            <div class="status-info">
+              <div class="status-detail">
+                <span class="status-title">加工总件数：</span>
+                <span><span class="status-num">118</span><span class="status-title"> 件</span></span>
+              </div>
+              <span class="total-icon"></span>
+            </div>
+            <div class="status-info">
+              <div class="status-detail">
+                <span class="status-title">加工时长：</span>
+                <span><span class="status-num">2.5</span><span class="status-title"> 小时</span></span>
+              </div>
+              <span class="time-icon"></span>
+            </div>
+            <div class="status-info">
+              <div class="status-detail">
+                <span class="status-title">通电时间：</span>
+                <span class="status-num">13:00:00</span>
+              </div>
+              <span class="power-icon"></span>
+            </div>
+            <div class="status-info">
+              <div class="status-detail">
+                <span class="status-title">加工件数：</span>
+                <span><span class="status-num">36</span><span class="status-title"> 件</span></span>
+              </div>
+              <span class="work-icon"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div class="item-title">
+          <div class="title"><span style="margin-left:3%">设备运行情况</span>
+          </div>
+          <div class="underline"></div>
+        </div>
+        <div class="item-content">
+          <el-table
+            :data="equipAlarmList"
+            size="small"
+            style="width:100%"
+          >
+            <el-table-column
+              label="机床编号"
+              align="center"
+              prop="equipNo"
+            />
+            <el-table-column
+              label="报警等级"
+              align="center"
+              prop="alarmLevel"
+            >
+              <template v-slot="scope">
+                <dict-tag
+                  :type="DICT_TYPE.ALARM_LEVEL"
+                  :value="scope.row.alarmLevel"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="报警时间"
+              align="center"
+              prop="firstAlarmTime"
+            >
+              <template v-slot="scope">
+                <span>{{ parseTime(scope.row.firstAlarmTime) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="状态"
+              align="center"
+              prop="status"
+            >
+              <template v-slot="scope">
+                <dict-tag
+                  :type="DICT_TYPE.EQU_ALARM_STATUS"
+                  :value="scope.row.status"
+                />
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <div class="main-column">
+      <div class="select-info">
+        <el-cascader
+          v-model="value"
+          :options="options"
+          @change="handleChange"
+          style="width:50%"
+        ></el-cascader>
+      </div>
+      <div class="main-content">
+        <div>
+          <el-row>
+            <el-col
+              :span="6"
+              style="height: 100%"
+            >
+              <div
+                id="xtxdl"
+                style="height: 90%"
+              ></div>
+              <div style="height:10%;text-align: center;font-size: 16px;color:#26DE86"><span style='cursor:pointer;'>X轴推屑电流</span></div>
+            </el-col>
+            <el-col
+              :span="6"
+              style="height: 100%"
+            >
+              <div
+                id="ytxdl"
+                style="height: 90%"
+              ></div>
+              <div style="height:10%;text-align: center;font-size: 16px;color:#26DE86"><span style='cursor:pointer;'>Y轴推屑电流</span></div>
+            </el-col>
+            <el-col
+              :span="6"
+              style="height: 100%"
+            >
+              <div
+                id="yzdsz"
+                style="height: 90%"
+              ></div>
+              <div style="height:10%;text-align: center;font-size: 16px;color:#26DE86"><span style='cursor:pointer;'>Y轴振动熵值</span></div>
+            </el-col>
+            <el-col
+              :span="6"
+              style="height: 100%"
+            >
+              <div
+                id="ymczs"
+                style="height: 90%"
+              ></div>
+              <div style="height:10%;text-align: center;font-size: 16px;color:#26DE86"><span style='cursor:pointer;'>Y轴脉冲振动指数</span></div>
+            </el-col>
+          </el-row>
+        </div>
+        <div> <el-row>
+            <el-col
+              :span="8"
+              style="height: 100%"
+            >
+              <div
+                id="xrhyy"
+                style="height: 90%"
+              ></div>
+              <div style="height:10%;text-align: center;font-size: 16px;color:#26DE86"><span style='cursor:pointer;'>Y轴脉冲振动指数</span></div>
+            </el-col>
+            <el-col
+              :span="8"
+              style="height: 100%"
+            >
+              <div
+                id="yrhyy"
+                style="height: 90%"
+              ></div>
+              <div style="height:10%;text-align: center;font-size: 16px;color:#26DE86"><span style='cursor:pointer;'>Y轴脉冲振动指数</span></div>
+            </el-col>
+            <el-col
+              :span="8"
+              style="height: 100%"
+            >
+              <div
+                id="zrhyy"
+                style="height: 90%"
+              ></div>
+              <div style="height:10%;text-align: center;font-size: 16px;color:#26DE86"><span style='cursor:pointer;'>Y轴脉冲振动指数</span></div>
+            </el-col>
+          </el-row></div>
+        <div class="equip_icon"></div>
+        <div>
+          <el-col
+            :span="8"
+            style="height: 100%"
+          >
+            <div
+              id="xzzcwd"
+              style="height: 90%"
+            ></div>
+            <div style="height:10%;text-align:center;font-size: 16px;color:#26DE86"><span style='cursor:pointer;'>X轴轴承温度</span></div>
+          </el-col>
+          <el-col
+            :span="8"
+            style="height: 100%"
+          >
+            <div
+              id="yzzcwd"
+              style="height: 90%"
+            ></div>
+            <div style="height:10%;text-align:center;font-size: 16px;color:#26DE86"><span style='cursor:pointer;'>Y轴轴承温度</span></div>
+          </el-col>
+          <el-col
+            :span="8"
+            style="height: 100%"
+          >
+            <div
+              id="zzzcwd"
+              style="height: 90%"
+            ></div>
+            <div style="height:10%;text-align:center;font-size: 16px;color:#26DE86"><span style='cursor:pointer;'>Z轴轴承温度</span></div>
+          </el-col>
+        </div>
+      </div>
+    </div>
+    <div class="right-column">
+      <div>
+        <div class="item-title">
+          <div class="title"><span style="margin-left:3%">设备运行状态</span>
+          </div>
+          <div class="underline"></div>
+        </div>
+        <div class="item-content">
+          <el-timeline>
+            <el-timeline-item
+              v-for="(item,index) in timeLineList"
+              :key="index"
+              :timestamp="item.time"
+              type="danger"
+              placement="top"
+            >
+              <el-card>
+                <span style="font-weight:bolder;font-size:18px">{{ item.title }}</span>
+                <p>{{ item.content }}</p>
+              </el-card>
+            </el-timeline-item>
+            <!-- <el-timeline-item
+              timestamp="2018/4/12"
+              placement="top"
+            >
+              <el-card>
+                <h4>更新 Github 模板</h4>
+                <p>王小虎 提交于 2018/4/12 20:46</p>
+              </el-card>
+            </el-timeline-item>
+            <el-timeline-item
+              timestamp="2018/4/3"
+              placement="top"
+            >
+              <el-card>
+                <h4>更新 Github 模板</h4>
+                <p>王小虎 提交于 2018/4/3 20:46</p>
+              </el-card>
+            </el-timeline-item>
+            <el-timeline-item
+              timestamp="2018/4/2"
+              placement="top"
+            >
+              <el-card>
+                <h4>更新 Github 模板</h4>
+                <p>王小虎 提交于 2018/4/2 20:46</p>
+              </el-card>
+            </el-timeline-item> -->
+          </el-timeline>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { merge } from "lodash";
+import * as EquipAlarmDataApi from "@/api/system/alarm/equipalarmdata";
+import * as echarts from "echarts";
+export default {
+  name: "EquipDetail2",
+  dicts: ["equip_tags", "equip_class", "equip_status"],
+  data() {
+    return {
+      equipInfo: {
+        customerName: "智能车床",
+        modelName: "ZNCC001",
+        equipNo: "370020001",
+        status: 0,
+      },
+      alarmTimes: 183,
+      faultTimes: 165,
+      techParamsList: [
+        {
+          name: "技术参数1：",
+          value: 1,
+        },
+        {
+          name: "技术参数2：",
+          value: 2,
+        },
+        {
+          name: "技术参数3：",
+          value: 3,
+        },
+        {
+          name: "技术参数4：",
+          value: 4,
+        },
+      ],
+      equipAlarmList: [],
+      options: [
+        {
+          value: "1",
+          label: "客户1",
+          children: [
+            {
+              value: "",
+              label: "MK9820机床液压设备",
+            },
+          ],
+        },
+      ],
+      echarts1: null,
+      echarts2: null,
+      echarts3: null,
+      echarts4: null,
+      echarts5: null,
+      echarts6: null,
+      echarts7: null,
+      timeLineList: [
+        {
+          time: "2024/9/5 13:00:00",
+          status: 0,
+          title: "电流异常故障",
+          content: "X轴轴承温度超过报警值！",
+        },
+        {
+          time: "2024/9/7 19:10:00",
+          status: 0,
+          title: "温度异常故障",
+          content: "Y轴排屑温度超过报警值！",
+        },
+        {
+          time: "2024/9/9 15:23:20",
+          status: 0,
+          title: "温度异常故障",
+          content: "Z轴排屑温度超过报警值！",
+        },
+        {
+          time: "2024/9/12 10:17:53",
+          status: 0,
+          title: "液压异常故障",
+          content: "X轴润滑液压超过报警值！",
+        },
+      ],
+    };
+  },
+  created() {
+    this.getEquipAlarmList();
+  },
+  mounted() {
+    this.initCharts();
+    this.initTempCharts();
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    async getEquipAlarmList() {
+      var equipAlarmQuery = {
+        pageSize: 5,
+        pageNo: 1,
+      };
+      const res = await EquipAlarmDataApi.getEquipAlarmDataPage(
+        equipAlarmQuery
+      );
+
+      this.equipAlarmList = res.data.list;
+    },
+    handleChange() {},
+    initCharts() {
+      const xtxdl = document.getElementById("xtxdl"); //x轴推屑电流
+      this.echarts1 = echarts.init(xtxdl);
+      this.echarts1.setOption(
+        this.generateGaugeOption({
+          color: ["26DE86", "93DDBA"],
+          bgColor: "023E44",
+          name: "X轴排屑电流",
+          value: 70,
+          limit: 250,
+          unit: "A",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.echarts1 && this.echarts1.resize();
+      });
+
+      const ytxdl = document.getElementById("ytxdl"); //y轴推屑电流
+      this.echarts2 = echarts.init(ytxdl);
+      this.echarts2.setOption(
+        this.generateGaugeOption({
+          color: ["26AE86", "45678E"],
+          bgColor: "AAAAA",
+          name: "y轴排屑电流",
+          value: 70,
+          limit: 250,
+          unit: "A",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.echarts2 && this.echarts2.resize();
+      });
+
+      const yzdsz = document.getElementById("yzdsz"); //y轴熵值
+      this.echarts3 = echarts.init(yzdsz);
+      this.echarts3.setOption(
+        this.generateGaugeOption({
+          color: ["B07709", "EDBA58"],
+          bgColor: "846528",
+          name: "y轴振动熵值",
+          value: 80,
+          limit: 250,
+          unit: "G/S",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.echarts3 && this.echarts3.resize();
+      });
+
+      const ymczs = document.getElementById("ymczs"); //Y轴脉冲指数
+      this.echarts4 = echarts.init(ymczs);
+      this.echarts4.setOption(
+        this.generateGaugeOption({
+          color: ["707709", "7DBA58"],
+          bgColor: "A46528",
+          name: "Y轴脉冲指数",
+          value: 125,
+          limit: 250,
+          unit: "GS",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.echarts4 && this.echarts4.resize();
+      });
+
+      const xrhyy = document.getElementById("xrhyy");
+      this.echarts5 = echarts.init(xrhyy);
+      this.echarts5.setOption(
+        this.generateGaugeOption({
+          color: ["FA604C", "F63319"],
+          bgColor: "C51D07",
+          name: "x轴润滑液压",
+          value: 125,
+          limit: 250,
+          unit: "bar",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.echarts5 && this.echarts5.resize();
+      });
+
+      const yrhyy = document.getElementById("yrhyy");
+      this.echarts6 = echarts.init(yrhyy);
+      this.echarts6.setOption(
+        this.generateGaugeOption({
+          color: ["E5F72E", "BFD109"],
+          bgColor: "A5B505",
+          name: "y轴润滑液压",
+          value: 103,
+          limit: 250,
+          unit: "bar",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.echarts6 && this.echarts6.resize();
+      });
+
+      const zrhyy = document.getElementById("zrhyy");
+      this.echarts7 = echarts.init(zrhyy);
+      this.echarts7.setOption(
+        this.generateGaugeOption({
+          color: ["E5F72E", "BFD109"],
+          bgColor: "A5B505",
+          name: "z轴润滑液压",
+          value: 99,
+          limit: 250,
+          unit: "bar",
+        }),
+        true,
+        true
+      );
+      window.addEventListener("resize", () => {
+        this.echarts7 && this.echarts7.resize();
+      });
+    },
+
+    initTempCharts() {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart1 = echarts.init(document.getElementById("xzzcwd"));
+      var option1 = this.tempOption(20.3);
+      myChart1.setOption(option1);
+
+      var myChart2 = echarts.init(document.getElementById("yzzcwd"));
+      var option2 = this.tempOption(50.5);
+      myChart2.setOption(option2);
+
+      var myChart3 = echarts.init(document.getElementById("zzzcwd"));
+      var option3 = this.tempOption(65.5);
+      myChart3.setOption(option3);
+    },
+
+    tempOption(data) {
+      var TP_value = data;
+      var kd = [];
+      var Gradient = [];
+      var leftColor = "";
+      var showValue = "";
+      var boxPosition = [65, 0];
+      var TP_txt = "";
+      // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
+      for (let i = 0, len = 60; i <= len; i += 1) {
+        if (i < 10) {
+          kd.push("");
+        } else if ((i - 10) % 10 === 0) {
+          kd.push("-3");
+        } else {
+          kd.push("-1");
+        }
+      }
+      //中间线的渐变色和文本内容
+      if (TP_value > 24) {
+        TP_txt = "温度偏高";
+        Gradient.push(
+          {
+            offset: 0,
+            color: "#93FE94",
+          },
+          {
+            offset: 0.5,
+            color: "#E4D225",
+          },
+          {
+            offset: 1,
+            color: "#E01F28",
+          }
+        );
+      } else if (TP_value >= 14) {
+        TP_txt = "温度正常";
+        Gradient.push(
+          {
+            offset: 0,
+            color: "#93FE94",
+          },
+          {
+            offset: 1,
+            color: "#E4D225",
+          }
+        );
+      } else {
+        TP_txt = "温度偏低";
+        Gradient.push({
+          offset: 1,
+          color: "#93FE94",
+        });
+      }
+      if (TP_value > 50) {
+        showValue = 50;
+      } else {
+        if (TP_value < 0) {
+          showValue = 0;
+        } else {
+          showValue = TP_value + 10;
+        }
+      }
+      if (TP_value < 0) {
+        boxPosition = [65, -120];
+      }
+      leftColor = Gradient[Gradient.length - 1].color;
+      // 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
+      var option = {
+        grid: {
+          x: 90, //左侧与y轴的距离
+          y: -150, //top部与x轴的距离
+          x2: -120, //右侧与y轴的距离
+          y2: 20, //bottom部与x轴的距离
+        },
+        // backgroundColor: "#0C2F6F",
+        title: {
+          text: "温度计",
+          show: false,
+        },
+        yAxis: [
+          {
+            show: false,
+            data: [],
+            min: 0,
+            max: 200,
+            axisLine: {
+              show: false,
+            },
+          },
+          {
+            show: false,
+            min: 0,
+            max: 60,
+          },
+        ],
+        xAxis: [
+          {
+            show: false,
+            min: -10,
+            max: 80,
+            data: [],
+          },
+          {
+            show: false,
+            min: -10,
+            max: 80,
+            data: [],
+          },
+          {
+            show: false,
+            min: -10,
+            max: 80,
+            data: [],
+          },
+          {
+            show: false,
+            min: -5,
+            max: 80,
+          },
+        ],
+        series: [
+          {
+            name: "条",
+            type: "bar",
+            // 对应上面XAxis的第一个对象配置
+            xAxisIndex: 0,
+            data: [
+              {
+                value: showValue,
+              },
+            ],
+            barWidth: 8,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient),
+                label: {
+                  show: true,
+                  formatter: TP_value + "℃",
+                  position: "top",
+                  textStyle: {
+                    fontSize: "14",
+                    fontWeight: "600",
+                  },
+                },
+              },
+            },
+            z: 2,
+          },
+          {
+            name: "白框",
+            type: "bar",
+            xAxisIndex: 1,
+            barGap: "-100%",
+            data: [60],
+            barWidth: 14,
+            itemStyle: {
+              normal: {
+                color: "#0C2E6D",
+                barBorderRadius: 50,
+              },
+            },
+            z: 1,
+          },
+          {
+            name: "外框",
+            type: "bar",
+            xAxisIndex: 2,
+            barGap: "-100%",
+            data: [61],
+            barWidth: 24,
+            itemStyle: {
+              normal: {
+                color: "#4577BA",
+                barBorderRadius: 50,
+              },
+            },
+            z: 0,
+          },
+          {
+            name: "圆",
+            type: "scatter",
+            hoverAnimation: false,
+            data: [0],
+            xAxisIndex: 0,
+            symbolSize: 20,
+            itemStyle: {
+              normal: {
+                color: "#93FE94",
+                opacity: 1,
+              },
+            },
+            z: 2,
+          },
+          {
+            name: "白圆",
+            type: "scatter",
+            hoverAnimation: false,
+            data: [0],
+            xAxisIndex: 1,
+            symbolSize: 24,
+            itemStyle: {
+              normal: {
+                color: "#0C2E6D",
+                opacity: 1,
+              },
+            },
+            z: 1,
+          },
+          {
+            name: "外圆",
+            type: "scatter",
+            hoverAnimation: false,
+            data: [0],
+            xAxisIndex: 2,
+            symbolSize: 30,
+            itemStyle: {
+              normal: {
+                color: "#4577BA",
+                opacity: 1,
+              },
+            },
+            z: 0,
+          },
+          {
+            name: "刻度",
+            type: "bar",
+            yAxisIndex: 0,
+            xAxisIndex: 3,
+            label: {
+              normal: {
+                show: true,
+                position: "left",
+                distance: 10,
+                color: "white",
+                fontSize: 14,
+                formatter: function (params) {
+                  if (params.dataIndex > 60 || params.dataIndex < 10) {
+                    return "";
+                  } else {
+                    if ((params.dataIndex - 10) % 10 === 0) {
+                      return params.dataIndex - 10;
+                    } else {
+                      return "";
+                    }
+                  }
+                },
+              },
+            },
+            barGap: "-100%",
+            data: kd,
+            barWidth: 1,
+            itemStyle: {
+              normal: {
+                color: "white",
+                barBorderRadius: 120,
+              },
+            },
+            z: 0,
+          },
+        ],
+      };
+      // 使用刚指定的配置项和数据显示图表。
+      return option;
+    },
+
+    generateGaugeOption(
+      option = {
+        color: ["0DDF7A", "FFFFF"],
+        bgColor: "fff",
+        name: "",
+        value: 0,
+        limit: 1,
+        unit: "",
+      }
+    ) {
+      return merge(
+        {
+          series: [
+            {
+              type: "gauge",
+              center: ["50%", "60%"],
+              startAngle: 220,
+              endAngle: -40,
+              min: 0,
+              max: option.limit,
+              splitNumber: 12,
+              progress: {
+                show: true,
+                width: 10,
+                itemStyle: {
+                  color: {
+                    type: "linear",
+                    x: 0.8,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "#" + option.color[1], // 0% 处的颜色
+                      },
+                      // {
+                      //   offset: 0.5,
+                      //   color: "#" + option.color[1], // 50% 处的颜色
+                      // },
+                      {
+                        offset: 1,
+                        color: "#" + option.color[0], // 100% 处的颜色
+                      },
+                    ],
+
+                    global: false,
+                  },
+                },
+              },
+              pointer: {
+                show: false,
+              },
+              axisLine: {
+                lineStyle: {
+                  width: 10,
+                  // color: [[1, "#" + option.bgColor]],
+                  // color: [
+                  //   [0.25, "#FF6E76"],
+                  //   [0.5, "#FDDD60"],
+                  //   [0.75, "#58D9F9"],
+                  //   [1, "#7CFFB2"],
+                  // ],
+                },
+              },
+              axisTick: {
+                distance: -25,
+                splitNumber: 3,
+                lineStyle: {
+                  width: 1,
+                  color: "#" + option.color[0],
+                },
+              },
+              splitLine: {
+                distance: -25,
+                length: 10,
+                lineStyle: {
+                  width: 2,
+                  color: "#" + option.color[0],
+                },
+              },
+              axisLabel: {
+                show: false,
+              },
+              anchor: {
+                show: false,
+              },
+              title: {
+                show: false,
+                fontSize: 16,
+                color: "#" + option.color[0],
+                offsetCenter: [0, "100%"],
+              },
+              detail: {
+                valueAnimation: true,
+                width: "60%",
+                offsetCenter: [0, "40%"],
+                formatter: "{back| {value} }\n{unit|" + option.unit + "}",
+                rich: {
+                  back: {
+                    fontSize: 14,
+                    fontWeight: 700,
+                    color: "#" + option.color[0],
+                  },
+                  unit: {
+                    fontSize: 12,
+                    fontWeight: 400,
+                    color: "#" + option.color[0],
+                  },
+                },
+              },
+              data: [
+                {
+                  value: option.value,
+                  name: option.name,
+                },
+              ],
+            },
+          ],
+        },
+        {},
+        (objVal, srcVal) => {
+          if (isArray(objVal)) return srcVal;
+        }
+      );
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+$bordercolor: #ddd;
+@font-face {
+  font-family: "BIAOTI";
+  src: url(../../../../assets/biaoti.ttf);
+}
+.company-line-wrap {
+  display: grid;
+  grid-template-columns: 25% 45% 25%;
+  grid-gap: 1%;
+  height: calc(100vh - 90px);
+  margin: 0 15px;
+  overflow-y: scroll;
+  .company-column {
+    display: grid;
+    grid-template-rows: repeat(3, 32%);
+    grid-gap: 2%;
+    > div {
+      padding: 6px;
+      border: 1px solid $bordercolor;
+      font-size: 13px;
+      .item-title {
+        // background: url() no-repeat center center;
+        // background-size: 100% 28px;
+        height: 28px;
+        // padding-left: 5px;
+        font-weight: 800;
+        font-size: 14px;
+        letter-spacing: 2px;
+        transform: skew(-10deg);
+        .title {
+          background: url("../../../../assets/images/equipdetails/item_title.png")
+            no-repeat left center;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .underline {
+          width: 100%;
+          height: 1px;
+          background: #ddd; /* 浅灰色 */
+          margin: 2px auto 0; /* 控制下划线与标题之间的距离 */
+        }
+        // &.run-status {
+        //   > div {
+        //     display: inline-block;
+        //     float: right;
+        //   }
+        // }
+      }
+      .item-content {
+        height: calc(100% - 28px);
+        display: grid;
+        .calcu-info {
+          display: grid;
+          grid-template-columns: repeat(2, 50%);
+          .alarm-info {
+            height: 58px;
+            padding: 4px 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .alarm-icon {
+              display: inline-block;
+              background: url("../../../../assets/images/equipdetails/alarm_icon.png")
+                no-repeat center center;
+              background-size: 30px 30px;
+              height: 35px;
+              width: 35px;
+              margin-right: 5px;
+            }
+            .fault-icon {
+              display: inline-block;
+              background: url("../../../../assets/images/equipdetails/fault_icon.png")
+                no-repeat center center;
+              background-size: 30px 30px;
+              height: 35px;
+              width: 35px;
+              margin-right: 5px;
+            }
+            .alarm-detail {
+              .info-title {
+                font-size: 14px;
+                font-weight: 800;
+              }
+              .info-num {
+                font-family: "BIAOTI";
+                font-size: 20px;
+              }
+            }
+          }
+        }
+        .list-wrap {
+          font-size: 14px;
+          display: grid;
+          grid-template-columns: 50% 50%;
+          //   border: 1px solid #ddd;
+          .data-item {
+            display: grid;
+            grid-template-columns: 65% 35%;
+
+            > div {
+              &:first-child {
+                // color: #1ba7ff;
+                font-weight: 500;
+                background: #f7f7f7;
+              }
+              font-weight: bolder;
+              padding: 8px 2px;
+              border: 1px solid #ddd;
+            }
+          }
+        }
+        .info-list {
+          font-size: 14px;
+          .single-row {
+            flex: 1;
+            border: 1px solid #ddd;
+            .list-name {
+              font-weight: 300;
+            }
+            .list-content {
+              font-weight: 600;
+            }
+          }
+          .twice-row {
+            display: flex;
+            justify-content: space-between;
+          }
+        }
+        .equ-status {
+          display: grid;
+          grid-template-columns: repeat(2, 50%);
+          grid-template-rows: repeat(2, 50%);
+          gap: 5px; /* 单元格之间的间隔 */
+          .status-info {
+            // background: url("../../../../assets/images/equipdetails/run_status1_back.png")
+            //   no-repeat center center;
+            // background-size: 98% 58px;
+            background-color: #f1f5f9;
+            height: 58px;
+            padding: 4px 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-top: 10px;
+            // .status-detail {
+            //   height: 58px;
+            //   padding: 4px 8px;
+            //   display: flex;
+            //   align-items: center;
+            //   justify-content: center;
+            // }
+            .status-detail {
+              display: grid;
+
+              .status-title {
+                font-size: 14px;
+                font-weight: 800;
+              }
+              .status-num {
+                font-family: "BIAOTI";
+                font-size: 20px;
+              }
+            }
+            .total-icon {
+              display: inline-block;
+              background: url("../../../../assets/images/equipdetails/run_status_icon1.png")
+                no-repeat center center;
+              background-size: 30px 30px;
+              height: 40px;
+              width: 40px;
+              margin-left: 5px;
+            }
+            .time-icon {
+              display: inline-block;
+              background: url("../../../../assets/images/equipdetails/run_status_icon2.png")
+                no-repeat center center;
+              background-size: 30px 30px;
+              height: 40px;
+              width: 40px;
+              margin-left: 5px;
+            }
+            .power-icon {
+              display: inline-block;
+              background: url("../../../../assets/images/equipdetails/run_status_icon3.png")
+                no-repeat center center;
+              background-size: 30px 30px;
+              height: 40px;
+              width: 40px;
+              margin-left: 5px;
+            }
+            .work-icon {
+              display: inline-block;
+              background: url("../../../../assets/images/equipdetails/run_status_icon4.png")
+                no-repeat center center;
+              background-size: 30px 30px;
+              height: 40px;
+              width: 40px;
+              margin-left: 5px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .main-column {
+    display: grid;
+    grid-template-rows: 10% 85%;
+    grid-gap: 2%;
+    height: calc(100vh - 90px);
+    // > div {
+
+    // }
+    .select-info {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 1px solid #ddd;
+    }
+    .main-content {
+      display: grid;
+      grid-template-rows: 20% 20% 40% 20%;
+      background: url("../../../../assets/images/equipdetails/middle_back.png")
+        no-repeat center center;
+      background-size: cover;
+      // border: 3px solid transparent;
+      // border-image-source: radial-gradient(
+      //   circle at center,
+      //   transparent 60%,
+      //   rgba(128, 170, 237, 0.5) 100%
+      // );
+      border-image-slice: 1;
+    }
+    .equip_icon {
+      background: url("../../../../assets/images/equipdetails/equip_icon.png")
+        no-repeat center center;
+      background-size: 300px 200px;
+    }
+  }
+  .right-column {
+    display: grid;
+    grid-template-rows: 98%;
+    > div {
+      padding: 6px;
+      border: 1px solid $bordercolor;
+      font-size: 13px;
+      .item-title {
+        // background: url() no-repeat center center;
+        // background-size: 100% 28px;
+        height: 28px;
+        // padding-left: 5px;
+        font-weight: 800;
+        font-size: 14px;
+        letter-spacing: 2px;
+        transform: skew(-10deg);
+        .title {
+          background: url("../../../../assets/images/equipdetails/item_title.png")
+            no-repeat left center;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .underline {
+          width: 100%;
+          height: 1px;
+          background: #ddd; /* 浅灰色 */
+          margin: 2px auto 0; /* 控制下划线与标题之间的距离 */
+        }
+        // &.run-status {
+        //   > div {
+        //     display: inline-block;
+        //     float: right;
+        //   }
+        // }
+      }
+    }
+  }
+}
+.divider-with-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.divider-line {
+  flex-grow: 1;
+  border-bottom: 1px solid #ddd;
+  margin: 0 10px; /* 可以根据需要调整左右间距 */
+}
+
+.text-center {
+  font-size: 14px;
+  font-weight: bolder;
+  display: inline-block;
+  padding: 0 10px; /* 文字左右间距 */
+}
+::v-deep .el-cascader .el-input .el-input__inner {
+  background-color: rgb(255, 245, 245);
+}
+</style>
+