|
|
@@ -0,0 +1,304 @@
|
|
|
+<!-- 流量池 -->
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <div class="head-title">
|
|
|
+ <span>{{ route.meta.title }} </span>
|
|
|
+ <span class="head-title-right">
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <!-- 搜索条件区 -->
|
|
|
+ <div class="search-section">
|
|
|
+ <a-form :model="searchForm" ref="formRef" 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="traffic_pool_type" :label="$t('flowPool.trafficPoolType')">
|
|
|
+ <a-select v-model="searchForm.traffic_pool_type" style="width: 200px;"
|
|
|
+ :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>
|
|
|
+ <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>
|
|
|
+ <a-table row-key="id" :data="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
|
|
|
+ @page-change="evChangePage">
|
|
|
+ <template #id="{ record }">
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </a-table>
|
|
|
+
|
|
|
+
|
|
|
+ </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": "",
|
|
|
+ "traffic_pool_type": ""
|
|
|
+});
|
|
|
+
|
|
|
+const typeList = ref([]);
|
|
|
+const trafficList = ref([]);
|
|
|
+const sourceList = ref([]);
|
|
|
+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,
|
|
|
+ }
|
|
|
+ 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 evChangePage = (page) => {
|
|
|
+ pagination.value.current = page
|
|
|
+ intData()
|
|
|
+}
|
|
|
+
|
|
|
+const handleSearch = () => {
|
|
|
+ intData()
|
|
|
+}
|
|
|
+const resetSearch = () => {
|
|
|
+ proxy.$refs.formRef.resetFields()
|
|
|
+ intData()
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// --------------------------------------------------------
|
|
|
+// 获取字典
|
|
|
+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>
|
wanghairong