添加报告输出组件，header显示优化。tagCard组件显示优化。

src/assets/global.css

@@ -254,6 +254,14 @@ th {
   border: 1px solid #74ffff;
 }
 
+#app ~ .el-menu--horizontal .el-menu-item:hover {
+  border: 1px solid #74ffff;
+}
+
+.docx-wrapper section.docx{
+  box-shadow: none !important;
+}
+
 /* leaflet 弹窗样式修改 */
 .leaflet-popup-content-wrapper,
 .leaflet-popup-tip {
@@ -272,7 +280,7 @@ th {
   border-color: #fff !important;
 }
 .docx-wrapper {
-  background: transparent !important;
+  background: #FFFFFF !important;
   justify-content: flex-start !important;
   padding: 0 !important;
 }

src/components/common/BottomForm/ReportOutput.vue

@@ -0,0 +1,88 @@
+<template>
+  <!-- 报告输出弹窗 fullscreen -->
+  <el-dialog
+    custom-class="myMission"
+    title="报告输出"
+    :visible.sync="dialogVisible"
+    width="70%"
+    height="60%"
+    :before-close="handleClose"
+  >
+    <template slot="title">
+      <div class="dialogTitle">
+        <div class="dialogTitleIcon"></div>
+        报告输出
+      </div>
+    </template>
+    <FilePreView ref="filePreview2" />
+  </el-dialog>
+</template>
+
+<script>
+/**
+ * 底部菜单（报告输出）组件
+ * @author: LiuMengxiang
+ * @Date: 2022年12月7日
+ */
+import FilePreView from "../FilePreView.vue";
+export default {
+  name: "ReportOutput",
+  components: { FilePreView },
+  data() {
+    return {
+      // 报告输出弹窗显示状态
+      dialogVisible: false,
+      filePath: "./static/word/test.docx"
+    };
+  },
+  mounted() {
+    // 报告输出事件监听
+    this.$bus.$on("ReportOutput", () => {
+      this.changeShowBottomMenusStatus();
+    });
+  },
+  destroy() {
+    // 当容器销毁时，需要停止监听该事件
+    this.$bus.$off("ReportOutput");
+  },
+  props: [],
+  methods: {
+    // 当用户点击svg底座时，切换底部菜单显示隐藏状态。
+    changeShowBottomMenusStatus() {
+      // 打开弹窗
+      this.dialogVisible = true;
+      // 判断是否存在文件，存在的话自动请求文件并渲染
+      this.$nextTick(() => {
+        if (this.filePath) {
+          this.$refs.filePreview2.showView(this.filePath);
+        }
+      });
+      if (this.$ifMenu("3", "")) {
+        this.$emit("changeShowBottomMenusStatus", false);
+      }
+    },
+    // 弹窗关闭询问
+    handleClose() {
+      if (this.dialogVisible) {
+        this.$confirm("确认关闭？")
+          .then(_ => {
+            this.clearDialogVisible();
+          })
+          .catch(_ => {});
+      }
+    },
+    // 报告输出取消
+    clearDialogVisible() {
+      // 关闭弹窗
+      this.dialogVisible = false;
+      //   删除文件预览
+        this.$refs.filePreview2.cancel();
+      // 修改父级菜单变量（弹窗显示状态和显示底部菜单）
+      if (this.$ifMenu("3", "")) {
+        this.$emit("changeShowBottomMenusStatus", true);
+      }
+    }
+  },
+  watch: {}
+};
+</script>

src/components/common/BottomMenus.vue

@@ -19,6 +19,8 @@
     <UploadingData @changeShowBottomMenusStatus="changeShowBottomMenusStatus" />
     <!-- 自定义模型 -->
     <CustomModelDialog />
+    <!-- 报告输出弹窗 -->
+    <ReportOutput @changeShowBottomMenusStatus="changeShowBottomMenusStatus"/>
     <!-- 底部菜单主体 -->
     <div
       id="menusBox"
@@ -87,6 +89,7 @@ import MyMission from "./BottomForm/MyMission.vue";
 import SameScreenComparison from "./BottomForm/SameScreenComparison.vue";
 import UploadingData from "./BottomForm/UploadingData.vue";
 import CustomModelDialog from "./BottomForm/CustomModelDialog.vue";
+import ReportOutput from "./BottomForm/ReportOutput.vue";
 export default {
   name: "BottomMenus",
   components: {
@@ -96,6 +99,7 @@ export default {
     SameScreenComparison,
     UploadingData,
     CustomModelDialog,
+    ReportOutput
   },
   data() {
     return {
@@ -151,7 +155,7 @@ export default {
           index: 2,
           width: "94px",
           title: "疑点报告",
-          subMenu: [{ index: 0, title: "报告输出", bgImage: "bgsc" }],
+          subMenu: [{ index: 0, title: "报告输出", bgImage: "bgsc", clickEmit: "ReportOutput"  }],
         },
         {
           index: 3,

src/components/common/FilePreView.vue

@@ -3,7 +3,7 @@
           "docx-preview": "^0.1.4",
           "jszip": "^3.10.0",-->
   <div>
-    <div title="文件预览" v-if="showDoc || showPdf || showImg" width="750px">
+    <div title="文件预览" v-if="showDoc || showPdf || showImg" width="750px" style="background: #FFF !important;">
       <template slot="closeIcon">
         <el-icon icon="close-circle" class="closeIcon" />
       </template>

src/components/common/TagCard.vue

@@ -8,12 +8,16 @@
           <span>{{ data.value ? data.value : "--" }}</span
           ><span>{{ data.unit ? data.unit : "--" }}</span>
         </div>
-        <div class="tagImg"></div>
+        <div class="tagImg">
+          <div v-if="index === chartCardDataIndex" class="tagActive"></div>
+        </div>
         <div class="tagTitle">{{ data.title ? data.title : "--" }}</div>
       </div>
       <!-- 左右布局 -->
       <div v-if="data.type === 'lr'" class="lrFlx">
-        <div class="tagImg"></div>
+        <div class="tagImg">
+          <div v-if="index === chartCardDataIndex" class="tagActive"></div>
+        </div>
         <div>
           <div class="tagValue">
             <span>{{ data.value ? data.value : "--" }}</span
@@ -47,15 +51,15 @@ export default {
    * data.value: 值（必填）
    * data.unit: 单位
    */
-  props: ["data","index"],
+  props: ["data", "index", "chartCardDataIndex"],
   methods: {
-    mousemoveEvent(index){
-      if(index !== undefined){
-        this.$emit("changeMousemoveIndex",index);
+    mousemoveEvent(index) {
+      if (index !== undefined) {
+        this.$emit("changeMousemoveIndex", index);
       }
     },
-    clickStop(){
-      console.log("预留事件，主要是阻止click冒泡！")
+    clickStop() {
+      console.log("预留事件，主要是阻止click冒泡！");
     }
   },
   watch: {}
@@ -108,11 +112,24 @@ export default {
     }
   }
   .tagImg {
+    position: relative;
     width: 75px;
     height: 75px;
     background-image: url("../../assets/image/cardTag.png");
     background-repeat: no-repeat;
     background-size: 100%;
+    z-index: 2;
+    .tagActive {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      border-radius: 50%;
+      background-image: radial-gradient(circle, #34c6d832, #0000, #FFFFFFaa);
+      z-index: 1;
+    }
   }
   .tagTitle {
     font-size: 16px;

src/components/layout/Header.vue

@@ -14,21 +14,37 @@
           class="el-menu-demo"
           mode="horizontal"
           active-text-color="#74FFFF"
+          menu-trigger="hover"
           @select="select"
         >
-          <el-menu-item index="1">首页</el-menu-item>
+          <el-menu-item index="1"
+            ><i class="el-icon-s-home" v-show="$store.state.windowsSize.width <= 1700"></i
+            ><span v-show="$store.state.windowsSize.width > 1700">首页</span></el-menu-item
+          >
           <el-submenu index="2">
-            <template slot="title" class="submenu">疑点筛查</template>
+            <template slot="title" class="submenu"
+              ><i class="el-icon-s-order" v-show="$store.state.windowsSize.width <= 1700"></i
+              ><span v-show="$store.state.windowsSize.width > 1700">疑点筛查</span></template
+            >
             <el-menu-item index="2-1">土地资源</el-menu-item>
             <el-menu-item index="2-2">水资源</el-menu-item>
             <el-menu-item index="2-3">林资源</el-menu-item>
             <el-menu-item index="2-4">生态资源</el-menu-item>
             <el-menu-item index="2-5">镇域专题</el-menu-item>
           </el-submenu>
-          <el-menu-item index="3">综合分析</el-menu-item>
-          <el-menu-item index="4">全流程管理</el-menu-item>
+          <el-menu-item index="3"
+            ><i class="el-icon-s-order" v-show="$store.state.windowsSize.width <= 1700"></i
+            ><span v-show="$store.state.windowsSize.width > 1700">综合分析</span></el-menu-item
+          >
+          <el-menu-item index="4"
+            ><i class="el-icon-s-management" v-show="$store.state.windowsSize.width <= 1700"></i
+            ><span v-show="$store.state.windowsSize.width > 1700">全流程管理</span></el-menu-item
+          >
           <el-submenu index="5">
-            <template slot="title">智能辅助</template>
+            <template slot="title"
+              ><i class="el-icon-s-finance" v-show="$store.state.windowsSize.width <= 1700"></i
+              ><span v-show="$store.state.windowsSize.width > 1700">智能辅助</span></template
+            >
             <el-menu-item index="5-1">法律法规</el-menu-item>
             <el-menu-item index="5-2">频发问题</el-menu-item>
             <el-menu-item index="5-3">指标体系</el-menu-item>

src/components/layout/MenuCard.vue

@@ -82,6 +82,7 @@
             v-for="(item, index) in menuData.topSolt.commonData"
             :data="item"
             :index="index"
+            :chartCardDataIndex="chartCardDataIndex"
             :key="item.title"
             @changeMousemoveIndex="changeMousemoveIndex"
           />