From 375b6acbd3a8f9cf51f967b09ecd09eccd1a12f3 Mon Sep 17 00:00:00 2001 From: zhaojiale <631455805@qq.com> Date: 星期四, 18 八月 2022 17:53:29 +0800 Subject: [PATCH] 统计 事故统计 --- src/components/DailogSearch/DailogSearch.vue | 225 ++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 145 insertions(+), 80 deletions(-) diff --git a/src/components/DailogSearch/DailogSearch.vue b/src/components/DailogSearch/DailogSearch.vue index 9d297c8..fcf71a6 100644 --- a/src/components/DailogSearch/DailogSearch.vue +++ b/src/components/DailogSearch/DailogSearch.vue @@ -1,122 +1,187 @@ <template> - <el-dialog v-model="dialogVisible" title="选择安全目标指标" width="50%" draggable> + <el-dialog v-model="dialogVisible" :fullscreen="full" title="选择安全目标指标" width="50%" draggable> + <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> <el-row> <el-col :span="17"> - <el-form ref="ruleFormRef" :model="ruleForm" status-icon> - <el-row> - <el-col :span="6"> - <el-form-item> - <el-input v-model="ruleForm.pass" placeholder="安全目标指标" /> - </el-form-item> - </el-col> - <el-col :span="6" :offset="1"> - <el-form-item> - <el-input v-model="ruleForm.checkPass" placeholder="目标指标编号" /> - </el-form-item> - </el-col> - <el-col :span="6" :offset="1"> - <el-form-item> - <el-button type="primary" @click="submitForm(ruleFormRef)">查询</el-button> - <el-button @click="resetForm(ruleFormRef)">重置</el-button> - </el-form-item> - </el-col> - </el-row> - </el-form> - <el-button size="default" :icon="Delete">清除选择</el-button> - <el-table :data="tableData" style="width: 100%;margin-top:20px"> - <el-table-column align="center" prop="date" label="安全目标指标" width="180" /> - <el-table-column align="center" prop="name" label="目标指标编号" width="180" /> - <el-table-column align="center" prop="address" label="年度" /> - <el-table-column align="center" prop="address" label="指标值" /> - </el-table> - <el-pagination - style="padding:20px 0;border-bottom:1px solid #dedede" - v-model:currentPage="currentPage4" - v-model:page-size="pageSize4" - :page-sizes="[100, 200, 300, 400]" - :small="small" - :disabled="disabled" - :background="background" - layout="total, sizes, prev, pager, next, jumper" - :total="400" - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - /> - </el-col> - <el-col :span="7"> - <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)"> - {{ tag }} + <el-form ref="ruleFormRef" :model="ruleForm" status-icon> + <el-row> + <el-col :span="6"> + <el-form-item size="default"> + <el-input v-model="ruleForm.searchParams.qName" placeholder="安全目标指标" /> + </el-form-item> + </el-col> + <el-col :span="6" :offset="1"> + <el-form-item size="default"> + <el-input v-model="ruleForm.searchParams.indexNum" placeholder="目标指标编号" /> + </el-form-item> + </el-col> + <el-col :span="10" :offset="1"> + <el-form-item> + <el-button size="default" type="primary" @click="listApi">查询</el-button> + <el-button size="default" @click="resetForm">重置</el-button> + </el-form-item> + </el-col> + </el-row> + </el-form> + <el-button size="default" :icon="Delete" @click="clear">清除选择</el-button> + <el-table :data="tableData" style="width: 100%; margin-top: 20px"> + <el-table-column align="center"> + <template #default="scope"> + <el-radio-group v-model="radio1"> + <el-radio :label="scope.row.id" @click="radio(scope.row)" size="large">{{ null }}</el-radio> + </el-radio-group> + </template> + </el-table-column> + <el-table-column align="center" prop="qName" label="安全目标指标" width="180" /> + <el-table-column align="center" prop="indexNum" label="目标指标编号" width="180" /> + <el-table-column align="center" prop="year" label="年度" /> + <el-table-column align="center" prop="value" label="指标值" /> + </el-table> + <el-pagination + style="padding: 20px 0; border-bottom: 1px solid #dedede" + v-model:currentPage="currentPage4" + v-model:page-size="pageSize4" + :page-sizes="[10, 20, 30, 40]" + layout="total, sizes, prev, pager, next, jumper" + :total="total" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> + </el-col> + <el-col :span="7"> + <div v-if="dynamicTags[0]==''?false:true"> + <el-tag + v-for="tag in dynamicTags" + :key="tag" + class="mx-1" + style="margin: 5px" + closable + :disable-transitions="false" + @close="handleClose(tag)" + > + {{ tag.qName }} </el-tag> - </el-col> + </div> + </el-col> </el-row> <template #footer> <span class="dialog-footer"> <el-button @click="dialogVisible = false" size="default">关闭</el-button> - <el-button type="primary" @click="dialogVisible = false" size="default">确定</el-button> + <el-button type="primary" @click="submitForm" size="default">确定</el-button> </span> </template> </el-dialog> </template> <script lang="ts"> -import { defineComponent, reactive, ref } from 'vue'; -import { Delete } from '@element-plus/icons-vue'; +import { defineComponent, reactive, ref, onMounted } from 'vue'; +import { Delete, FullScreen } from '@element-plus/icons-vue'; +import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus'; +import { goalManagementApi } from '/@/api/goalManagement'; export default defineComponent({ - setup() { + setup(props,{emit}) { const dialogVisible = ref<boolean>(false); - const openDailog = () => { + const openDailog = (type:any) => { dialogVisible.value = true; + ruleForm.searchParams.targetType=type + listApi(); }; // 搜索条件 const ruleForm = reactive({ - pass: '', - checkPass: '', + pageSize: 10, + pageIndex: 1, + searchParams: { + qName: '', ////安全目标指标 + indexNum: '', ////目标指标编号 + targetType: '', ////指标类型 1:年指标 2:月指标 + divideStatus: '2', ////分解状态 1:已分解 2:未分解 + }, }); - // 表格 - const tableData = [ - { - date: '2016-05-03', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-02', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-04', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - { - date: '2016-05-01', - name: 'Tom', - address: 'No. 189, Grove St, Los Angeles', - }, - ]; - const pageSize4 = ref(100); + // 下方导航与表格 + const tableData = ref([]); + const currentPage4 = ref(); + const pageSize4 = ref(); + const total = ref(); + const resetForm = () => { + ruleForm.searchParams.qName = ''; + ruleForm.searchParams.indexNum = ''; + }; + const listApi = () => { + goalManagementApi() + .getTargetMngList(ruleForm) + .then((res) => { + if (res.data.code == 200) { + tableData.value = res.data.data; + currentPage4.value = res.data.pageIndex; + pageSize4.value = res.data.pageSize; + total.value = res.data.total; + } else { + ElMessage.error(res.data.msg); + } + }); + }; + onMounted(() => { + }); + const handleSizeChange = (val: number) => { - console.log(`${val} items per page`); + // console.log(`${val} items per page`); + ruleForm.pageSize = val; + listApi(); }; const handleCurrentChange = (val: number) => { - console.log(`current page: ${val}`); + // console.log(`current page: ${val}`); + ruleForm.pageIndex = val; + listApi(); }; // 右方点击添加后显示标签 - const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']); + const dynamicTags = ref(['']); const handleClose = (tag: string) => { dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1); + radio1.value = ''; }; + const radio1 = ref(''); + const radio = (data: any) => { + dynamicTags.value[0] = data; + }; + const clear=()=>{ + dynamicTags.value=[''] + radio1.value="" + } + //全屏 + const full = ref(false); + const toggleFullscreen = () => { + if (full.value == false) { + full.value = true; + } else { + full.value = false; + } + }; + const submitForm=()=>{ + let obj=JSON.parse(JSON.stringify(dynamicTags.value)) + emit("backNum",obj[0]) + dialogVisible.value = false + } return { dialogVisible, openDailog, ruleForm, tableData, + currentPage4, + total, pageSize4, + resetForm, + listApi, handleSizeChange, handleCurrentChange, dynamicTags, handleClose, + radio1, + radio, + full, + toggleFullscreen, Delete, + FullScreen, + clear, + submitForm }; }, }); -- Gitblit v1.9.2