merchant_feedov_web/src/views/flowPool/rearFlowPool/index.vue

<!-- 后流量池 -->
<template>
  <div class="container">
    <div class="head-title">
      <span>{{ route.meta.title }} </span>
      <span class="head-title-right">
                <!-- <a-popconfirm :content="$t('lotCard.confirmTitleCancelOrder')" :ok-text="$t('form.Confirm')"
                    :cancel-text="$t('form.Cancel')" @ok="handleUnsubscribeDialog(record)">
                    <a-button type="primary">{{ $t('lotCard.titleCancelOrder') }}</a-button>
                </a-popconfirm> -->
            </span>
    </div>
    <!-- 搜索条件区 -->
    <div class="search-section">
      <a-form :model="searchForm" layout="inline">
        <a-form-item field="label" :label="$t('flowPool.label')">
          <a-input v-model="searchForm.label" :placeholder="$t('lotCard.please') + $t('flowPool.label')"
                   allow-clear/>
        </a-form-item>
        <a-form-item field="label" :label="$t('flowPool.status')">
          <a-select v-model="value" :style="{width:'240px'}" :placeholder="$t('flowPool.flowPoolStatus')">
            <a-option v-for="item of trafficList" :value="item.id" :label="item.label"/>
          </a-select>
        </a-form-item>
        <a-form-item field="label" :label="$t('flowPool.operator')">
          <a-select v-model="value" :style="{width:'240px'}" :placeholder="$t('flowPool.operatorName')">
            <a-option v-for="item of sourceList" :value="item.id" :label="item.label"/>
          </a-select>
        </a-form-item>
        <a-form-item field="label" :label="$t('flowPool.start_time')">
          <a-date-picker style="width: 200px;" :placeholder="$t('flowPool.start_timeName')"/>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSearch">{{ $t('form.Search') }}</a-button>
            <a-button @click="resetSearch">{{ $t('form.Reset') }}</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </div>

    <div class="audit-btn">
      <a-button @click="dictShowModel(1, null)" type="text" v-if="role == 1">
        <template #icon>
          <icon-plus-circle/>
        </template>
        <template #default>
          {{ $t('form.Add') }}
        </template>
      </a-button>
    </div>

    <a-table row-key="id" :data="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
             @page-change="evChangePage">
      <template #id="{ record }">
        <!-- 修改 -->
        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(2, record)"
           v-if="role == 1">{{
            $t('form.Edit')
          }}</a>
        <!-- 取消订单-退订 -->
        <!-- <a-popconfirm :content="$t('lotCard.confirmTitleCancelOrder')" :ok-text="$t('form.Confirm')"
            :cancel-text="$t('form.Cancel')" @ok="handleUnsubscribeDialog(record)">
            <a class="a-link" href="javascript:;" style="margin-right: 1rem" >{{ $t('lotCard.titleCancelOrder')
                }}</a>
        </a-popconfirm> -->
        <!-- 删除 -->
        <a-popconfirm :content="$t('form.Delete')" :ok-text="$t('form.Confirm')"
                      :cancel-text="$t('form.Cancel')" @ok="handleDel(record.id)" v-if="role == 1">
          <a class="a-link" href="javascript:;" style="margin-right: 1rem">{{
              $t('form.Delete')
            }}</a>
        </a-popconfirm>
        <!-- 导卡 -->
        <!-- <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(3, record)">{{
            $t('flowPool.exportCard') }}</a> -->
      </template>

    </a-table>


    <!-- 新增弹框 -->
    <a-modal :title="typeCurrent == 1 ? $t('form.Add') : typeCurrent == 2 ? $t('form.Edit') : $t('flowPool.Detail')"
             v-model:visible="visible" @onCancel="resetForm" centered :maskClosable="false" :footer="null" width="55%">

      <a-tabs v-model:active-key="activeKey">
        <a-tab-pane key="1" :title="$t('flowPool.infoTabs')">
          <a-form ref="formRef" :rules="rules" :model="formState" @submit="handleSubmit"
                  style="width: 620px;">
            <a-form-item :label="$t('flowPool.label')" field="label">
              <a-input v-model="formState.label"
                       :placeholder="$t('form.PleaseEnterThe') + $t('flowPool.label')"/>
            </a-form-item>
            <a-form-item :label="$t('flowPool.source')" field="source">
              <a-select v-model="formState.source"
                        :placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.source')">
                <a-option v-for=" item in sourceList" :key="item.id" :value="item.value">{{
                    item.label
                  }}
                </a-option>
              </a-select>
            </a-form-item>
            <a-form-item :label="$t('flowPool.trafficPoolStatus')" field="status">
              <a-select v-model="formState.status"
                        :placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.trafficPoolStatus')">
                <a-option v-for=" item in trafficList" :key="item.id" :value="item.value">{{
                    item.label
                  }}
                </a-option>
              </a-select>
            </a-form-item>
            <!-- <a-form-item :label="$t('flowPool.trafficPoolType')" field="traffic_pool_type">
                <a-select v-model="formState.traffic_pool_type"
                    :placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.trafficPoolType')">
                    <a-option v-for=" item in typeList" :key="item.id" :value="item.value">{{ item.label
                        }}</a-option>
                </a-select>
            </a-form-item> -->
            <a-form-item :label="$t('flowPool.simRariff')" field="simTariffId">
              <a-select v-model="formState.simTariffId"
                        :placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.simRariff')">
                <a-option v-for=" item in tariffIdList" :key="item.id" :value="item.value">{{
                    item.label
                  }}
                </a-option>
              </a-select>
            </a-form-item>
            <a-form-item :label="$t('flowPool.expireTime')" field="expireTime">
              <a-date-picker v-model="formState.expireTime" show-time
                             :time-picker-props="{ defaultValue: '09:09:06' }" format="YYYY-MM-DD HH:mm:ss"/>
            </a-form-item>
            <a-form-item :label="$t('flowPool.poolSize')" field="size">
              <a-input v-model="formState.size" :placeholder="$t('flowPool.poolSize')"/>
              <a-select v-model="formState.sizeTpye" style="width: 80px; margin-left: 8px;">
                <a-option value="KB">KB</a-option>
                <a-option value="MB">MB</a-option>
                <a-option value="GB">GB</a-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" html-type="submit" style="margin-right: 10px;">{{
                  $t('form.Confirm')
                }}
              </a-button>
              <a-button @click="resetForm">{{ $t('form.Cancel') }}</a-button>
            </a-form-item>
          </a-form>
        </a-tab-pane>
        <!--        <a-tab-pane key="2" :title="$t('flowPool.warnTabs')">-->
        <!--          <a-form :model="formWarning" direction="inline">-->
        <!--            <div class="form-pool-tit">-->
        <!--              <div class="pool-icon"></div>-->
        <!--              客户端·池预警设置-->
        <!--            </div>-->
        <!--            <a-form-item field="totalDosage" tooltip="请输入" label="总用量占比">-->
        <!--              <a-input-number v-model="formWarning.totalDosage" :style="{ width: '320px' }"-->
        <!--                              placeholder="请输入" allow-clear hide-button>-->
        <!--                <template #suffix>-->
        <!--                  %-->
        <!--                </template>-->
        <!--              </a-input-number>-->
        <!--              <a-checkbox value="1" v-model="formWarning.totalDosageCheck">达量预警</a-checkbox>-->
        <!--            </a-form-item>-->
        <!--            <a-form-item field="stoppagePool" label="达量停机">-->
        <!--              <a-select v-model="formWarning.stoppagePool" placeholder="请选择" :style="{ width: '320px' }"-->
        <!--                        allow-clear>-->
        <!--                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"-->
        <!--                          :label="item.label"/>-->
        <!--              </a-select>-->
        <!--              <a-checkbox value="1" v-model="formWarning.stoppagePoolCheck">达量停机</a-checkbox>-->
        <!--            </a-form-item>-->
        <!--            <a-form-item field="stopNetworkPool" label="达量断网">-->
        <!--              <a-select v-model="formWarning.stopNetworkPool" placeholder="请选择"-->
        <!--                        :style="{ width: '320px' }" allow-clear>-->
        <!--                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"-->
        <!--                          :label="item.label"/>-->
        <!--              </a-select>-->
        <!--              <a-checkbox value="1" v-model="formWarning.stopNetworkPoolCheck">达量断网</a-checkbox>-->
        <!--            </a-form-item>-->
        <!--            <a-form-item field="remindTotal" label="提醒次数">-->
        <!--              <a-input-number v-model="formWarning.remindTotal" :style="{ width: '320px' }"-->
        <!--                              placeholder="请输入" allow-clear hide-button>-->
        <!--                <template #suffix>-->
        <!--                  次/月-->
        <!--                </template>-->
        <!--              </a-input-number>-->
        <!--            </a-form-item>-->
        <!--            <div class="form-pool-tit">-->
        <!--              <div class="pool-icon"></div>-->
        <!--              客户端·单卡预警设置-->
        <!--            </div>-->
        <!--            <a-form-item field="oneCardWarning" tooltip="请输入" label="单卡用量预警">-->
        <!--              <a-input-number v-model="formWarning.oneCardWarning" :style="{ width: '320px' }"-->
        <!--                              placeholder="请输入" allow-clear hide-button>-->
        <!--              </a-input-number>-->
        <!--              <a-checkbox value="1" v-model="formWarning.outTotalCheck">达量预警</a-checkbox>-->
        <!--            </a-form-item>-->
        <!--            <a-form-item field="stoppageCard" label="达量停机">-->
        <!--              <a-select v-model="formWarning.stoppageCard" placeholder="请选择" :style="{ width: '320px' }"-->
        <!--                        allow-clear>-->
        <!--                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"-->
        <!--                          :label="item.label"/>-->
        <!--              </a-select>-->
        <!--              <a-checkbox value="1" v-model="formWarning.stoppageCardCheck">达量停机</a-checkbox>-->
        <!--            </a-form-item>-->
        <!--            <a-form-item field="stopNetworkCard" label="达量断网">-->
        <!--              <a-select v-model="formWarning.stopNetworkCard" placeholder="请选择"-->
        <!--                        :style="{ width: '320px' }" allow-clear>-->
        <!--                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"-->
        <!--                          :label="item.label"/>-->
        <!--              </a-select>-->
        <!--              <a-checkbox value="1" v-model="formWarning.stopNetworkCardCheck">达量断网</a-checkbox>-->
        <!--            </a-form-item>-->
        <!--            <div class="form-pool-tit">-->
        <!--              <div class="pool-icon"></div>-->
        <!--              管理端预警设置-->
        <!--            </div>-->
        <!--            <a-form-item field="poolUsedWarning" tooltip="请输入" label="池已用量预警">-->
        <!--              <a-input-number v-model="formWarning.poolUsedWarning" :style="{ width: '320px' }"-->
        <!--                              placeholder="请输入" allow-clear hide-button>-->
        <!--                <template #suffix>-->
        <!--                  %-->
        <!--                </template>-->
        <!--              </a-input-number>-->
        <!--              <a-checkbox value="1" v-model="formWarning.poolUsedCheck">达量预警</a-checkbox>-->
        <!--            </a-form-item>-->
        <!--            <a-form-item field="stoppageManagement" label="达量停机">-->
        <!--              <a-select v-model="formWarning.stoppageManagement" placeholder="请选择"-->
        <!--                        :style="{ width: '320px' }" allow-clear>-->
        <!--                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"-->
        <!--                          :label="item.label"/>-->
        <!--              </a-select>-->
        <!--              <a-checkbox value="1" v-model="formWarning.stoppageManagementCheck">达量停机</a-checkbox>-->
        <!--            </a-form-item>-->
        <!--            <a-form-item field="stopNetworkManagement" label="达量断网">-->
        <!--              <a-select v-model="formWarning.stopNetworkManagement" placeholder="请选择"-->
        <!--                        :style="{ width: '320px' }" allow-clear>-->
        <!--                <a-option v-for="item in earlyList" :key="item.value" :value="item.value"-->
        <!--                          :label="item.label"/>-->
        <!--              </a-select>-->
        <!--              <a-checkbox value="1" v-model="formWarning.stopNetworkManagementCheck">达量断网</a-checkbox>-->
        <!--            </a-form-item>-->
        <!--            <a-form-item>-->
        <!--              <a-button type="primary" html-type="submit" @click="resetForm"-->
        <!--                        style="margin-right: 10px;">{{-->
        <!--                  $t('form.Confirm')-->
        <!--                }}-->
        <!--              </a-button>-->
        <!--              <a-button @click="resetForm">{{ $t('form.Cancel') }}</a-button>-->
        <!--            </a-form-item>-->
        <!--          </a-form>-->
        <!--        </a-tab-pane>-->
      </a-tabs>

    </a-modal>

    <a-modal v-model:visible="openExport" @ok="handleOk" @cancel="handleCancel" width="1000px">
      <template #title>
        批量导入
      </template>
      <div class="export-box">
        <div class="export-box-item">
          <div class="box-item-title">
            <div class="title-icon"></div>
            批量导入
          </div>
          <div class="box-item-content">
            <div class="item-txt">
              <div class="item-txt-title">标题</div>
              <div class="item-txt-text">联通流量卡</div>
            </div>
            <div class="item-txt">
              <div class="item-txt-title">标题</div>
              <div class="item-txt-text">联通流量卡</div>
            </div>
            <div class="item-txt">
              <div class="item-txt-title"></div>
              <div class="item-txt-text">
                <a-upload action="/">
                  <template #upload-button>
                    <a-button type="primary">导入</a-button>
                  </template>
                </a-upload>
              </div>
            </div>
          </div>
        </div>
        <div class="export-box-item" style="margin-top:20px;">
          <div class="box-item-title">
            <div class="title-icon"></div>
            导入结果
          </div>
          <div class="box-item-content">
            <a-table :columns="columnsExport" :data="dataExport">
              <template #operate="{ record }">
                <a-button @click="openContract(record)" type="text">下载</a-button>
              </template>
              <template #status="{ record }">
                <div class="export-status" v-if="record.status == 1">
                  <div class="status-icon" style="background: rgba(82, 196, 27, 1);"></div>
                  导入成功
                </div>
                <div class="export-status" v-if="record.status == 2">
                  <div class="status-icon" style="background: rgba(250, 173, 20, 1);"></div>
                  部分成功
                </div>
                <div class="export-status" v-if="record.status == 3">
                  <div class="status-icon" style="background: rgba(247, 66, 75, 1);"></div>
                  校验失败
                </div>
              </template>
            </a-table>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import {onMounted, ref, reactive, getCurrentInstance, nextTick} from "vue";
import {useRoute} from "vue-router";
import {columns} from "../config";
import {Message, Notification} from '@arco-design/web-vue'
import {deleteTrafficPool, addTrafficPool, updateTrafficPool, trafficPoolList} from "@/api/path/flowPool.api"
import {tariffList} from "@/api/path/tariffManagement.api"
import {orderCancel} from "@/api/path/lotCard.api"
import {enum_dict} from "@/hooks/enum";
import {useSystemStore} from "@/store/modules/systemStore"


const systemStore = useSystemStore()
const role = ref(systemStore.getRole)


const {proxy} = getCurrentInstance()
const formRef = ref()
const searchForm = ref({
  "label": "",
});

const dataSource = ref([]);
const route = useRoute();
const pagination = ref({
  total: 0,
  pageSize: 10,
  current: 1,
})


const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false,
});
const selectedKeys = ref([])


const intData = async () => {
  const param = {
    current: pagination.value.current,
    size: pagination.value.pageSize,
    ...searchForm.value,
    type: 2
  }
  const {data} = await trafficPoolList(param)
  dataSource.value = (data.records || []).map((item, index) => {
    const trafficPoolType = typeList.value.find(val => val.value == item.traffic_pool_type)?.label
    const trafficPoolStatus = trafficList.value.find(val => val.value == item.status)?.label
    const sourceName = sourceList.value.find(val => val.value == item.source)?.label
    return {
      ...item,
      sourceName,// 运营商名称
      trafficPoolType,
      trafficPoolStatus,
      poolNumber: "NR0" + (index + 1),
      cardRariffName: "监控1G月租",
      cardFlow: "1G/月",
      cardNum: "11/100",
      UsedMonth: "1.00G",
      surplusFlow: "99.0G",
      totalFlow: "100.0G",
      exceededFlow: "--",
    }
  })
  pagination.value.total = data.total
}


// 删除
const handleDel = async (id) => {
  const {code} = await deleteTrafficPool({id})
  if (code == 200) {
    Message.success({
      content: "删除成功！",
      duration: 2000,
    })
    intData()
  }
};

const evChangePage = (page) => {
  pagination.value.current = page
  intData()
}

const handleSearch = () => {
  intData()
}
const resetSearch = () => {
  searchForm.value.label = ''
  intData()
}


// -------------------弹窗数据------------------------------------
const activeKey = ref('1');
const visible = ref(false);
const typeCurrent = ref(null);
const sourceList = ref([])
const trafficList = ref([])
const typeList = ref([])
const tariffIdList = ref([])

// 详情---------------------------
const openExport = ref(false);
const columnsExport = [
  {title: '序号', dataIndex: 'index', align: 'center', render: ({rowIndex}) => rowIndex + 1},
  {
    title: '操作人',
    dataIndex: 'name',
  },
  {
    title: '导入时间',
    dataIndex: 'exportTime',
  },
  {
    title: '完成时间',
    dataIndex: 'successTime',
  },
  {
    title: '状态',
    slotName: 'status',
    align: 'center'
  },
  {title: '操作', slotName: 'operate', align: 'center'},
];
const dataExport = reactive([{
  key: '1',
  name: 'Jane Doe',
  exportTime: '2024-10-13 22:20:01',
  successTime: '2024-10-13 22:20:01',
  status: 1
}, {
  key: '2',
  name: 'Alisa Ross',
  exportTime: '2024-10-13 22:20:01',
  successTime: '2024-10-13 22:20:01',
  status: 2
}, {
  key: '3',
  name: 'Kevin Sandra',
  exportTime: '2024-10-13 22:20:01',
  successTime: '2024-10-13 22:20:01',
  status: 3
}, {
  key: '4',
  name: 'Ed Hellen',
  exportTime: '2024-10-13 22:20:01',
  successTime: '2024-10-13 22:20:01',
  status: 2
}, {
  key: '5',
  name: 'William Smith',
  exportTime: '2024-10-13 22:20:01',
  successTime: '2024-10-13 22:20:01',
  status: 3
}]);
// -------------------------------

const formState = ref({
  // 流量包名称
  "label": "",
  // 流量池类型: 1: 前流量池 2: 后流量池
  "trafficPoolType": "2",
  // 来源
  "source": "",
  // 流量包状态：1：正常（发布计划状态）2：线下暂停销售
  "status": "",
  // 流量池ID
  "simTariffId": null,
  // 过期时间
  "expireTime": "",
  // ICCID列表
  "iccids": ["89852342022040149139", "89852342022060861597"],

  "size": null,
  "sizeTpye": ''
});
const formWarning = reactive({
  // 总用量占比
  totalDosage: null,
  // 总用量占比达量预警
  totalDosageCheck: '',
  // 达量停机
  stoppagePool: '',
  stoppagePoolCheck: '',
  stopNetworkPool: '',
  stopNetworkPoolCheck: '',
  remindTotal: null,
  oneCardWarning: null,
  outTotalCheck: '',
  stoppageCard: '',
  stoppageCardCheck: '',
  stopNetworkCard: '',
  stopNetworkCardCheck: '',
  poolUsedWarning: null,
  poolUsedCheck: '',
  stoppageManagement: '',
  stoppageManagementCheck: '',
  stopNetworkManagement: '',
  stopNetworkManagementCheck: '',
})

const rules = {
  label: [{required: true, trigger: 'change',}],
  sim_data_plan_id: [{required: true, trigger: 'change',}],
  // user_id: [{required: true, trigger: 'change',}],
  source: [{required: true, trigger: 'change',}],
  traffic_type: [{required: true, trigger: 'change',}],
  billing_type: [{required: true, trigger: 'change',}],
  bag_size: [{required: true, trigger: 'change',}],
  billing_cycle: [{required: true, trigger: 'change',}],
  traffic_pool_type: [{required: true, trigger: 'change',}],
  settlement_cycle: [{required: true, trigger: 'change',}],
  simTariffId: [{required: true, trigger: 'change',}],
  expireTime: [{required: true, trigger: 'change',}],
  // pricing: [{ required: true, trigger: 'change', }],
  // currency: [{ required: true, trigger: 'change', }],
  size: [{required: true, trigger: 'change',}],
  sizeType: [{required: true, trigger: 'change',}],
};

const earlyList = [
  {value: 1, label: '手工停机'},

];

// 退订
const handleUnsubscribeDialog = async (record) => {
  // 订阅关系状态
  // 1：未激活
  // 2: 已过期
  // 3: 已激活99：已退款
  let param = {}
  let statusFlag = true
  if (selectedKeys.value.length > 0) {
    statusFlag = false
    param = {
      ids: selectedKeys.value
    }
  }
  if (record && record.id) {
    statusFlag = false
    param = {
      ids: [record.id]
    }
  }

  console.log(param, "param")
  if (!statusFlag) {

    const {code, data} = await orderCancel(param)

    if (code == 200) {
      Message.success({
        content: data,
        duration: 2000,
      })
    }
  } else {
    Message.warning({
      content: $t('lotCard.tipsOrder'),
      duration: 2000,
    })
  }
};

// 提交
const handleSubmit = ({values, errors}) => {
  formRef.value.validate(async (errors) => {
    if (!errors) {
      // values.user_id = Number(values.user_id)
      if (formState.value.id) {
        const {code, data} = await updateTrafficPool(values)

        if (code == 200) {
          Message.success({
            content: "修改成功！",
            duration: 2000,
          })
          resetForm()
          intData()
        }
      } else {
        const {code, data} = await addTrafficPool(values)
        if (code == 200) {
          Message.success({
            content: "添加成功！",
            duration: 2000,
          })
          resetForm()
          intData()
        }
      }
    }
  });
}
// 弹框
const dictShowModel = (type, data) => {
  if (type == 3) {
    openExport.value = true;
    return
  }
  handleTariff()
  formRef.value.resetFields();
  typeCurrent.value = type;
  activeKey.value = "1"
  nextTick(() => {
    visible.value = true;
  });
  // 编辑
  if (type == 2) {
    Object.keys(formState.value).forEach(key => {
      if (data[key]) {
        formState.value[key] = data[key]
      }
    })
    formState.value.id = data.id
  }
}

// 获取资费列表选择id
const handleTariff = async () => {
  const {code, data} = await tariffList({
    "current": 1,
    "size": 10
  })
  if (code == 200) {
    tariffIdList.value = (data.records || []).map(item => {
      return {
        ...item,
        value: item.id
      }
    })
  }
}

// 取消
const resetForm = () => {
  visible.value = false;
  Object.keys(formState.value).forEach(key => {
    if (key != 'trafficPoolType' && key != 'iccids') {
      formState.value[key] = ''
    }
  })
  delete formState.value.id
}

// 卡详情

const handleOk = () => {
}
const handleCancel = () => {
}
// --------------------------------------------------------
// 获取字典
const handleDictValue = () => {
  const dictList = JSON.parse(window.localStorage.getItem('dictList')) ?? []
  sourceList.value = dictList.filter((item) => item.type_key == enum_dict.SOURCE)
  trafficList.value = dictList.filter((item) => item.type_key == enum_dict.TRAFFIC_PACKET_STATUS)
  typeList.value = dictList.filter((item) => item.type_key == enum_dict.TRAFFIC_POOL_TYPE)
}


onMounted(() => {
  handleDictValue()
  intData()
})


</script>

<style scoped lang="less">
.m-r-10 {
  margin-right: 10px;
}

.head-title-right {
}

.search-section {
  margin-top: 20px;
  margin-bottom: 20px;
}

.container {
  .head-title {
    display: flex;
    justify-content: space-between;
  }

  .form-row {
    display: flex;

    .form-row-col {
      width: 25%;
      display: flex;
      align-items: center;

      .form-row-label {
        width: 120px;
        text-align: right;
      }
    }
  }
}

silent-expire-alarm {
  padding: 20px !important;
  // background: #fcf;
}

.search-section {
  margin-bottom: 20px;
}

.audit-btn {
  margin-bottom: 10px;
}


.echarts-box {
  // width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;

  .chart-dom {
    width: 700px !important;
    height: 400px !important;
  }
}

.form-item-space-item {
  background-color: #f2f3f5;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.form-pool-tit {
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  .pool-icon {
    margin-right: 10px;
    width: 4px;
    height: 16px;
    background: #1B5DF8;
    font-size: 14px;
    color: #6C6E70;
    font-family: PingFang SC;

  }
}


.export-box {
  .export-box-item {
    .box-item-title {
      display: flex;
      align-items: center;
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 10px;

      .title-icon {
        margin-right: 10px;
        width: 4px;
        height: 16px;
        background: #1B5DF8;

      }
    }

    .box-item-content {
      .item-txt {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .item-txt-title {
          width: 300px;
          text-align: right;
          margin-right: 10px;
        }

        .item-txt-text {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
          text-align: left;
          color: #1B5DF8;

        }
      }

      .export-status {
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        text-align: left;
        color: rgba(51, 51, 51, 1);
        display: flex;
        align-items: center;

        .status-icon {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>