二级菜单的样式调整

Analysis Monitor 模块表格事件调整
2023-12-08 17:46:11 +08:00 · 2023-12-08 17:46:11 +08:00 · 3beb3b2344
commit 3beb3b2344
parent 59850929d2
2 changed files with 842 additions and 802 deletions
--- a/src/components/page/GlobalLayout.vue
+++ b/src/components/page/GlobalLayout.vue
--- a/src/views/abnormalAlarm/analysisMonitor/alarmHistory/index.vue
+++ b/src/views/abnormalAlarm/analysisMonitor/alarmHistory/index.vue
@ -1,6 +1,6 @@
 <template>
-  <div style="height: 100%;">
-    <div v-if="!isDetail" style="height: 100%;">
+  <div style="height: 100%">
+    <div v-if="!isDetail" style="height: 100%">
      <SearchBar type="analysisMonitor" :options="stationOptions" @search="handleSearch"></SearchBar>
      <div class="analysis-main">
        <TableList
@ -10,63 +10,88 @@
          :list="dataSource"
          :loading="loading"
          :pagination="false"
-          @selectRowClick="rowClick"
+          @rowDbclick="rowClick"
        >
          <template slot="stationList" slot-scope="{ text }">
            <a-tooltip placement="topLeft">
              <template slot="title">
-                {{ text.join("、") }}
+                {{ text.join('、') }}
              </template>
-              {{ text.join("、") }}
+              {{ text.join('、') }}
            </a-tooltip>
          </template>
          <template slot="sourceList" slot-scope="{ text }">
            <a-tooltip placement="topLeft">
              <template slot="title">
-                {{ text.join("、") }}
+                {{ text.join('、') }}
              </template>
-              {{ text.join("、") }}
+              {{ text.join('、') }}
            </a-tooltip>
          </template>
          <template slot="info" slot-scope="{ text, record }">
-            <a-popover placement="bottomLeft" overlayClassName="qqqqq">
-              <template slot="content">
-                <a-table
-                  :columns="columns_info"
-                  :dataSource="record.nuclideList"
-                  :pagination="false"
-                  rowKey="nuclide"
-                ></a-table>
-              </template>
-              {{ text }}
+            <a-popover
+              trigger="hover"
+              :visible="record.popHovered"
+              @visibleChange="(visible) => handleHoverChange(visible, record)"
+            >
+              <div slot="content">{{ text }}</div>
+              <a-popover
+                placement="bottomLeft"
+                trigger="click"
+                :visible="record.popClicked"
+                @visibleChange="(visible) => handleClickChange(visible, record)"
+                overlayClassName="qqqqq"
+              >
+                <template slot="content">
+                  <a-table
+                    :columns="columns_info"
+                    :dataSource="record.nuclideList"
+                    :pagination="false"
+                    rowKey="nuclide"
+                  ></a-table>
+                </template>
+                <span
+                  style="
+                    display: inline-block;
+                    width: 95%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                  "
+                  >{{ text }}</span
+                >
+              </a-popover>
            </a-popover>
          </template>
        </TableList>
-        <a-pagination 
+        <a-pagination
          size="small"
-          v-model="ipagination.current" 
+          v-model="ipagination.current"
          :pageSize="ipagination.pageSize"
          :page-size-options="ipagination.pageSizeOptions"
          show-size-changer
          show-quick-jumper
          :total="ipagination.total"
-          :show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
-          show-less-items 
+          :show-total="
+            (total, range) =>
+              `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
+          "
+          show-less-items
          @change="handlePageChange"
          @showSizeChange="handleSizeChange"
        />
      </div>
    </div>
-    <div v-if="isDetail" style="height: 100%;margin-left: 20px;">
+    <div v-if="isDetail" style="height: 100%; margin-left: 20px">
      <div class="detail-top">
        <div class="top-back" @click="handleback">
          <span title="Return" class="actions-back"></span>
-          <span style="margin-left: 10px;">return</span>
+          <span style="margin-left: 10px">return</span>
        </div>
      </div>
      <div class="detail-main">
        <div class="pane-title">GENERAL INFORMATION</div>
-        <div style="padding: 15px 15px 20px;">
+        <div style="padding: 15px 15px 20px">
          <a-row>
            <a-col :span="13">
              <a-row>
@ -78,7 +103,8 @@
              <a-row>
                <a-col :span="14" class="info-key">Sample Geometry:</a-col>
                <a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.sampleGeometry }}</a-col>
-              </a-row></a-col>
+              </a-row></a-col
+            >
          </a-row>
          <a-row>
            <a-col :span="13">
@ -91,7 +117,8 @@
              <a-row>
                <a-col :span="14" class="info-key">Spectrum Qualifier:</a-col>
                <a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.spectrumQualifier }}</a-col>
-              </a-row></a-col>
+              </a-row></a-col
+            >
          </a-row>
          <a-row>
            <a-col :span="13">
@ -104,7 +131,8 @@
              <a-row>
                <a-col :span="14" class="info-key">Sample Reference Identification:</a-col>
                <a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.sampleReferenceIdentification }}</a-col>
-              </a-row></a-col>
+              </a-row></a-col
+            >
          </a-row>
          <a-row>
            <a-col :span="13">
@ -117,7 +145,8 @@
              <a-row>
                <a-col :span="14" class="info-key">Gas Background Measurement Identification:</a-col>
                <a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.gasBackgroundMeasurementId }}</a-col>
-              </a-row></a-col>
+              </a-row></a-col
+            >
          </a-row>
          <a-row>
            <a-col :span="13">
@ -130,11 +159,12 @@
              <a-row>
                <a-col :span="14" class="info-key">Transmit Time:</a-col>
                <a-col :span="10" class="info-val">{{ sampleInfo.headerBlock.transmitDate }}</a-col>
-              </a-row></a-col>
+              </a-row></a-col
+            >
          </a-row>
        </div>
        <div class="pane-title">ACQUISITION</div>
-        <div style="padding: 15px 15px 20px;">
+        <div style="padding: 15px 15px 20px">
          <a-row>
            <a-col :span="13">
              <a-row>
@ -174,10 +204,11 @@

 <script>
 import dateFormat from '@/components/jeecg/JEasyCron/format-date'
-import SearchBar from '../../components/searchBar';
-import TableList from '../../components/tableList.vue';
+import SearchBar from '../../components/searchBar'
+import TableList from '../../components/tableList.vue'
 import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
-const columns = [{
+const columns = [
+  {
    title: 'STATION',
    align: 'center',
    dataIndex: 'stationList',
@ -185,18 +216,21 @@ const columns = [{
    ellipsis: true,
    scopedSlots: {
      customRender: 'stationList',
-    }
-  },{
+    },
+  },
+  {
    title: 'COLLECTION START',
    align: 'center',
    dataIndex: 'collectionDate',
    width: 200,
-  },{
+  },
+  {
    title: 'ALARM TIME',
    align: 'center',
    dataIndex: 'alarmStartDate',
    width: 200,
-  },{
+  },
+  {
    title: 'DATA SOURCES ',
    align: 'center',
    dataIndex: 'sourceList',
@ -204,33 +238,37 @@ const columns = [{
    ellipsis: true,
    scopedSlots: {
      customRender: 'sourceList',
-    }
-  },{
+    },
+  },
+  {
    title: 'ALARM INFO',
    align: 'left',
    dataIndex: 'alarmInfo',
+    ellipsis: true,
    scopedSlots: {
      customRender: 'info',
-    }
-  }
+    },
+  },
 ]
-const columns_info = [{
+const columns_info = [
+  {
    title: 'NUCLIDE',
    align: 'left',
    dataIndex: 'nuclide',
-    width:200
-  },{
+    width: 200,
+  },
+  {
    title: 'THRESHOLD ',
    align: 'left',
    dataIndex: 'threshold',
-    width:200
-  },{
+    width: 200,
+  },
+  {
    title: 'VALUE ',
    align: 'left',
    dataIndex: 'value',
-    width:200
+    width: 200,
  },
-  
 ]
 export default {
  components: {
@ -239,16 +277,18 @@ export default {
  },
  data() {
    return {
+      popClicked: false,
+      popHovered: false,
      stationOptions: [],
      paramsArg: {
        startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
-        endDate: dateFormat(new Date(), 'yyyy-MM-dd')
+        endDate: dateFormat(new Date(), 'yyyy-MM-dd'),
      },
      columns,
      columns_info,
      dataSource: [],
      loading: false,
-      ipagination:{
+      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
@ -258,66 +298,80 @@ export default {
        },
        showQuickJumper: true,
        showSizeChanger: true,
-        total: 0
+        total: 0,
      },
      isDetail: false,
-      dataSourceDetailNuclide:[],
-      url: { 
-        list: "/alarmAnalysisLog/findPage",
-        sampleInfo: "/webStatistics/sampleInfo"
+      dataSourceDetailNuclide: [],
+      url: {
+        list: '/alarmAnalysisLog/findPage',
+        sampleInfo: '/webStatistics/sampleInfo',
      },
      selectRow: {},
-      sampleInfo: {}
+      sampleInfo: {},
    }
  },
-  mounted () {
-    this.getStationList();
-    this.getPageData();
+  mounted() {
+    this.getStationList()
+    this.getPageData()
  },
  methods: {
+    handleHoverChange(visible, row) {
+      row.popClicked = false
+      row.popHovered = visible
+    },
+    handleClickChange(visible, row) {
+      row.popClicked = visible
+      row.popHovered = false
+    },
    getStationList() {
-      getAction("/webStatistics/findStationList",{menuName:""}).then(res => {
+      getAction('/webStatistics/findStationList', { menuName: '' }).then((res) => {
        if (res.success) {
-          if (res.result.length>0) {
-            this.stationOptions = res.result.map(item => {
+          if (res.result.length > 0) {
+            this.stationOptions = res.result.map((item) => {
              return {
                label: item.stationCode,
-                value: item.stationId
+                value: item.stationId,
              }
            })
          } else {
-            this.stationOptions=[]
+            this.stationOptions = []
          }
        } else {
-          this.$message.warning("This operation fails. Contact your system administrator")
+          this.$message.warning('This operation fails. Contact your system administrator')
        }
      })
    },
    getPageData() {
-      this.loading = true;
+      this.loading = true
      let param = {
-        source: this.paramsArg.sources, 
-        stations: this.paramsArg.stations, 
+        source: this.paramsArg.sources,
+        stations: this.paramsArg.stations,
        nuclides: this.paramsArg.nuclides,
        startDate: this.paramsArg.startDate,
        endDate: this.paramsArg.endDate,
        pageNo: this.ipagination.current,
-        pageSize: this.ipagination.pageSize
+        pageSize: this.ipagination.pageSize,
      }
-      getAction(this.url.list, param).then(res => {
-        this.loading = false;
+      getAction(this.url.list, param).then((res) => {
+        this.loading = false
        if (res.success) {
-          this.dataSource = res.result.records
+          this.dataSource = res.result.records.map((item) => {
+            return {
+              ...item,
+              popClicked: false,
+              popHovered: false,
+            }
+          })
          this.ipagination.total = res.result.total
        } else {
-          this.$message.warning("This operation fails. Contact your system administrator")
+          this.$message.warning('This operation fails. Contact your system administrator')
        }
      })
    },
    async getSampleInfo() {
-      await getAction(this.url.sampleInfo, { sampleId: this.selectRow.sampleId}).then(res=> {
-        this.sampleInfo = res.result;
-        this.loading = false;
+      await getAction(this.url.sampleInfo, { sampleId: this.selectRow.sampleId }).then((res) => {
+        this.sampleInfo = res.result
+        this.loading = false
      })
    },
    handleSearch({ startDate, endDate, stations, sources }) {
@ -326,15 +380,15 @@ export default {
        startDate,
        endDate,
        stations,
-        sources
+        sources,
      }
      this.getPageData()
    },
    async rowClick(record) {
-      this.loading = true;
-      this.selectRow = record;
+      this.loading = true
+      this.selectRow = record
      this.dataSourceDetailNuclide = record.nuclideList
-      await this.getSampleInfo();
+      await this.getSampleInfo()
      this.isDetail = true
    },
    handlePageChange(page, pageSize) {
@ -349,13 +403,13 @@ export default {
    },
    handleback() {
      this.isDetail = false
-    }
+    },
  },
 }
 </script>

 <style lang="less" scoped>
-.analysis-main{
+.analysis-main {
  width: 100%;
  height: calc(100% - 50px);
  overflow: hidden;
@ -363,13 +417,13 @@ export default {
  margin-left: 20px;
  position: relative;
 }
-.ant-pagination{
+.ant-pagination {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
 }
-.detail-top{
+.detail-top {
  width: 100%;
  height: 50px;
  padding: 0 10px;
@ -380,36 +434,36 @@ export default {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
-  .top-back{
+  .top-back {
    font-family: MicrosoftYaHei;
    font-size: 16px;
    color: #69a19f;
    display: flex;
    align-items: center;
    cursor: pointer;
-    span{
+    span {
      display: inline-block;
      width: 28px;
      height: 24px;
    }
-    .actions-back{
+    .actions-back {
      background: url(~@/assets/images/abnormalAlarm/return.png) no-repeat;
      background-size: 100% 100%;
-      &:hover{
+      &:hover {
        background: url(~@/assets/images/abnormalAlarm/return-active.png) no-repeat;
        background-size: 100% 100%;
      }
    }
  }
 }
-.detail-main{
+.detail-main {
  height: calc(100% - 67px);
  margin-top: 15px;
  overflow: hidden;
  background-color: rgba(2, 40, 43, 0.5);
-	border: solid 1px #416f7f;
+  border: solid 1px #416f7f;
  padding: 15px 20px;
-  .pane-title{
+  .pane-title {
    height: 40px;
    background-color: rgba(12, 235, 201, 0.05);
    line-height: 40px;
@ -421,14 +475,14 @@ export default {
    color: #0cebc9;
    padding: 0 0 0 18px;
  }
-  .info-key{
+  .info-key {
    font-family: ArialMT;
    font-size: 14px;
    font-weight: bold;
    line-height: 36px;
    color: #ffffff;
  }
-  .info-val{
+  .info-val {
    font-family: ArialMT;
    font-size: 14px;
    line-height: 36px;
@ -437,21 +491,21 @@ export default {
 }
 </style>
 <style lang="less">
-.qqqqq{
-  .ant-popover-arrow{
+.qqqqq {
+  .ant-popover-arrow {
    border-left-color: #1993cc !important;
    border-top-color: #1993cc !important;
  }
-  .ant-popover-inner-content{
+  .ant-popover-inner-content {
    padding: 0;
  }
-  .ant-table-thead > tr th{
+  .ant-table-thead > tr th {
    background-color: #1993cc !important;
  }
-  .ant-table-tbody tr{
+  .ant-table-tbody tr {
    background-color: #084a5b;
  }
-  .ant-table-tbody tr:nth-child(2n){
+  .ant-table-tbody tr:nth-child(2n) {
    background-color: rgba(13, 113, 139, 0.2);
  }
 }