Browse Source

fix: 完善大屏tabs组件

main
wxc 1 year ago
parent
commit
cfd1ac0ce5
  1. 20
      src/components/datav/tabs.vue
  2. 181
      src/components/negative/confirmation-completion.vue
  3. 2
      src/components/negative/dialog.vue
  4. 1
      src/views/Home.vue
  5. 6
      src/views/datav/SceneInsp.vue

20
src/components/datav/tabs.vue

@ -1,16 +1,19 @@
<template> <template>
<div class="tabs"> <div class="tabs">
<div class="tab-header flex gap-20 mb-40" v-if="type === ''"> <el-scrollbar>
<div class="tab-header flex mb-20" v-if="type === ''" :size="size">
<div <div
class="tab-title-item" class="tab-title-item"
v-for="item in slots" v-for="item in slots"
:key="item.props.name" :key="item.props.name"
:active="item.props.name === activeTab" :active="item.props.name === activeTab"
@click="handleChangeActiveTab(item.props.name)" @click="handleChangeActiveTab(item.props.name)"
> >
{{ item.props.label }} {{ item.props.label }}
</div> </div>
</div> </div>
</el-scrollbar>
<div class="tabs-content"> <div class="tabs-content">
<slot></slot> <slot></slot>
</div> </div>
@ -40,6 +43,10 @@ const props = defineProps({
type: String, type: String,
default: "", default: "",
}, },
size: {
type: String,
default: ""
}
}); });
const slots = useSlots().default(); const slots = useSlots().default();
@ -63,6 +70,8 @@ function handleChangeActiveTab(name) {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tab-header { .tab-header {
width: max-content;
gap: 20px;
.tab-title-item { .tab-title-item {
font-size: 22px; font-size: 22px;
line-height: 34px; line-height: 34px;
@ -74,6 +83,14 @@ function handleChangeActiveTab(name) {
border-color: #28E6FF; border-color: #28E6FF;
} }
} }
&[size=small] {
gap: 12px;
.tab-title-item {
font-size: 19px;
}
}
} }
.tab-title { .tab-title {
margin-bottom: 4px; margin-bottom: 4px;
@ -96,5 +113,6 @@ function handleChangeActiveTab(name) {
border-radius: 0 103px 103px 0; border-radius: 0 103px 103px 0;
} }
} }
} }
</style> </style>

181
src/components/negative/confirmation-completion.vue

@ -1,68 +1,157 @@
<template> <template>
<el-dialog title="认定办结"> <el-dialog title="认定办结" v-model="show" top="5vh" width="900px">
<h2>问题符文情况</h2> <h3>问题赋分情况</h3>
<el-form> <p>
<h3>涉及人员</h3> 赋分公式基础分值*1+问题严重等级系数*1+
<div class="row"> 问题出现频次系数*1+问题发生率系数
<div class="col col-6"> </p>
<label>姓名</label> <el-form :label-width="120">
<span>{{ negative.responderName }}</span> <div v-for="(item, index) in negative.blames">
<h5>涉及人员</h5>
<div class="row">
<div class="col col-6">
<label>姓名</label>
<span>{{}}</span>
</div>
<div class="col col-6">
<label>警号</label>
<span>{{}}</span>
</div>
<div class="col col-12">
<label>问题类型</label>
<span>{{}}</span>
</div>
</div> </div>
<div class="col col-6"> <el-form-item label="严重等级"> </el-form-item>
<label>警号</label> <h5>问题赋分</h5>
<span>{{ negative.contactPhone }}</span> <el-row>
</div> <el-col :span="8">
<div class="col col-12"> <div class="mb-4">问题严重等级</div>
<label>问题类型</label> <div>0.3严重影响 赋分增加 30%</div>
<span>{{ negative.contactPhone }}</span> </el-col>
<el-col :span="8">
<div class="mb-4">问题严重等级</div>
<div>0.53 赋分增加 50%</div>
</el-col>
<el-col :span="8">
<div class="mb-4">问题严重等级</div>
<div>0.15问题发生率xxx xxx, 赋分增加 15%</div>
</el-col>
</el-row>
<div class="row mt-8">
<div class="col col-24">
<label style="--label-width: 60px"
><span>分值计算</span></label
>
<span>3*1+0.3*1+0.5*1+0.15= 6.7275 </span>
</div>
</div> </div>
</div> </div>
<el-form-item label="严重等级"> <div class="mt-20 mb-20">
<p>
</el-form-item> 一般影响当问题导致一般性投诉或轻微的内部管理问题时分值为基础分值
<h4>问题赋分</h4> </p>
<el-row> <p>
<el-col :span="8"> 严重影响当问题导致较大投诉或内部管理问题时分值将在基础分值的基础上增加
<div>问题严重等级</div> 30%
<div>0.3严重影响 赋分增加 30%</div> </p>
</el-col> <p>
<el-col :span="8"> 重大影响当问题导致重大法律责任或产生严重负面社会影响时分值将在基础分值的基础上增加
<div>问题严重等级</div> 80%
<div>0.53 赋分增加 50%</div> </p>
</el-col>
<el-col :span="8">
<div>问题严重等级</div>
<div>0.15问题发生率xxx xxx, 赋分增加 15%</div>
</el-col>
</el-row>
<div>
<p>一般影响当问题导致一般性投诉或轻微的内部管理问题时分值为基础分值 </p>
<p>严重影响当问题导致较大投诉或内部管理问题时分值将在基础分值的基础上增加 30%</p>
<p>重大影响当问题导致重大法律责任或产生严重负面社会影响时分值将在基础分值的基础上增加 80%</p>
</div> </div>
<h2>问题标签设定</h2> <h3>认定办结情况</h3>
<p>为问题设定督察成放方面的标签方便后期根据标签快速查找相关问题设定的标签不要与问题现有属性重复</p>
<h2>认定办结情况</h2>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="核查办理情况"></el-form-item> <el-form-item
label="核查办理情况"
prop="verifySituation"
:rules="{
required: true,
message: '请选择核查办理情况',
trigger: ['blur'],
}"
>
<el-radio-group v-model="formData.verifySituation">
<el-radio
v-for="item in dict.verifySituation"
:key="item.dictCode"
:value="item.dictValue"
>{{ item.dictLabel
}}{{
item.remark ? `(${item.remark})` : ""
}}</el-radio
>
</el-radio-group>
</el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="佐证材料情况"></el-form-item> <el-form-item
label="佐证材料情况"
prop="verifyFileSituation"
:rules="{
required: true,
message: '请选择佐证材料情况',
trigger: ['blur'],
}"
>
<el-radio-group v-model="formData.verifyFileSituation">
<el-radio
v-for="item in dict.verifyFileSituation"
:key="item.dictCode"
:value="item.dictValue"
>{{ item.dictLabel
}}{{
item.remark ? `(${item.remark})` : ""
}}</el-radio
>
</el-radio-group>
</el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-form-item label="认定办结意见"> <el-form-item
<el-input type="textarea" /> label="认定办结意见"
prop="completionComment"
:rules="{
required: true,
message: '请输入认定办结意见',
trigger: ['blur'],
}"
>
<el-input
type="textarea"
v-model="formData.completionComment"
placeholder="请输入"
/>
</el-form-item> </el-form-item>
</el-form> </el-form>
<footer class="flex between v-center"> <footer class="flex end">
<el-button>取消</el-button> <el-button>取消</el-button>
<el-button type="primary">认定办结</el-button> <el-button type="primary">认定办结</el-button>
</footer> </footer>
</el-dialog> </el-dialog>
</template> </template>
<script setup> <script setup>
import useCatchStore from "@/stores/modules/catch";
const catchStore = useCatchStore();
const dict = catchStore.getDicts(["verifySituation", "verifyFileSituation"]);
const formData = ref({});
const formRef = ref(null);
const show = ref(true);
const negative = inject("negative");
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
h3 {
margin-top: 0;
margin-bottom: 10px;
}
h5 {
margin-bottom: 10px;
}
p {
margin: 0;
}
</style> </style>

2
src/components/negative/dialog.vue

@ -180,6 +180,8 @@
/> />
</template> </template>
</template> </template>
<!-- <negative-confirmation-completion /> -->
</el-dialog> </el-dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

1
src/views/Home.vue

@ -47,6 +47,7 @@
</el-row> </el-row>
</div> </div>
</template> </template>
<script setup> <script setup>
import { flowNumberAndTodayNumber } from '@/api/statistics' import { flowNumberAndTodayNumber } from '@/api/statistics'

6
src/views/datav/SceneInsp.vue

@ -137,8 +137,8 @@
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<datav-card > <datav-card >
<datav-tabs v-model="activeTabRight"> <datav-tabs v-model="activeTabRight" size="small">
<el-row class="mb-32"> <!-- <el-row class="mb-32">
<el-col :span="6"> <el-col :span="6">
<div class="descriptions_cell text-center"> <div class="descriptions_cell text-center">
<div class="descriptions_content"> <div class="descriptions_content">
@ -179,7 +179,7 @@
</div> </div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row> -->
<datav-tab-item label="枪支管理" name="1"> <datav-tab-item label="枪支管理" name="1">
<datav-tabs <datav-tabs
v-model="activeMailTabRight" v-model="activeMailTabRight"

Loading…
Cancel
Save