feat:安全隐患数据统计

ZhangXianQiang

2024-02-28 b8a72fe64c7dce111517e18f1b9c3b73ab49fb36

feat:安全隐患数据统计

 src/views/daoAnOffice/right/danger/dataTable.vue

New file
@@ -0,0 +1,55 @@
<template>
  <div class="container">
    <div class="table-top">
      <div class="top-title">安全事故列表</div>
      <div class="table-select flex">
        <div class="select-item" v-for="selectItem in tableType" :key="selectItem.id">{{ selectItem.type }}</div>
      </div>
    </div>
    <div class="table-container">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const tableType = ref([
  { id: 1, type: '本月' },
  { id: 2, type: '本季' },
]);

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
];
</script>

<style lang="scss" scoped>
.container {
  height: 360px;
}
</style>

 src/views/daoAnOffice/right/danger/dataView.vue

New file
@@ -0,0 +1,62 @@
<template>
  <div class="content-container flex flex-col justify-between">
    <div class="data-plane flex justify-between">
      <div class="content-item flex flex-col justify-center items-center">
        <div class="data-container">
          <span class="data-red data-num">68</span>
          <span class="data-red">起</span>
        </div>
        <div class="data-label">发现安全隐患</div>
      </div>
      <div class="content-item flex flex-col justify-center items-center">
        <div class="data-container">
          <span class="data-red data-num">51</span>
          <span class="data-red">起</span>
        </div>
        <div class="data-label">下发通知书</div>
      </div>
      <div class="content-item flex flex-col justify-center items-center">
        <div class="data-container">
          <span class="data-red data-num">40</span>
          <span class="data-red">起</span>
        </div>
        <div class="data-label">处置安全隐患</div>
      </div>
    </div>

    <DataTable></DataTable>

  </div>
</template>

<script setup>
import DataTable from './dataTable.vue'
</script>

<style lang="scss" scoped>
.content-container {
  width: 100%;
  height: 510px;
}

.content-item {
  width: 197px;
  height: 124px;
  background-color: rgba(17, 34, 58, 0.6);
  border: 1px solid #29466A;
}

.data-red {
  color: rgba(254, 49, 70, 1);
  font-size: 16px;
}

.data-num {
  font-size: 34px;
}

.data-label {
  color: rgba(68, 219, 221, 1);
  font-size: 16px;
}
</style>

 src/views/daoAnOffice/right/danger/index.vue

@@ -9,106 +9,29 @@
        </div>
      </div>
    </template>

    <template #content>
      <div class="content-container flex flex-col justify-between">
        <div class="content-item" v-for="item in contentList" :key="item.itemIndex">
          <div class="content-wrapper flex justify-between">

            <!-- 信息面板 -->
            <div class="info-content flex flex-col justify-between">
              <div class="info-item">
                <span class="info-label">通择时问：</span>
                <span class="info-value">{{ item.time }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">隐患类型：</span>
                <span class="info-value">{{ item.type }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">责任单位：</span>
                <span class="info-value">{{ item.unit }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">鄂改时限：</span>
                <span class="info-value">{{ item.rectTime }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">完成情况：</span>
                <span class="info-value">{{ item.state }}</span>
              </div>
            </div>

            <!-- 图片列表 -->
            <div class="image-content flex justify-between items-center">
              <ImageSwiper :imageList="item.images"></ImageSwiper>
            </div>
          </div>
        </div>
      </div>
      <InfoView v-show="isActive"></InfoView>
      <DataView v-show="!isActive"></DataView>
    </template>

  </RightTitle>
</template>

<script setup lang="ts">
import testImage from '@/assets/img/test_img/道安办.png';

import RightTitle from "@/components/right-title";
import ImageSwiper from './imageSwiper.vue';
import DataView from './dataView.vue';
import InfoView from './infoView.vue';
import { ref } from 'vue';

let isActive = ref(true);

const selectItems = ref([
  { itemIndex: 1, name: '安全隐患', isActive: false },
  { itemIndex: 2, name: '数据统计', isActive: true },
]);

const contentList = ref([
  {
    itemIndex: 1,
    time: '2023 12-12',
    type: '道路隐患',
    unit: '都江堰市公安局',
    rectTime: '2023-13-23',
    state: '抢修中',
    images: [
      testImage,
      testImage,
      testImage,
      testImage,
      testImage,
    ]
  },
  {
    itemIndex: 2,
    time: '2023 12-12',
    type: '道路隐患',
    unit: '都江堰市公安局',
    rectTime: '2023-13-23',
    state: '抢修中',
    images: [
      testImage,
      testImage,
      testImage,
      testImage,
      testImage,
    ]
  },
  {
    itemIndex: 3,
    time: '2023 12-12',
    type: '道路隐患',
    unit: '都江堰市公安局',
    rectTime: '2023-13-23',
    state: '抢修中',
    images: [
      testImage,
      testImage,
      testImage,
      testImage,
      testImage,
    ]
  }
]);

</script>

@@ -129,23 +52,5 @@
.item:last-child {
  margin-right: 0;
}
.content-container {
  height: 510px;
}
.content-item {
  background-color: rgba(17, 34, 58, 0.6);
  padding: 18px 7px 18px 23px;
  border: 1px solid #29466A;
}
.content-item:last-child {
  margin-bottom: 0px;
}

.info-item {
  font-size: 12px;

  .info-label {
    color: rgba(91, 131, 189, 1);
  }
}
</style>

 src/views/daoAnOffice/right/danger/infoView.vue

New file
@@ -0,0 +1,116 @@
<template>
  <div class="content-container flex flex-col justify-between">
    <div class="content-item" v-for="item in contentList" :key="item.itemIndex">
      <div class="content-wrapper flex justify-between">

        <!-- 信息面板 -->
        <div class="info-content flex flex-col justify-between">
          <div class="info-item">
            <span class="info-label">通择时问：</span>
            <span class="info-value">{{ item.time }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">隐患类型：</span>
            <span class="info-value">{{ item.type }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">责任单位：</span>
            <span class="info-value">{{ item.unit }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">鄂改时限：</span>
            <span class="info-value">{{ item.rectTime }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">完成情况：</span>
            <span class="info-value">{{ item.state }}</span>
          </div>
        </div>

        <!-- 图片列表 -->
        <div class="image-content flex justify-between items-center">
          <ImageSwiper :imageList="item.images"></ImageSwiper>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import testImage from '@/assets/img/test_img/道安办.png';

import ImageSwiper from './imageSwiper.vue';
import { ref } from 'vue';

const contentList = ref([
  {
    itemIndex: 1,
    time: '2023 12-12',
    type: '道路隐患',
    unit: '都江堰市公安局',
    rectTime: '2023-13-23',
    state: '抢修中',
    images: [
      testImage,
      testImage,
      testImage,
      testImage,
      testImage,
    ]
  },
  {
    itemIndex: 2,
    time: '2023 12-12',
    type: '道路隐患',
    unit: '都江堰市公安局',
    rectTime: '2023-13-23',
    state: '抢修中',
    images: [
      testImage,
      testImage,
      testImage,
      testImage,
      testImage,
    ]
  },
  {
    itemIndex: 3,
    time: '2023 12-12',
    type: '道路隐患',
    unit: '都江堰市公安局',
    rectTime: '2023-13-23',
    state: '抢修中',
    images: [
      testImage,
      testImage,
      testImage,
      testImage,
      testImage,
    ]
  }
]);
</script>

<style lang="scss" scoped>
.content-container {
  height: 510px;
}

.content-item {
  background-color: rgba(17, 34, 58, 0.6);
  padding: 18px 7px 18px 23px;
  border: 1px solid #29466A;
}

.content-item:last-child {
  margin-bottom: 0px;
}

.info-item {
  font-size: 12px;

  .info-label {
    color: rgba(91, 131, 189, 1);
  }
}
</style>