heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/plan/detail.vue
2025-01-09 18:29:48 +08:00

687 lines
31 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<el-card class="hl-card" style="position: relative">
<template #header>
<span>详情页</span>
</template>
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="160px" v-loading="formLoading">
<el-card class="hl-card-info">
<template #header>
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">基础信息</span>
</template>
<el-row>
<el-col :span="24">
<el-row>
<el-col :span="6">
<el-row>
<el-col :span="24">
<el-form-item label="计划编号" prop="planNo">
<el-input class="!w-265px" placeholder="系统自动生成" v-model="formData.planNo" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="项目名称" prop="projectName">
<el-input class="!w-265px" placeholder="项目名称" v-model="formData.projectName" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="项目负责人" prop="projectOwner">
<el-select class="!w-265px" v-model="formData.projectOwner" filterable disabled>
<el-option v-for="dict in userInit" :key="dict.id"
:label="dict.username + ' '+ dict.nickname" :value="dict.id" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="是否要工艺" prop="hasCraft">
<el-radio-group v-model="formData.hasCraft">
<el-radio disabled v-for="dict in getIntDictOptions(DICT_TYPE.HELI_COMMON_IS_OR_NOT)" :key="dict.value"
:label="dict.value">
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="计划编制人" prop="editor">
<el-select class="!w-265px" v-model="formData.editor" filterable disabled>
<el-option v-for="dict in userInit" :key="dict.id"
:label="dict.username + ' '+ dict.nickname" :value="dict.id" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="计划编制日期" prop="editorDate">
<el-date-picker disabled class="!w-265px" v-model="formData.editorDate" type="date" value-format="x"
placeholder="计划编制日期" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="80">
<el-form-item label="备注" prop="description">
<el-input disabled class="!w-713px" type="textarea" v-model="formData.description" show-word-limit
maxlength="200" />
</el-form-item>
</el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="24">
<el-form-item label="项目编号" prop="projectCode">
<el-input class="!w-265px" placeholder="项目编号" v-model="formData.projectCode" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="业务员" prop="businessMan">
<el-input class="!w-265px" placeholder="业务员" v-model="formData.businessMan" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="所属业务线" prop="businessLine">
<el-select class="!w-265px" v-model="formData.businessLine" disabled>
<el-option disabled v-for="dict in getStrDictOptions(DICT_TYPE.HELI_BUSINESS_LINE)" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="工艺负责人" prop="craftOwner">
<el-select class="!w-265px" v-model="formData.craftOwner" filterable disabled>
<el-option v-for="dict in userInit" :key="dict.id"
:label="dict.username + ' '+ dict.nickname" :value="dict.id" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="计划审核人" prop="auditor">
<el-select class="!w-265px" v-model="formData.auditor" filterable disabled>
<el-option v-for="dict in userInit" :key="dict.id"
:label="dict.username + ' '+ dict.nickname" :value="dict.id" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="计划审核日期" prop="auditDate">
<el-date-picker disabled class="!w-265px" v-model="formData.auditDate" type="date" value-format="x"
placeholder="计划审核日期" />
</el-form-item>
</el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="24">
<el-form-item label="项目状态" prop="projectStatus">
<el-select v-model="formData.projectStatus" placeholder="项目状态" clearable class="!w-265px" disabled>
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.HELI_PROJECT_ORDER_STATUS)"
:key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="项目开始日期" prop="projectStartTime">
<el-date-picker class="!w-265px" v-model="formData.projectStartTime" type="date" value-format="x"
placeholder="项目开始日期" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="性质" prop="property">
<el-select class="!w-265px" v-model="formData.property" placeholder="下拉选择" disabled>
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.HELI_PROJECT_PROPERTY)" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="工艺开始日期" prop="craftStartTime">
<el-date-picker disabled class="!w-265px" v-model="formData.craftStartDate" type="date" value-format="x"
placeholder="工艺开始日期" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="计划批准人" prop="approver">
<el-select class="!w-265px" v-model="formData.approver" filterable >
<el-option v-for="dict in userInit" :key="dict.id"
:label="dict.username + ' '+ dict.nickname" :value="dict.id" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="计划批准日期" prop="approveDate">
<el-date-picker disabled class="!w-265px" v-model="formData.approveDate" type="date" value-format="x"
placeholder="计划批准日期" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="生产状态" prop="status">
<el-select v-model="formData.status" placeholder="生产状态" clearable class="!w-265px" disabled>
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.HELI_PROJECT_PLAN_STATUS)" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="24">
<el-form-item label="客户名称" prop="customerName">
<el-input class="!w-265px" v-model="formData.customerName" placeholder="客户名称" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="项目结束日期" prop="projectEndTime">
<el-date-picker class="!w-265px" v-model="formData.projectEndTime" type="date" value-format="x"
placeholder="项目结束日期" disabled />
<span style="position: absolute; left: 0; top: 30px" v-if="formData.projectStartTime && formData.projectEndTime">{{
' 共计' +
betweenDay1(
new Date(formData.projectStartTime),
new Date(formData.projectEndTime)
) +
'天'
}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="是否紧急" prop="isUrgency">
<el-select class="!w-265px" v-model="formData.isUrgency" disabled>
<el-option v-for="dict in getIntDictOptions(DICT_TYPE.HELI_COMMON_IS_OR_NOT)" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="工艺结束日期" prop="craftEndTime">
<el-date-picker disabled class="!w-265px" v-model="formData.craftEndDate" type="date" value-format="x"
placeholder="工艺结束日期" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="创建时间" prop="createTime">
<el-date-picker class="!w-265px" v-model="formData.createTime" type="date" value-format="x"
placeholder="创建时间" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="项目变更日期" prop="changeLastDate">
<el-date-picker class="!w-265px" v-model="formData.changeLastDate" type="date" value-format="x" placeholder="项目变更日期" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="项目变更次数" prop="changeNum">
<el-input class="!w-265px" placeholder="项目变更次数" v-model="formData.changeNum" disabled />
</el-form-item>
</el-col>
</el-row>
</el-col>
</el-row>
</el-col>
</el-row>
</el-card>
<el-card class="hl-card-info">
<template #header>
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">子项目信息</span>
</template>
<el-row>
<el-col>
<el-card class="hl-incard">
<el-form ref="projectOrderSubFormRef" :model="formData.projectOrderSubs" :rules="subFormRules"
v-loading="subFormLoading" label-width="0">
<el-table :data="formData.projectOrderSubs" :show-overflow-tooltip="true" class="hl-table">
<el-table-column label="序号" type="index" width="80" fixed />
<el-table-column prop="name" label="子项目名称" min-width="120" align="center" fixed/>
<el-table-column prop="projectSubShortName" min-width="180" align="center" >
<template #header>子项目简称</template>
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.projectSubShortName`" class="mb-0px!">
<el-input disabled v-model="row.projectSubShortName" placeholder="子项目简称" />
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="projectSubCode" label="子项目编号" min-width="350" align="center" />
<el-table-column prop="mouldId" align="center" min-width="180">
<template #header> 模具类型 </template>
<template #default="scope">
<el-form-item :prop="`${scope.$index}.mouldId`" class="mb-0px!">
<el-select disabled v-model="scope.row.mouldId" clearable placeholder="下拉选择" @change="(mid)=>handleMouldType(scope,mid)" style="width: 100%">
<el-option v-for="dict in mouldTypeList" :key="dict.id" :label="dict.name" :value="dict.id" />
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="equipId" align="center" min-width="180">
<template #header> 设备型号 </template>
<template #default="scope">
<el-form-item :prop="`${scope.$index}.equipId`" class="mb-0px!">
<el-select disabled v-model="scope.row.equipId" clearable placeholder="下拉选择" style="width: 100%">
<el-option v-for="dict in scope.row.equipList" :key="dict.id" :label="dict.name"
:value="dict.id" />
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="amount" label="数量" min-width="100" align="center" />
<el-table-column prop="unit" label="单位" min-width="100" align="center">
<template #default="scope">
<dict-tag :type="DICT_TYPE.HELI_MATERIAL_UNIT" :value="scope.row.unit" />
</template>
</el-table-column>
<el-table-column prop="compositionName" label="主要材质" min-width="120" align="center" />
<el-table-column min-width="180" align="center">
<template #header>毛坯结束日期</template>
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.blankDate`" class="mb-0px!">
<el-date-picker disabled class="!w-265px" v-model="row.blankDate" type="date" value-format="x"
placeholder="毛坯结束日期" />
</el-form-item>
</template>
</el-table-column>
<el-table-column min-width="150" align="center">
<template #header>毛坯负责人</template>
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.blankOwner`" class="mb-0px!">
<el-select class="!w-265px" v-model="row.blankOwner" filterable disabled>
<el-option v-for="dict in userInit" :key="dict.id"
:label="dict.username + ' '+ dict.nickname" :value="dict.id" />
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column min-width="180" align="center">
<template #header>2D结束日期</template>
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.twoDimDate`" class="mb-0px!">
<el-date-picker disabled class="!w-265px" v-model="row.twoDimDate" type="date" value-format="x"
placeholder="2D结束日期" />
</el-form-item>
</template>
</el-table-column>
<el-table-column min-width="150" align="center">
<template #header>2D负责人</template>
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.twoDimOwner`" class="mb-0px!">
<el-select class="!w-265px" v-model="row.twoDimOwner" filterable disabled>
<el-option v-for="dict in userInit" :key="dict.id"
:label="dict.username + ' '+ dict.nickname" :value="dict.id" />
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column min-width="180" align="center">
<template #header>3D结束日期</template>
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.threeDimDate`" class="mb-0px!">
<el-date-picker disabled class="!w-265px" v-model="row.threeDimDate" type="date" value-format="x"
placeholder="3D结束日期" />
</el-form-item>
</template>
</el-table-column>
<el-table-column min-width="150" align="center">
<template #header>3D负责人</template>
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.threeDimOwner`" class="mb-0px!">
<el-select class="!w-265px" v-model="row.threeDimOwner" filterable disabled>
<el-option v-for="dict in userInit" :key="dict.id"
:label="dict.username + ' '+ dict.nickname" :value="dict.id" />
</el-select>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
</el-card>
</el-col>
</el-row>
</el-card>
<el-card class="hl-card-info">
<template #header>
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">工艺流程</span>
</template>
<el-row>
<el-col>
<el-card class="hl-incard">
<el-table :data="formData.craftInfos" class="hl-table">
<el-table-column label="序号" align="center" type="index" width="80" />
<el-table-column prop="name" min-width="120" label="工艺流程" align="center" />
<el-table-column min-width="150" label="开始日期" align="center">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.startDate`" class="mb-0px!">
<el-date-picker disabled v-model="row.startDate" type="date" value-format="x" style="width: 100%;"
placeholder="开始日期" />
</el-form-item>
</template>
</el-table-column>
<el-table-column min-width="150" align="center">
<template #header> 结束日期 </template>
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.endDate`" class="mb-0px!">
<el-date-picker disabled style="width: 100%;" v-model="row.endDate" type="date" value-format="x"
placeholder="结束日期" />
</el-form-item>
</template>
</el-table-column>
<el-table-column min-width="150" label="责任人" align="center">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.owner`" class="mb-0px!">
<el-input style="width: 100%;" disabled v-model="row.owner" placeholder="责任人" />
</el-form-item>
</template>
</el-table-column>
<el-table-column min-width="300" label="备注" align="center">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.description`" class="mb-0px!">
<el-input disabled style="width: 100%;" v-model="row.description" placeholder="备注" />
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
</el-card>
<el-card class="hl-card-info" v-if="false">
<template #header>
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">操作日志</span>
</template>
<el-row>
<el-col>
<el-card class="hl-incard">
<el-table :data="formData.operateLogs" class="hl-table" :style="{ height: formData.operateLogs.length > 10 ? '450px' : '' }">
<el-table-column prop="type" label="操作" align="center" width="200px">
<template #default="scope">
{{ getDictLabel(DICT_TYPE.SYSTEM_OPERATE_TYPE, scope.row.type) }}
</template>
</el-table-column>
<el-table-column prop="userNickname" label="操作人" align="center" />
<el-table-column label="操作时间" align="center" prop="startTime" width="220" :formatter="dateFormatter" />
</el-table>
</el-card>
</el-col>
</el-row>
</el-card>
</el-form>
<div class="text-center hl-footer">
<el-button @click="() => router.back()" size="large">取 消</el-button>
</div>
</el-card>
<ProjectOrderDialog ref="projectOrderDialog" @success="handleSelectedProjectOrder" />
</template>
<script setup lang="ts">
import { inject } from 'vue'
import { getIntDictOptions, getStrDictOptions, getDictLabel, DICT_TYPE } from '@/utils/dict'
import {betweenDay, formatDate, dateFormatter, betweenDay1} from '@/utils/formatTime'
import { Search, Plus } from '@element-plus/icons-vue'
import ProjectOrderDialog from '@/views/heli/plan/projectOrderDialog.vue'
import * as PlanApi from '@/api/heli/plan'
import * as PlanSubApi from '@/api/heli/plansub'
import * as ProjectOrderApi from '@/api/heli/projectorder'
import * as CustomerApi from '@/api/heli/customer'
import * as UserApi from '@/api/system/user'
import * as EquipApi from '@/api/heli/equip'
import * as MouldTypeApi from '@/api/heli/mouldtype'
import { getOperateLogPage } from '@/api/system/operatelog'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { query } = useRoute()
const router = useRouter()
const reload = inject('reload')
const formLoading = ref(false) // 表单的加载中1修改时的数据加载2提交的按钮禁用
const formRef = ref() // 表单
const formData = ref({
id: undefined,
projectId: undefined,
projectOwner: undefined,
hasCraft: undefined,
craftOwner: undefined,
craftStartTime: undefined,
craftEndTime: undefined,
editor: undefined,
editorDate: undefined,
auditor: undefined,
auditDate: undefined,
approver: undefined,
approveDate: undefined,
description: undefined,
status: undefined,
createTime: undefined,
operateLogs: [],
projectOrderSubs: [],
projectPlanSubs: [],
craftInfos: [],
craftContent:undefined
})
const formRules = reactive({
projectCode: [{ required: true, message: '项目编号不能为空', trigger: 'blur' }],
})
const projectOrderDialog = ref()
const openProjectOrderDialog = () => {
projectOrderDialog.value?.open()
}
const handleSelectedProjectOrder = (arr: ProjectOrderVO[]) => {
if (arr) {
formData.value.projectCode = arr.code
formData.value.projectStatus = arr.orderStatus
formData.value.customerName = arr.customerName
formData.value.projectName = arr.projectName
formData.value.businessMan = arr.businessManName
formData.value.projectStartTime = arr.projectStartTime
formData.value.projectEndTime = arr.projectEndTime
formData.value.businessLine = arr.businessLine
formData.value.property = arr.property
formData.value.isUrgency = arr.isUrgency
formData.value.projectId = arr.id
handleInitPlanSub()
}
}
const handleMouldType = async (scope,mid) => {
// 获得设备信息下拉列表
scope.row.equipList = equipInit.value.filter( rg => rg.mould_type_id == mid)
}
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as PlanApi.PlanVO
data.craftContent = JSON.stringify(data.craftInfos)
await PlanApi.updatePlan(data)
formData.value.projectOrderSubs.forEach(item=>{
var subData = item as unknown as PlanSubApid.PlanSubVo
subData.projectId = item.projectOrderId
subData.projectPlanId = formData.value.id
subData.projectSubId = item.id
if(item.planSubId == undefined){
subData.id = 0
PlanSubApi.createPlanSub(subData)
}else{
subData.id = item.planSubId
PlanSubApi.updatePlanSub(subData)
}
subData.id = subData.projectSubId
})
message.success(t('common.updateSuccess'))
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
const handleInitPlanSub = async ()=>{
// 项目子项列表
formData.value.projectOrderSubs =
await ProjectOrderApi.getProjectOrderSubListByProjectOrderId(formData.value.projectId)
// 生产计划子项列表
const queryParams = reactive({
pageNo: 1,
pageSize: 99,
projectPlanId: query.id
})
formData.value.projectPlanSubs =
(await PlanSubApi.getPlanSubPage(queryParams)).list
formData.value.projectOrderSubs.forEach( item =>{
if(formData.value.projectPlanSubs.filter(sub=>sub.projectSubId == item.id).length>0){
var subTemp = formData.value.projectPlanSubs.find(sub=>sub.projectSubId == item.id)
item.planSubId = subTemp.id
item.projectPlanId = subTemp.projectPlanId
item.projectId = subTemp.projectId
item.projectSubId = subTemp.projectSubId
item.projectSubShortName = subTemp.projectSubShortName
item.projectSubCode = subTemp.projectSubCode
item.mouldId = subTemp.mouldId
item.equipId = subTemp.equipId
item.blankDate = subTemp.blankDate
item.blankOwner = subTemp.blankOwner
item.twoDimDate = subTemp.twoDimDate
item.twoDimOwner = subTemp.twoDimOwner
item.threeDimDate = subTemp.threeDimDate
item.threeDimOwner = subTemp.threeDimOwner
item.equipList = equipInit.value.filter( rg => rg.mould_type_id == subTemp.mouldId)
}
})
}
const userInit = ref()
const equipInit = ref()
const mouldTypeList = ref()
onMounted(async () => {
//用户列表数据
userInit.value = await UserApi.getSimpleUserList()
// 模具类型下拉列表数据
mouldTypeList.value = await MouldTypeApi.getNoStatusSimpList()
// 设备信息下拉列表数据
equipInit.value = await EquipApi.getNoStatusSimpList()
// 获取库存信息
formData.value = await PlanApi.getPlan(query.id)
await handleInitPlanSub()
var projectInit = await ProjectOrderApi.getProjectOrder(formData.value.projectId)
var customerInit = await CustomerApi.getCustomer(projectInit.customerId)
var businessManInit = await UserApi.getUser(projectInit.businessMan)
formData.value.projectCode = projectInit.code
formData.value.projectStatus = projectInit.orderStatus
formData.value.customerName = customerInit?.name
formData.value.projectName = projectInit.projectName
formData.value.businessMan = businessManInit?.nickname
formData.value.projectStartTime = projectInit.projectStartTime
formData.value.projectEndTime = projectInit.projectEndTime
formData.value.businessLine = projectInit.businessLine
formData.value.property = projectInit.property
formData.value.isUrgency = projectInit.isUrgency
// 操作日志
let logParams = {
pageNo: 1,
pageSize: 99,
businessId: formData.value.projectId,
businessType: 'PROJECT_ORDER'
}
formData.value.operateLogs = (await getOperateLogPage(logParams)).list
if(formData.value.craftContent == null) {
formData.value.craftInfos = []
getIntDictOptions(DICT_TYPE.HELI_CRAFT).forEach(dict =>{
formData.value.craftInfos.push({id:dict.value,name:dict.label,startDate:'',endDate:'',owner:'',description:''})
})
}else{
formData.value.craftInfos = eval( formData.value.craftContent)
}
})
</script>
<style>
a {
color: #409eff;
text-decoration: none;
}
.upload-file-uploader {
margin-bottom: 10px;
display: inline-block;
margin-right: 20px;
}
.hl-card .alter-class {
position: relative;
border: solid 1px orange;
outline: solid 1px orange;
}
.el-form-item__content{
margin-left: 0px !important;
}
</style>