1122_推演任务控制

安宇轩1

2024-11-22 f0cecbee64935be0d5140d999c0046eacec6bc05

1122_推演任务控制

 se-index/src/assets/images/InferentialTaskControl/bg.png

 se-index/src/assets/images/InferentialTaskControl/computeNode.png

 se-index/src/components/InferentialTaskControl.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,301 @@
<template>
  <div class="box">
    <el-form style="margin-bottom: 20px" label-width="100px">
      <el-row style="height: 40px">
        <el-button type="primary">添加推演</el-button>
        <el-button
          style="float: right"
          icon="el-icon-video-pause"
          type="primary"
          >一键停止</el-button
        >
        <el-button style="float: right" icon="el-icon-video-play" type="primary"
          >一键启动</el-button
        >
        <el-button style="float: right" icon="el-icon-search" type="primary"
          >查询</el-button
        >
        <el-form-item style="float: right" label="任务名称">
          <el-select
            :popper-append-to-body="false"
            v-model="task.value"
            placeholder="请选择任务"
          >
            <el-option
              v-for="item in task.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="float: right" label="方案名称">
          <el-select
            :popper-append-to-body="false"
            v-model="scheme.value"
            placeholder="请选择方案"
          >
            <el-option
              v-for="item in scheme.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="float: right" label="场景（想定）">
          <el-select
            :popper-append-to-body="false"
            v-model="scene.value"
            placeholder="请选择场景"
          >
            <el-option
              v-for="item in scene.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>
    </el-form>
    <el-table :data="table.data">
      <el-table-column align="center" type="selection" width="55">
      </el-table-column>
      <el-table-column
        v-for="(item, index) in table.tableTh"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        align="center"
      >
      </el-table-column>
      <el-table-column label="计算节点" prop="computeNode" align="center">
        <template>
          <div class="computeNode"></div>
        </template>
      </el-table-column>
      <el-table-column label="存储数据" prop="storeData" align="center">
        <template>
          <div
            style="
              width: 31px;
              height: 20px;
              background: #ffffff;
              border-radius: 10px;
              margin: 0 auto;
            "
          ></div> </template
      ></el-table-column>
      <el-table-column label="状态" prop="status" align="center">
        <template>
            <div
            style="
              width: 20px;
              height: 20px;
              background: #ffffff;
              border-radius: 10px;
              margin: 0 auto;
            "
          ></div> </template
      ></el-table-column>
      <el-table-column label="操作" min-width="100" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleClick(scope.row)" size="small"
            >启动</el-button
          >
          <el-button type="text" @click="handleClick(scope.row)" size="small"
            >停止</el-button
          >
          <el-button type="text" @click="handleClick(scope.row)" size="small"
            >继续</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "InferentialTaskControl",
  data() {
    return {
      task: {
        options: [
          {
            value: "qx102stect1",
            label: "qx102stect1",
          },
          {
            value: "qx102stect2",
            label: "qx102stect2",
          },
        ],
        value: "",
      },
      scheme: {
        options: [
          {
            value: "qx102stect1",
            label: "qx102stect1",
          },
          {
            value: "qx102stect2",
            label: "qx102stect2",
          },
        ],
        value: "",
      },
      scene: {
        options: [
          {
            value: "qx102stect1",
            label: "qx102stect1",
          },
          {
            value: "qx102stect2",
            label: "qx102stect2",
          },
        ],
        value: "",
      },
      table: {
        data: [
          {
            task: "qx102stect1任务",
            scheme: "qx102stect1",
            scene: "qx102stect1-场景",
            computeNode: "",
            startTime: "2023-06-01 00:00:00",
            endTime: "2027-06-01 00:00:00",
            storeData: "",
            status: "",
          },
          {
            task: "qx102stect2任务",
            scheme: "qx102stect2",
            scene: "qx102stect2-场景",
            computeNode: "",
            startTime: "2023-06-01 00:00:00",
            endTime: "2027-06-01 00:00:00",
            storeData: "",
            status: "",
          },
        ],
        tableTh: [
          {
            label: "任务名称",
            prop: "task",
          },
          {
            label: "方案名称",
            prop: "scheme",
          },
          {
            label: "场景名称",
            prop: "scene",
          },
          {
            label: "开始时间",
            prop: "startTime",
          },
          {
            label: "结束时间",
            prop: "endTime",
          },
        ],
      },
    };
  },
  methods: {
    handleClick(row) {},
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 88%;
  height: 85%;
  background-image: url("~@/assets/images/InferentialTaskControl/bg.png");
  background-size: 100% 100%;
  margin: 5% 5% 0;
  padding: 10px 1% 20px;
}
/deep/ .el-form-item__label {
  color: #fff;
}

/deep/ .el-table {
  background-color: rgba(0, 0, 0, 0);
  .computeNode{
    background-image: url("~@/assets/images/InferentialTaskControl/computeNode.png");
    background-size: 100% 100%;
    width: 35px;
    height: 35px;
    margin: 0 auto;
  }
  thead {
    tr {
      th {
        background-color: #2d4c9e;
        border-bottom: 0px;
        .cell {
          font-weight: 400;
          font-size: 20px;
          color: #fff;
          text-shadow: 0px 0px 2px #00fbff;
        }
      }
    }
  }
  tbody {
    tr {
      background-color: rgba(0, 0, 0, 0);
      td {
        background-color: rgba(0, 0, 0, 0);
        border-bottom: 0px;
        .cell {
          font-size: 16px;
          color: #fff;
        }
      }
    }
    tr:hover {
      border: 2px solid #4b96dd;
      td {
        background-color: #2d4c9e;
        .cell {
          color: #fff;
        }
      }
    }
  }
}
/deep/ .el-table::before {
  height: 0px;
}
/deep/ .el-select {
  input {
    border: 1px solid #4b96dd;
    background-color: rgba(0, 0, 0, 0);
    color: #ddd;
  }
}
/deep/ .el-select-dropdown {
  border: 1px solid #4b96dd;
  background-color: #091631;
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: #2d4c9e;
    color: #fff;
  }
  .el-select-dropdown__item {
    color: #bbb;
  }
}
</style>

 se-index/src/components/TableComponent.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,253 @@
<!-- è¯¦æƒ…表格弹窗 -->
<template>
  <div class="dataBox">
    <el-table :data="data" style="width: 100%" height="100%"
        :row-class-name="tableRowClassName">
      <el-table-column
      :title="item.label"
        v-for="(item, index) in tableTh"
        :key="index"
        :prop="item.prop"
        show-overflow-tooltip
        :label="item.label"
        :width="item.width"
        placement="top"
      >
      <!-- <template slot-scope="scope">
        <div :title="item.label" @click="handleClick(scope.row)"></div>
      </template> -->
      </el-table-column>
      <el-table-column v-if="operate" :label="action" width="45">
        <template slot-scope="scope">
          <div @click="handleClick(scope.row)" class="more"></div>
        </template>
      </el-table-column>
      <el-table-column v-if="deleteBut" label="删除" width="45">
        <template slot-scope="scope">
          <div @click="deleteClick(scope.row)" class="deleteBut"></div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
    },
    tableTh: {
      type: Array,
    },
    operate: {
      type: Boolean,
      default: false,
    },
    deleteBut: {
      type: Boolean,
      default: false,
    },
    action:{
      type: String,
      default: '更多',
    }
  },
  data() {
    return {
      boxShow: true,
      login: false,
      data: ["test"],
    }
  },
  watch: {
    tableData: {
      handler: function (newVal, oldVal) {
        this.data = newVal
      },
      immediate: true,
    },
  },
  methods: {
    //触发详情事件
    handleClick(data) {
      console.log(this.$parent)
      this.$parent.handleClick(data)
    },
    //触发详情事件
    deleteClick(data) {
      this.$parent.deleteClick(data)
    },
    // rowDblclick(row) {
      // this.$parent.rowDblclick(row)
    // },
    //样式控制
    tableRowClassName({row, rowIndex}){
        if (row.lx && row.lx != '非重点人') {
          // return 'zdr-row'
          let className = ''
          switch (row.lx) {
            case '独居老人':
              className = 'zdr-row-1'
              break;
            case '退伍军人':
              className = 'zdr-row-2'
              break;
            case '高龄老人':
              className = 'zdr-row-3'
              break;
            case '困难人员':
              className = 'zdr-row-4'
              break;
            case '孕妇':
              className = 'zdr-row-6'
              break;
            default:
              break;
          }
          return className;
        }
        return ''
    }
  },
  mounted(){
    //tooltip自适应适配
    // function bodyScale() {
    //   var deviceHeight = document.documentElement.clientHeight;//获取当前分辨率下的可是区域高度
    //   var scale = deviceHeight/1080;
    //   let tooltip = document.getElementsByClassName('el-tooltip__popper')
    //   for(let i in tooltip){
    //     if(typeof tooltip[i] == 'object'){
    //       // tooltip[i].style.zoom = scale
    //       // clearInterval(tooltipTime)
    //     }
    //   }
    // }
    // //动态监听当前分辨率是否改变
    // window.addEventListener('resize',function() {
    //     bodyScale();
    // })
    // let tooltipTime = setInterval(() => {
    //   bodyScale();
    // }, 500);
  }
}
</script>

<style lang="less" scoped>
.dataBox {
  width: 100%;
  height: 100%;
  .more {
    width: 23px;
    height: 23px;
    background-image: url("~@/assets/images/button/Arrow.png");
    background-size: 100% 100%;
    cursor: pointer;
    margin: 0 auto;
  }
  .deleteBut {
    width: 23px;
    height: 23px;
    background-image: url("~@/assets/images/button/delete.png");
    background-size: 100% 100%;
    cursor: pointer;
    margin: 0 auto;
  }
  ::v-deep .el-table {
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 0px;
    color: #fff;
  }
  ::v-deep .el-table::before {
    height: 0px;
  }
  ::v-deep .el-table thead tr {
    background-color: rgba(0, 0, 0, 0);
    background-image: url("~@/assets/images/button/tr.png");
    background-size: 100% 100%;
    font-size: 16px;
  }
  ::v-deep .el-table thead tr th {
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 0px;
    text-align: center;
    .cell {
      padding: 0;
      color: #e1f8ff;
    }
  }
  ::v-deep .el-table tbody {
    tr:nth-child(2n-1) {
      margin-top: 5px;
      background-color: rgba(0, 0, 0, 0);
      border-bottom: 0px;
      background-image: url("~@/assets/images/button/single.png");
      background-size: 100% 100%;
      font-size: 13px;
      max-height: 30px;
    }
    tr:nth-child(2n) {
      margin-top: 5px;
      background-color: rgba(0, 0, 0, 0);
      border-bottom: 0px;
      background-image: url("~@/assets/images/button/double.png");
      background-size: 100% 100%;
      font-size: 13px;
      max-height: 30px;
    }
    tr:hover {
      margin-top: 5px;
      background-color: rgba(0, 0, 0, 0);
      border-bottom: 0px;
      background-image: url("~@/assets/images/button/hover.png");
      td {
        .cell {
          color: #fff;
        }
      }
    }
  }
  ::v-deep .el-table tbody tr td {
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 0px;
    text-align: center;
    .cell {
      font-size: 14px;
      padding: 0 2px 0 2px;
      color: #dbdbdb;
    }
  }
  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: rgba(0, 0, 0, 0);
  }
  ::v-deep .el-table {
    .zdr-row-1{ td { .cell { color: #32db87;}}}
    .zdr-row-1:hover{ td{ .cell{color: #00FF7F;}}}
    .zdr-row-2{ td { .cell { color: #8b7fd3;}}}
    .zdr-row-2:hover{ td{ .cell{color: #8470FF;}}}
    .zdr-row-3{ td { .cell { color: #db7575;}}}
    .zdr-row-3:hover{ td{ .cell{color: #FF6A6A;}}}
    .zdr-row-4{ td { .cell { color: #c9be48;}}}
    .zdr-row-4:hover{ td{ .cell{color: #FFF68F;}}}
    .zdr-row-6{ td { .cell { color: #25b2e0;}}}
    .zdr-row-6:hover{ td{ .cell{color: #00BFFF;}}}
  }

  ::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
    /* å¯¹åº”纵向滚动条的宽度 */
    width: 10px;
    /* å¯¹åº”横向滚动条的宽度 */
    height: 0px;
  }
  ::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-image: url("~@/assets/images/button/scrollBar.png");
    background-size: 100% 100%;
    cursor: pointer;
  }
  ::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track {
    background: #41494c;
    background-size: 100% 100%;
  }
}
</style>

 se-index/src/components/door.vue

@@ -33,7 +33,7 @@
            },
            {
              name: "推演任务控制",
              url: ""
              url: "/home/InferentialTaskControl"
            },
            {
              name: "分系统状态监控",

 se-index/src/components/home.vue

@@ -116,6 +116,8 @@
    }
  }
  .content {
    width: 100%;
    height:calc(100vh - 183px);
    margin-top: 60px;
  }
}

 se-index/src/router/index.js

@@ -36,7 +36,12 @@
        path: "interactive",
        name:'分系统交互管理',
        component: () => import("@/components/interactive.vue")
      }
      },
      {
        path: "InferentialTaskControl",
        name:'推演任务控制',
        component: () => import("@/components/InferentialTaskControl.vue")
      },
    ]
  }
];