orbit-ch-web/src/components/rwjsComponents/rwyxzt.vue

<template>
  <div class="rwyxzt-content">
    <div class="upTalbe-area">
      <div class="rwxx-area">
        <div class="rwxx-title"></div>
        <div class="rwxx-content">
          <div class="rwxx-operateArea">
            <div class="rwxx-timePicker">
              <span class="startTime-icon"><i class="el-icon-date"></i></span>
              <span class="endTime-icon"><i class="el-icon-date"></i></span>
              <el-date-picker
                v-model="rwSearchTime"
                type="datetimerange"
                align="right"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['12:00:00', '08:00:00']">
              </el-date-picker>
            </div>
            <div class="rwxx-searchBnt">
              <el-button type="primary" size="mini" @click="getRwxxTableData(rwSearchTime ? {startTime:rwSearchTime[0],endTime:rwSearchTime[1]} : undefined)">搜索</el-button>
            </div>
          </div>
          <div class="rwxx-tableArea">
            <el-table
              height="390"
              ref="rwxxMultipleTable"
              :data="rwxxTableData"
              tooltip-effect="light"
              style="width: 100%"
              :header-row-style="{background:'rgba(160, 160, 160, 0.3)',height:'30px',outline: 'rgb(229, 229, 229) solid 1px'}"
              :header-cell-style="{padding:'0px',fontFamily: 'SourceHanSansCN-Regular', fontSize: '14px', color: '#fff',backgroundColor:'transparent'}"
              :cell-style="{'padding':'0px'}"
              :row-style="rwxxRowStyle"
              @cell-mouse-enter="rwxxHandleCellHover"
              @row-click="rwxxRowClick"
              >
              <el-table-column
                v-for="(rwxxitemProp, rwxxitemPropi) in rwxxTitleProp"
                :key="rwxxitemPropi"
                :prop="rwxxitemProp[0]"
                :label="rwxxitemProp[1]"
                :width="rwxxitemProp[2]"
                :show-overflow-tooltip="rwxxitemProp[3]"
                align="center">
              </el-table-column>
            </el-table>
          </div>
          <!-- <div class="rwxx-pagination">
            <el-pagination
              @size-change="rwxxPaginationHandleSizeChange"
              @current-change="rwxxPaginationHandleCurrentChange"
              :current-page="rwxxPaginationcurrentPage"
              :page-size="rwxxPaginationPageSize"
              prev-text="上一页"
              next-text="下一页"
              layout="total, prev, pager, next, jumper"
              :pager-count="5"
              :total="rwxxPaginationTotal">
            </el-pagination>
          </div> -->
        </div>
      </div>
      <div class="wxgcxx-area">
        <div class="tableData-area">
          <el-table
            height="228"
            ref="wxgcxxMultipleTable"
            :data="wxgcxxTableData"
            tooltip-effect="light"
            style="width: 100%"
            :header-row-style="{background:'rgba(160, 160, 160, 0.3)',height:'30px',outline: 'rgb(229, 229, 229) solid 1px'}"
            :header-cell-style="{padding:'0px',fontFamily: 'SourceHanSansCN-Regular', fontSize: '14px', color: '#fff',backgroundColor:'transparent'}"
            :cell-style="{'padding':'0px'}"
            :row-style="wxgcxxRowStyle"
            @cell-mouse-enter="handleCellHover"
            @row-click="wxgcxxRowClick"
            >
            <el-table-column
              v-for="(itemProp, itemPropi) in wxgcxxTitleProp"
              :key="itemPropi"
              :prop="itemProp[0]"
              :label="itemProp[1]"
              :width="itemProp[2]"
              :show-overflow-tooltip="itemProp[3]"
              align="center">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- <div class="downTimeLine-area">
      地球时间轴
    </div> -->
  </div>
</template>

<script>
import {selAllTargetList, selStripByParentId} from '@/api/rwjsApi.js'
export default {
    name:"rwjsRwyxzt",
    data() {
      return {
        rwSearchTime:'',
        rwxxTitleProp:[
          ['parentId','编号',65, true],
          ['observationPurpose_use','目的',80, true],
          ['type_use','任务类型',65, false],
          ['startTime','开始时间',88, true],
          ['endTime','结束时间',88, true],
          ['status_use','执行状态',62, false],
        ],
        rwxxTableData:[],
        rwxxTempHoverRow:null,
        rwxxPaginationcurrentPage:1,
        rwxxPaginationTotal:10000,
        rwxxPaginationPageSize:6,
        wxgcxxTitleProp:[
          ['parentId','任务编号',100, true],
          ['satelliteName','卫星',100, false],
          ['targetName','目标',125, false],
          ['workMode','工作模式',120, false],
          ['accessTime','访问时刻',120, false],
        ],
        wxgcxxTableData:[],
        wxrwTempHoverRow:null,
      }
    },
    methods: {
      wxgcxxRowClick(row){
        this.$events.emit("rwjs-wxgcxxStripe", [row]);
      },
      rwxxRowClick(row){
        // console.log("@row", row);
        // let target = row.pointDTOList;
        row.pointDTOList = row.pointDTOList.sort((a, b) => a.sequence - b.sequence); //按点的顺序排列
        this.$events.emit("rwjs-targetList", [row]);
        const parentIds = [row.parentId];
        this.getWxgcxxTableData({parentIds});
      },
      rwxxRowStyle(row){
        let rwxxTempRwoStyle = {
          background: 'rgba(160, 160, 160, 0.3)',
          height:'30px',
          outline: 'rgb(128, 128, 128) solid 1px'
          };
        if (this.rwxxTempHoverRow == row.row) {
          rwxxTempRwoStyle.outline = 'rgb(229, 229, 229) solid 1px';
          rwxxTempRwoStyle.background = '#0095ff';
        }
        return rwxxTempRwoStyle;
      },
      rwxxHandleCellHover(row){
        this.rwxxTempHoverRow = row
      },
      rwxxPaginationHandleSizeChange(val){
        //val 为 每页的数据 条数

      },
      rwxxPaginationHandleCurrentChange(val){
        //val 为 当前是第几页
        // console.log("val 为 当前是第几页:",val);
      },
      wxgcxxRowStyle(row){
        let wxgcTempRwoStyle = {
          background: 'rgba(160, 160, 160, 0.3)',
          height:'30px',
          outline: 'rgb(128, 128, 128) solid 1px'
          };
        if (this.wxrwTempHoverRow == row.row) {
          wxgcTempRwoStyle.outline = 'rgb(229, 229, 229) solid 1px';
          wxgcTempRwoStyle.background = '#0095ff';
        }
        return wxgcTempRwoStyle;
      },
      handleCellHover(row){
        this.wxrwTempHoverRow = row
      },
      getRwxxTableData(data={}){
        const purposeDic = {
          1: "快响应急观测",
          2: "陆地伪装识别",
          3: "早期异常监测",
          4: "海上搜索发现",
          5: "海上持续跟踪",
          6: "海上识别确认"
        }
        const typeDic = {
          0: "点目标",
					1: "移动目标",
					2: "区域目标",
					3: "线目标",
					4: "点群目标",
					"-1": "未知"
        }
        const statusDic = {
          0: "未提交",
          1: "已提交"
        }
        selAllTargetList(data).then(res => {
          if (res.code === 200) {
            this.rwxxTableData = res.data;
            this.rwxxTableData.forEach(item => {
              item.observationPurpose_use = purposeDic[item.observationPurpose];
              item.type_use = typeDic[item.type];
              item.status_use = statusDic[item.status];
            })
          } else {
            this.$message.error(res.msg);
          }
        })
      },

      getWxgcxxTableData(data={}){
        selStripByParentId(data).then(res => {
          if (res.code === 200) {
            this.wxgcxxTableData = res.data;
            // this.wxgcxxTableData.forEach(item => {

            // })
          } else {
            this.$message.error(res.msg);
          }
        })
      }

    },
    mounted(){
      this.getRwxxTableData();
      this.getWxgcxxTableData();
    }

}
</script>

<style lang="scss" scoped>
.rwyxzt-content{
  height: calc(100% - 84px);
  .upTalbe-area{
    width: 100%;
    height: calc(100% - 172px);
    display:flex;
    justify-content: space-between;
    .rwxx-area{
      margin-left: 48px;
      .rwxx-title{
        width: 471px;
        height: 37px;
        margin-bottom: 10px;
        background: url('@/assets/ClipImage/dikuang/rwjs_rwyxzt_rwxx_title.png') no-repeat;
        background-size: 100% 100%;
      }
      .rwxx-content{
        width: 471px;
        height: calc(100% - 57px);
        background: url('@/assets/ClipImage/dikuang/rwjs_rwyxzt_rwxx.png') no-repeat;
        background-size: 100% 100%;
        overflow: hidden;
        .rwxx-operateArea{
          width: 451px;
          height: 48px;
          margin: 0 auto;
          // background-color: pink;

          display: flex;
          justify-content: space-between;
          align-items: center;
          .rwxx-timePicker{
            width: 274px;
            height: 24px;
            margin-left: 20px;
            position: relative;
            /deep/.el-range-editor.el-input__inner{
              padding: 0px;
              width: 360px;
              height: 24px;
              border: none;
              background-color: transparent;
            }
            /deep/.el-date-editor .el-range__icon{
              display: none;
            }
            /deep/.el-range-editor .el-range-input{
              text-align: left;
              padding-left: 6px;
              line-height: 1;
              border: 1px solid rgba(213, 213, 213, 0.8);
              border-radius: 5px;
              width: 154px;
              height: 23px;
              background-color: rgba(160,160,160,0.8);
              color: #fff;
              font-family: SourceHanSansCN-Regular;
            }
            /deep/.el-date-editor .el-range-separator{
              color: #fff;
              line-height: 24px;
              width: 21px;
            }
            /deep/.el-date-editor .el-range__close-icon{
              line-height: 24px;
            }

            .startTime-icon{
              position: absolute;
              left: 142px;
              top: 4px;
            }.endTime-icon{
              position: absolute;
              left: 326px;
              top: 4px;
            }
          }
          .rwxx-searchBnt{
            width: 40px;
            height: 24px;
            margin-right: 8px;
            /deep/.el-button--mini, .el-button--mini.is-round{
              padding: 5px 7px;
            }
          }
        }
        .rwxx-tableArea{
          width: 451px;
          height: 400px;
          margin: 0 auto;
          // background-color: green;

          //表格内部样式
          /deep/.el-table {
            font-size: 14px;
            font-family: SourceHanSansCN-Regular;
            color: #fff;
            background-color: rgba(160, 160, 160, 0.3);
          }

          //行外边框遮挡部分
          /deep/.el-table__body,
          /deep/.el-table__header{
            padding: 1px;
          }

          //单元格内 无padding
          /deep/ .cell{
            padding:0;
            // white-space:pre-line;
          }
          /deep/th.el-table__cell>.cell{
            padding:0;
          }
          /deep/.is-leaf{
            border-bottom:none;
          }
          //设置表格内容区域背景色为透明色
          /deep/ .el-table,.el-table__expanded-ceel{
            background-color: transparent !important
          }

          //表格行与行之间存在8px的间距
          ::v-deep .el-table__body{
            -webkit-border-vertical-spacing:8px; //垂直间距
            // -webkit-border-horizontal-spacing:8px //水平间距
          }

          //设置表格区域内容背景色为透明时，出现表格底部的横线(表格外层的下边框)，以下代码可去掉该横线
          /deep/ .el-table:before{
            height:0
          }

          //去掉表格内容的下边框
          /deep/ .el-table td,.el-table th.is-leaf{
            border:none
          }

          //取消鼠标滑过某行时，更改背景色
          /deep/.el-table tbody tr:hover > td {
            background-color: transparent !important;
          }
        }
        .rwxx-pagination{
          width: 431px;
          height: 30px;
          margin: 0 auto;
          padding: 0 10px;
          // background-color: red;

          /deep/ .el-pagination{
            height: 30px;
            font-family: SourceHanSansCN-Regular;
            font-size: 12px;
            color: #fff;
          }
          /deep/ .el-pagination__total{
            color: #fff;
            margin-right: 4px;
          }
          /deep/ .el-pagination .btn-prev,
          /deep/.btn-next {
            padding-right: 12px;
            color: #fff;
            background-color: transparent;
            font-family: SourceHanSansCN-Regular;
            padding: 0;
          }
          /deep/ .el-pager li{
            padding: 0px;
            margin: 0px 2px;
            font-size: 12px;
            min-width: 2px;
            height: 24px;
            width: 24px;
            line-height: 24px;
            background-color: #044978;
            border-radius: 4px;
          }
          /deep/ .el-pager li.active{
            color: #fff;
            background: #0095ff;
          }
          /deep/ .el-pagination .el-pagination__jump{
            color: #fff;
            margin-left: 4px;
          }
          /deep/ .el-pagination__editor.el-input{
            background: transparent;
            width: 34px;
          }
          /deep/ .el-pagination__editor.el-input .el-input__inner {
              height: 20px;
              background: transparent;
              width: 32px;
              border: 1px solid #bfbfbf;
              color: #fff;
          }
        }
      }

    }
    .wxgcxx-area{
      width: 587px;
      height: 284px;
      margin: 18px;
      background: url('@/assets/ClipImage/dikuang/rwjs_rwyxzt_wxgcxx.png') no-repeat;
      background-size: 100% 100%;
      overflow: hidden;
      .tableData-area{
        width: 567px;
        height: 228px;
        margin: 52px 10px 0px;
        // background-color: pink;

        //表格内部样式
        /deep/.el-table {
          font-size: 14px;
          font-family: SourceHanSansCN-Regular;
          color: #fff;
          background-color: rgba(160, 160, 160, 0.3);
        }

        //行外边框遮挡部分
        /deep/.el-table__body,
        /deep/.el-table__header{
          padding: 1px;
        }

        //单元格内 无padding
        /deep/ .cell{
          padding:0;
          // white-space:pre-line;
        }
        /deep/th.el-table__cell>.cell{
          padding:0;
        }
        /deep/.is-leaf{
          border-bottom:none;
        }
        //设置表格内容区域背景色为透明色
        /deep/ .el-table,.el-table__expanded-ceel{
          background-color: transparent !important
        }

        //表格行与行之间存在8px的间距
        ::v-deep .el-table__body{
          -webkit-border-vertical-spacing:8px; //垂直间距
          // -webkit-border-horizontal-spacing:8px //水平间距
        }

        //设置表格区域内容背景色为透明时，出现表格底部的横线(表格外层的下边框)，以下代码可去掉该横线
        /deep/ .el-table:before{
          height:0
        }

        //去掉表格内容的下边框
        /deep/ .el-table td,.el-table th.is-leaf{
          border:none
        }

        //取消鼠标滑过某行时，更改背景色
        /deep/.el-table tbody tr:hover > td {
          background-color: transparent !important;
        }
      }
    }
  }
  .downTimeLine-area{
    width: 100%;
    height: 172px;
    line-height: 172px;
    text-align: center;
    background: #282828;
  }
}
</style>