feat: BA需要的mocn数据看板

src/views/dashboard/mocn/components/setting.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { reactive, toRaw, watch } from 'vue';
+import { dbGetJSON, dbSetJSON } from '@/utils/cache-db-utils';
+const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const props = defineProps({
+  title: {
+    type: String,
+    default: '标题',
+  },
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/**数据参数 */
+let dataState = reactive({
+  /**基站数 */
+  baseNum: 0,
+  /**核心网数 */
+  coreNetNum: 0,
+  /**在线用户数 */
+  onlineUserNum: 0,
+});
+
+/**弹框取消按钮事件 */
+function fnModalOk() {
+  dbSetJSON('tbl_mocn', `tmp`, toRaw(dataState));
+  emit('ok');
+  emit('update:visible', false);
+}
+
+/**弹框取消按钮事件 */
+function fnModalCancel() {
+  emit('cancel');
+  emit('update:visible', false);
+}
+
+/**显示弹框时初始数据 */
+function init() {
+  // 读取数据
+  dbGetJSON('tbl_mocn', `tmp`).then(data => {
+    if (data) {
+      Object.assign(dataState, data);
+    }
+  });
+}
+
+/**监听是否显示，初始数据 */
+watch(
+  () => props.visible,
+  val => {
+    if (val) init();
+  }
+);
+</script>
+
+<template>
+  <a-modal
+    width="800px"
+    :title="props.title"
+    :visible="props.visible"
+    :keyboard="false"
+    :mask-closable="false"
+    @cancel="fnModalCancel"
+    @ok="fnModalOk"
+  >
+    <a-form
+      name="dataState"
+      layout="horizontal"
+      :label-col="{ span: 6 }"
+      :labelWrap="true"
+    >
+      <a-form-item label="baseNum" name="baseNum">
+        <a-input-number v-model:value="dataState.baseNum"> </a-input-number>
+      </a-form-item>
+      <a-form-item label="coreNetNum" name="coreNetNum">
+        <a-input-number v-model:value="dataState.coreNetNum"> </a-input-number>
+      </a-form-item>
+      <a-form-item label="onlineUserNum" name="onlineUserNum">
+        <a-input-number v-model:value="dataState.onlineUserNum">
+        </a-input-number>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<style lang="less" scoped></style>
+
+<style lang="less" scoped></style>