<template>
  <div class="mryq_box">
    <div class="title red">
      <span>每</span>
      <span>日</span>
      <span>要</span>
      <span>情</span>
    </div>
    <div class="dw_rq d_bottom">
      <span>单位：巡警大队 </span>
      <span> 2022年11月8日 </span>
    </div>
    <div class="dw_rq">
      <span>审核领导：邱文宇 </span>
      <span> 撰稿人：胡云建 </span>
    </div>
    <div class="text_box">
      <span class="twxc_title"> 1、发案情况：</span><br />
      &emsp;&emsp;街面实发警情共8件（相对昨日减少6件），其中盗窃三车警情3件（相对昨日减少3件），扒窃警情5件（相对昨日增加2件），车财警情0件（相对昨日减少5件）。<br />
      <span class="twxc_title"> 2、今日发案分布：</span><br />
      <div class="table_box">
        <div class="fafb_table_header header">
          <div>单位</div>
          <div>芳草</div>
          <div>桂溪</div>
          <div>合作</div>
          <div>和平</div>
          <div>石羊</div>
          <div>西园</div>
          <div>肖家</div>
          <div>新川</div>
          <div>会展</div>
          <div>益州</div>
          <div>中和</div>
          <div>合计</div>
        </div>
        <div class="data_box">
          <div class="table_box">
            <div
              class="fafb_table_header right"
              v-for="item in mryq.fafb"
              :key="item"
            >
              <div>{{ Object.keys(item)[0] }}</div>
              <div v-for="_item in item[Object.keys(item)[0]]" :key="_item">
                {{ _item }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <span class="twxc_title"> 3、热点区域图：</span><br />
      <span class="twxc_title"> 4、巡大天网巡查情况：</span><br />
      <div class="twxc_box">
        <div v-for="item in mryq.twxc" :key="item" class="twxc_item">
          <div class="twxc_title">{{ item.ssbm }}</div>
          <div>重点区域：{{ item.zdqu }}</div>
          <div>巡控时段：{{ item.xksd }}</div>
          <div>必巡线、必巡点：{{ item.bxxBxd }}</div>
          <div>天网杆号：{{ item.twgh }}</div>
          <div>巡查时间：{{ item.xcsj }}</div>
          <div>巡查原因：{{ item.xcyy }}</div>
          <div>巡逻质效：{{ item.xlzx }}</div>
        </div>
      </div>
      <span class="twxc_title"> 5、警情图巡情况：</span><br />
      <div class="twxc_box">
        <div v-for="item in mryq.jqtx" :key="item" class="twxc_item">
          <div class="twxc_title">{{ item.ssbm }}</div>
          <div>图巡时段：{{ item.txsd }}</div>
          <div>点位地址：{{ item.dwdz }}</div>
          <div>天网号：{{ item.twh }}</div>
          <div>巡查情况：{{ item.xcqk }}</div>
          <div>巡查原因：{{ item.xcyy }}</div>
          <div>巡逻质效：{{ item.xlzx }}</div>
          <div>存在问题：{{ item.czwt }}</div>
          <div>整改措施：{{ item.zgcs }}</div>
        </div>
      </div>
      <span class="twxc_title"> 6、移动巡逻盘查数据：</span><br />
      <div class="table_box">
        <div class="fafb_table_header header" style="width: 30%">
          <div></div>
          <div>卡点与街面巡防</div>
          <div>芳草</div>
          <div>桂溪</div>
          <div>合作</div>
          <div>和平</div>
          <div>石羊</div>
          <div>西园</div>
          <div>肖家</div>
          <div>新川</div>
          <div>会展</div>
          <div>益州</div>
          <div>中和</div>
        </div>
        <div class="data_box" style="width: 70%">
          <div class="table_box">
            <div
              class="fafb_table_header right"
              v-for="item in mryq.ydxlpc"
              :key="item"
              :style="Object.keys(item)[0] == '盘查合计数' ? 'width:18%' : ''"
            >
              <div>{{ Object.keys(item)[0] }}</div>
              <div class="two_table">
                <div
                  v-for="_item in item[Object.keys(item)[0]]"
                  :key="_item"
                  :style="_item.title == '人员、车辆' ? 'width:100%' : ''"
                >
                  {{ _item.title }}
                </div>
              </div>

              <template style="display: flex">
                <div
                  class="total_item_sum"
                  v-for="_item in item[Object.keys(item)[0]]"
                  :key="_item"
                  :style="_item.title == '人员、车辆' ? 'width:100%' : ''"
                >
                  <div v-for="_it in _item.arr" :key="_it">
                    {{ _it }}
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <span class="twxc_title">7、质效评估：</span><br />
      &emsp;&emsp;今日和平（三个警情，相比昨日上升一个，于上月环比上升1件）、桂溪、西园、合作、肖家所有街面实发六类侵财警情，巡逻防控未取得质效；其余各所无街面实发六类侵财警情，巡逻防控取得质效。<br />
      <span class="twxc_title">8、工作指令：</span><br />
      &emsp;&emsp;今日街面实发警情8件，分布于***地方，巡大、各所根据发案时段、发案区域合理部署警力在街面警情热点区域开展巡逻防控和逢疑必查工作。
    </div>
  </div>
</template>
<script setup>
import { reactive } from "vue";
const mryq = reactive({
  fafb: [
    { 两抢: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
    { 汽盗: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
    { 车财: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
    { 三车: [0, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 3] },
    { 扒窃: [0, 0, 1, 1, 0, 2, 1, 0, 0, 0, 0, 4] },
    { 六类汇总: [0, 1, 3, 1, 0, 2, 1, 0, 0, 0, 0, 8] },
  ],
  twxc: [
    {
      ssbm: "桂溪",
      zdqu: "名都路沿线周边",
      xksd: "00:00-04:00",
      bxxBxd: "名都路沿线",
      twgh: "D-09030939",
      xcsj: "11月7日 01:00-02:00",
      xcyy: "车财易发案区域",
      xlzx: "巡查时段无警力巡逻，无街面发案",
    },
    {
      ssbm: "合作",
      zdqu: "龙湖时代天街周边",
      xksd: "18:00-21:00",
      bxxBxd: "龙湖时代天街周边道路沿线",
      twgh: "Y-09055102",
      xcsj: "11月6日 19:00-20:00",
      xcyy: "扒窃易发案区域",
      xlzx: "巡查时段无警力巡逻，无街面发案",
    },
    {
      ssbm: "石羊",
      zdqu: "复城国际周边",
      xksd: "19:00-22:00",
      bxxBxd: "盛华南路沿线",
      twgh: "D-09040960",
      xcsj: "11月7日 20:00-21:00",
      xcyy: "三车易发案区域",
      xlzx: "巡查时段有警车巡逻，无街面发案",
    },
  ],
  jqtx: [
    {
      ssbm: "中和所",
      txsd: "11月7日 01:00-02:00",
      dwdz: "紫竹广场",
      twh: "09025301",
      xcqk: "巡查时段无警力巡逻，无街面发案",
      xcyy: "车财易发案区域",
      xlzx: "无街面发案",
      czwt: "1、巡查时段街面三车随意停放，无人员管理。",
      zgcs: "加强巡逻遥控，规范停车",
    },
    {
      ssbm: "合作所",
      txsd: "11月7日 01:00-02:00",
      dwdz: "紫竹广场",
      twh: "09025301",
      xcqk: "巡查时段无警力巡逻，无街面发案",
      xcyy: "车财易发案区域",
      xlzx: "无街面发案",
      czwt: "1、巡查时段街面三车随意停放，无人员管理。",
      zgcs: "加强巡逻遥控，规范停车",
    },
  ],
  ydxlpc: [
    {
      盘车人员: [
        { title: "移交人员数", arr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
        { title: "人员合计数", arr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
      ],
    },
    {
      盘查车辆: [
        { title: "移交车辆数", arr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
        { title: "车辆合计数", arr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
      ],
    },
    {
      盘查物品: [
        { title: "人员物品数", arr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
        { title: "车辆物品数", arr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
      ],
    },
    {
      盘查合计数: [
        { title: "人员、车辆", arr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
      ],
    },
  ],
});
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";
.mryq_box {
  padding: 0 3vw 5vw 3vw;
  @include font_color($font-color-theme);
  @include font_size($font_medium_s);
  .title {
    font-size: 10vw;
    text-align: center;
    padding: 5vw 15vw 2vw 15vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    //   letter-spacing: 40px;
  }
  .dw_rq {
    display: flex;
    justify-content: space-between;
    @include font_size($font_medium);
    font-weight: 600;
    padding: 1vw;
  }
  .d_bottom {
    border-bottom: 3px solid red;
  }
  .text_box {
    line-height: 5.5vw;
    .table_box {
      display: flex;
      .header {
        width: 15%;
        text-align: center;
        & > div {
          height: 5vw;
        }
      }
      .header:nth-child(1) {
        border-left: 1px solid #999;
      }
      .data_box {
        width: 85%;
        overflow-x: scroll;
        .table_box {
          display: flex;
          width: 230%;
        }
        .right {
          width: 28%;
          & > div {
            height: 5vw;
          }
        }
      }
    }
    .twxc_box {
      .twxc_item {
        border-bottom: 1px solid #eff0f5;
        padding: 2vw 0;
      }
    }
    .twxc_title {
      display: inline-block;
      @include font_size($font_medium);
      font-weight: 600;
      margin: 2vw 0;
    }
  }
}
.two_table {
  display: flex;
  & > div {
    width: 50%;
  }
}
.total_item_sum {
  width: 50%;
  text-align: center;
  & > div {
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    height: 5vw;
  }
  & > div:last-child {
    border-bottom: 1px solid #999;
  }
}
.fafb_table_header {
  & > div {
    text-align: center;
    border-top: 1px solid #999;
    border-right: 1px solid #999;
  }
  & > div:last-child {
    border-bottom: 1px solid #999;
  }
}
</style>