交互通道管理

liufan9527

2024-11-27 a6f94e157b3801235b9b2a4c0303ec56c90fc35c

交互通道管理

 se-index/src/assets/img/interactive/bj.png

 se-index/src/assets/img/interactive/jy.png

 se-index/src/assets/img/interactive/qy.png

 se-index/src/components/interactive.vue

@@ -10,8 +10,8 @@
        {{ item }}
      </div>
    </div>
    <div class="right">
      <div class="select">
    <div class="right" v-show="leftBtnName == '交互过程监控'">
      <div class="select" style="width:1500px;">
        <div class="log">
          <div class="name">通道异常日志</div>
          <div class="sum">1</div>
@@ -169,6 +169,144 @@
        </el-pagination>
      </div>
    </div>
    <div class="right" v-show="leftBtnName == '交互通道管理'">
      <div class="select" style="width:1500px;" >
        <div class="from" style="margin-left:0;">
          <el-form style="margin-bottom: 20px" label-width="180px">
            <el-row style="height: 50px">
              <el-form-item style="float: left;width:300px;" label="信源：">
                <el-select
                  :popper-append-to-body="false"
                  v-model="source.value"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in source.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="float: left;width:300px;" label="信宿：">
                <el-select
                  :popper-append-to-body="false"
                  v-model="destination.value"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in destination.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <div class="refresh" style="margin-left:550px;">
          <img src="../assets/img/interactive/refresh_icon.png" alt="" />
          <div class="name">刷新</div>
        </div>
        <div class="call" style="margin-left:30px;">
          <img src="../assets/img/interactive/call_icon.png" alt="" />
          <div class="name">批量启动</div>
        </div>
        <div class="refresh" style="margin-left:30px;">
          <img src="../assets/img/interactive/refresh_icon.png" alt="" />
          <div class="name">一键</div>
        </div>
      </div>
      <el-table :data="tablePassageway.data" height="85%">
        <el-table-column label="信源" width="200px">
          <template slot-scope="scope">
            <div>
              {{ scope.row.source }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="信宿" width="200px">
          <template slot-scope="scope">
            <div>
              {{ scope.row.destination }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="220px">
          <template slot-scope="scope">
            <div>
              {{ scope.row.time }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template>
            <img src="../assets/img/interactive/yes.png" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="说明" width="220px">
          <template slot-scope="scope">
            <div style="color:#22C707;">
              {{ scope.row.describe }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="传输方式" width="220px">
          <template slot-scope="scope">
            <el-select
              :popper-append-to-body="false"
              v-model="scope.row.transfer"
              placeholder="请选择传输方式"
            >
              <el-option
                v-for="item in destination.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <div>
              {{ scope.row.transfer }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="编辑">
          <template>
            <img src="../assets/img/interactive/bj.png" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="启用">
          <template>
            <img src="../assets/img/interactive/qy.png" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="禁用">
          <template>
            <img
              src="../assets/img/interactive/jy.png"
              alt=""
              @click="detailsClick"
            />
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPagePassageway"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="40"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

@@ -299,7 +437,109 @@
          }
        ]
      },
      currentPage: 4
      tablePassageway: {
        data: [
          {
            source: "数据管理分系统",
            destination: "作战概念开发与验证平台",
            transmission: "消息中间件",
            state: "",
            describe: "http://10.64.33.87:6868",
            transfer: "",
            call: "",
            abnormal: "通道断开",
            time: "2024-11-05 09:51:34",
            healthy: "是",
            available: "是",
            details: ""
          },
           {
            source: "作战概念开发与验证平台",
            destination: "数据管理分系统",
            transmission: "消息中间件",
            state: "",
            describe: "http://10.64.33.87:6868",
            transfer: "",
            call: "",
            abnormal: "通道断开",
            time: "2024-11-05 09:51:34",
            healthy: "是",
            available: "是",
            details: ""
          },
          {
            source: "数据管理分系统",
            destination: "作战体系设计与评估平台",
            transmission: "消息中间件",
            state: "",
            describe: "http://10.64.33.87:6868",
            transfer: "",
            call: "",
            abnormal: "通道断开",
            time: "2024-11-05 09:51:34",
            healthy: "是",
            available: "是",
            details: ""
          },
           {
            source: "作战体系设计与评估平台",
            destination: "数据管理分系统",
            transmission: "消息中间件",
            state: "",
            describe: "http://10.64.33.87:6868",
            transfer: "",
            call: "",
            abnormal: "通道断开",
            time: "2024-11-05 09:51:34",
            healthy: "是",
            available: "是",
            details: ""
          },
          
        ],
        tableTh: [
          {
            label: "信源",
            prop: "source"
          },
          {
            label: "信宿",
            prop: "destination"
          },
          {
            label: "创建时间",
            prop: "time"
          },

          {
            label: "状态",
            prop: "state"
          },
          {
            label: "说明",
            prop: "describe"
          },
          {
            label: "传输方式",
            prop: "transmission"
          },

          {
            label: "编辑",
            prop: "healthy"
          },
          {
            label: "启用",
            prop: "available"
          },
          {
            label: "禁用",
            prop: "details"
          }
        ]
      },
      currentPage: 1,
      currentPagePassageway: 1
    };
  },
  methods: {
@@ -518,10 +758,9 @@

/deep/ .el-table {
  background-color: rgba(0, 0, 0, 0);
  

  thead {
    tr {
  
      th {
        background-color: #2d4c9e;
        border-bottom: 0px;
@@ -570,6 +809,4 @@
.el-select-dropdown__item {
  color: #bbb;
}


</style>