BusinessBenchmark/src/components/assessment/evaluationUnitRatingDialog.vue

<template>
    <div class="evaluationUnitRatingDialog">
        <el-dialog title="单位考评评级详情" v-model="ratingdialogVisible" :fullscreen="true" :close-on-click-modal="false">
            <div class="evaluationUnitRatingBtn">
                <div class="collectSeach" :style="$utils.collectSeachSty()">
                    <div class="exceed">
                        <span class="exceedSpan">单位名称：</span>
                        <el-input v-model="resCompanyName" placeholder="请输入单位名称"></el-input>
                    </div>
                    <!-- <div class="exceed">
                        <span class="exceedSpan">业务属性：</span>
                        <el-select v-model="businessStr" placeholder="请选择业务属性" clearable>
                            <el-option v-for="item in binSectionoptions" :key="item.sectionCode"
                                :label="item.sectionName" :value="item.sectionCode">
                            </el-option>
                        </el-select>
                    </div> -->
                    <seachs @handleSeach="getSeachData" @handleRest="resetSeach"></seachs>
                    <!-- <el-button size="mini" color="#3B7AD1" icon="Operation" @click="dataGenerator"
                        style="margin-left: 10px">
                        <span>数据生成</span>
                    </el-button> -->
                    <el-button size="mini" color="#3B7AD1" icon="CopyDocument" @click="unitRuleFn" :disabled="rowObj.stage === '流程已结束'"
                        style="margin-left: 10px">
                        <span>计算评级</span>
                    </el-button>
                    <el-button type="success" icon="Upload" size="mini" @click="handleImport" :disabled="rowObj.stage === '流程已结束'">导入</el-button>
                    <el-button type="warning" icon="Download" size="mini" @click="handleExport">导出</el-button>
                </div>
                <!-- <div class="PeriodBtn" :style="$utils.PeriodBtnSty()">
                    <btns
                    :showImport="$utils.havePurview('evaluationUnitRate:oneLevel:import')"
                    :showExport="$utils.havePurview('evaluationUnitRate:oneLevel:export')"
                    :showSave="$utils.havePurview('evaluationUnitRate:oneLevel:save')"
                    :showAdd="$utils.havePurview('evaluationUnitRate:oneLevel:add')"
                    :showDelete="$utils.havePurview('evaluationUnitRate:oneLevel:delete')"
                    :disSave="changeDateSelect.length === 0 || changeDateSelect.length>1"
                    :disDelete="changeDateSelect.length === 0"
                    :disImport="false"
                    :disExport="false"
                    @handleAdd="handleAdd"
                    @handleEdit="handleEdit"
                    @handleDelete="handleDelete"
                    @handleImport="handleImport"
                    @handleExport="handleExport"
                    ></btns>
                </div> -->
                <div class="evaluationUnitRatingTableData">
                    <!-- @row-click="rowClickToggle" -->
                    <div class="tableMain">
                        <el-table :data="evaluationRatingDiaData" style="width: 100%" ref="tableSS"
                            :class="unitRatingTableSty()" @select="rowClick" @select-all="rowClick">
                            <el-table-column type="selection" label="操作" align="center"></el-table-column>
                            <el-table-column type="index" label="序号" align="center"></el-table-column>
                            <el-table-column label="考评单位" width="180">
                                <template #default="scope">
                                    <el-tooltip class="box-item" effect="customized"
                                        :content="scope.row.organizationShortName" placement="right">
                                        <span class="tooltipCC">{{ scope.row.organizationShortName }}</span>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column label="业务板块" prop="binSectionName" />
                            <el-table-column label="考评年度" prop="year" />
                            <el-table-column label="生产经营评级" align="center">
                                <el-table-column label="年度安全环保评级" width="150">
                                    <template #default="scope">
                                        <el-input-number v-model="scope.row.safetyEnvProtection" :min="0" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="否决事项" width="140">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.veto" placeholder="请选择" size="large"
                                            style="width: 100px">
                                            <el-option v-for="item in isPgoptions" :key="item.value" :label="item.label"
                                                :value="item.value" />
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column label="净利润" width="150">
                                    <template #default="scope">
                                        <el-input-number v-model="scope.row.netProfit" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="经营业绩考核综合得分%" width="180" align="center">
                                    <template #default="scope">
                                        <el-input-number v-model="scope.row.compositeScore" :min="0" :max="100" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="生产经营评级" prop="scjyRate" width="120" />
                            </el-table-column>
                            <el-table-column label="前期评级" align="center">
                                <el-table-column label="年度项目进度目标完成率" width="150">
                                    <template #default="scope">
                                        <el-input-number v-model="scope.row.annualTarget" :min="0" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="先进性指标考核得分有无加分" width="150">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.bonusPoint" placeholder="请选择" size="large"
                                            style="width: 100px">
                                            <el-option v-for="item in isPgoptions" :key="item.value" :label="item.label"
                                                :value="item.value" />
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column label="前期评级" prop="qqRate" width="100" />
                            </el-table-column>
                            <el-table-column label="基建评级" align="center">
                                <el-table-column label="基建工程综合得分排名" width="160">
                                    <template #default="scope">
                                        <el-input-number v-model="scope.row.compositeScoreRaking" :min="0" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="基建工程项目等级" width="150">
                                    <template #default="scope">
                                        <el-input-number v-model="scope.row.projectLevel" :min="0" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="基建评级" prop="jjRate" width="100" />
                            </el-table-column>
                            <el-table-column label="综合得分" prop="score" />
                            <el-table-column label="年度评级" prop="yearRate" />
                            <!-- fixed="right" align="center" -->
                            <el-table-column label="操作" width="160">
                                <template #default="scope">
                                    <span class="indicitem" @click="unitRule(scope.row)">计算评级</span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="page.currentPage" :page-size="page.pagesize"
                            layout="total, prev, pager, next, jumper" :total="page.total">
                        </el-pagination>
                    </div>
                    <div class="tableSeach">
                        <div class="seachType" v-for="item in titleMsgArr" :key="item.isName"
                            :class="item.showClick ? 'seachTypeCha' : ''" @click="changType(item)">
                            <img :src="item.img" alt="" v-if="!item.showClick">
                            <img :src="item.clickImg" alt="" v-else>
                            <p :style="item.showClick ? 'color: #3B7AD1' : ''">{{ item.isName }}</p>
                        </div>
                    </div>
                </div>
                <el-dialog :title="title" custom-class="startToDia" v-model="dialogVisible" width="600px"
                    :close-on-click-modal="false">
                    <div class="periodFrom">
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
                            :validate-on-rule-change="false">
                            <el-form-item label="考评单位" prop="companyRuleF">
                                <el-select v-model="ruleForm.companyRuleF" placeholder="请选择考评单位" :disabled="isSave">
                                    <el-option v-for="item in companyData" :key="item.organizationId"
                                        :label="item.organizationShortName" :value="item.organizationId">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="业务属性" prop="binSection">
                                <el-select v-model="ruleForm.binSection" placeholder="请选择业务属性">
                                    <el-option v-for="item in binSectionoptions" :key="item.sectionCode"
                                        :label="item.sectionName" :value="item.sectionCode">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="年份" prop="year">
                                <el-date-picker v-model="ruleForm.year" :disabled="isSave" type="year" value-format="YYYY"
                                    placeholder="请选择年份" />
                            </el-form-item>
                            <el-form-item label="生成经营评级">
                                <el-select v-model="ruleForm.scjyRate" placeholder="请选择评级">
                                    <el-option v-for="item in ratingArr" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="前期评级">
                                <el-select v-model="ruleForm.qqRate" placeholder="请选择评级">
                                    <el-option v-for="item in ratingArr" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="基建评级">
                                <el-select v-model="ruleForm.jjRate" placeholder="请选择评级">
                                    <el-option v-for="item in ratingArr" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="年度评级">
                                <el-select v-model="ruleForm.yearRate" placeholder="请选择评级">
                                    <el-option v-for="item in ratingArr" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="描述" prop="remark">
                                <el-input v-model="ruleForm.remark" :rows="5" type="textarea" placeholder="请输入描述">
                                </el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="saveevaluaStart('ruleForm')">确 定</el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="ratingdialogVisible = false">取 消</el-button>
                </span>
            </template>
        </el-dialog>
        <import-dailog ref="importPage" @successImport="successImport"></import-dailog>
    </div>
</template>

<script>
import importDailog from '../importPage/importDailog.vue'
import btns from '../elbuttonS.vue'
import seachs from '../seachGroup.vue'
import {
    saveAs
} from 'file-saver'
import sectionDef from '../../assets/benchmarkImg/sectionDef.png'
import sectionCha from '../../assets/benchmarkImg/sectionCha.png'
import {
    apiGetExportMsg,
    apiGetorganizationratinglist,
    apiorganizationratinggrade,
    apiGetorganizationratingsave,
    apiGetOrganizationListAll,
    apiGetorganizationsectionList,
    apiPostorganizationratingDelete,
    apiGetorganizationratingGenerateRating
} from '../../api/api'
export default {
    components: {
        importDailog,
        btns,
        seachs
    },
    data() {
        return {
            dialogVisible: false,
            ratingdialogVisible: false,
            isSave: false,
            title: '',
            evalradio: {},
            changeDateSelect: [],
            evaluationRatingDiaData: [],
            companyData: [],
            binSectionoptions: [],
            ruleForm: {
                companyRuleF: '',
                year: '',
                binSection: '',
                scjyRate: '',
                qqRate: '',
                jjRate: '',
                yearRate: '',
                remark: ''
            },
            rules: {
                companyRuleF: [{
                    required: true,
                    message: '请选择考评单位',
                    trigger: 'change'
                }],
                binSection: [{
                    required: true,
                    message: '请选择考评单位',
                    trigger: 'change'
                }],
                year: [{
                    required: true,
                    message: '请选择年份',
                    trigger: 'change'
                }]
            },
            page: {
                pagesize: 12,
                currentPage: 1,
                total: 0
            },
            resCompanyName: '',
            businessStr: '',
            monthArr: [],
            ratingArr: [],
            winPix: window.devicePixelRatio,
            innerWidth: window.innerWidth,
            rowObj: {},
            titleMsgArr: [],
            isPgoptions: []
        }
    },
    created() {
        this.ratingArr = [{
            label: 'A级',
            value: 'A'
        },
        {
            label: 'B级',
            value: 'B'
        },
        {
            label: 'C级',
            value: 'C'
        }
        ]
        this.isPgoptions = [{
            value: '1',
            label: '是'
        },
        {
            value: '0',
            label: '否'
        }
        ]
    },
    methods: {
        init(row) {
            this.$refs.importPage.year = row.year
            this.ratingdialogVisible = true
            this.rowObj = row
            this.getOrganizetionData()
            this.getDataDictionary()
        },
        unitRule(row) {
            let that = this
            let params = [row]
            apiorganizationratinggrade(params).then(res => {
                if (res && res.code === 200) {
                    that.$message({
                        message: '计算评级' + res.message,
                        type: 'success'
                    });
                    that.getevaluRatingDiaList(that.rowObj)
                }
            })
        },
        unitRuleFn() {
            let that = this
            let params = that.evaluationRatingDiaData
            apiorganizationratinggrade(params).then(res => {
                if (res && res.code === 200) {
                    that.$message({
                        message: '计算评级' + res.message,
                        type: 'success'
                    });
                    that.getevaluRatingDiaList(that.rowObj)
                }
            })
        },
        // 查询列表页面
        getevaluRatingDiaList(row) {
            let that = this
            that.evaluationRatingDiaData = []
            let params = {
                pageNum: that.page.currentPage,
                pageSize: that.page.pagesize,
                organizationYearRatingId: row.id,
                organizationShortName: that.resCompanyName,
                binSection: that.businessStr,
                // binSection: 'HD',
                year: row.year
            }
            apiGetorganizationratinglist(params).then(datas => {
                if (datas && datas.data.records) {
                    that.evaluationRatingDiaData = datas.data.records
                    that.page.total = datas.data.total
                }
            })
        },
        dataGenerator() {
            let that = this
            let params = {
                id: that.rowObj.id,
                year: that.rowObj.year
            }
            apiGetorganizationratingGenerateRating(params).then(datas => {
                if (datas && datas.success) {
                    that.getevaluRatingDiaList(that.rowObj)
                }
            })
        },
        //查询单位数据
        getOrganizetionData() {
            let that = this
            let params = {
                evaluationCycle: 'NDKP',
                organizationType: 'DWKP'
            }
            apiGetOrganizationListAll(params).then(datas => {
                if (datas && datas.data) {
                    that.companyData = datas.data
                }
            })
        },
        // 查询属性和阶段
        getDataDictionary() {
            let that = this
            let params = {
                organizationYearRatingId: that.rowObj.id
            }
            that.titleMsgArr = []
            apiGetorganizationsectionList(params).then(datas => {
                if (datas && datas.data) {
                    // that.binSectionoptions = datas.data
                    datas.data.forEach(item => {
                        let obj = {
                            id: item.id,
                            isName: item.sectionName === '新能源(光电)' ? '新能源光电' : item
                                .sectionName === '新能源(风电)' ? '新能源风电' : item.sectionName,
                            isNameEn: item.sectionCode,
                            showClick: false,
                            isClass: 'sectionDef',
                            img: sectionDef,
                            isClassC: 'sectionCha',
                            clickImg: sectionCha
                        }
                        that.titleMsgArr.push(obj)
                    })
                    that.titleMsgArr[0].showClick = true
                    that.businessStr = that.titleMsgArr[0].isNameEn
                    that.$refs.importPage.binSection = that.titleMsgArr[0].isNameEn
                    that.getevaluRatingDiaList(this.rowObj)

                }
            })
        },
        changType(data) {
            this.$refs.importPage.binSection = data.isNameEn
            this.titleMsgArr.forEach(it => {
                it.showClick = false
                if (it.isName === data.isName) {
                    it.showClick = true
                    this.businessStr = it.isNameEn
                }
            })
            this.getevaluRatingDiaList(this.rowObj)
        },
        saveevaluaStart(formName) {
            let that = this
            that.$refs[formName].validate((valid) => {
                if (valid) {
                    that.saveAndEditIndicatorData()
                }
            });
        },
        //新增/修改考评启动数据
        saveAndEditIndicatorData() {
            let that = this
            let orgName = ''
            this.companyData.forEach(item => {
                if (item.organizationId === that.ruleForm.companyRuleF) {
                    orgName = item.organizationShortName
                }
            })
            let params = {
                organizationId: that.ruleForm.companyRuleF,
                organizationShortName: orgName,
                year: that.ruleForm.year,
                binSection: that.ruleForm.binSection,
                scjyRate: that.ruleForm.scjyRate,
                qqRate: that.ruleForm.qqRate,
                jjRate: that.ruleForm.jjRate,
                yearRate: that.ruleForm.yearRate,
                remark: that.ruleForm.remark
            }
            if (that.isSave) {
                params.id = that.evalradio.id
            }
            apiGetorganizationratingsave(params).then(datas => {
                if (!datas.success) {
                    that.$message({
                        message: datas.message,
                        type: 'error'
                    });
                } else {
                    if (!that.isSave) {
                        that.$message({
                            message: '单位绩效考核评级新增成功',
                            type: 'success'
                        });
                    } else {
                        that.$message({
                            message: '单位绩效考核评级修改成功',
                            type: 'success'
                        });
                    }
                    that.dialogVisible = false
                    that.changeDateSelect = []
                    that.getevaluRatingDiaList(this.rowObj)
                }
            })
        },
        getSeachData() {
            this.getevaluRatingDiaList(this.rowObj)
        },
        resetSeach() {
            this.resCompanyName = ''
            this.getevaluRatingDiaList(this.rowObj)
        },
        handleSizeChange(val) {
            this.page.pagesize = val
            this.getevaluRatingDiaList(this.rowObj)
        },
        handleCurrentChange(val) {
            this.page.currentPage = val
            this.getevaluRatingDiaList(this.rowObj)
        },
        rowClick(selection, row) {
            this.changeDateSelect = selection
        },
        // rowClickToggle(row) {
        //     this.$refs.tableSS.toggleRowSelection(row)
        // },
        handleAdd() {
            this.dialogVisible = true
            this.isSave = false
            this.title = '新建单位绩效考核评级'
            this.$nextTick(() => {
                this.ruleForm = {
                    companyRuleF: '',
                    year: '',
                    binSection: '',
                    scjyRate: '',
                    qqRate: '',
                    jjRate: '',
                    yearRate: '',
                    remark: ''
                }
            })
        },
        handleEdit() {
            this.dialogVisible = true
            this.isSave = true
            this.title = '修改单位绩效考核评级'
            this.evalradio = this.changeDateSelect[0]
            this.ruleForm = {
                companyRuleF: this.evalradio.organizationId,
                year: this.evalradio.year,
                binSection: this.evalradio.binSection,
                scjyRate: this.evalradio.scjyRate,
                qqRate: this.evalradio.qqRate,
                jjRate: this.evalradio.jjRate,
                yearRate: this.evalradio.yearRate,
                remark: this.evalradio.remark
            }
        },
        //删除
        handleDelete() {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let that = this
                let paramsArr = []
                that.changeDateSelect.forEach(it => {
                    paramsArr.push(it.id)
                })
                apiPostorganizationratingDelete(paramsArr.join(',')).then(datas => {
                    that.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    that.getevaluRatingDiaList(this.rowObj)
                    that.changeDateSelect = []
                })
            })
        },
        handleImport() {
            this.$refs.importPage.upload.title = "单位考评评级详情导入"
            this.$refs.importPage.upload.open = true
            this.$refs.importPage.upload.url = `/organization-rating/importExcel`
            this.$refs.importPage.upload.url = `/organization-rating/importExcel`
        },
        handleExport() {
            let that = this
            let url = 'organization-rating/exportExcel'
            let params = {
                organizationYearRatingId: that.rowObj.id,
                binSection: that.businessStr,
                year: that.rowObj.year
            }
            apiGetExportMsg(url, params).then(datas => {
                let blob = new Blob([datas])
                saveAs(blob, '单位考评评级详情导出.xlsx')
            }).catch((r) => {
                console.error(r)
            })
        },
        successImport(val) {
            this.getevaluRatingDiaList(this.rowObj)
        },
        unitRatingTableSty() {
            if (this.winPix === 1.25 || this.innerWidth < 1800) {
                return 'unitRating125Table'
            } else {
                return 'unitRating100Table'
            }
        }
    }
}
</script>

<style lang="less">
.evaluationUnitRatingDialog {
    .el-overlay {
        .el-dialog {

            // margin-top: 7vh;
            .el-dialog__body {
                padding: 0 20px !important;

                .evaluationUnitRatingBtn {
                    .collectSeach {
                        display: flex;
                        padding: 24px 20px;
                        border-bottom: 1px solid#D6DBEA;

                        .exceed {
                            display: flex;

                            .exceedSpan {
                                width: 100px;
                                height: 12px;
                                font-size: 14px;
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                                color: #8991B0;
                                line-height: 12px;
                                margin-top: 14px;
                            }

                            .el-input {
                                margin-right: 10px;
                                height: 40px;

                                .el-input__inner {
                                    height: 40px;
                                }

                                .el-input__suffix {
                                    .el-select__caret {
                                        line-height: 30px;
                                    }
                                }
                            }
                        }

                        .el-select {
                            margin-right: 10px;

                            .el-input__inner {
                                height: 30px;
                            }

                            .el-input__suffix {
                                .el-select__caret {
                                    line-height: 30px;
                                }
                            }
                        }
                    }

                    span {
                        font-size: 14px;
                    }

                    .PeriodBtn {
                        display: flex;
                        justify-content: flex-end;
                        padding: 20px 0;
                    }

                    .el-button {
                        height: 30px;
                        // width:100px;
                        padding: 0 20px;

                        // padding-top: 8px;
                        span {
                            margin: 0;
                        }
                    }

                    .evaluationUnitRatingTableData {
                        display: flex;
                        width: 100%;
                        margin-top: 20px;

                        .tableMain {
                            width: calc(100% - 100px);

                            .unitRating125Table {
                                .el-table__body-wrapper {
                                    height: 62vh !important;
                                }
                            }

                            .unitRating100Table {
                                .el-table__body-wrapper {
                                    height: 64vh !important;
                                }
                            }

                            .el-table {
                                .el-input__inner {
                                    height: 30px !important;
                                }

                                .el-radio__label {
                                    display: none;
                                }

                                .tooltipCC {
                                    width: 300px !important;
                                    display: inline-block;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }

                                .tooltipCCDes {
                                    width: 50px;
                                    display: inline-block;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }

                                .indicitem {
                                    color: #409EFF;
                                    font-size: 12px;
                                    margin-right: 20px;
                                    cursor: pointer;

                                    &:hover {
                                        text-decoration: underline;
                                    }
                                }
                            }

                            .el-pagination {
                                margin-top: 20px;
                                text-align: end;
                                position: relative;
                            }
                        }

                        .tableSeach {
                            width: 83px;
                            height: 70vh;
                            overflow-y: auto;
                            overflow-x: hidden;
                            margin-left: 10px;
                            border: 1px solid #D6DBEA;
                            padding: 5px 0;
                            border-radius: 5px;

                            .seachType {
                                width: 78px;
                                height: 78px;
                                cursor: pointer;
                                border-left: 3px solid transparent;

                                img {
                                    margin-top: 17px;
                                    margin-left: 27px;
                                }

                                p {
                                    text-align: center;
                                    font-size: 14px;
                                }
                            }

                            .seachTypeCha {
                                background: #E6EBF5;
                                cursor: pointer;
                                border-left: 3px solid #3B7AD1;
                            }
                        }

                    }

                    .el-overlay {
                        .startToDia {
                            .el-dialog__body {
                                padding: 30px 60px 30px 20px !important;

                                .periodFrom {

                                    .el-select,
                                    .el-input {
                                        width: 100%;
                                    }

                                    .el-input {
                                        height: 30px;
                                    }
                                }

                                .flowSty {
                                    width: 100%;
                                    height: 70vh;
                                }
                            }
                        }
                    }
                }
            }

            .el-dialog__footer {
                .dialog-footer {
                    display: flex;
                    justify-content: center;

                    .el-button {
                        width: 180px !important;
                        height: 40px !important;
                    }
                }
            }
        }
    }

}
</style>