123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697 |
- <template>
- <hc-new-dialog v-model="isShow" :title="`${dataId ? '编辑' : '新增'}材料调差单`" is-footer-center is-table widths="80rem" @close="modalClose">
- <div class="hc-info-table-form">
- <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" label-width="auto">
- <hc-info-table>
- <tr>
- <hc-info-table-td is-title width="10%">
- <span>计量期:</span>
- <i class="i-iconoir-asterisk asterisk-icon" />
- </hc-info-table-td>
- <hc-info-table-td>
- <el-form-item prop="key1">
- <el-select v-model="formModel.meterPeriodId" placeholder="选择计量期" filterable block>
- <el-option v-for="item in measurement" :key="item.id" :label="item.periodName" :value="item.id" />
- </el-select>
- </el-form-item>
- </hc-info-table-td>
- <hc-info-table-td is-title width="10%">
- <span>调差期:</span>
- <i class="i-iconoir-asterisk asterisk-icon" />
- </hc-info-table-td>
- <hc-info-table-td>
- <el-form-item prop="contractPeriodId">
- <el-select v-model="formModel.contractPeriodId" placeholder="选择调差期" filterable block @change="adjustmentChange">
- <template v-for="item in adjustment" :key="item.id">
- <el-option v-if="item.approveStatus === 2" :label="item.periodNumber" :value="item.id" />
- </template>
- </el-select>
- </el-form-item>
- </hc-info-table-td>
- </tr>
- <tr>
- <hc-info-table-td is-title width="10%">
- <span>材料名称:</span>
- <i class="i-iconoir-asterisk asterisk-icon" />
- </hc-info-table-td>
- <hc-info-table-td>
- <el-form-item prop="contractMaterialId">
- <el-select v-model="formModel.contractMaterialId" placeholder="选择材料名称" filterable block :disabled="isNullES(formModel.meterPeriodId)" @change="materialNameChange">
- <el-option v-for="item in materialName" :key="item.id" :label="item.materialName" :value="item.id" />
- </el-select>
- </el-form-item>
- </hc-info-table-td>
- <hc-info-table-td is-title width="10%">
- <span>施工期市场价格:</span>
- <i class="i-iconoir-asterisk asterisk-icon" />
- </hc-info-table-td>
- <hc-info-table-td>
- <el-form-item prop="currentPrice">
- <el-input v-model="formModel.currentPrice" disabled>
- <template #suffix>元</template>
- <template #append>
- <el-button type="primary" class="hc-input-btn" color="#C99AD7" @click="realTimePriceClick">
- <hc-icon name="add" />
- <span>选择实时价格</span>
- </el-button>
- </template>
- </el-input>
- </el-form-item>
- </hc-info-table-td>
- </tr>
- <tr>
- <hc-info-table-td is-title width="10%">调差月份:</hc-info-table-td>
- <hc-info-table-td>
- <el-form-item>
- <el-date-picker v-if="isAdjustDate" v-model="formModel.adjustMonth" class="block" type="month" format="YYYY-MM" value-format="YYYY-MM" :disabled="isNullES(formModel.currentPriceId)" :disabled-date="disabledDate" />
- </el-form-item>
- </hc-info-table-td>
- <hc-info-table-td is-title width="10%">材料基准价格:</hc-info-table-td>
- <hc-info-table-td>
- <el-form-item>
- <el-input v-model="formModel.materialPrice" disabled>
- <template #suffix>元</template>
- </el-input>
- </el-form-item>
- </hc-info-table-td>
- </tr>
- <tr>
- <hc-info-table-td is-title width="10%">
- <span>材料数量:</span>
- <i class="i-iconoir-asterisk asterisk-icon" />
- </hc-info-table-td>
- <hc-info-table-td>
- <el-form-item prop="materialTotal">
- <el-input v-model="formModel.materialTotal" />
- </el-form-item>
- </hc-info-table-td>
- <hc-info-table-td is-title width="10%">价差幅度:</hc-info-table-td>
- <hc-info-table-td>
- <el-form-item>
- <el-input v-model="formModel.rangePriceRatio" disabled>
- <template #suffix>%</template>
- </el-input>
- </el-form-item>
- </hc-info-table-td>
- </tr>
- <tr>
- <hc-info-table-td is-title width="10%">调差金额:</hc-info-table-td>
- <hc-info-table-td width="auto" colspan="3">
- <el-form-item>
- <el-input v-model="formModel.adjustMoney" disabled />
- </el-form-item>
- </hc-info-table-td>
- </tr>
- <tr>
- <hc-info-table-td is-title width="10%">材料调差计算式:</hc-info-table-td>
- <hc-info-table-td width="auto" colspan="3">
- <el-form-item>
- <el-input v-model="formModel.adjustCalculation" type="textarea" :rows="4" resize="none" disabled />
- </el-form-item>
- </hc-info-table-td>
- </tr>
- </hc-info-table>
- </el-form>
- </div>
- <div class="hc-info-form-table">
- <el-divider border-style="dashed">
- <el-segmented v-model="tab_key" :options="['材料明细', '上传附件']" />
- </el-divider>
- <div v-if="tab_key === '材料明细'" class="loop-refresh-icon" @click="getMaterialDetail">
- <hc-icon name="loop-left" />
- </div>
- <div v-if="tab_key === '材料明细'" class="table-body">
- <hc-table :column="tableColumn1" :datas="tableData1" :index-style="{ width: 60 }" :loading="tableLoading1">
- <template #changeTotal="{ row }">
- <el-input v-model="row.changeTotal" @blur="changeTotalBlur(row)" />
- </template>
- </hc-table>
- </div>
- <div v-if="tab_key === '上传附件'" class="table-body">
- <div class="table-upload-attachment">
- <el-button @click="uploadAttachmentClick">点击上传附件</el-button>
- </div>
- <div class="table-upload">
- <hc-table :column="tableColumn2" :datas="tableData2" :index-style="{ width: 60 }" :loading="tableLoading2">
- <template #action="{ row, index }">
- <el-link type="primary" @click="previewFile(row)">预览</el-link>
- <el-link type="danger" @click="delFile(index)">删除</el-link>
- </template>
- </hc-table>
- </div>
- </div>
- </div>
- <template #footer>
- <el-button hc-btn @click="modalClose">取消</el-button>
- <el-button :loading="saveLoaing" hc-btn type="primary" @click="modalSave">保存</el-button>
- </template>
- </hc-new-dialog>
- <!-- 材料实时发布价格 -->
- <hc-new-dialog v-model="isRealTimePrice" ui="hc-realTime-price" title="材料实时发布价格" is-table :footer="false" widths="70rem" @close="realTimePriceClose">
- <div class="h-full">
- <div class="search-year-month mb-14px">
- <div class="w-48">
- <el-date-picker v-model="yearMonth" class="block" type="month" format="YYYY-MM" value-format="YYYY-MM" placeholder="调差月份" clearable @change="getMaterialCurrentPrice" />
- </div>
- </div>
- <div class="realTime-price-table">
- <hc-table :column="tableColumn3" :datas="tableData3" :index-style="{ width: 60 }" :loading="tableLoading3">
- <template #action="{ row }">
- <el-link v-if="formModel.currentPriceId === row.id" type="danger" @click="deselectTimePrice">取消选择</el-link>
- <el-link v-else type="primary" @click="rowRealTimePrice(row)">选择</el-link>
- </template>
- </hc-table>
- </div>
- </div>
- </hc-new-dialog>
- <!-- 上传附件 -->
- <hc-new-dialog v-model="isAttachment" title="上传文件" is-footer-center widths="30rem" @close="attachmentClose">
- <hc-form-upload v-model="formUploadFile" is-res :options="{ type: 'list', props: uploadFormProps, isArr: true, num: 0 }" @success="fileUploadSuccess" />
- <template #footer>
- <el-button hc-btn @click="attachmentClose">取消</el-button>
- <el-button hc-btn type="primary" @click="attachmentSave">确认</el-button>
- </template>
- </hc-new-dialog>
- </template>
- <script setup>
- import dayjs from 'dayjs'
- import { nextTick, ref, watch } from 'vue'
- import { useAppStore } from '~src/store'
- import { isNumberReg } from '~uti/tools'
- import mainApi from '~api/debit-pay/material/material'
- import { deepClone, formValidate, getArrValue, getObjValue, isNullES, newWindow } from 'js-fast-way'
- const props = defineProps({
- ids: {
- type: [String, Number],
- default: '',
- },
- })
- //事件
- const emit = defineEmits(['finish', 'close'])
- //初始变量
- const useAppState = useAppStore()
- const contractId = ref(useAppState.getContractId)
- const projectId = ref(useAppState.getProjectId)
- //双向绑定
- // eslint-disable-next-line no-undef
- const isShow = defineModel('modelValue', {
- default: false,
- })
- //监听
- const dataId = ref(props.ids)
- watch(() => props.ids, (id) => {
- dataId.value = id
- }, { deep: true })
- //监听
- watch(isShow, (val) => {
- if (val) detailsModalShow()
- })
- //分段器
- const tab_key = ref('材料明细')
- //表单数据
- const formRef = ref(null)
- const formModel = ref({})
- const formRules = {
- meterPeriodId: {
- required: true,
- trigger: 'blur',
- message: '请选择计量期',
- },
- contractPeriodId: {
- required: true,
- trigger: 'blur',
- message: '请选择调差期',
- },
- contractMaterialId: {
- required: true,
- trigger: 'blur',
- message: '请选择材料名称',
- },
- currentPrice: {
- required: true,
- trigger: 'blur',
- message: '请选择实时价格',
- },
- materialTotal: {
- required: true,
- trigger: 'blur',
- message: '请填写材料数量',
- },
- }
- //处理数据
- const detailsModalShow = () => {
- getPeriodMeasurement()
- getPeriodAdjustment()
- getMaterialName()
- //过去数据详情
- if (!isNullES(dataId.value)) {
- getDetailData()
- } else {
- isAdjustDate.value = true
- }
- }
- //获取数据详情
- const getDetailData = async () => {
- const { code, data, msg } = await mainApi.detail(dataId.value)
- if (code === 200) {
- const obj = getObjValue(data)
- formModel.value = obj
- tableData1.value = obj.details
- tableData2.value = obj.files
- try {
- adjustStartDate.value = dayjs(obj.startDate).format('YYYY-MM') ?? ''
- adjustEndDate.value = dayjs(obj.endDate).format('YYYY-MM') ?? ''
- } catch { /* empty */ }
- isAdjustDate.value = true
- } else {
- window.$message.error(msg ?? '数据异常')
- modalClose()
- }
- }
- //获取计量期
- const measurement = ref([])
- const getPeriodMeasurement = async () => {
- const { data } = await mainApi.periodMeasurement(contractId.value)
- measurement.value = getArrValue(data)
- }
- //获取调差期
- const adjustment = ref([])
- const getPeriodAdjustment = async () => {
- const { data } = await mainApi.periodAdjustment(contractId.value)
- adjustment.value = getArrValue(data)
- }
- //获取调差期号
- const adjustmentChange = () => {
- const { contractPeriodId } = formModel.value
- const info = adjustment.value.find((item) => item.id === contractPeriodId)
- formModel.value.contractPeriodNumber = info.periodNumber ?? ''
- }
- //获取材料名称
- const materialName = ref([])
- const getMaterialName = async () => {
- const { meterPeriodId } = formModel.value
- const { data } = await mainApi.materialName(contractId.value, meterPeriodId)
- materialName.value = getArrValue(data)
- }
- const materialNameChange = () => {
- const { contractMaterialId } = formModel.value
- const info = materialName.value.find((item) => item.id === contractMaterialId)
- isAdjusts.value = 0
- formModel.value.currentPriceId = null
- formModel.value.currentPrice = ''
- formModel.value.adjustMonth = null
- formModel.value.materialPrice = info.price ?? ''
- formModel.value.materialName = info.materialName ?? ''
- formModel.value.rangePriceRatio = ''
- formModel.value.adjustCalculation = ''
- formModel.value.materialValidityId = null
- tableData1.value = []
- tableLoading1.value = false
- }
- //禁用时间
- const isAdjustDate = ref(false)
- const disabledDate = (time) => {
- if (isNullES(adjustStartDate.value) || isNullES(adjustEndDate.value)) {
- return true
- }
- //处理时间
- const date = dayjs(time).format('YYYY-MM') //当前时间
- const isStart = dayjs(date).isSame(dayjs(adjustStartDate.value)) //是否等于开始时间
- const isEnd = dayjs(date).isSame(dayjs(adjustEndDate.value)) //是否等于结束时间
- const isBefore = dayjs(date).isBefore(dayjs(adjustEndDate.value)) //是否在结束时间之前
- const isAfter = dayjs(date).isAfter(dayjs(adjustStartDate.value)) //是否在开始时间之后
- //如果当前时间,大于等于开始时间,小于等于结束时间,则可用,否则禁用
- if ((isStart || isAfter) && (isEnd || isBefore)) {
- return false
- } else {
- return true
- }
- }
- //材料实时发布价格表格
- const yearMonth = ref(null)
- const tableColumn3 = [
- { key: 'nodeName', name: '有效时间' },
- { key: 'materialNumber', name: '材料编号', width: 100, align: 'center' },
- { key: 'materialName', name: '材料名称' },
- { key: 'unit', name: '材料单位', width: 100, align: 'center' },
- { key: 'currentPrice', name: '单价(元)', width: 100, align: 'center' },
- { key: 'action', name: '操作', width: 100, align: 'center' },
- ]
- const tableData3 = ref([])
- const tableLoading3 = ref(false)
- const getMaterialCurrentPrice = async () => {
- const { contractMaterialId } = formModel.value
- //发起请求
- tableLoading3.value = true
- const { data } = await mainApi.getMaterialCurrentPrice({
- yearMonth: yearMonth.value,
- materialId: contractMaterialId,
- contractId: contractId.value,
- })
- tableData3.value = getArrValue(data)
- tableLoading3.value = false
- }
- //材料实时发布价格
- const isRealTimePrice = ref(false)
- const realTimePriceClick = () => {
- const { contractMaterialId } = formModel.value
- if (isNullES(contractMaterialId)) {
- window.$message.warning('请先选择材料名称')
- return
- }
- isRealTimePrice.value = true
- getMaterialCurrentPrice()
- }
- //选择实时发布价格
- const adjustStartDate = ref('')
- const adjustEndDate = ref('')
- const isAdjusts = ref(1) //0不允许,1允许
- const rowRealTimePrice = async (row) => {
- const { id, currentPrice, startDate, endDate, materialValidityId } = row
- const { code, msg, data } = await mainApi.getMaterialRangePrice({
- priceId: id,
- })
- const { isAdjust, rangePriceRatio, adjustCalculation } = getObjValue(data)
- if (code !== 200) {
- window.$message.error(msg ?? '操作失败')
- return
- }
- isAdjustDate.value = false
- let startDate1 = '', endDate1 = ''
- try {
- startDate1 = dayjs(startDate).format('YYYY-MM') ?? ''
- endDate1 = dayjs(endDate).format('YYYY-MM') ?? ''
- } catch { /* empty */ }
- isAdjusts.value = isAdjust ?? 0
- formModel.value.startDate = startDate1
- formModel.value.endDate = endDate1
- formModel.value.currentPriceId = id
- formModel.value.currentPrice = currentPrice
- formModel.value.adjustMonth = startDate1
- formModel.value.rangePriceRatio = rangePriceRatio
- formModel.value.adjustCalculation = adjustCalculation
- formModel.value.materialValidityId = materialValidityId
- adjustStartDate.value = startDate1
- adjustEndDate.value = endDate1
- await nextTick(() => {
- isAdjustDate.value = true
- realTimePriceClose()
- })
- }
- //关闭材料实时发布价格
- const realTimePriceClose = () => {
- isRealTimePrice.value = false
- tableData3.value = []
- tableLoading3.value = false
- }
- //材料明细表格
- const tableColumn1 = [
- { key: 'meterNumber', name: '计量单编号' },
- { key: 'formNumber', name: '清单编号' },
- { key: 'formName', name: '清单名称' },
- { key: 'unit', name: '单位', width: 120, align: 'center' },
- { key: 'meterTotal', name: '计量数量', width: 120, align: 'center' },
- { key: 'changeTotal', name: '可调量', width: 120, align: 'center' },
- { key: 'adjustFactor', name: '调差系数', width: 120, align: 'center' },
- { key: 'adjustTotal', name: '调差数量', width: 120, align: 'center' },
- ]
- const tableData1 = ref([])
- const tableLoading1 = ref(false)
- const getMaterialDetail = async () => {
- const {
- contractPeriodId, contractMaterialId, currentPrice,
- materialValidityId, materialPrice, rangePriceRatio,
- } = formModel.value
- if (isNullES(contractPeriodId)) {
- window.$message.warning('请先选择调差期')
- } else if (isNullES(contractMaterialId)) {
- window.$message.warning('请先选择材料名称')
- } else if (isNullES(currentPrice) || isNullES(materialValidityId)) {
- window.$message.warning('请先选择实时价格')
- } else if (isNullES(materialPrice)) {
- window.$message.warning('请先选择材料基准价格不为空的')
- } else if (isNullES(rangePriceRatio)) {
- window.$message.warning('请先选择价差幅度不为空的')
- } else {
- //获取数据
- const { code, msg, data } = await mainApi.getMaterialDetail({
- contractMaterialId: contractMaterialId,
- contractPeriodId: contractPeriodId,
- projectId: projectId.value,
- contractId: contractId.value,
- currentPrice: currentPrice,
- materialPrice: materialPrice,
- materialValidityId: materialValidityId,
- rangePriceRatio: rangePriceRatio,
- })
- tableData1.value = getArrValue(data)
- if (code !== 200 && msg) {
- window.$message.error(msg)
- }
- }
- }
- //价格取消选择
- const deselectTimePrice = () => {
- isAdjustDate.value = false
- const form = deepClone(formModel.value)
- tableData1.value = []
- formModel.value = {
- id: form.id,
- meterPeriodId: form.meterPeriodId,
- materialPrice: form.materialPrice,
- materialName: form.materialName,
- contractPeriodId: form.contractPeriodId,
- contractMaterialId: form.contractMaterialId,
- contractPeriodNumber: form.contractPeriodNumber,
- materialTotal: form.materialTotal,
- }
- isAdjustDate.value = true
- realTimePriceClose()
- }
- //可调量失去焦点
- const changeTotalBlur = (row) => {
- const { meterTotal, changeTotal } = row
- if (!isNumberReg(changeTotal)) {
- row.changeTotal = meterTotal
- window.$message.warning('请输入正确的可调量')
- } else if (changeTotal > meterTotal) {
- row.changeTotal = meterTotal
- window.$message.warning('只能小于等于计量数量')
- }
- }
- //上传附件
- const tableColumn2 = [
- { key: 'fileName', name: '文件名称' },
- { key: 'fileSizeName', name: '文件大小', align: 'center' },
- { key: 'fileUpTime', name: '更新时间', align: 'center' },
- { key: 'fileSuffix', name: '文件类型', align: 'center' },
- { key: 'action', name: '操作', width: 120, align: 'center' },
- ]
- const tableData2 = ref([])
- const tableLoading2 = ref(false)
- //附件上传
- const formUploadFile = ref([])
- const uploadFormProps = {
- url: 'link',
- name: 'originalName',
- }
- //点击上传附件
- const isAttachment = ref(false)
- const uploadAttachmentClick = () => {
- isAttachment.value = true
- }
- //附件上传成功的回调
- const fileUploadSuccess = ({ res }, resolve) => {
- resolve(res)
- }
- //提交确定
- const attachmentSave = async () => {
- const list = formUploadFile.value
- for (let i = 0; i < list.length; i++) {
- tableData2.value.push({
- fileName: list[i].originalName,
- filePdfUrl: list[i].pdfUrl,
- fileSizeName: list[i].fileSizeName,
- fileSuffix: list[i].fileSuffix,
- fileType: list[i].fileType,
- fileUpTime: list[i].fileDate,
- fileUrl: list[i].link,
- })
- }
- attachmentClose()
- }
- //关闭上传附件
- const attachmentClose = () => {
- isAttachment.value = false
- formUploadFile.value = []
- }
- //预览附件
- const previewFile = ({ fileUrl }) => {
- if (isNullES(fileUrl)) {
- window.$message.warning('此文件已不存在,请删除后,重新上传')
- return
- }
- newWindow(fileUrl)
- }
- //预览附件
- const delFile = (index) => {
- tableData2.value.splice(index, 1)
- }
- //保存
- const saveLoaing = ref(false)
- const modalSave = async () => {
- const isForm = await formValidate(formRef.value)
- if (!isForm) return
- //处理表单
- const form = formModel.value
- form.details = tableData1.value
- form.files = tableData2.value
- form.projectId = projectId.value
- form.contractId = contractId.value
- //发起请求
- let res = {}
- if (isNullES(form.id)) {//新增
- res = await mainApi.add(form)
- } else {
- res = await mainApi.update(form)
- }
- //处理结果
- const { code, msg } = res
- if (code === 200) {
- window.$message.success('保存成功')
- modalClose()
- emit('finish')
- } else {
- window.$message.error(msg ?? '保存失败')
- }
- }
- //关闭弹窗
- const modalClose = () => {
- isShow.value = false
- emit('close')
- dataId.value = ''
- formModel.value = {}
- isAdjustDate.value = false
- tableData1.value = []
- tableLoading1.value = false
- tableData2.value = []
- tableLoading2.value = false
- tableData3.value = []
- tableLoading3.value = false
- }
- </script>
- <style lang="scss">
- .hc-info-table-form {
- position: relative;
- height: 357px;
- .el-form .hc-info-table-td .el-form-item {
- margin-bottom: 0;
- .el-form-item__error {
- display: none;
- }
- }
- .asterisk-icon {
- position: absolute;
- display: inline-block;
- color: red;
- font-size: 8px;
- }
- .el-input-group__append .hc-input-btn {
- background-color: var(--el-button-bg-color);
- border-radius: 0 3px 3px 0;
- font-weight: 400;
- color: #000000;
- }
- }
- .hc-info-form-table {
- position: relative;
- height: calc(100% - 382px);
- .el-divider {
- border-color: #008200;
- }
- .el-divider .el-divider__text {
- padding: 0 4px;
- }
- .el-divider .el-segmented {
- --el-segmented-color: #008200;
- --el-segmented-item-hover-color: #008200;
- --el-segmented-item-selected-bg-color: #008200;
- --el-segmented-item-hover-bg-color: transparent;
- border: 1px solid #008200;
- }
- .loop-refresh-icon {
- position: absolute;
- color: #008200;
- font-size: 26px;
- height: 32px;
- width: 32px;
- display: flex;
- align-items: center;
- justify-content: center;
- background: white;
- left: 10px;
- top: -14px;
- cursor: pointer;
- &:hover {
- color: #035903;
- }
- }
- .table-body {
- position: relative;
- height: calc(100% - 25px);
- .table-upload-attachment {
- position: relative;
- margin-bottom: 10px;
- .el-button {
- width: 100%;
- }
- }
- .table-upload {
- position: relative;
- height: calc(100% - 42px);
- }
- }
- }
- .el-overlay-dialog .el-dialog.hc-new-dialog.hc-modal-table.hc-realTime-price {
- --el-dialog-margin-top: 100px;
- height: calc(100% - 200px);
- .realTime-price-table {
- position: relative;
- height: calc(100% - 46px);
- }
- }
- </style>
|