保障环境数据库

src/App.vue

@@ -76,19 +76,16 @@ export default {
   display: flex;
   flex-direction: column;
 }
-.flex-1 {
-  flex: 1;
-}
 .flex-cr {
   display: flex;
   flex-direction: column-reverse;
 }
+.flex-1 {
+  flex: 1;
+}
 .ai-fs {
   align-items: flex-start;
 }
-.ai-s {
-  align-items: stretch;
-}
 .ai-fe {
   align-items: flex-end;
 }

src/components/Common/Layout/AntQueryTable.vue

@@ -354,7 +354,7 @@ export default {
     async queryTable() {
       this.tableLoading = true
       try {
-        let res = []
+        let res = { data: [] }
         if (this.tableConfig.query && typeof this.tableConfig.query === 'function') {
           res = await this.tableConfig.query(this.queryParams)
         }
@@ -369,8 +369,8 @@ export default {
           return
         }
         // ---- 分页模式 ----
-        this.tableData = res.data || []
+        this.tableData = res?.data?.data || []
-        this.total = res.totalCount || 0
+        this.total = res?.data?.totalCount || 0
         if (this.tableData.length === 0 && this.total > 0) {
           this.pageParams.pageNum = Math.ceil(this.total / this.pageParams.pageSize)
           this.queryTable()

src/views/simulationScene/database/bzhjsjk.vue

@@ -1,177 +1,153 @@
 <template>
   <page-header-wrapper>
-    <Grid :columns="['400px', 1]">
+    <Grid :columns="['400px', 1]" :rows="gridRows">
-      <a-card :bordered="false">
+      <a-card
-        <a-list :loading="listLoading" item-layout="horizontal" :data-source="scenarioList">
+        title="想定列表"
-          <a-list-item slot="renderItem" slot-scope="item" @click="handleClickScenario(item)">
+        class="my-card my-card-has-title"
-            <a-list-item-meta :description="item.author">
+        :bordered="false"
-              <span slot="title">{{ item.name }}</span>
+        v-loading="xd.loading"
-              <a-checkbox slot="avatar" :checked="item.id === queryParam.id"></a-checkbox>
+        style="grid-row: 1 / 3"
-            </a-list-item-meta>
+      >
-          </a-list-item>
+        <template #extra>
-        </a-list>
+          <a-icon type="sync" style="font-size: 30px" @click="getXdListData()" />
-      </a-card>
+        </template>
-      <a-card :bordered="false">
+        <a-tree
-        <div class="table-page-search-wrapper">
+          :treeData="xd.listData"
-          <a-form layout="inline">
+          :replaceFields="{ title: 'name', key: 'id' }"
-            <a-row :gutter="48">
+          :selectedKeys.sync="xd.selectedKeys"
-              <a-col :xl="8" :lg="8">
+          @select="handleChangeXdSelected"
-                <a-radio-group v-model="queryParam.type" button-style="solid" @change="getList()">
-                  <a-radio-button value="weather"> 气象环境 </a-radio-button>
-                  <a-radio-button value="ebe"> 电磁环境 </a-radio-button>
-                  <!-- <a-radio-button value="dl"> 地理环境 </a-radio-button> -->
-                </a-radio-group>
-              </a-col>
-              <a-col :xl="8" :lg="8">
-                <a-form-item label="区域">
-                  <a-input placeholder="请输入" v-model="queryParam.area" />
-                </a-form-item>
-              </a-col>
-              <a-col :xl="5" :lg="5">
-                <span class="table-page-search-submitButtons">
-                  <a-button type="primary" @click="getList">查询</a-button>
-                  <a-button style="margin-left: 8px" @click="resetList">重置</a-button>
-                </span>
-              </a-col>
-              <a-col :xl="3" :lg="3">
-                <a-button type="primary" icon="plus" style="float: right" @click="handleAdd">新建</a-button>
-              </a-col>
-            </a-row>
-          </a-form>
-        </div>
-        <a-table
-          bordered
-          rowKey="id"
-          size="small"
-          :columns="columns"
-          :dataSource="loadData"
-          :pagination="paginationProps"
-          :loading="loadingTable"
-          @change="handleTableChange"
         >
-          <span slot="action" slot-scope="text, record">
+        </a-tree>
-            <a @click="handleEdit(record)"> <a-icon type="form" /></a>
+      </a-card>
-            <a-divider type="vertical" />
+      <a-card title="气象环境" class="my-card my-card-has-title" :bordered="false">
-
+        <template #extra>
-            <a-popconfirm
+          <a-button type="primary" style="margin-right: 20px" @click="handleOpenAddQxhjModal">新增</a-button>
-              :title="`确定要删除该${typeMapLabel}吗？`"
+          <a-icon
-              ok-text="确定"
+            v-if="layoutRight === 'qxhj'"
-              cancel-text="取消"
+            type="fullscreen-exit"
-              @confirm="handleDelete(record)"
+            style="font-size: 32px"
-            >
+            @click="layoutRight = 'auto'"
-              <a href="javascript:;"><a-icon type="delete" /></a>
+          />
-            </a-popconfirm>
+          <a-icon v-else type="fullscreen" style="font-size: 32px" @click="layoutRight = 'qxhj'" />
-          </span>
+        </template>
-        </a-table>
+        <AntQueryTable
+          ref="qxhj-table"
+          height="100%"
+          :queryConfig="qxhj.queryConfig"
+          :tableConfig="qxhj.tableConfig"
+          :pageConfig="qxhj.pageConfig"
+          :showTool="qxhj.showTool"
+        >
+          <template #tablecell-action="{ record }">
+            <a-button type="text-primary" icon="edit" @click="handleOpenEditQxhjModal(record)"></a-button>
+          </template>
+        </AntQueryTable>
+      </a-card>
+      <a-card title="电磁环境" class="my-card my-card-has-title" :bordered="false">
+        <template #extra>
+          <a-button type="primary" style="margin-right: 20px" @click="handleOpenAddDchjModal">新增</a-button>
+          <a-icon
+            v-if="layoutRight === 'dchj'"
+            type="fullscreen-exit"
+            style="font-size: 32px"
+            @click="layoutRight = 'auto'"
+          />
+          <a-icon v-else type="fullscreen" style="font-size: 32px" @click="layoutRight = 'dchj'" />
+        </template>
+        <AntQueryTable
+          ref="dchj-table"
+          height="100%"
+          :queryConfig="dchj.queryConfig"
+          :tableConfig="dchj.tableConfig"
+          :pageConfig="dchj.pageConfig"
+          :showTool="dchj.showTool"
+        >
+          <template #tablecell-action="{ record }">
+            <a-button type="text-primary" icon="edit" @click="handleOpenEditDchjModal(record)"></a-button>
+          </template>
+        </AntQueryTable>
       </a-card>
     </Grid>
-    <h-modal
+    <AntFormModal
-      :title="AEModal.title"
+      :visible.sync="qxhjModal.visible"
-      :width="640"
+      :title="qxhjModal.title"
-      :visible="AEModal.visible"
+      :formItems="qxhjModal.formItems"
-      :destroyOnClose="true"
+      :formRules="qxhjModal.formRules"
-      @cancel="() => this.handleClose()"
+      :formData="qxhjModal.formData"
-      @ok="() => this.handleOk()"
+      :onSubmit="handleSubmitQxhj"
-      switch-fullscreen
+      @success="handleSubmitQxhjSuccess"
-      :fullscreen.sync="AEModal.fullscreen"
+    ></AntFormModal>
-    >
+    <AntFormModal
-      <a-spin :spinning="AEModal.spinning">
+      :visible.sync="dchjModal.visible"
-        <a-form-model
+      :title="dchjModal.title"
-          ref="form"
+      :formItems="dchjModal.formItems"
-          :model="AEModal.form"
+      :formRules="dchjModal.formRules"
-          :rules="AEModal.rules"
+      :formData="dchjModal.formData"
-          :label-col="AEModal.labelCol"
+      :onSubmit="handleSubmitDchj"
-          :wrapper-col="AEModal.wrapperCol"
+      @success="handleSubmitDchjSuccess"
-        >
+    ></AntFormModal>
-          <a-form-model-item v-for="item in formItems" :key="item.prop" v-bind="item">
-            <span v-if="item.customRender">{{ item.customRender(AEModal.form[item.prop]) }}</span>
-            <component
-              v-else
-              :is="item.component || 'a-input'"
-              v-model="AEModal.form[item.prop]"
-              v-bind="item.options"
-              v-on="item.listeners"
-            />
-          </a-form-model-item>
-        </a-form-model>
-      </a-spin>
-    </h-modal>
   </page-header-wrapper>
 </template>
 
 <script>
-// 气象、电磁、地形
 export default {
   name: 'Bzhjsjk',
   data() {
     return {
-      listLoading: false,
+      layoutRight: 'auto',
-      scenarioList: [],
+      xd: {
-
+        loading: false,
-      queryParam: { id: '', type: 'weather' },
+        listData: [],
-      weatherColumns: [
+        selectedKeys: [],
-        { title: '#', dataIndex: 'id' },
-        { title: '区域', dataIndex: 'area', align: 'left' },
-        { title: '日期', dataIndex: 'date', align: 'center' },
-        { title: '天气', dataIndex: 'weather', align: 'center' },
-        { title: '大气压', dataIndex: 'airPressure', align: 'center' },
-        { title: '空气质量', dataIndex: 'airQuality', align: 'center' },
-        { title: '湿度', dataIndex: 'humidity', align: 'center' },
-        { title: '降水量', dataIndex: 'precipitation', align: 'center' },
-        { title: '能见度', dataIndex: 'visibility', align: 'center' },
-        { title: '风向', dataIndex: 'windDirection', align: 'center' },
-        { title: '风力', dataIndex: 'windPower', align: 'center' },
-        { title: '风速', dataIndex: 'windSpeed', align: 'center' },
-        { title: '操作', width: 100, dataIndex: 'action', align: 'center', scopedSlots: { customRender: 'action' } },
-      ],
-      ebeColumns: [
-        { title: '#', dataIndex: 'id' },
-        { title: '区域', dataIndex: 'area', align: 'left' },
-        { title: '持续时间', dataIndex: 'duration', align: 'left' },
-        { title: '环境变化趋势', dataIndex: 'environmentalChangeTrends', align: 'left' },
-        { title: '环境复杂度', dataIndex: 'environmentalComplexity', align: 'left' },
-        { title: '磁场强度', dataIndex: 'fieldStrength', align: 'left' },
-        { title: '频率', dataIndex: 'frequency', align: 'left' },
-        { title: '频率区间', dataIndex: 'frequencyRang', align: 'left' },
-        { title: '干扰幅度', dataIndex: 'interferenceAmplitude', align: 'left' },
-        { title: '干扰源', dataIndex: 'interferenceSource', align: 'left' },
-        { title: '干扰类型', dataIndex: 'interferenceType', align: 'left' },
-        { title: '波型', dataIndex: 'waveType', align: 'left' },
-        { title: '操作', width: 100, dataIndex: 'action', align: 'center', scopedSlots: { customRender: 'action' } },
-      ],
-      dlColumns: [
-        { title: '#', dataIndex: 'id' },
-        { title: '操作', width: 100, dataIndex: 'action', align: 'center', scopedSlots: { customRender: 'action' } },
-      ],
-      loadData: [], // 加载数据方法 必须为 Promise 对象
-      loadingTable: false,
-
-      paginationProps: {
-        defaultPageSize: 10,
-        showSizeChanger: true,
-        showQuickJumper: true,
-        showTotal: (total) => {
-          return `共 ${total} 条`
-        },
-        total: 0,
-        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize),
       },
 
-      AEModal: {
+      qxhj: {
-        title: '',
+        queryConfig: false,
+        tableConfig: {
+          table: {},
+          immediate: false,
+          query: () =>
+            this.$http({
+              url: `/environment/weather/list`,
+              method: 'get',
+              params: { id: this.xd.selectedKeys[0] },
+            }),
+          columns: [
+            { dataIndex: 'serial' },
+            { title: '区域', dataIndex: 'area' },
+            { title: '日期', dataIndex: 'date' },
+            { title: '天气', dataIndex: 'weather' },
+            { title: '大气压', dataIndex: 'airPressure' },
+            { title: '空气质量', dataIndex: 'airQuality' },
+            { title: '湿度', dataIndex: 'humidity' },
+            { title: '降水量', dataIndex: 'precipitation' },
+            { title: '能见度', dataIndex: 'visibility' },
+            { title: '风向', dataIndex: 'windDirection' },
+            { title: '风力', dataIndex: 'windPower' },
+            { title: '风速', dataIndex: 'windSpeed' },
+            { dataIndex: 'action', width: 100 },
+          ],
+        },
+        pageConfig: true,
+        showTool: false,
+      },
+      qxhjModal: {
         visible: false,
-        editStatus: false,
+        title: '',
-        fullscreen: false,
+        mode: '',
-        spinning: false,
+        formItems: [
-        form: {},
-        weatherFormItems: [
           {
             label: '区域',
             prop: 'area',
             component: 'AntOriginSelect',
             options: { dataSource: () => this.$http({ url: `/system/area/getTreeSelect`, method: 'get' }) },
           },
-          { label: '日期', prop: 'date', component: 'a-date-picker', options: { valueFormat: 'YYYY/MM/DD' } },
+          {
+            label: '日期',
+            prop: 'date',
+            component: 'a-date-picker',
+            options: { format: 'YYYY/MM/DD', valueFormat: 'YYYY/MM/DD' },
+          },
           { label: '天气', prop: 'weather' },
           { label: '大气压', prop: 'airPressure' },
           { label: '空气质量', prop: 'airQuality' },
@@ -182,8 +158,51 @@ export default {
           { label: '风力', prop: 'windPower' },
           { label: '风速', prop: 'windSpeed' },
         ],
-        ebeFormItems: [
+        formRules: {},
-          { label: '区域', prop: 'area' },
+        formData: {},
+      },
+
+      dchj: {
+        queryConfig: false,
+        tableConfig: {
+          table: {},
+          immediate: false,
+          query: () =>
+            this.$http({
+              url: `/environment/ebe/list`,
+              method: 'get',
+              params: { id: this.xd.selectedKeys[0] },
+            }),
+          columns: [
+            { dataIndex: 'serial' },
+            { title: '区域', dataIndex: 'area' },
+            { title: '持续时间', dataIndex: 'duration' },
+            { title: '环境变化趋势', dataIndex: 'environmentalChangeTrends' },
+            { title: '环境复杂度', dataIndex: 'environmentalComplexity' },
+            { title: '磁场强度', dataIndex: 'fieldStrength' },
+            { title: '频率', dataIndex: 'frequency' },
+            { title: '频率区间', dataIndex: 'frequencyRang' },
+            { title: '干扰幅度', dataIndex: 'interferenceAmplitude' },
+            { title: '干扰源', dataIndex: 'interferenceSource' },
+            { title: '干扰类型', dataIndex: 'interferenceType' },
+            { title: '波型', dataIndex: 'waveType' },
+            { dataIndex: 'action', width: 100 },
+          ],
+        },
+        pageConfig: true,
+        showTool: false,
+      },
+      dchjModal: {
+        visible: false,
+        title: '',
+        mode: '',
+        formItems: [
+          {
+            label: '区域',
+            prop: 'area',
+            component: 'AntOriginSelect',
+            options: { dataSource: () => this.$http({ url: `/system/area/getTreeSelect`, method: 'get' }) },
+          },
           { label: '持续时间', prop: 'duration' },
           { label: '环境变化趋势', prop: 'environmentalChangeTrends' },
           { label: '环境复杂度', prop: 'environmentalComplexity' },
@@ -195,133 +214,108 @@ export default {
           { label: '干扰类型', prop: 'interferenceType' },
           { label: '波型', prop: 'waveType' },
         ],
-        dlFormItems: [],
+        formRules: {},
-        rules: {
+        formData: {},
-          name: [{ required: true, message: '请输入想定名称！', trigger: 'blur' }],
-        },
-        labelCol: { xs: { span: 24 }, sm: { span: 7 } },
-        wrapperCol: { xs: { span: 24 }, sm: { span: 13 } },
       },
     }
   },
   computed: {
-    columns() {
+    gridRows() {
-      return this[`${this.queryParam.type}Columns`]
-    },
-    formItems() {
-      return this.AEModal[`${this.queryParam.type}FormItems`]
-    },
-    typeMapLabel() {
       return {
-        weather: '气象环境',
+        auto: [1, 1],
-        ebe: '电磁环境',
+        qxhj: [1, '56px'],
-        dl: '地理环境',
+        dchj: ['56px', 1],
-      }[this.queryParam.type]
+      }[this.layoutRight]
     },
   },
   created() {
-    this.getScenarioList()
+    this.getXdListData()
   },
   methods: {
-    async getScenarioList() {
+    async getXdListData() {
       try {
-        this.listLoading = true
+        this.xd.loading = true
         const res = await this.$http({
           url: `/baseData/scenario/all`,
           method: 'get',
         })
-        this.scenarioList = res.data
+        this.xd.listData = res.data
-        this.queryParam.id = this.scenarioList[0].id
+        if (this.xd.selectedKeys.length === 0) {
-        this.getList()
+          this.xd.selectedKeys = [this.xd.listData[0].id]
+          this.handleChangeXdSelected()
+        }
       } catch (error) {
         console.log(error)
       } finally {
-        this.listLoading = false
+        this.xd.loading = false
       }
     },
-    handleClickScenario(item) {
+    handleChangeXdSelected() {
-      this.queryParam.id = item.id
+      this.$refs['qxhj-table'].commitAction('query')
-      this.getList()
+      this.$refs['dchj-table'].commitAction('query')
     },
-    resetList() {
+
-      this.queryParam.area = ''
+    handleOpenAddQxhjModal() {
-      this.getList()
+      this.qxhjModal.title = '新建气象环境'
+      this.qxhjModal.mode = 'add'
+      this.qxhjModal.formData = { sceneId: this.xd.selectedKeys[0] }
+      this.qxhjModal.visible = true
     },
-    async getList(parameter = {}) {
+    async handleOpenEditQxhjModal(record) {
-      try {
-        this.loadingTable = true
-        const res = await this.$http({
-          url: `/environment/${this.queryParam.type}/list`,
-          method: 'get',
-          params: { ...parameter, ...this.queryParam },
-        })
-        this.loadData = res.data.data
-        this.paginationProps.total = res.data.totalCount
-      } catch (error) {
-        console.log(error)
-      } finally {
-        this.loadingTable = false
-      }
-    },
-    handleTableChange(pagination) {
-      const parameter = {}
-      parameter.pageSize = pagination.pageSize
-      parameter.pageNum = pagination.current
-      this.getList(parameter)
-    },
-    handleAdd() {
-      this.AEModal.form = {}
-      this.AEModal.title = `添加${this.typeMapLabel}`
-      this.AEModal.editStatus = false
-      this.AEModal.visible = true
-    },
-    async handleEdit(record) {
       try {
         const res = await this.$http({
-          url: `/environment/${this.queryParam.type}/${record.id}`,
+          url: `/environment/weather/${record.id}`,
           method: 'get',
         })
-        this.AEModal.form = res.data
+        this.qxhjModal.title = `编辑气象环境`
-        this.AEModal.title = `编辑${this.typeMapLabel}`
+        this.qxhjModal.mode = 'edit'
-        this.AEModal.editStatus = true
+        this.qxhjModal.formData = { ...res.data }
-        this.AEModal.visible = true
+        this.qxhjModal.visible = true
       } catch (error) {
         console.log(error)
       }
     },
-    handleClose() {
+    handleSubmitQxhj(formData) {
-      this.AEModal.visible = false
+      return this.$http({
-      this.AEModal.form = {}
+        url: `/environment/weather/save`,
+        method: 'post',
+        data: formData,
+      })
     },
-    async handleOk() {
+    handleSubmitQxhjSuccess() {
-      try {
+      this.$refs['qxhj-table'].commitAction('query')
-        await this.$refs.form.validate()
-        const params = { ...this.AEModal.form }
-        await this.$http({
-          url: `/environment/${this.queryParam.type}/save`,
-          method: 'post',
-          data: params,
-        })
-        this.$message.success(`${this.AEModal.title}成功！`)
-        this.getList()
-        this.handleClose()
-      } catch (error) {
-        console.log(error)
-      }
     },
-    async handleDelete(record) {
+
+    handleOpenAddDchjModal() {
+      this.dchjModal.title = '新建电磁环境'
+      this.dchjModal.mode = 'add'
+      this.dchjModal.formData = { sceneId: this.xd.selectedKeys[0] }
+      this.dchjModal.visible = true
+    },
+    async handleOpenEditDchjModal(record) {
       try {
-        await this.$http({
+        const res = await this.$http({
-          url: `/environment/${this.queryParam.type}/remove/${record.id}`,
+          url: `/environment/ebe/${record.id}`,
           method: 'get',
         })
-        this.$message.success(`删除${this.typeMapLabel}成功`)
+        this.dchjModal.title = `编辑电磁环境`
-        this.getList()
+        this.dchjModal.mode = 'edit'
+        this.dchjModal.formData = { ...res.data }
+        this.dchjModal.visible = true
       } catch (error) {
         console.log(error)
-        this.$message.error(`删除${this.typeMapLabel}失败`)
       }
     },
+    handleSubmitDchj(formData) {
+      return this.$http({
+        url: `/environment/ebe/save`,
+        method: 'post',
+        data: formData,
+      })
+    },
+    handleSubmitDchjSuccess() {
+      this.$refs['dchj-table'].commitAction('query')
+    },
   },
 }
 </script>