初始提交
This commit is contained in:
@ -0,0 +1,212 @@
|
||||
<!--
|
||||
* @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>
|
||||
Reference in New Issue
Block a user