Kaynağa Gözat

修改统一门户跳转

huang_an 1 yıl önce
ebeveyn
işleme
e84fac0fef
1 değiştirilmiş dosya ile 286 ekleme ve 151 silme
  1. 286 151
      src/views/home/index.vue

+ 286 - 151
src/views/home/index.vue

@@ -76,161 +76,165 @@
       </el-card>
     </div>
     <div class="box-container-middle">
-      <el-card class="card-cell middle-cell">
-        <div slot="header" class="clearfix">
-          <span>流程待办</span>
-        </div>
-        <div style="height: 100%">
-          <ele-pro-table
-            ref="table"
-            class="table-box"
-            :columns="columns"
-            :need-page="false"
-            :toolkit="[]"
-            height="calc(38vh)"
-            :datasource="datasource"
-            cache-key="systemHomeTable5"
-          >
-            <template v-slot:status="{ row }">
-              <el-tag type="success" v-if="row.suspensionState === 1"
-                >激活</el-tag
-              >
-              <el-tag type="warning" v-if="row.suspensionState === 2"
-                >挂起</el-tag
-              >
-            </template>
-            <template v-slot:name="{ row }">
-              <el-link
-                type="primary"
-                :underline="false"
-                @click="handleAudit('', row)"
-              >
-                {{ row.name }}
-              </el-link>
-            </template>
-            <!-- 操作列 -->
-            <template v-slot:action="{ row }">
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleAudit('audit', row)"
-                >处理
-              </el-button>
-              <!-- <el-button
+      <div class="box-container-middl_left">
+        <el-card class="card-cell middle-cell">
+          <div slot="header" class="clearfix">
+            <span>流程待办</span>
+          </div>
+          <div style="height: 100%; width: 100%">
+            <ele-pro-table
+              ref="table"
+              class="table-box"
+              :columns="columns"
+              :need-page="false"
+              :toolkit="[]"
+              height="calc(38vh)"
+              :datasource="datasource"
+              cache-key="systemHomeTable5"
+            >
+              <template v-slot:status="{ row }">
+                <el-tag type="success" v-if="row.suspensionState === 1"
+                  >激活</el-tag
+                >
+                <el-tag type="warning" v-if="row.suspensionState === 2"
+                  >挂起</el-tag
+                >
+              </template>
+              <template v-slot:name="{ row }">
+                <el-link
+                  type="primary"
+                  :underline="false"
+                  @click="handleAudit('', row)"
+                >
+                  {{ row.name }}
+                </el-link>
+              </template>
+              <!-- 操作列 -->
+              <template v-slot:action="{ row }">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="handleAudit('audit', row)"
+                  >处理
+                </el-button>
+                <!-- <el-button
                 size="mini"
                 type="text"
                 icon="el-icon-edit"
                 @click="openEdit('upDate', row)"
                 >待办详情</el-button
               > -->
-            </template>
-          </ele-pro-table>
-        </div>
-      </el-card>
-
-      <el-card class="card-cell middle-cell">
-        <div slot="header" class="clearfix">
-          <span>统一门户</span>
-        </div>
-        <div class="list">
-          <div
-            v-for="(item, index) in list"
-            :class="[(index + 1) % 3 == 0 ? 'item margin_0' : 'item']"
-          >
-            <div><img :src="item.img" /></div>
-            <div>{{ item.name }}</div>
+              </template>
+            </ele-pro-table>
           </div>
-        </div>
-      </el-card>
-    </div>
-    <div class="box-container-bottom">
-      <el-card class="card-cell middle-cell">
-        <div slot="header" class="clearfix">
-          <span>常用功能</span>
-        </div>
-        <draggable v-model="commonList" class="card-cell-content">
-          <div
-            v-for="(item, index) in commonList"
-            :key="item.id"
-            class="card-cell-content-box"
-            @click="handleAdd(item, index)"
-            :title="
-              !['-999', '-1'].includes(item.id) && isDelFlag ? '点击删除' : ''
-            "
-            :class="
-              !['-999', '-1'].includes(item.id) && isDelFlag ? 'div-del' : ''
-            "
-          >
-            <!--            <el-popover-->
-            <!--              v-if="item.id !=='-1'"-->
-            <!--              placement="top-start"-->
-            <!--              title=""-->
-            <!--              width="10px"-->
-            <!--              trigger="click"-->
-            <!--              content="">-->
-            <!--              <i style="color: red" class="el-icon-delete"></i>-->
-            <!--              <div class="card-cell-content-div"  slot="reference">-->
-            <!--                <i :class="item.icon||'el-icon-menu'"></i>-->
-            <!--                <span>{{ item.name }}</span>-->
-            <!--              </div>-->
-            <!--            </el-popover>-->
-            <!--            <el-tooltip placement="top" effect="light" v-if="item.id !=='-1'">-->
-            <!--              <div slot="content">-->
-            <!--                <i style="color: red;cursor: pointer;font-size: 18px" class="el-icon-delete"-->
-            <!--                   @click="handleCommonListDel(item,index)"></i>-->
-            <!--              </div>-->
-            <!--              <div class="card-cell-content-div">-->
-            <!--                <i :class="item.icon||'el-icon-s-opportunity'"></i>-->
-            <!--                <span>{{ item.name }}</span>-->
-            <!--              </div>-->
-            <!--            </el-tooltip>-->
-            <div class="card-cell-content-div">
-              <i :class="item.icon || 'el-icon-s-opportunity'"></i>
-              <span>{{ item.name }}</span>
+        </el-card>
+        <el-card class="card-cell middle-cell">
+          <div slot="header" class="clearfix">
+            <span>常用功能</span>
+          </div>
+          <draggable v-model="commonList" class="card-cell-content">
+            <div
+              v-for="(item, index) in commonList"
+              :key="item.id"
+              class="card-cell-content-box"
+              @click="handleAdd(item, index)"
+              :title="
+                !['-999', '-1'].includes(item.id) && isDelFlag ? '点击删除' : ''
+              "
+              :class="
+                !['-999', '-1'].includes(item.id) && isDelFlag ? 'div-del' : ''
+              "
+            >
+              <!--            <el-popover-->
+              <!--              v-if="item.id !=='-1'"-->
+              <!--              placement="top-start"-->
+              <!--              title=""-->
+              <!--              width="10px"-->
+              <!--              trigger="click"-->
+              <!--              content="">-->
+              <!--              <i style="color: red" class="el-icon-delete"></i>-->
+              <!--              <div class="card-cell-content-div"  slot="reference">-->
+              <!--                <i :class="item.icon||'el-icon-menu'"></i>-->
+              <!--                <span>{{ item.name }}</span>-->
+              <!--              </div>-->
+              <!--            </el-popover>-->
+              <!--            <el-tooltip placement="top" effect="light" v-if="item.id !=='-1'">-->
+              <!--              <div slot="content">-->
+              <!--                <i style="color: red;cursor: pointer;font-size: 18px" class="el-icon-delete"-->
+              <!--                   @click="handleCommonListDel(item,index)"></i>-->
+              <!--              </div>-->
+              <!--              <div class="card-cell-content-div">-->
+              <!--                <i :class="item.icon||'el-icon-s-opportunity'"></i>-->
+              <!--                <span>{{ item.name }}</span>-->
+              <!--              </div>-->
+              <!--            </el-tooltip>-->
+              <div class="card-cell-content-div">
+                <i :class="item.icon || 'el-icon-s-opportunity'"></i>
+                <span>{{ item.name }}</span>
+              </div>
             </div>
+          </draggable>
+        </el-card>
+      </div>
+      <div class="box-container-middl_right">
+        <el-card class="card-cell middle-cell">
+          <div slot="header" class="clearfix">
+            <span>统一门户</span>
           </div>
-        </draggable>
-      </el-card>
-      <el-card class="card-cell middle-cell">
-        <div slot="header" class="clearfix">
-          <span>消息提醒</span>
-        </div>
-        <div>
-          <vue-seamless-scroll
-            class="scroll-box"
-            v-if="messageScrollList.length"
-            :data="messageScrollList"
-            :class-option="defineScroll"
-          >
-            <el-timeline class="scroll-box-content">
-              <el-timeline-item
-                :hide-timestamp="false"
-                v-for="o in messageScrollList"
-                :key="o.id"
-              >
-                <template slot="dot">
-                  <span class="scroll-box-content-dot"></span>
-                </template>
-                <div class="scroll-box-content-item">
-                  <span class="item-date">{{ o.createTime }}</span>
-                  <span
-                    class="item-text"
-                    :title="`${o.templateNickname + ':' + o.templateContent}`"
-                  >
-                    <span style="font-size: 0.8vw">{{
-                      o.templateNickname + ':'
-                    }}</span>
-                    {{ o.templateContent }}</span
-                  >
-                </div>
-              </el-timeline-item>
-            </el-timeline>
-          </vue-seamless-scroll>
-          <el-empty v-else description="暂无"></el-empty>
-        </div>
-      </el-card>
+          <div class="list">
+            <div
+              v-for="(item, index) in list"
+              :class="[(index + 1) % 3 == 0 ? 'item margin_0' : 'item']"
+              @click="openUrl(item)"
+            >
+              <div><img :src="item.img" /></div>
+              <div>{{ item.name }}</div>
+            </div>
+          </div>
+        </el-card>
+        <el-card class="card-cell middle-cell">
+          <div slot="header" class="clearfix">
+            <span>消息提醒</span>
+          </div>
+          <div>
+            <vue-seamless-scroll
+              class="scroll-box"
+              v-if="messageScrollList.length"
+              :data="messageScrollList"
+              :class-option="defineScroll"
+            >
+              <el-timeline class="scroll-box-content">
+                <el-timeline-item
+                  :hide-timestamp="false"
+                  v-for="o in messageScrollList"
+                  :key="o.id"
+                >
+                  <template slot="dot">
+                    <span class="scroll-box-content-dot"></span>
+                  </template>
+                  <div class="scroll-box-content-item">
+                    <span class="item-date">{{ o.createTime }}</span>
+                    <span
+                      class="item-text"
+                      :title="`${o.templateNickname + ':' + o.templateContent}`"
+                    >
+                      <span style="font-size: 0.8vw">{{
+                        o.templateNickname + ':'
+                      }}</span>
+                      {{ o.templateContent }}</span
+                    >
+                  </div>
+                </el-timeline-item>
+              </el-timeline>
+            </vue-seamless-scroll>
+            <el-empty v-else description="暂无"></el-empty>
+          </div>
+        </el-card>
+      </div>
     </div>
+    <!-- <div class="box-container-bottom">
+    </div> -->
     <handleTask ref="handleTaskRef" @reload="reload"></handleTask>
     <detail ref="detailRef"></detail>
     <commonDialog
@@ -391,6 +395,9 @@
       console.log(this.user);
     },
     methods: {
+      openUrl(item) {
+        window.open('https://' + item.linkUrl, '_blank');
+      },
       async getPages() {
         let { list } = await getList({ pageNum: 1, size: 9999 });
         this.list = list.map((item) => {
@@ -555,7 +562,7 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    height: calc(100vh - 116px);
+    height: calc(100vh - 96px);
     // width: calc(100%);
 
     .box-container-top {
@@ -566,7 +573,7 @@
       justify-content: space-between;
 
       .middle-cell:nth-child(1) {
-        flex: 0 0 70%;
+        flex: 0 0 75%;
 
         .card-cell-content {
           padding: 0;
@@ -633,7 +640,7 @@
       }
 
       .middle-cell:nth-child(2) {
-        flex: 0 0 29.2%;
+        flex: 0 0 24.2%;
         .card-cell-info {
           padding: 0 10px;
           height: 100%;
@@ -671,11 +678,139 @@
     }
 
     .box-container-middle {
+      flex: 1 0 auto;
+      height: 0;
+      overflow: hidden;
       margin: 10px 0;
-      flex: 1;
       display: flex;
       min-height: 280px;
       justify-content: space-between;
+
+      .box-container-middl_left {
+        flex: 0 0 75%;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        .middle-cell:nth-child(1) {
+          flex: 1;
+          margin-bottom: 10px;
+        }
+        .middle-cell:nth-child(2) {
+          flex: 0 0 130px;
+          .card-cell-content {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            flex-wrap: nowrap;
+            align-content: center;
+            height: 100%;
+            overflow-x: auto;
+            padding: 0 10px;
+
+            .card-cell-content-box {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              height: 80%;
+              width: 100%;
+              border: 1px solid #e3e5e4;
+              justify-content: space-evenly;
+              flex: 0 0 5.5%;
+              padding: 8px 0;
+              border-radius: 5px;
+              margin-right: 10px;
+              cursor: pointer;
+
+              &:hover {
+                background: #dee4e9;
+              }
+            }
+
+            .card-cell-content-div {
+              height: 100%;
+              width: 100%;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-content: space-evenly;
+            }
+
+            .card-cell-content-div i {
+              font-size: 2vw;
+            }
+
+            .card-cell-content-div span {
+              letter-spacing: 2px;
+              font-weight: 600;
+            }
+          }
+
+          .middle-cell {
+            flex: 0 0 100%;
+          }
+        }
+        :deep(.el-card__body) {
+          overflow: hidden;
+        }
+      }
+
+      .box-container-middl_right {
+        flex: 0 0 24.2%;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        .middle-cell:nth-child(1) {
+          flex: 4;
+          margin-bottom: 10px;
+        }
+        .middle-cell:nth-child(2) {
+          flex: 3;
+        }
+        :deep(.el-card__body) {
+          overflow: auto;
+          .list {
+            flex: 1;
+            padding: 10px;
+            box-sizing: border-box;
+            .item {
+              background: url('@/assets/bg.png');
+              background-repeat: no-repeat;
+              background-size: 100% 100%;
+              display: inline-block;
+              width: 32%;
+              margin-right: 2%;
+              aspect-ratio: 16/19;
+              padding: 10px;
+              box-sizing: border-box;
+              margin-bottom: 10px;
+              border-radius: 5px;
+              cursor: pointer;
+              > div:first-child {
+                flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                > img {
+                  width: 100%;
+                  aspect-ratio: 16/16;
+                }
+              }
+              > div:last-child {
+                color: #1383f1;
+                font-weight: bold;
+                font-size: 12px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              }
+            }
+            .margin_0 {
+              margin-right: 0;
+            }
+          }
+        }
+      }
+
       .middle-cell:nth-child(1) {
         flex: 0 0 70%;
       }
@@ -715,7 +850,7 @@
                 color: #1383f1;
                 font-weight: bold;
                 padding: 10px;
-                font-size: 16px;
+                font-size: 12px;
                 display: flex;
                 align-items: center;
                 justify-content: center;
@@ -862,7 +997,7 @@
     .box-container-bottom {
       width: 100%;
       display: flex;
-      min-height: 200px;
+      height: 300px;
       justify-content: space-between;
       .middle-cell:nth-child(1) {
         flex: 0 0 70%;