dy_web/src/views/largeScreen/home/layout/workCondition.vue

<!--
 * @Author: your name
 * @Date: 2023-11-15 11:21:20
 * @LastEditTime: 2024-02-19 11:17:14
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \my_web_new\src\views\lz\home\components\workCondition.vue
-->
<template>
  <div class="boxContent">
    <div class="box-title">工作情况</div>
    <ul class="boxInfo cntinfo">
      <!-- <li class="item">
        <div class="bt">在岗警力：</div>
        <span class="label" @click="show_Dialog('zgjl','mj')"><span class="xbt">民警：</span><span :title="jl.zgmjsl || 0" class="num-one">{{ jl.zgmjsl || 0 }}</span></span>
        <span class="label" @click="show_Dialog('zgjl','fj')"><span class="xbt">辅警：</span><span :title="jl.zgfjsl || 0" class="num-two">{{ jl.zgfjsl || 0 }}</span></span>
      </li> -->
      <li class="item">
        <div class="bt">街面巡组：</div>
        <span class="label" @click="show_Dialog('jmxz', 'jh')"><span class="xbt">计划：</span><span :title="xz.jhsl || 0"
            class="num-one">{{ xz.jhsl || 0 }}</span></span>
        <span class="label" @click="show_Dialog('jmxz', 'sj')"><span class="xbt">实际：</span><span :title="xz.sjsl || 0"
            class="num-two">{{ xz.sjsl || 0 }}</span></span>
      </li>
      <li class="item">
        <div class="bt">街面力量：</div>
        <span class="label" @click="show_Dialog('jmll', 'mj')"><span class="xbt">民警：</span><span :title="xz.jmmjsl || 0"
            class="num-one">{{ xz.jmmjsl || 0 }}</span></span>
        <span class="label" @click="show_Dialog('jmll', 'fj')"><span class="xbt">辅警：</span><span :title="xz.jmfjsl || 0"
            class="num-two">{{ xz.jmfjsl || 0 }}</span></span>
      </li>
      <!-- <li class="item">
        <div class="bt">当日巡逻：</div>
        <span class="label" @click="show_Dialog('xlsc', 'xs')"><span class="xbt">时长(h)：</span><span :title="xz.xfsc || 0"
            class="num-one">{{ xz.xfsc || 0 }}</span></span>
        <span class="label" @click="show_Dialog('xlsc', 'lc')"><span class="xbt">里程(km)：</span><span :title="xz.xflc || 0"
            class="num-two">{{ xz.xflc || 0 }}</span></span>
      </li>
      <li class="item">
        <div class="bt">任务情况：</div>
        <span class="label" @click="show_Dialog('zlzx', 'zs')"><span class="xbt">总数：</span><span class="num-one">{{
          zlzx.zlzs || 0 }}</span></span>
        <span class="label" @click="show_Dialog('zlzx', 'zx')"><span class="xbt">执行：</span><span class="num-two">{{
          zlzx.zlzxs || 0 }}</span></span>
      </li> -->
    </ul>
  </div>
</template>

<script setup>
import emitter from "@/utils/eventBus.js";
import { getZgjlData, getSelectDeck, getSelectCarCount, getSelectInstructCount } from "@/api/dpApi/home.js";
import { ref, onMounted } from "vue";
const jl = ref({}); //左上方统计数据 警力
const xz = ref({}); //左上方统计数据 巡组
const pc = ref(0); //左上方统计数据 盘车
const pr = ref(0); //左上方统计数据 盘人
const zlzx = ref({}); //左上方统计数据 指令执行状况

onMounted(() => {
  _getZgjlData();
  _getSelectDeck();
});

// 在岗警力
function _getZgjlData() {
  getZgjlData().then((res) => {
    jl.value = res;
  });
}

// 街面巡组 | 巡逻时长里程 |街面力量
function _getSelectDeck() {
  getSelectDeck().then((res) => {
    if (res.xfsc != 0) res.xfsc = (res.xfsc / 3600).toFixed(2);
    if (res.xflc != 0) res.xflc = (res.xflc / 1000).toFixed(2);
    xz.value = res;
  });
}




// 展示弹窗
function show_Dialog(val, type) {
  switch (val) {
    case 'zgjl':
      emitter.emit("showJLWindow", type); //展示在岗警力的弹框
      break;
    case 'jmxz':
      emitter.emit("showJMXZWindow", type); //展示在巡组的弹框
      break;
    case 'jmll':
      emitter.emit("showJMLLWindow", type); //展示街面力量的弹框
      break;
    case 'xlsc':
      emitter.emit("showXLSCWindow", type); //巡逻时长的弹框
      break;
    case 'pcgz':
      emitter.emit("showPCGZWindow", type); //展示盘查工作的弹框
      break;
    case 'zlzx':
      emitter.emit("showZlzxWindow", type); //点击打开指令弹窗
      break;
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";

.cntinfo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .item {
    display: flex;
    align-items: center;
    padding: 0 6px;
    box-sizing: border-box;
    flex: 1;
    line-height: 35px;
    font-size: 14px;

    >span {
      flex: 1;
    }

    .bt {
      color: #01E9ED;
      display: inline-block;
      width: 80px;
      font-size: 16px;
      font-weight: 700;
    }

    .xbt {
      display: inline-block;
      width: 70px;
      cursor: pointer;
    }

    .num-one {
      color: #00BFFF;
      font-size: 16px;
      cursor: pointer;

    }

    .num-two {
      color: #01E9ED;
      font-size: 16px;
      cursor: pointer;
    }

    .label {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .label:nth-child(1) .xbt {
      width: 60px;
    }
  }

  .item:nth-child(2n+1) {
    background-image: linear-gradient(to right, rgba(1, 127, 216, 1), rgba(4, 56, 131, .5), rgba(1, 130, 218, .0));

  }
}
</style>