add:1版本

cloudroam

2024-11-15 3fc7f383b437b6c579b625f83639c864b33b97fa

add:1版本

 src/components/bridge.vue

@@ -72,7 +72,9 @@
        class="device-info"
        @click="show_info = false"
      >
        <div class="title">接口</div>
        <div class="info-container">
        <div class="info-block">
        <div class="title">上一次信息</div>
        <div class="each">
          <div class="label">网络连接性:</div>
          <div class="value">{{ current_show_info.status }}</div>
@@ -108,6 +110,47 @@
        <div class="each">
          <div class="label">操作系统:</div>
          <div class="value">{{ current_show_info.clhwOperating_System }}</div>
        </div>
        </div>
        <div class="info-block">
        <div class="title">当前信息</div>
        <div class="each">
          <div class="label">网络连接性:</div>
          <div class="value">{{ current_show_info.status }}</div>
        </div>
        <div class="each">
          <div class="label">IP地址:</div>
          <div class="value">{{ current_show_info.ip || "" }}</div>
        </div>
        <div class="each">
          <div class="label">Mac:</div>
          <div class="value">{{ current_show_info.mac }}</div>
        </div>
        <div class="each">
          <div class="label">桥架端口:</div>
          <div class="value">{{ current_show_info.networkPort }}</div>
        </div>
        <div class="each">
          <div class="label">交换机名字:</div>
          <div class="value">{{ current_show_info.switchName }}</div>
        </div>
        <div class="each">
          <div class="label">交换机端口:</div>
          <div class="value">{{ current_show_info.port }}</div>
        </div>
        <div class="each">
          <div class="label">名称:</div>
          <div class="value">{{ current_show_info.clhwName }}</div>
        </div>
        <div class="each">
          <div class="label">类型:</div>
          <div class="value">{{ current_show_info.clhwTier }}</div>
        </div>
        <div class="each">
          <div class="label">操作系统:</div>
          <div class="value">{{ current_show_info.clhwOperating_System }}</div>
        </div>
        </div>
        </div>
        <div class="button-to-switch" @click="toSwitchInfo(index)">交换机</div>
        <div class="button-del-port" @click="delPort(index)">删除</div>
@@ -434,11 +477,15 @@
      background-image: url("../assets/area/device-info-bg.svg");
      /* background-color: #a6c6e5; */
      background-size: 100% 100%;
      height: 24.4rem;
      width: 29rem;
      //height: 24.4rem;
      height: 39.4rem;
      //width: 29rem;
      width: 49rem;
      position: absolute;
      top: -31.5rem;
      transform: translate(-50%, 0%);
      //top: -31.5rem;
      top: -46.5rem;
      //transform: translate(-50%, 0%);
      transform: translate(-48%, 0%);
      left: 50%;
      z-index: 120;
      padding: 3.1rem;
@@ -571,4 +618,14 @@
    background-image: url("../assets/area/space-text-gray.svg") !important;
  }
}

.info-container {
  display: flex;
  justify-content: space-between;
}

.info-block {
  width: 45%; /* Adjust the width as needed */
}

</style>

 src/components/equ-add-form.vue

@@ -220,6 +220,23 @@
        this.open = !this.open;
      }
    },
    openConfigform(code, cabinetName) {
      if (this.open) {
        this.open = !this.open;
      } else {
        //展开，显示表格
        this.locInfo =  {};
        this.selectcode = code;
        console.log("this.locInfo", this.locInfo);
        this.name = cabinetName;
        this.port = this.locInfo.port || "";
        this.networkPort = this.locInfo.name || "";
        this.macAddress = this.locInfo.macAddress || "";
        this.ipAddress = this.locInfo.ipAddress || "";

        this.open = !this.open;
      }
    },
  },
  watch: {
    code(newval, oldval) {

 src/views/area/chart-itm.vue

@@ -13,6 +13,14 @@
        <div class="chart-status-dot red"></div>
        <div class="chart-status-desc">异常连接数</div>
      </div>
      <div class="flex1 flex tooltip">
        <div class="chart-status-dot blue"></div>
        <div class="chart-status-desc">从有到无</div>
      </div>
      <div class="flex1 flex tooltip">
        <div class="chart-status-dot purple"></div>
        <div class="chart-status-desc">从无到有</div>
      </div>
    </div>
    <div class="sub-div"></div>
    <div class="chart-itm-equ-echarts" :id="eid"></div>
@@ -62,7 +70,7 @@
            radius: ["55%", "68%"],
            center: ["50%", "55%"],
            // radius: "75%",
            avoidLabelOverlap: false,
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
@@ -146,6 +154,42 @@
                  },
                },
              },
              {
                value: this.info.beSomething || 0,
                // name: "异常连接数",
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0.2, 1, 0.3, 0, [
                      {
                        offset: 1,
                        color: "rgba(52, 90, 255, 1)",
                      },
                      {
                        offset: 0,
                        color: "rgba(241, 76, 3, 1)",
                      },
                    ]),
                  },
                },
              },
              {
                value: this.info.beNothing || 0,
                // name: "异常连接数",
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0.2, 1, 0.3, 0, [
                      {
                        offset: 1,
                        color: "rgba(128, 0, 128, 1)",
                      },
                      {
                        offset: 0,
                        color: "rgba(241, 76, 3, 1)",
                      },
                    ]),
                  },
                },
              },
            ],
          },
        ],

 src/views/area/main-container.vue

@@ -328,7 +328,6 @@
      this.$refs.equAddForm && this.$refs.equAddForm.openform(locInfo);
    },
    async showServeInfo(info) {
      debugger;
      //展示交换机全部端口
      console.log("showServeInfo", info);
      //弹出框展示全部端口，并且每个端口的情况

 src/views/area/server-info.vue

@@ -65,6 +65,7 @@

    <el-dialog append-to-body :modal="false"
    :visible.sync="dialog_activateSwitchPorts" title="交换机端口情况" class="dialog_activateSwitchPorts">
      <div><el-button type="primary" @click="click_item_add" style="margin-bottom:6rem" >新增</el-button></div>
      <div v-for="(infos, index2) of activateSwitchPorts" :key="index2" class="port-items">
        <div class="port-item" v-for="(item, index) of infos" :key="index">
          <div :key="index" class="space-text" :class="[
@@ -113,7 +114,8 @@
      </el-table>

    </el-dialog>
    
    <equ-add-form ref="equAddForm" :code="code" :areas="areas" :init_device_list="device_list"
                  @update="update_map"></equ-add-form>
  </div>
</template>
<script>
@@ -141,6 +143,7 @@
    serve_info: {},
    serve_select:{},
    code:"",
    cabinetName:"",
  },
  //根据
  //后端存储的是世界坐标，初次时候也是世界坐标，最小单位为0.01吧，这个间距或者大小，不考虑实际像素
@@ -152,6 +155,8 @@
      dialog_activateSwitchPorts: false,
      activateSwitchPorts:{},
      switchAllDetialInfos:[],
      areas: [],
      device_list: [],
      // serve_info: {},
    
    };
@@ -162,6 +167,10 @@
    console.log("this.serve_select:",this.serve_select)
  },
   mounted() {
     getAreaTjData().then((res) => {
       // console.log('areas',res.switchAreaInfo || [])
       this.areas = res.switchAreaInfo || [];
     });
    
  },
  destroyed() {
@@ -169,7 +178,6 @@
  },
  methods: {
    async showServeInfo(info) {
      debugger;
      //展示交换机全部端口
      console.log("showServeInfo", info);
      //弹出框展示全部端口，并且每个端口的情况
@@ -202,6 +210,12 @@
      }
      // console.log("this.activateSwitchPorts", this.activateSwitchPorts);
      this.dialog_activateSwitchPorts = true;
      this.cabinetName = info.cabinetName;
    },
    click_item_add() {
      console.log("this.$refs.equAddForm", this.$refs.equAddForm);
      console.log("this.areas", this.areas);
      this.$refs.equAddForm && this.$refs.equAddForm.openConfigform(this.code,this.cabinetName);
    },
  },
};

 src/views/area/tj-container.vue

@@ -24,6 +24,14 @@
          <div class="num r">{{ info.alarm || 0 }}</div>
          <div class="desc2">故障</div>
        </div>
        <div class="container-equ-num-item">
          <div class="num r">{{ info.beSomething || 0 }}</div>
          <div class="desc2">从有到无</div>
        </div>
        <div class="container-equ-num-item">
          <div class="num r">{{ info.beNothing || 0 }}</div>
          <div class="desc2">从无到有</div>
        </div>
      </div>

      <div class="tj-line"></div>

 src/views/screen1/components/chart-itm.vue

@@ -7,11 +7,19 @@
      </div>
      <div class="flex1 flex tooltip">
        <div class="chart-status-dot yellow"></div>
        <div class="chart-status-desc">>警告设备</div>
        <div class="chart-status-desc">警告设备</div>
      </div>
      <div class="flex1 flex tooltip">
        <div class="chart-status-dot red"></div>
        <div class="chart-status-desc">异常设备</div>
      </div>
      <div class="flex1 flex tooltip">
        <div class="chart-status-dot blue"></div>
        <div class="chart-status-desc">从有到无</div>
      </div>
      <div class="flex1 flex tooltip">
        <div class="chart-status-dot purple"></div>
        <div class="chart-status-desc">从无到有</div>
      </div>
    </div>
    <div class="sub-div"></div>
@@ -45,14 +53,16 @@
  methods: {
    initChart() {
      var value = 0.56;
      var v1 = 0, v2 = 0, v3 = 0;
      var v1 = 0, v2 = 0, v3 = 0,v4 = 0,v5 = 0;
      for (var item of this.areas) {
        v1 += parseInt(item.areaStatic.normal || 0)
        v2 += parseInt(item.areaStatic.warn || 0)
        v3 += parseInt(item.areaStatic.alarm || 0)
        v1 += parseInt(item.areaStatic.normal || 0);
        v2 += parseInt(item.areaStatic.warn || 0);
        v3 += parseInt(item.areaStatic.alarm || 0);
        v4 += parseInt(item.areaStatic.beSomething || 0);
        v5 += parseInt(item.areaStatic.beNothing || 0);
      }
      this.total = v1 + v2 + v3
      // console.log('v1', v1, v2, v3)
      this.total = v1 + v2 + v3 + v4 + v5
      console.log('v1', v1, 'v2', v2, 'v3', v3, 'v4', v4, 'v5', v5);

      this.option = {
        tooltip: {
@@ -63,11 +73,12 @@
          {
            // name: 'Access From',
            type: "pie",
            silent: "ture",
            minAngle: 0, // 最小角度设置为0.01度
            silent: true,
            radius: ["55%", "68%"],
            center: ["50%", "55%"],
            // radius: "75%",
            avoidLabelOverlap: false,
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
@@ -79,6 +90,11 @@
              align: "left",
              color: "rgba(108, 153, 190, 1)",

              labelLine: {
                show: true,
                length: 5, // 引导线长度
                length2: 10 // 第二段引导线长度
              },
              // rich: {
              //   time: {
              //     fontSize: 10,
@@ -95,7 +111,13 @@
                fontWeight: "bold",
              },
            },

            // data: [
            //   { value: v1, itemStyle: { normal: this.getGradient("rgba(150, 222, 194, 1)", "rgba(6, 188, 117, 1)") } },
            //   { value: v2, itemStyle: { normal: this.getGradient("rgba(236, 197, 13, 1)", "rgba(221, 175, 1, 1)") } },
            //   { value: v3, itemStyle: { normal: this.getGradient("rgba(249, 109, 0, 1)", "rgba(241, 76, 3, 1)") } },
            //   { value: v4, itemStyle: { normal: this.getGradient("rgba(249, 109, 0, 1)", "rgba(241, 76, 3, 1)") } },
            //   { value: v5, itemStyle: { normal: this.getGradient("rgba(128, 0, 128, 1)", "rgba(241, 76, 3, 1)") } }
            // ]
            data: [
              {
                value: v1,
@@ -134,7 +156,7 @@
                },
              },
              {
                value: v3,
                value: parseInt(v3),
                // name: "异常连接数",
                itemStyle: {
                  normal: {
@@ -142,6 +164,40 @@
                      {
                        offset: 1,
                        color: "rgba(249, 109, 0, 1)",
                      },
                      {
                        offset: 0,
                        color: "rgba(241, 76, 3, 1)",
                      },
                    ]),
                  },
                },
              },
              {
                value:  parseInt(v4),
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0.2, 1, 0.3, 0, [
                      {
                        offset: 1,
                        color: "rgba(52, 90, 255, 1)",
                      },
                      {
                        offset: 0,
                        color: "rgba(241, 76, 3, 1)",
                      },
                    ]),
                  },
                },
              },
              {
                value:  parseInt(v5),
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0.2, 1, 0.3, 0, [
                      {
                        offset: 1,
                        color: "rgba(128, 0, 128, 1)",
                      },
                      {
                        offset: 0,
@@ -175,13 +231,13 @@
  position: relative;

  .tooltips {
    width: 21rem;
    width: 100%;
    height: 2.25rem;
    background: #e3edf8;
    border-radius: 1.42rem;
    position: absolute;
    bottom: -3rem;
    left: calc((100% - 21rem) / 2);
    //left: calc((100% - 21rem) / 2);

    .tooltip {
      margin: 0 auto;
@@ -208,6 +264,13 @@
        background: rgba(223, 177, 2, 1);
      }

      .chart-status-dot.blue {
        background: rgba(52, 90, 255, 1);
      }

      .chart-status-dot.purple {
        background: rgba(128, 0, 128, 1);
      }
      .chart-status-desc {
        font-size: 1rem;
        font-family: PingFangSC-Regular, PingFang SC;

 src/views/screen1/itm-left.vue

@@ -90,7 +90,9 @@
          this.$router.push({path: "/area", query: {code: res.areaCode, networkPort: res.networkPort || ''}});

        } else {
          this.$message.warning('未找到对应区域')
          // this.$message.warning('未找到对应区域')
          await this.$modal.confirm('未找到对应区域是否前往交换机机柜引导页面？')
          this.$router.push({path: "/switch-board"});
        }
      }
    },