dy_web/src/views/backOfficeSystem/performanceMenu/achievements/componets/lc-comp.vue

<!--
 * @Author: your name
 * @Date: 2020-03-22 11:36:21
 * @LastEditTime: 2023-04-10 17:02:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xfxt_web\src\views\xfxt\home\componets\left-home.vue
 -->
<template>
  <div class="qs-box">
    <div class="popTitle">{{ childTitle }}巡逻里程情况</div>
    <div class="popBody" style="max-height: 600px; overflow: auto">
      <div class="tjtitle">
        <el-date-picker
          v-model="searchDay"
          type="date"
          placeholder="选择日期"
          style="width: 150px"
          value-format="YYYY-MM-DD"
          @change="changeDay"
        />
        <div class="tjli lightblue">
          当日应巡逻里程：<span>{{ allNums <= 0 ? 0 : allNums}}</span>
        </div>
        <div class="tjli green">
          当日实际巡逻里程：<span>{{ alreadyNums <=0 ? 0 : alreadyNums }}</span>
        </div>
        <div class="tjli orange">
          当日未巡逻里程：<span>{{ notNums <= 0 ? 0 : notNums }}</span>
        </div>
      </div>
      <el-table
        ref="table"
        :data="tableChildData"
        border
        class="table flex-auto overflow-auto margin-tp-10"
        row-class-name="table-row"
        cell-class-name="table-cell"
        header-row-class-name="table-header-row"
        header-cell-class-name="table-header-cell"
        style="width: 100%"
      >
        <!-- @row-click="getScore" -->
        <el-table-column label="巡逻里程率" align="center">
          <el-table-column prop="ssbm" label="单位" align="center">
            <template #default="{ row }">
              <el-tooltip effect="dark" :content="row.ssbm" placement="right">
                <span>{{ row.ssbm }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="yxllc" label="应巡逻里程" align="center" />
          <el-table-column prop="sjxllc" label="实际巡逻里程" align="center" />
          <el-table-column label="未巡逻里程" align="center" prop="wxllc" />
            <el-table-column label="巡逻里程得扣分" align="center" prop="xllckf" />
              <el-table-column label="巡逻里程得分" align="center" prop="xllcf" />
          <el-table-column label="比例" align="center" prop="pccbl">
               <template #default="{ row }">
                <p v-if="row.yxllc">
                  {{
                    ((Number(row.sjxllc) / Number(row.yxllc)) * 100).toFixed(2)
                  }}%
                </p>
                <p v-else>0%</p>
              </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div class="fenye">
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="childlistQuery.pageCurrent"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="childlistQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import { timeValidate } from "@/utils/tools";
import { JXgetPageList, getStatistics } from "@/api/performance";
import { defineProps, watch, ref, onMounted, nextTick } from "vue";
import { parseTime, timestampToStr } from "@/utils/index";
const props = defineProps({
  childTitle: {
    default: "",
    type: String
  },
  searchType: {
    default: "",
    type: String
  },
  ssbmdm: {
    default: "",
    type: String
  }
});
const childlistQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  type: "01",
  searchType: props.searchType,
  kssj: "",
  jssj: "",
  ssbmdm: props.ssbmdm,
  cxcj: "02"
});
const userInfo = ref(JSON.parse(localStorage.getItem("userInfo")));
const searchDay = ref("");
const allNums = ref("");
const tableChildData = ref([]);
const alreadyNums = ref("");
const notNums = ref("");
const total = ref(0);
const allList = ref([]);
onMounted(() => {
  searchDay.value = timeValidate(new Date(),'ymd');
  childlistQuery.value.kssj = timeValidate(new Date(),'ymd');;
  childlistQuery.value.jssj = timeValidate(new Date(),'ymd');;
  getChildTableList();
  _getStatistics();
});
watch(
  () => [props.ssbmdm, props.searchType],
  () => {
    childlistQuery.value.ssbmdm = props.ssbmdm;
    childlistQuery.value.searchType = props.searchType;
    getChildTableList();
    _getStatistics();
  },
  { deep: true }
);
// 获取弹窗表格初始化数据
const getChildTableList = () => {
  JXgetPageList(childlistQuery.value).then((res) => {
    tableChildData.value = res.records;
    total.value = res.total;
  });
};
const _getStatistics = () => {
  let { searchType, ssbmdm, kssj } = childlistQuery.value;
  let params = {
    searchType: searchType,
    ssbmdm: ssbmdm,
    time: kssj
  };
  getStatistics(params).then((res) => {
    alreadyNums.value = res.sjxllc;
    allNums.value = res.yxllc;
    notNums.value = res.wxllc;
  });
};
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  childlistQuery.value.pageSize = currentSize;
  getChildTableList();
};

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  childlistQuery.value.pageCurrent = currentPage;
  getChildTableList();
};
const changeDay = (val) => {
  childlistQuery.value.kssj = val;
  childlistQuery.value.jssj = val;
  childlistQuery.value.pageCurrent=1
  getChildTableList();
};
</script>

<style lang="scss" scoped>
.popTitle {
  color: #72d8ff;
  line-height: 24px;
  font-size: 18px;
  text-align: center;
}
.tjtitle {
  margin-top: 30px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .tjli {
    flex: 1;
    text-align: center;
    font-size: 18px;
  }
}
::v-deep .el-table th.el-table__cell {
  background: #0d2944 !important;
  color: #61f9ff;
}
.qs-box {
  ::v-deep .el-table__body-wrapper {
    height: 40vh;
    overflow: auto;
  }
}
</style>