pv-system-monorepo/packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/index.vue

<template>
  <div class="task-screen">
    <!-- <div class="map-wrap">
      <MapComponent :rectangles="rectangles" />
      <div class="legend">
        <div class="legend-item" v-for="(item, i) in legends" :key="i">
          <span class="dot" :style="{ background: item.color }"></span>
          <span class="text">{{ item.label }}</span>
        </div>
      </div>
    </div> -->

    <div class="side left">
      <div class="panel">
        <BlockTitle title="工区统计">
          <template #right>
            <span>更多</span>
          </template>
        </BlockTitle>
        <div class="progress-group">
          <div class="progress-row">
            <div class="label">工区总进度</div>
            <div class="value">{{ areaProgress }}%</div>
          </div>
          <div class="progress-sub">
            <div class="sub-row" v-for="(p, pi) in subProgress" :key="pi">
              <div class="name">{{ p.name }}</div>
              <div class="bar">
                <fks-progress :percentage="p.value" :stroke-width="6" :show-text="false" color="#91c9ff" />
              </div>
              <div class="num">{{ p.value }}</div>
            </div>
          </div>
          <fks-table :data="areaTable" border height="220">
            <fks-table-column prop="name" label="工区名称" min-width="74" />
            <fks-table-column prop="pile" label="桩条安装进度(%)" width="90" />
            <fks-table-column prop="module" label="组件安装进度(%)" width="90" />
            <fks-table-column prop="year" label="10号车" width="74" />
          </fks-table>
        </div>
      </div>

      <div class="panel">
        <BlockTitle title="材料统计">
          <template #right>
            <span>更多</span>
          </template>
        </BlockTitle>
        <fks-table :data="materialTable" border height="300">
          <fks-table-column prop="name" label="材料名称" min-width="100" />
          <fks-table-column prop="used" label="当日消耗量" width="120" />
          <fks-table-column prop="stock" label="库存量" width="100" />
        </fks-table>
      </div>
    </div>

    <div class="side right">
      <div class="panel">
        <BlockTitle title="设备信息">
          <template #right>
            <span>更多</span>
          </template>
        </BlockTitle>
        <div class="kpibox">
          <div class="kpi">
            <div class="kpi-label">当前设备在线数量</div>
            <div class="kpi-value">{{ deviceStats.online }}</div>
          </div>
          <div class="kpi">
            <div class="kpi-label">组件设备</div>
            <div class="kpi-value">{{ deviceStats.component }}</div>
          </div>
          <div class="kpi">
            <div class="kpi-label">当前设备安装数量</div>
            <div class="kpi-value">{{ deviceStats.installing }}</div>
          </div>
          <div class="kpi">
            <div class="kpi-label">组件安装数</div>
            <div class="kpi-value">{{ deviceStats.moduleInstalled }}</div>
          </div>
        </div>

        <fks-table :data="deviceTable" border height="280">
          <fks-table-column prop="id" label="设备ID" width="80" />
          <fks-table-column prop="area" label="所属工区" width="90" />
          <fks-table-column prop="team" label="工作小组" width="100" />
          <fks-table-column prop="dayWork" label="当日工作量" width="110" />
          <fks-table-column prop="runtime" label="运行时长(h)" width="110" />
        </fks-table>
      </div>

      <div class="panel">
        <div class="panel-title">
          <img class="titleIcon" :src="titleIcon" />
          <span>报警信息</span>
          <span class="more">更多</span>
        </div>
        <fks-table :data="alarmTable" border height="300">
          <fks-table-column prop="code" label="报警编号" width="100" />
          <fks-table-column prop="device" label="设备编号" width="100" />
          <fks-table-column prop="desc" label="报警内容" min-width="140" />
          <fks-table-column prop="time" label="报警时间" width="160" />
        </fks-table>
      </div>
    </div>
  </div>
</template>

<script>
import Mix from '@/mixins/module';
import MapComponent from './MapComponent.vue';
import BlockTitle from './components/BlockTitle.vue';

export default {
  name: 'TaskScreenView',
  mixins: [Mix],
  components: { MapComponent, BlockTitle },
  data() {
    return {
      titleIcon: require('@/assets/img/Automated/titleIcon1.png'),
      areaProgress: 30,
      subProgress: [
        { name: '桩条安装进度(%)', value: 10 },
        { name: '组件安装进度(%)', value: 10 }
      ],
      areaTable: [
        { name: 'xxx', pile: 10, module: 10, owner: '10号车', year: '10号车' },
        { name: 'xxx', pile: 10, module: 10, owner: '10号车', year: '10号车' },
        { name: 'xxx', pile: 10, module: 10, owner: '10号车', year: '10号车' },
        { name: 'xxx', pile: 10, module: 10, owner: '10号车', year: '10号车' },
        { name: 'xxx', pile: 10, module: 10, owner: '10号车', year: '10号车' },
        { name: 'xxx', pile: 10, module: 10, owner: '10号车', year: '10号车' }
      ],
      materialTable: [
        { name: 'xxx', used: 128, stock: 3 },
        { name: 'xxx', used: 64, stock: 4 },
        { name: 'xxx', used: 325, stock: 5 },
        { name: 'xxx', used: 1900, stock: 5 },
        { name: 'xxx', used: 1900, stock: 5 },
        { name: 'xxx', used: 1900, stock: 5 }
      ],
      deviceStats: {
        online: 2234,
        component: 2234,
        installing: 2234,
        moduleInstalled: 2234
      },
      deviceTable: [
        { id: '001', area: 'xxx', team: 'xxx', dayWork: 128, runtime: 18 },
        { id: '002', area: 'xxx', team: 'xxx', dayWork: 325, runtime: 18 },
        { id: '003', area: 'xxx', team: 'xxx', dayWork: 1900, runtime: 18 },
        { id: '004', area: 'xxx', team: 'xxx', dayWork: 1900, runtime: 18 },
        { id: '005', area: 'xxx', team: 'xxx', dayWork: 325, runtime: 18 }
      ],
      alarmTable: [
        { code: 'A001', device: 'xxx', desc: '报警内容', time: '2024-01-01 12:01' },
        { code: 'A002', device: 'xxx', desc: '报警内容', time: '2024-01-01 12:10' },
        { code: 'A003', device: 'xxx', desc: '报警内容', time: '2024-01-01 12:35' },
        { code: 'A004', device: 'xxx', desc: '报警内容', time: '2024-01-01 12:58' }
      ],
      rectangles: [
        // 西湖区（放大范围，近似行政区外包）
        { id: '1', name: '西湖区', status: '施工中', geomWkt: 'POLYGON((120.0000 30.1500,120.2500 30.1500,120.2500 30.3700,120.0000 30.3700,120.0000 30.1500))' }
        // 拱墅区（放大范围，近似行政区外包）
        // { id: '2', name: '拱墅区', status: '已施工', geomWkt: 'POLYGON((120.0900 30.3000,120.2300 30.3000,120.2300 30.4200,120.0900 30.4200,120.0900 30.3000))' },
        // // 上城区（放大范围，近似行政区外包）
        // { id: '3', name: '上城区', status: '未施工', geomWkt: 'POLYGON((120.1400 30.2000,120.2600 30.2000,120.2600 30.3100,120.1400 30.3100,120.1400 30.2000))' },
        // // 滨江区（放大范围，近似行政区外包）
        // { id: '4', name: '滨江区', status: '故障', geomWkt: 'POLYGON((120.0900 30.1400,120.2700 30.1400,120.2700 30.2400,120.0900 30.2400,120.0900 30.1400))' },
        // // 萧山区（放大范围，近似行政区外包）
        // { id: '5', name: '萧山区', status: '运行中', geomWkt: 'POLYGON((120.1800 30.0200,120.5300 30.0200,120.5300 30.3300,120.1800 30.3300,120.1800 30.0200))' },
        // // 余杭区（放大范围，近似行政区外包）
        // { id: '6', name: '余杭区', status: '停机', geomWkt: 'POLYGON((119.8000 30.1800,120.1000 30.1800,120.1000 30.5000,119.8000 30.5000,119.8000 30.1800))' }
      ],
      legends: [
        { label: '施工中', color: '#3fa7ff' },
        { label: '已施工', color: '#52c41a' },
        { label: '未施工', color: '#faad14' },
        { label: '故障', color: '#ff4d4f' },
        { label: '运行中', color: '#13c2c2' },
        { label: '停机', color: '#bfbfbf' }
      ]
    };
  }
};
</script>

<style scoped lang="scss">
// 重置区域开始
* {
  box-sizing: border-box;
  color: #333333;
}
::v-deep .fks-table {
  table {
    th {
      font-size: 12px !important;
      padding: 4px 0 !important;
      color: #999 !important;
      background: #f9f9f9 !important;
    }
  }
}
// 重置区域结束
.task-screen {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
}
.map-wrap {
  position: relative;
  flex: 1;
  min-height: 600px;
}
.legend {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: rgba(0, 12, 32, 0.7);
  border: 1px solid rgba(91, 166, 255, 0.35);
  border-radius: 6px;
  .legend-item {
    display: flex;
    align-items: center;
    margin: 0 10px;
    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 6px;
    }
    .text {
      font-size: 12px;
    }
  }
}

.side {
  width: 392px;
  padding: 24px;
  box-sizing: border-box;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  .panel + .panel {
    margin-top: 20px;
  }
}
.left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
}
.right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
}

.panel {
  .block-title {
    margin-bottom: 10px;
  }
  .panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 10px;
    .titleIcon {
      width: 18px;
      height: 18px;
      margin-right: 6px;
    }
    span {
      display: inline-flex;
      align-items: center;
    }
  }
}

.progress-group {
  background: linear-gradient(180deg, #ffffff 0%, rgba(242, 249, 255, 0.5) 100%);
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #dcedff;
  .progress-row {
    height: 34px;
    background: linear-gradient(90deg, #e6f5ff 0%, #d3eeff 100%), linear-gradient(90deg, #e6f5ff 0%, #d8efff 75%, rgba(214, 238, 255, 0.89) 79%, rgba(211, 238, 255, 0.58) 100%);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 8px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    .label {
      color: #333333;
    }
    .value {
      color: #4886e0;
    }
  }
  .progress-sub {
    margin-top: 8px;
    padding: 12px;
    .sub-row {
      display: grid;
      grid-template-columns: 92px 1fr 18px;
      align-items: center;
      margin-bottom: 6px;
      gap: 0 16px;
      .name {
        font-size: 12px;
        color: #999;
      }
      .bar {
        padding: 0 8px;
      }
      .num {
        font-family: DIN, DIN;
        font-weight: bold;
        font-size: 16px;
        color: #4886e0;
        text-align: right;
      }
    }
  }
}

.kpibox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  margin-bottom: 12px;
  .kpi {
    background: rgba(8, 26, 58, 0.7);
    border: 1px solid rgba(91, 166, 255, 0.25);
    border-radius: 6px;
    padding: 10px 8px;
    .kpi-label {
      font-size: 12px;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .kpi-value {
      font-weight: 600;
      font-size: 18px;
      line-height: 1.2;
    }
  }
}
</style>