baozhida-building-system/src/views/system/inspection/index.vue

<template>
  <div class="inspection">
    <div class="left_spection">
      <HeadlineTag value="巡检点列表"></HeadlineTag>
      <div class="box_arch_point">
        <div class="point_box" style="margin-top: 10px;">
          <el-input v-model="input" placeholder="按巡查点名称搜索" />
        </div>
        <div style="height: calc(100% - 160px);">
          <Empty></Empty>
        </div>
        <div class="center_in">
          <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
            layout="total, prev, pager, next" @pagination="getList" />
        </div>
      </div>
    </div>
    <div class="right_spection">
      <div class="operation_spection">
        <HeadlineTag type="right" value="运行统计"></HeadlineTag>
        <div class="box_arch">
          <div class="image_tubbiness">
            <div class="work_num">3714<span>个</span></div>
            <div class="work_title">今日总数</div>
          </div>
          <div class="right_content">
            <div class="work_week">
              <div class="color_line_xj" style="background-color: rgb(21, 213, 21);"></div>
              <span>巡检点数:</span>20
            </div>
            <div class="work_week">
              <div class="color_line_xj" style="background-color: rgb(196, 127, 19);"></div>
              <span>巡检计划:</span>10
            </div>
            <div class="work_week">
              <div class="color_line_xj" style="background-color: rgb(195, 56, 56);"></div>
              <span>巡检线路:</span>15
            </div>
          </div>
        </div>
      </div>
      <div class="flex_spection">
        <HeadlineTag type="right" value="巡检统计"></HeadlineTag>
        <div class="box_arch">
          <div ref="chartRouting" style="width: 100%;height: 100%;"></div>
        </div>
      </div>
      <div class="flex_spection">
        <HeadlineTag type="right" value="实时巡检"></HeadlineTag>
        <div class="box_arch">
          <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import HeadlineTag from '@/components/HeadlineTag'
import Empty from '@/components/Empty'
import * as echarts from 'echarts'
const total = ref(0);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
const input = ref('')
const config = ref({
  headerBGC: '#10285c',
  oddRowBGC: '#10285c7f',
  evenRowBGC: '#10285c00',
  header: ['名称', '位置', '列3'],
  data: [
    ['行1列1', '行1列2', '行1列3'],
    ['行2列1', '行2列2', '行2列3'],
    ['行3列1', '行3列2', '行3列3'],
    ['行4列1', '行4列2', '行4列3'],
    ['行5列1', '行5列2', '行5列3'],
    ['行6列1', '行6列2', '行6列3'],
    ['行7列1', '行7列2', '行7列3'],
    ['行8列1', '行8列2', '行8列3'],
    ['行9列1', '行9列2', '行9列3'],
    ['行10列1', '行10列2', '行10列3']
  ]
})

/** 查询列表 */
function getList() {
};
const chartRouting = ref(null);
let chartInstance = null;
// 初始化图表
const initChart = () => {
  chartInstance = echarts.init(chartRouting.value);
  chartInstance.setOption({
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['产值', '增加值'],
      icon: 'rich',
      show: true,
      itemWidth: 18,
      itemHeight: 2,
      textStyle: {
        color: '#AFBDD1',
        fontSize: '12px',
      },
      top: 8,
      right: 10,
      itemGap: 34,
    },
    grid: {
      left: '4%',
      right: '4%',
      bottom: '10%',
      top: '16%',
      containLabel: true,
    },
    xAxis: {
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      type: 'category',
      boundaryGap: false,
      axisLine: {
        symbol: 'none',
        lineStyle: {
          color: '#50637A',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        color: '#ffffff',
        fontSize: 12,
        padding: [10, 0, 0, 0],
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#ffffff',
        fontSize: 12,
        padding: [0, 10, 0, 0],
      },
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        name: '增加值',
        data: [1, 2, 3, 4, 7, 6, 7, 8, 4, 10],
        type: 'line',
        smooth: true,
        color: '#00F7FF',
        lineStyle: {
          width: 2,
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [{
              offset: 0,
              color: 'rgba(0, 247, 255, .6)',
            },
            {
              offset: 0.8,
              color: 'rgba(0, 247, 255, .2)',
            },
            ],
            false
          ),
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 10,
        },
        symbol: 'circle',
        symbolSize: 6,
      },
    ],
  });
};
// 生命周期
onMounted(initChart);
// 窗口自适应
window.addEventListener('resize', () => {
  chartInstance?.resize();
});
</script>

<style scoped lang="scss">
.inspection {
  position: relative;
  width: 100%;
  padding-top: 45px;
  height: 100vh;
  overflow: hidden;
}

.left_spection {
  position: absolute;
  left: 0;
  width: 25%;
  height: calc(100% - 45px);
  display: flex;
  flex-direction: column;
  padding-left: 10px;
}

.right_spection {
  position: absolute;
  right: 0;
  width: 25%;
  height: calc(100% - 45px);
  display: flex;
  flex-direction: column;
}

.box_arch_point {
  height: calc(100% - 40px);
}

.operation_spection {
  height: 250px;
  color: #fff;
}

.flex_spection {
  flex: 1;
  color: #fff;
}

.box_arch {
  display: flex;
  align-items: center;
  height: calc(100% - 40px);
}

.image_tubbiness {
  position: relative;
  flex: none;
  width: 200px;
  height: 100%;
  background: url("@/assets/images/tubbiness.png");
  background-size: 80% 80%;
  background-position: center center;
  background-repeat: no-repeat;

  .work_num {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgb(84, 218, 250);
    font-size: 20px;

    span {
      font-size: 14px;
      color: rgb(158, 174, 195);
    }
  }

  .work_title {
    position: absolute;
    bottom: 36px;
    left: 0px;
    right: 0px;
    text-align: center;
  }
}

.right_content {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

  .work_week {
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: bold;
    color: #fff;

    span {
      padding-right: 10px;
      font-size: 16px;
      color: rgb(214, 218, 222);
    }
  }
}

.color_line_xj {
  width: 6px;
  height: 6px;
  margin-right: 10px;
}
</style>
<style lang="scss" scoped>
.point_box :deep(.el-input__wrapper) {
  background-color: transparent !important;
  box-shadow: 0 0 0 1px rgb(58, 86, 117) inset !important;
}

.point_box :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409EFF inset !important;
}

.point_box :deep(.el-input__inner) {
  color: #ffffff !important;
}
</style>