usky-web-mobile/src/pages/business/mhxf/fireReport/components/detailed.vue

<template>
  <view class="detailed" style="font-size: 30upx">
    <view class="detailedContent">
      <view class="header">
        <view class="title">2023年1月份上海XX公司消防报告</view>
        <view class="date">2023-01-01 00:00:00 ~ 2023-01-31 23:59:59</view>
      </view>

      <view class="content1">
        <uni-section class="block mb10" title="消防安全风险提示" type="line" titleFontSize="15px"> </uni-section>
        <view class="price1">
          <view>
            上海XX公司：
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通过对你单位1月份的建筑情况、消防自主管理情况、物联通过对你单位1月份的建筑情况、消防自主管理情况、物联网设备运行状况、监督执法情况、
            火灾发生情况等各项消防安全管理情况，做如下风险
            <br />
            提示：
          </view>
        </view>

        <view class="price1">
          <view>
            一、整体建筑
            <view>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（1）建筑结构{{ "木质结构" }} ，耐火等级较低，建筑防 火需重点关注； </view>
            <view>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（2）建筑总建筑总层数为{{ 40 }}层，建筑楼层较高应 该加强防火巡查，地下空间面积{{ 20000 }}平方米，地下 空间较大应加强防火巡查按标准配备相应灭火器材；
            </view>
            <view>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（3）使用性质{{ "生产、存储、经营与居住一体" }}，需 停业整改；</view>
            <view>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（4）建筑使用年限{{ 20 }}年，应加密消防设备设施巡 检巡查，保证配套设备齐全。</view>
          </view>
          <view>
            二、设施状况
            <view>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（1）火灾报警系统：在线率低于95%，故障率高于5%，需加强设备管理维护；</view>
            <view>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（2）消防水系统：在线率低于95%，故障率高于5%，需加强设备管理维护；</view>
            <view>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（3）防排烟系统：在线率低于95%，故障率高于5%，需加强设备管理维护；</view>
            <view>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（4）维保单位：无维保单位，建议配置维保单位。</view>
          </view>
          <view>
            三、自主管理
            <view>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（1）组织制度：缺少{{ "消防安全制度、灭火和应急疏散预案、员工消防安全培训、消防安全管理人消防档案、消防重点部位" }}，相关制度不完善，需完善；</view>
            <view>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（2）日常值班巡检：消控室持证数较少{{ 1 }}，缺少{{ "防火检查记录、消防设施、器材保养记录" }} ，相关制度不完善，需完善；</view>
            <view>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（3）预案、培训：缺少{{ "应急演练记录、宣传培训记录" }}，相关制度不完善，需完善；</view>
            <view>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（4）微站实体化运行：缺少{{ "微站制度和人员落实、日程训练记录" }}，相关制度不完善，需完善；</view>
          </view>
          <view>
            四、监督执法
            <view>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（1）双随机检查：近 2 年检查隐患数 {{ 7 }}，需加强隐患整改落实；</view>
            <view>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（2）处罚情况：近 3 年处罚次数 {{ 4 }}，需加强隐患整改落实；</view>
            <view>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（3）举报投诉：近 2 年举报投诉核实数 {{ 4 }}，需加强隐患整改落实；</view>
            <view>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（4）重大隐患挂牌：你单位被列入重大火灾隐患挂牌督改需要进行全面的消防整改落实。</view>
          </view>
        </view>
      </view>

      <view class="content2">
        <uni-section class="block mb10" title="基本情况" type="line" titleFontSize="15px"></uni-section>
        <view class="tableType2 price2">
          <u-row>
            <u-col span="3"> <view>单位名称</view> </u-col>
            <u-col span="3"> <view>上海XXX公司</view> </u-col>
            <u-col span="3"> <view>整体风险</view> </u-col>
            <u-col span="3"> <view>一般风险</view> </u-col>
          </u-row>
        </view>
        <view class="price2">
          <view style="color: #666666">注：整体风险：高风险、较高风险、一般风险、低风险。</view>
        </view>
      </view>

      <view class="content2">
        <uni-section class="block mb10" title="存在问题" type="line" titleFontSize="15px">
          <template v-slot:right>
            <view style="color: #666666; font-size: 14px">整改期限：2023-02-02</view>
          </template>
        </uni-section>
        <view class="tableType1 price2">
          <u-row>
            <u-col span="2"> <view>序号</view> </u-col>
            <u-col span="5"> <view>整改项</view> </u-col>
            <u-col span="5"> <view>原因</view> </u-col>
          </u-row>
          <u-row v-for="(co, index) in content3" :key="index">
            <u-col span="2">
              <view>{{ co.value }}</view>
            </u-col>
            <u-col span="5">
              <view>{{ co.name1 }}</view>
            </u-col>
            <u-col span="5">
              <view>{{ co.name2 }}</view>
            </u-col>
          </u-row>
        </view>
      </view>

      <view class="content2">
        <uni-section class="block mb10" title="整体指数分析" type="line" titleFontSize="15px"> </uni-section>
        <view class="tableType1 price2">
          <u-row>
            <u-col span="4"> <view>指数</view> </u-col>
            <u-col span="2.5"> <view>得分</view> </u-col>
            <u-col span="2.5"> <view>排名</view> </u-col>
            <u-col span="3"> <view>得分同比</view> </u-col>
          </u-row>
          <u-row v-for="(co, index) in content4" :key="index">
            <u-col span="4">
              <view>{{ co.name1 }}</view>
            </u-col>
            <u-col span="2.5">
              <view>{{ co.name2 }}</view>
            </u-col>
            <u-col span="2.5">
              <view>{{ co.name3 }}</view>
            </u-col>
            <u-col span="3">
              <view>{{ co.name4 }}</view>
            </u-col>
          </u-row>
        </view>
        <view class="price2" style="display: flex; line-height: 22px; text-align: justify; color: #666666">
          <view>注：</view>
          <view>
            <view>1、建筑整体指数：根据被测评主体建筑的结构、体 量、性质、使用年限等维度评估；</view>
            <view>2、火灾风险指数：根据被评测主体当年度火灾情况、上年度火灾情况、近三年火灾情况等维度评估；</view>
            <view>3、监督执法指数：根据被评测主体近2年双随机检查情况、近3年处罚情况、近2年投诉情况以及重大隐患挂牌情况等进行评估；</view>
            <view>4、自主管理指数：根据被评测主体组织制度相关的文件、巡检、值班、预案、培训、微站运行等进行评估；</view>
            <view>5、设施状况指数：根据被评测主体物联网设备运行状况，告警处置情况、故障率修复周期等进行评估。</view>
          </view>
        </view>
      </view>

      <view class="content2">
        <uni-section class="block mb10" title="整体指数分析" type="line" titleFontSize="15px"> </uni-section>
        <view>
          <line-echarts :xAxisDataList="['1月', '2月', '3月', '4月', '5月', '6月']" :seriesDataList="[50, 20, 30, 10, 80, 80]"></line-echarts>
        </view>
      </view>

      <view class="content2">
        <uni-section class="block mb10" title="设备设施状况" type="line" titleFontSize="15px"> </uni-section>
        <view>
          <view style="color: #666666; text-align: center; font-size: 14px">近一周设备在线率</view>
          <line-echarts :xAxisDataList="['周一', '周二', '周三', '周四', '周五', '周六', '周日']" :seriesDataList="[50, 20, 30, 10, 80, 80, 20]"></line-echarts>
        </view>

        <view class="price2" style="margin-top: 10px">
          <view>6.1设备统计报表</view>
        </view>

        <view class="tableType1 price2">
          <u-row>
            <u-col span="2.4"> <view>报告分类</view> </u-col>
            <u-col span="2.4"> <view>报告属性</view> </u-col>
            <u-col span="2.4"> <view>报告总数</view> </u-col>
            <u-col span="1.6"> <view>已处理</view> </u-col>
            <u-col span="1.6"> <view>未处理</view> </u-col>
            <u-col span="1.6"> <view>处置率</view> </u-col>
          </u-row>
          <u-row v-for="(co, index) in content5" :key="index">
            <u-col span="2.4">
              <view>{{ co.name1 }}</view>
            </u-col>
            <u-col span="2.4">
              <view>{{ co.name2 }}</view>
            </u-col>
            <u-col span="2.4">
              <view>{{ co.name3 }}</view>
            </u-col>
            <u-col span="1.6">
              <view>{{ co.name4 }}</view>
            </u-col>
            <u-col span="1.6">
              <view>{{ co.name5 }}</view>
            </u-col>
            <u-col span="1.6">
              <view>{{ co.name6 }}</view>
            </u-col>
          </u-row>
        </view>
        <view class="price2" style="display: flex; line-height: 22px; text-align: justify; color: #666666">
          <view>注：</view>
          <view>
            <view>1、报告总数：根据设备报告分类统计设备上报的总数；</view>
            <view>2、已处理：根据设备报告问题已进行处置的数量；</view>
            <view>3、未处理：根据设备报告问题还未进行处置的数量；</view>
            <view>4、处置率：根据对应类型的报告已处理数/报告总数=处置率</view>
          </view>
        </view>
      </view>

      <view class="content2">
        <uni-section class="block mb10" title="监督执法情况" type="line" titleFontSize="15px"> </uni-section>

        <view class="tableType2 price2">
          <u-row>
            <u-col span="3"> <view>检查名称</view> </u-col>
            <u-col span="3"> <view>消防检查抽查</view> </u-col>
            <u-col span="3"> <view>检查时间</view> </u-col>
            <u-col span="3"> <view>2023-02-05</view> </u-col>
          </u-row>
          <u-row>
            <u-col span="3"> <view>消防监督检查</view> </u-col>
            <u-col span="3"> <view>刘军、张磊</view> </u-col>
            <u-col span="3"> <view>是否合格</view> </u-col>
            <u-col span="3"> <view>不合格</view> </u-col>
          </u-row>
          <u-row>
            <u-col span="3"> <view>问题描述</view> </u-col>
            <u-col span="9"> <view>消防通道不同，机房堆有可燃物</view> </u-col>
          </u-row>
          <u-row>
            <u-col span="3"> <view>建议</view> </u-col>
            <u-col span="9"> <view>清理消防通道，机房可燃物清理恢复</view> </u-col>
          </u-row>
        </view>

        <view class="tableType2 price2">
          <u-row>
            <u-col span="3"> <view>检查名称</view> </u-col>
            <u-col span="3"> <view>消防检查抽查</view> </u-col>
            <u-col span="3"> <view>检查时间</view> </u-col>
            <u-col span="3"> <view>2023-02-05</view> </u-col>
          </u-row>
          <u-row>
            <u-col span="3"> <view>消防监督检查</view> </u-col>
            <u-col span="3"> <view>刘军、张磊</view> </u-col>
            <u-col span="3"> <view>是否合格</view> </u-col>
            <u-col span="3"> <view>不合格</view> </u-col>
          </u-row>
          <u-row>
            <u-col span="3"> <view>问题描述</view> </u-col>
            <u-col span="9"> <view>消防通道不同，机房堆有可燃物</view> </u-col>
          </u-row>
          <u-row>
            <u-col span="3"> <view>建议</view> </u-col>
            <u-col span="9"> <view>清理消防通道，机房可燃物清理恢复</view> </u-col>
          </u-row>
        </view>
      </view>

      <view class="content2">
        <uni-section class="block mb10" title="火灾情况分析" type="line" titleFontSize="15px"> </uni-section>

        <view class="tableType2 price2">
          <u-row>
            <u-col span="3"> <view>火灾原因</view> </u-col>
            <u-col span="3"> <view>电气火灾</view> </u-col>
            <u-col span="3"> <view>发生时间</view> </u-col>
            <u-col span="3"><view>2023-02-05</view> </u-col>
          </u-row>
          <u-row>
            <u-col span="3"><view>起火场所</view> </u-col>
            <u-col span="3"> <view>厂房</view> </u-col>
            <u-col span="3"><view>火灾等级</view> </u-col>
            <u-col span="3"><view>1</view> </u-col>
          </u-row>
          <u-row>
            <u-col span="3"> <view>火灾描述</view> </u-col>
            <u-col span="9"><view>厂房电缆线路老化，使用功率较大电器引发火灾</view> </u-col>
          </u-row>
          <u-row>
            <u-col span="3"><view>建议</view> </u-col>
            <u-col span="9"> <view>定期检查线路，做好消防安全教育，不违规使 用大功率电器</view> </u-col>
          </u-row>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, watchEffect, getCurrentInstance, toRefs } from "vue";
import { useStores, commonStores } from "@/store/modules/index";

import lineEcharts from "./echarts.vue";

import {} from "@/api/business/mhxf/informationSelect";

const { proxy } = getCurrentInstance();

const commonStore = commonStores(); //全局公共Store

const dataList = reactive({
  content1: [],
  content2: [],
  content3: [
    { value: 1, name1: "火灾报警系统", name2: "存在报警未处置" },
    { value: 2, name1: "消防水系统", name2: "存在报警未处置" },
    { value: 3, name1: "燃气、电气系统监测", name2: "存在报警未处置" },
    { value: 4, name1: "组织制度情况", name2: "制度不完善" },
    { value: 5, name1: "日常值班情况", name2: "值班落实不到位" },
    { value: 6, name1: "预案、培训落地情况", name2: "培训不到位" },
    { value: 7, name1: "微站实体化运行", name2: "制度人员不到位" },
  ],

  content4: [
    { name1: "建筑整体指数", name2: 10, name3: 6, name4: "-1" },
    { name1: "火灾风险指数", name2: 14, name3: 5, name4: "+5" },
    { name1: "监督执法指数", name2: 25, name3: 1, name4: "+2" },
    { name1: "自主管理指数", name2: 20, name3: 3, name4: "-1" },
    { name1: "设施状况指数", name2: 25, name3: 8, name4: "+3" },
  ],

  content5: [
    { name1: "火灾监测", name2: "报警", name3: 5, name4: 2, name5: 3, name6: "40%" },
    { name1: "消防水系统", name2: "设备离线", name3: 7, name4: 3, name5: 4, name6: "42%" },
  ],
});

const { content1, content2, content3, content4, content5 } = toRefs(dataList);

watchEffect(() => {});

// 自定义导航事件
onNavigationBarButtonTap((e) => {
  if (e.float == "right") {
    uni.navigateTo({
      url: "/pages/business/zhaf/xunJian/collect/components/collectRecord",
    });
  } else {
  }
});

onLoad((options) => {});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

onReady(() => {});

onMounted(() => {});
</script>

<style lang="scss">
.detailed {
  height: calc(100vh - 44px);
  .detailedContent {
    > uni-view {
      background-color: #ffffff;
    }

    .header {
      text-align: center;
      .title {
        padding: 15px 0;
      }
      .date {
        font-size: 24upx;
        color: #666666;
      }
    }

    .content1,
    .content2,
    .content3,
    .content4 {
      margin-bottom: 15px;
    }

    .content1 {
      > .price1 {
        padding: 0 10px 10px 10px;
        line-height: 30px;
        text-align: justify;
      }
    }

    .content2 {
      .price2 {
        padding: 0 10px 10px 10px;
        font-size: 14px;
      }
    }
  }
}
</style>