for_client/src/views/tentative/detect/outside.vue

<template>
    <div class="hc-page-layout-box">
        <div :style="'width:' + leftWidth + 'px;'" class="hc-layout-left-box">
            <div class="hc-project-box">
                <div class="hc-project-icon-box">
                    <HcIcon name="stack"/>
                </div>
                <div class="ml-2 project-name-box">
                    <span class="text-xl text-cut project-alias">{{ projectInfo['projectAlias'] }}</span>
                    <div class="text-xs text-cut project-name">{{ projectInfo['name'] }}</div>
                </div>
            </div>
            <div class="hc-tree-box">
                <el-scrollbar>
                    <HcTreeData :autoExpandKeys="thirdTreeKeys" :contractId="contractId" :projectId="projectId"
                                type="rightTree" @menuTap="menuTapClick" @nodeTap="wbsElTreeClick"/>
                </el-scrollbar>
            </div>
            <!--左右拖动-->
            <div class="horizontal-drag-line" @mousedown="onmousedown"/>
        </div>
        <div class="hc-page-content-box">
            <HcCard :scrollbar="false" actionSize="lg">
                <template #header>
                    <HcTooltip keys="tentative_detect_third_add">
                        <el-button :disabled="!thirdTreeKeys" hc-btn type="primary" @click="addFormModalClick">
                            <HcIcon name="add-circle"/>
                            <span>新增</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_detect_third_edit">
                        <el-button :disabled="tableCheckedKeys.length <= 0" hc-btn @click="editFormModalClick">
                            <HcIcon name="edit"/>
                            <span>编辑</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_detect_third_copy">
                        <el-button :disabled="tableCheckedKeys.length <= 0" :loading="copyLoading" hc-btn
                                   @click="copyTableModalClick">
                            <HcIcon name="file-copy-2"/>
                            <span>复制</span>
                        </el-button>
                    </HcTooltip>
                    <HcTooltip keys="tentative_detect_third_del">
                        <el-button :disabled="tableCheckedKeys.length <= 0" hc-btn @click="delModalClick">
                            <HcIcon name="delete-bin-2"/>
                            <span>删除</span>
                        </el-button>
                    </HcTooltip>
                </template>
                <template #search>
                    <div class="w-40">
                        <el-input v-model="searchForm.queryName" clearable placeholder="送样人员"/>
                    </div>
                    <div class="w-40 ml-2">
                        <el-select v-model="searchForm.queryStatus" clearable placeholder="请选择是否合格">
                            <el-option v-for="item in qualifiedData" :key="item.value" :label="item['label']"
                                       :value="item['value']"/>
                        </el-select>
                    </div>
                    <div class="w-64 ml-2">
                        <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate"/>
                    </div>
                    <div class="w-72 ml-2">
                        <el-input v-model="searchForm.queryValue" clearable placeholder="请输入报告编号、委托编号"
                                  @keyup="keyUpEvent"/>
                    </div>
                    <div class="ml-2">
                        <el-button type="primary" @click="searchClick">
                            <HcIcon name="search-2"/>
                            <span>搜索</span>
                        </el-button>
                    </div>
                </template>
                <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck
                         @selection-change="tableSelection">
                         <template #status="{row}">
                            <span>{{ row.status===1?'合格':row.status===0?'不合格':'' }}</span>
                        </template>
                </HcTable>
                <template #action>
                    <HcPages :pages="searchForm" @change="pageChange"/>
                </template>
            </HcCard>
        </div>

        <!--新增/编辑-->
        <HcDialog :isClose="false" :show="addEditFormModal" :title="formModalTitle + ' 第三方试验信息'" isRowFooter
                  widths="70rem" @close="addEditFormModalClose">
            <template #extra>
                <HcNewSwitch :datas="tabTypeTab" :keys="tabTypeKey" @change="tabTypeChange"/>
            </template>
            <el-form v-if="tabTypeKey === 'tab1'" ref="addEditFormRef" :model="addEditFormModel"
                     :rules="addEditFormRules"
                     label-width="auto" size="large">
                <div class="hc-form-item">
                    <el-form-item label="合同段">
                        <el-select v-model="addEditFormModel.contractId" :teleported="false" block
                                   placeholder="请选择合同段" popper-class="select-popper">
                            <el-option v-for="item in projectInfo?.contractInfoList" :key="item.id"
                                       :label="item['name']" :value="item['id']"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="合格状态">
                        <el-radio-group v-model="addEditFormModel.status" size="large">
                            <el-radio :label="0">不合格</el-radio>
                            <el-radio :label="1">合格</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="委托编号" prop="entrustNo">
                        <el-input v-model="addEditFormModel.entrustNo"/>
                    </el-form-item>
                    <el-form-item label="样品名称">
                        <el-input v-model="addEditFormModel.materialName"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="委托单位" prop="entrustCompany">
                        <el-input v-model="addEditFormModel.entrustCompany"/>
                    </el-form-item>
                    <el-form-item label="样品编号">
                        <el-input v-model="addEditFormModel.specificationNumber"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="证书编号">
                        <el-input v-model="addEditFormModel.testingAgencyCertificateNo"
                                  placeholder="检测机构资质证书编号"/>
                    </el-form-item>
                    <el-form-item label="样品数量">
                        <el-input v-model="addEditFormModel.materialCount"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="取样人">
                        <el-input v-model="addEditFormModel.userName"/>
                    </el-form-item>
                    <el-form-item label="代表数量">
                        <el-input v-model="addEditFormModel.representativeCount"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="见证人">
                        <el-input v-model="addEditFormModel.witness"/>
                    </el-form-item>
                    <el-form-item label="检测机构">
                        <el-input v-model="addEditFormModel.inspectionOrganization"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="送样日期">
                        <el-date-picker v-model="addEditFormModel.sampleDeliveryDate" :clearable="false" class="block"
                                        type="date" value-format="YYYY-MM-DD"/>
                    </el-form-item>
                    <el-form-item label="产地">
                        <el-input v-model="addEditFormModel.placeOfOrigin"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="取样日期">
                        <el-date-picker v-model="addEditFormModel.samplingDate" :clearable="false" class="block"
                                        type="date" value-format="YYYY-MM-DD"/>
                    </el-form-item>
                    <el-form-item label="取样地点">
                        <el-input v-model="addEditFormModel.samplingLocation"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="检测日期">
                        <el-date-picker v-model="addEditFormModel.testDate" :clearable="false" class="block"
                                        type="date" value-format="YYYY-MM-DD"/>
                    </el-form-item>
                    <el-form-item label="生产厂家">
                        <el-input v-model="addEditFormModel.manufacturer"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="报告日期">
                        <el-date-picker v-model="addEditFormModel.reportDate" :clearable="false" class="block"
                                        type="date" value-format="YYYY-MM-DD"/>
                    </el-form-item>
                    <el-form-item label="生产批号">
                        <el-input v-model="addEditFormModel.batchNumber"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="报告编号" prop="reportNo">
                        <el-input v-model="addEditFormModel.reportNo"/>
                    </el-form-item>
                    <el-form-item label="工程部位">
                        <el-input v-model="addEditFormModel.projectPosition"/>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="试验类型">
                        <el-input v-model="addEditFormModel.trialType"/>
                    </el-form-item>
                    <el-form-item label="规格型号">
                        <el-input v-model="addEditFormModel.specificationModel"/>
                    </el-form-item>
                </div>
                <el-form-item label="委托单附件">
                    <FormItemUpload v-model="addEditFormModel.delegationOrderUrl" :action="'upload-file2'"/>
                </el-form-item>
                <el-form-item label="记录表附件">
                    <FormItemUpload v-model="addEditFormModel.recordTableUrl" :action="'upload-file2'"/>
                </el-form-item>
                <el-form-item label="报告单附件">
                    <FormItemUpload v-model="addEditFormModel.reportAttachmentUrl" :action="'upload-file2'"/>
                </el-form-item>
            </el-form>
            <el-form v-if="tabTypeKey === 'tab2'" :model="addEditFormModel" :rules="addEditFormRules"
                     label-position="top"
                     label-width="auto" size="large">
                <el-form-item label="检测依据">
                    <el-input v-model="addEditFormModel.testBasisText" :autosize="{ minRows: 3}" maxlength="1000"
                              placeholder="请输入检测依据" show-word-limit type="textarea"/>
                </el-form-item>
                <el-form-item label="评定标准">
                    <el-input v-model="addEditFormModel.evaluationCriteriaText" :autosize="{ minRows: 3}"
                              maxlength="1000" placeholder="请输入评定标准" show-word-limit type="textarea"/>
                </el-form-item>
                <el-form-item label="检测结论">
                    <el-input v-model="addEditFormModel.testConclusionText" :autosize="{ minRows: 3}" maxlength="1000"
                              placeholder="请输入检测结论" show-word-limit type="textarea"/>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="addEditFormModel.remarks" :autosize="{ minRows: 3}" maxlength="1000"
                              placeholder="请输入备注" show-word-limit type="textarea"/>
                </el-form-item>
            </el-form>
            <template #leftRowFooter>
                <el-button hc-btn type="primary" @click="linksSampleModalClick">
                    <HcIcon name="links"/>
                    <span>选择样品信息</span>
                </el-button>
            </template>
            <template #rightRowFooter>
                <el-button size="large" @click="addEditFormModalClose">
                    <HcIcon name="close"/>
                    <span>取消</span>
                </el-button>
                <el-button :loading="addEditFormLoading" hc-btn type="primary" @click="addEditFormClick">
                    <HcIcon name="check"/>
                    <span>确认</span>
                </el-button>
            </template>
        </HcDialog>

        <!--选择样品信息-->
        <HcDialog :show="linksSampleModal" isRowFooter isTable title="选择样品信息" widths="70%"
                  @close="linksSampleModalClose">
            <div class="hc-links-sample-modal-box">
                <div class="hc-links-sample-tree-box">
                    <el-scrollbar>
                        <TestTree :projectId="projectId"
                                  :tenantId="userInfo?.tenant_id"
                                  :wbsTempId="projectInfo?.referenceWbsTemplateIdTrial"
                                  :wbsType="2"
                                  @nodeTap="sampleTreeClick"/>
                    </el-scrollbar>
                </div>
                <div class="hc-links-sample-table-box">
                    <HcTable :column="linksSampleTableColumn" :datas="linksSampleTableData"
                             :isIndex="false" :loading="linksSampleTableLoading">
                        <template #action="{row}">
                            <el-button v-if="addEditFormModel.sampleId === row.id" plain size="small" type="primary">
                                已选择
                            </el-button>
                            <el-button v-else plain size="small" type="primary" @click="linksSampleRow(row)">选择
                            </el-button>
                        </template>
                    </HcTable>
                </div>
            </div>
            <template #leftRowFooter>
                <el-button size="large" @click="linksSampleModalClose">
                    <HcIcon name="close"/>
                    <span>取消</span>
                </el-button>
            </template>
            <template #rightRowFooter>
                <HcPages :pages="searchSampleForm" @change="pageSampleChange"/>
            </template>
        </HcDialog>

    </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import {useAppStore} from "~src/store";
import HcTreeData from "./components/HcTreeData.vue"
import FormItemUpload from "./components/FormItemUpload.vue"
import TestTree from "../material/components/TestTree.vue"
import {getStoreValue, setStoreValue} from '~src/utils/storage'
import dataApi from "~api/tentative/detect/third";
import samplingApi from "~api/tentative/material/sampling"
import {formValidate, getArrValue, arrToId} from "js-fast-way"
import {delMessage} from "~uti/tools";

//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const projectInfo = ref(useAppState.getProjectInfo);
const userInfo = ref(useAppState.getUserInfo);
const isCollapse = ref(useAppState.getCollapse)

//监听
watch(() => [
    useAppState.getCollapse
], ([Collapse]) => {
    isCollapse.value = Collapse
})

//自动展开缓存
const thirdTreeKeys = ref(getStoreValue('outsideTreeKeys'))

//渲染完成
onMounted(() => {
    const keys = thirdTreeKeys.value
    if (keys) {
        searchForm.value.nodeId = keys
        getTableData()
    }
})

//是否合格
const qualifiedData = ref([
    {label: '不合格', value: 0},
    {label: '合格', value: 1}
])

//搜索表单
const searchForm = ref({
    queryName: null, queryStatus: null, queryValue: null, startTime: null, endTime: null,
    current: 1, size: 20, total: 0
})

//树被点击
const nodeItemInfo = ref({})
const wbsElTreeClick = ({node, keys}) => {
    nodeItemInfo.value = node
    //缓存自动展开
    thirdTreeKeys.value = keys
    setStoreValue('outsideTreeKeys', keys)
    //改变搜索表单数据
    searchForm.value.nodeId = keys
    searchForm.value.current = 1;
    getTableData()
}
const menuTapClick = ({data}) => {
    if (data?.isData === 1) {
        window.$message.warning('当前节点下已有数据，不允许新增节点')
    }
}
//日期时间被选择
const betweenTime = ref(null)
const betweenTimeUpdate = ({arr}) => {
    betweenTime.value = arr
    if (arr.length > 0) {
        searchForm.value.startTime = arr[0]
        searchForm.value.endTime = arr[1]
    } else {
        searchForm.value.startTime = ''
        searchForm.value.endTime = ''
    }
}

//回车搜索
const keyUpEvent = (e) => {
    if (e.key === "Enter") {
        searchForm.value.current = 1;
        getTableData()
    }
}

//搜索
const searchClick = () => {
    searchForm.value.current = 1;
    getTableData()
}

//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//表格数据
const tableRef = ref(null)
const tableColumn = ref([
    {key: 'entrustNo', name: '委托编号', width: 150},
    {key: 'reportNo', name: '报告编号', width: 150},
    {key: 'specificationNumber', name: '样品编号', width: 150},
    {key: 'trialType', name: '试验类型', width: 150},
    {key: 'materialName', name: '样品名称', width: 150},
    {key: 'specificationModel', name: '规格型号', width: 150},
    {key: 'entrustCompany', name: '委托单位', width: 150},
    {key: 'inspectionOrganization', name: '检测机构', width: 150},
    {key: 'projectPosition', name: '工程部位', width: 150},
    {key: 'userName', name: '送样人', width: 100},
    {key: 'sampleDeliveryDate', name: '送样日期', width: 150},
    {key: 'reportDate', name: '报告日期', width: 150},
    {key: 'status', name: '检测结果', width: 150},
    {key: 'remarks', name: '备注', width: 180},
])
const tableData = ref([])

//获取数据
const tableLoading = ref(false)
const getTableData = async () => {
    tableLoading.value = true
    const {error, code, data} = await dataApi.queryPage({
        ...searchForm.value,
        projectId: projectId.value,
        contractId: contractId.value
    })
    //处理数据
    tableLoading.value = false
    if (!error && code === 200) {
        tableData.value = getArrValue(data['records'])
        searchForm.value.total = data.total || 0
    } else {
        tableData.value = []
        searchForm.value.total = 0
    }
}

//多选
const tableCheckedKeys = ref([]);
const tableSelection = (rows) => {
    tableCheckedKeys.value = rows
}

//新增/编辑
const addEditFormModal = ref(false)
const formModalTitle = ref('新增')
const addFormModalClick = () => {
    const {data} = nodeItemInfo.value
    if (data?.id) {
        addEditFormModel.value = {
            nodeId: data.id, trialType: data.nodeName, status: 1
        }
        formModalTitle.value = '新增'
        addEditFormModal.value = true
    } else {
        window.$message.warning('请先选择一个树节点')
    }
}

//编辑
const editFormModalClick = () => {
    const keys = tableCheckedKeys.value
    if (keys.length === 1) {
        addEditFormModel.value = keys[0]
        formModalTitle.value = '编辑'
        addEditFormModal.value = true
    } else if (keys.length > 1) {
        window?.$message?.warning('只能选择一条数据编辑')
    }
}

//关闭
const addEditFormModalClose = () => {
    addEditFormModal.value = false
    addEditFormModel.value = {}
}

//类型tab数据和相关处理
const tabTypeKey = ref('tab1')
const tabTypeTab = ref([
    {key: 'tab1', name: '基础信息'},
    {key: 'tab2', name: '检查结论'},
]);
const tabTypeChange = (item) => {
    tabTypeKey.value = item?.key
}

//新增/编辑 表单
const addEditFormRef = ref(null)
const addEditFormModel = ref({})
const addEditFormRules = {
    entrustNo: {
        required: true,
        trigger: 'blur',
        message: "请输入编号"
    },
    reportNo: {
        required: true,
        trigger: 'blur',
        message: "请输入报告编号"
    },
    entrustCompany: {
        required: true,
        trigger: 'blur',
        message: "请输入委托单位"
    }
}
const addEditFormRules2 = {}
//新增/编辑/复制弹窗 保存
const addEditFormLoading = ref(false)
const addEditFormClick = async () => {
    let validate
    if (addEditFormRef.value !== null) {
        validate = await formValidate(addEditFormRef.value)
    }

    if (validate) {
        if (formModalTitle.value === '复制') {
            await copyFormApi()
        } else {
            await submitFormApi()
        }
    } else if (validate === undefined) {
        window?.$message?.warning('请输入表单所需必填项')
    }
}

//新增、编辑 提交保存
const submitFormApi = async () => {
    addEditFormLoading.value = true
    const {error, code} = await dataApi.submitForm({
        ...addEditFormModel.value,
        projectId: projectId.value,
        contractId: contractId.value
    })
    //处理数据

    if (!error && code === 200) {
        window?.$message?.success('操作成功')
        addEditFormModal.value = false
        setTimeout(() => {
            addEditFormLoading.value = false
        }, 1000);
        // await getTableData()
        window?.location?.reload()  //刷新页面
    }
    addEditFormLoading.value = false
}

//复制
const copyTableModalClick = () => {
    const rows = tableCheckedKeys.value
    if (rows.length === 1) {
        addEditFormModel.value = rows[0]
        formModalTitle.value = '复制'
        addEditFormModal.value = true
    } else if (rows.length > 1) {
        const ids = arrToId(rows)
        batchCopyFormApi(ids)
    }
}

//复制提交保存
const copyFormApi = async () => {
    addEditFormLoading.value = true
    const {error, code} = await dataApi.copyData({
        ...addEditFormModel.value,
        projectId: projectId.value,
        contractId: contractId.value
    })
    //处理数据

    if (!error && code === 200) {
        window?.$message?.success('操作成功')
        addEditFormModal.value = false
        setTimeout(() => {
            addEditFormLoading.value = false
        }, 1000);
        await getTableData()
    }
    addEditFormLoading.value = false
}

//批量复制 提交保存
const copyLoading = ref(false)
const batchCopyFormApi = async (ids) => {
    copyLoading.value = true
    const {error, code} = await dataApi.copyData({
        projectId: projectId.value,
        contractId: contractId.value,
        ids: ids,
    })
    //处理数据
    copyLoading.value = false
    if (!error && code === 200) {
        window?.$message?.success('操作成功')
        await getTableData()
    }
}

//删除
const delModalClick = () => {
    delMessage(() => {
        tableRemoveData()
    })
}

//批量删除
const tableRemoveData = async () => {
    const rows = tableCheckedKeys.value
    if (rows.length > 0) {
        const ids = arrToId(rows)
        //删除请求
        const {error, code} = await dataApi.removeData({
            projectId: projectId.value,
            contractId: contractId.value,
            ids: ids,
        })
        //处理数据
        if (!error && code === 200) {
            window?.$message?.success('操作成功')
            // searchClick()
            window?.location?.reload()  //刷新页面
        }
    }
}

//关联数据搜索
const searchSampleForm = ref({
    current: 1, size: 20, total: 0
})

//关联进场材料
const linksSampleModal = ref(false)
const linksSampleModalClick = () => {
    searchSampleForm.value.current = 1;
    linksSampleTableData.value = []
    linksSampleModal.value = true
}

//树被点击
const sampleTreeClick = ({data}) => {
    searchSampleForm.value.nodeId = data['primaryKeyId'] || ''
    searchSampleForm.value.current = 1;
    getLinksSampleTable()
}

//分页被点击
const pageSampleChange = ({current, size}) => {
    searchSampleForm.value.current = current
    searchSampleForm.value.size = size
    getLinksSampleTable()
}

//关联进场材料数据
const linksSampleTableColumn = ref([
    {key: 'materialName', name: '取样名称'},
    {key: 'samplingDate', name: '取样日期'},
    {key: 'specificationNumber', name: '样品编号'},
    {key: 'specificationModel', name: '规格型号'},
    {key: 'materialCount', name: '试样数量'},
    {key: 'calculationUnit', name: '计算单位'},
    {key: 'proposedPosition', name: '拟用部位'},
    {key: 'representativeCount', name: '代表数量'},
    {key: 'userName', name: '取样人'},
    {key: 'action', name: '操作'},

])
const linksSampleTableData = ref([])

//获取关联数据
const linksSampleTableLoading = ref(false)
const getLinksSampleTable = async () => {
    const {nodeId} = searchSampleForm.value
    if (nodeId) {
        linksSampleTableLoading.value = true
        const {error, code, data} = await samplingApi.queryPage({
            ...searchSampleForm.value,
            projectId: projectId.value,
            contractId: contractId.value
        })
        //处理数据
        linksSampleTableLoading.value = false
        if (!error && code === 200) {
            linksSampleTableData.value = getArrValue(data['records'])
            searchSampleForm.value.total = data.total || 0
        } else {
            linksSampleTableData.value = []
            searchSampleForm.value.total = 0
        }
    } else {
        window?.$message?.warning('请先选择一个树节点')
    }
}

//确认关联
const linksSampleRow = (row) => {
    const form = addEditFormModel.value;
    form.materialName = row.materialName ?? ''                  //样品名称
    form.specificationNumber = row.specificationNumber ?? ''    //样品编号
    form.materialCount = row.materialCount ?? ''                //试样数量
    form.userName = row.userName ?? ''                          //取样人
    form.representativeCount = row.representativeCount ?? ''    //代表数量
    form.samplingDate = row.samplingDate ?? ''                  //取样日期
    form.samplingLocation = row.samplingLocation ?? ''          //取样地点
    form.batchNumber = row.batchNumber ?? ''                    //生产批号
    form.specificationModel = row.specificationModel ?? ''      //规格型号
    form.sampleId = row.id                                      //关联ID
    //更新数据
    addEditFormModel.value = form
}

//关闭关联进场材料
const linksSampleModalClose = () => {
    linksSampleModal.value = false
    linksSampleTableData.value = []
    searchSampleForm.value.current = 1;
}

//左右拖动，改变树形结构宽度
const leftWidth = ref(300);
const onmousedown = () => {
    const leftNum = isCollapse.value ? 142 : 272
    document.onmousemove = (ve) => {
        let diffVal = ve.clientX - leftNum;
        if (diffVal >= 260 && diffVal <= 700) {
            leftWidth.value = diffVal;
        }
    }
    document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
    }
}
</script>

<style lang="scss" scoped>
@import "../../../styles/tentative/detect/third.scss";
// :deep.dialog .select-popper{
//     position: fixed;
//     // top: 100px !important;
//     // left: 133px !important;
// }
</style>