大屏新版修改 2022,08,26

src/components/mapTitle/index.vue

 <template>
   <div class="title">
     {{ this.text }}
-    <span
-      v-if="detailsHandle"
-      @click="detailsHandle && detailsHandle()"
-    >{{textRight || "更多"}}</span>
+    <span v-if="detailsHandle" @click="detailsHandle && detailsHandle()">
+    <!-- {{ textRight || "更多" }} -->
+    </span>
   </div>
 </template>
 <script lang="ts">
@@ -35,6 +34,7 @@ export default defineComponent({
   justify-content: space-between;
   align-items: center;
   font-size: 20px;
+
   &::before {
     content: " ";
     display: inline-block;
@@ -45,12 +45,14 @@ export default defineComponent({
     height: 80%;
     background: #19ecff;
   }
+
   span {
     font-weight: 400;
     color: #666;
     cursor: pointer;
     font-size: 14px;
     color: #19ecff;
+
     &:hover {
       color: #62b3ef;
     }

src/layout/download.js

+import axios from 'axios'
+import { ElLoading } from 'element-plus'
+// import vue from 'vue';
+// import { createApp } from 'vue'
+// import {defineComponent, onMounted} from 'vue'//引入方法
+
+const mimeMap = {
+    xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    zip: 'application/zip',
+    wps: 'application/wps'
+}
+
+// const baseUrl = process.env.VUE_APP_BASE_API;
+// const baseUrl = window.baseURL ? (process.env.NODE_ENV === 'development' ? window.baseURL.devUrl : window.baseURL.prodUrl) : process.env.VUE_APP_BASE_API;
+let loading; // loading;
+
+export function downLoadWps(filename) {
+    loading = ElLoading.service({
+        lock: true,
+        text: 'Loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+    })
+    axios({
+        method: 'get',
+        url: 'http://192.168.0.132:9095/indexImport/quarterlyReport',
+        responseType: 'blob',
+        // headers: { 'Authorization': 'Bearer ' + getToken() }
+    }).then(res => {
+        resolveBlob(res, mimeMap.wps,filename)
+    })
+}
+
+/**
+ * 解析blob响应内容并下载
+ * @param {*} res blob响应内容
+ * @param {String} mimeType MIME类型
+ */
+export function resolveBlob(res, mimeType, fileName) {
+    // 异常处理
+    if (res.data.type == "application/json") {
+        const reader = new FileReader();
+        reader.onload = function (e) {
+            const { msg } = JSON.parse(e.target.result);
+            // Vue.config.globalProperties.$message.error(msg);
+        }
+        reader.readAsText(res.data);
+        if (loading) loading.close();
+        return
+    }
+    if (loading) loading.close();
+    var blob = new Blob([res.data], { type: mimeType });
+    // //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
+    var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*');
+    var contentDisposition = decodeURI(res.headers['content-disposition']);
+    if(fileName){
+        console.log('有文件名');
+    }else if (contentDisposition == undefined || contentDisposition == 'undefined') {
+        console.log('文件名未获取到');
+    } else {
+        var result = patt.exec(contentDisposition)
+        var name = result[1];
+        fileName = name.replace(/\"/g, '')
+    }
+    let objectUrl = URL.createObjectURL(blob)
+    const aLink = document.createElement('a')
+
+    try {
+        aLink.style.display = 'none'
+        aLink.href = URL.createObjectURL(blob)
+        aLink.setAttribute('download', fileName) // 设置下载文件名称
+        document.body.appendChild(aLink)
+        aLink.click()
+        URL.revokeObjectURL(aLink.href); //清除引用
+        document.body.removeChild(aLink);
+        // Vue.config.globalProperties.$download.saveAs(objectUrl, fileName);
+    } catch (e) {
+        console.log(e, '异常');
+    }
+}
\ No newline at end of file

src/layout/head.vue

 
 <template>
   <div class="app-head-warpper">
-    <div class="header-bg"></div>
+    <div class="header-bg">
+      <a class="generate" @click="downloadFile" v-if="curDataType == '2022Two'">
+        <img src="@/assets/img/generate.png" alt=""> 生成本季度报告
+      </a>
+    </div>
     <!-- 一级导航栏 -->
     <!-- <el-row :gutter="20" class="app-header" type="flex" align="cneter">
       <el-col :span="6" class="title">创新示范绩效评价</el-col>
@@ -23,58 +27,34 @@
 
     <div class="container">
       <!-- 二级导航栏 -->
-      <el-row
-        v-if="(secodndList || []).length > 0"
-        class="second-nav"
-        :gutter="20"
-      >
+      <el-row v-if="(secodndList || []).length > 0" class="second-nav" :gutter="20">
         <el-col v-for="(item, index) in secodndList" :key="index" :span="4">
-          <el-card
-            shadow="hover"
-            :class="{
+          <el-card shadow="hover" :class="{
             'second-active-nav': index === secondIndex,
-            }"
-            @click="secondHandle(item, index)"
-            >{{ item.name }}</el-card
-          >
+          }" @click="secondHandle(item, index)">{{ item.name }}</el-card>
         </el-col>
       </el-row>
 
       <!-- 行动轨迹记录 -->
       <el-row v-if="curRouteHistoy.length > 0" class="proceed-record">
         <el-col class="nav-history" :span="17">
-          <el-row
-            class="pointer"
-            @click="$router.go(-1)"
-            align="middle"
-            v-if="$route.path !== '/dataCenter/map'"
-          >
-            <el-icon> <ArrowLeftBold /> </el-icon>返回
+          <el-row class="pointer" @click="$router.go(-1)" align="middle" v-if="$route.path !== '/dataCenter/map'">
+            <el-icon>
+              <ArrowLeftBold />
+            </el-icon>返回
             <el-divider direction="vertical"></el-divider>
           </el-row>
 
           <el-col class="nav-history-item" :span="18">
-            <div
-              v-for="(item, index) in curRouteHistoy"
-              :key="item"
-              class="proceed-item"
-              :class="{
+            <div v-for="(item, index) in curRouteHistoy" :key="item" class="proceed-item" :class="{
               'lignht-color': index === curRouteHistoy.length - 1,
-              }"
-              @click="toPage(item)"
-            >
-              <el-icon
-                v-if="index > 0"
-                :color="index === curRouteHistoy.length - 1 ? '#00daf6' : ''"
-              >
+            }" @click="toPage(item)">
+              <el-icon v-if="index > 0" :color="index === curRouteHistoy.length - 1 ? '#00daf6' : ''">
                 <CaretRight />
               </el-icon>
-              <span
-                :class="{
+              <span :class="{
                 'lignht-color': index === curRouteHistoy.length - 1,
-                }"
-                >{{ item.label }}</span
-              >
+              }">{{ item.label }}</span>
             </div>
           </el-col>
         </el-col>
@@ -82,16 +62,22 @@
         <!-- 年度 -->
         <el-col class="year-items">
           <div class="years" align="middle">
-            <span
-              v-for="(item, index) in years"
-              :key="item.label"
-              :class="{
+            <el-button class="left" @click="pageNum--" :disabled="pageNum == 0">
+              <img src="@/assets/img/left.png" v-if="pageNum == 0" alt="">
+              <img src="@/assets/img/leftAct.png" v-else alt="">
+            </el-button>
+            <div class="yearBox">
+              <div class="yearLi" :style="{ left: '-' + 25 * pageNum + '%' }">
+                <span v-for="(item, index) in years" :key="item.label" :class="{
                   active: index === curYearIndex,
                   disabed: item.disabed,
-              }"
-              @click="yearHandle(item, index)"
-              >{{ item.label }}</span
-            >
+                }" @click="yearHandle(item, index)">{{ item.label }}</span>
+              </div>
+            </div>
+            <el-button class="right" @click="pageNum++" :disabled="pageNum == 1">
+              <img src="@/assets/img/right.png" v-if="pageNum == 1" alt="">
+              <img src="@/assets/img/rightAct.png" v-else alt="">
+            </el-button>
           </div>
         </el-col>
       </el-row>
@@ -103,6 +89,10 @@ import { defineComponent } from "vue";
 import { getNavList } from "./service";
 import NavList from "./navList.json";
 import { ArrowLeftBold, CaretRight } from "@element-plus/icons";
+import { mapState } from "vuex";
+import {downLoadWps} from './download.js'
+import axios from "axios"
+//使用
 
 const ENV_PARAMS = import.meta.env; // 这是Vite官方指导获取环境变量的方式
 
@@ -118,6 +108,7 @@ export default defineComponent({
       activeIndex: 0,
       secondIndex: 0,
       curRouteHistoy: [],
+      pageNum: 1,
       years: [
         {
           label: "2021年第二季度",
@@ -139,11 +130,21 @@ export default defineComponent({
           value: "2022One",
           disabed: false,
         },
+        {
+          label: "2022年第二季度",
+          value: "2022Two",
+          disabed: false,
+        },
       ],
       curYearIndex: 2,
     };
   },
-  created() {},
+  created() { },
+  computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+  },
   async mounted() {
     // @ts-ignore
     this.navList = NavList || [];
@@ -179,6 +180,11 @@ export default defineComponent({
   },
 
   methods: {
+    // 文件下载 流文件下载
+    downloadFile() {
+      downLoadWps('全省军民融合创新示范建设情况分析.wps');
+    },
+
     init() {
       const { meta, path } = this.$route;
       const { VITE_SYSTEM_NAMR = "创新示范绩效评价" } = ENV_PARAMS;
@@ -219,14 +225,40 @@ export default defineComponent({
 });
 </script>
 <style lang="scss" scoped>
+.generate {
+  // background-color: initial;
+  background-image: url('../assets/img/butbg.png') !important;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  border: none;
+  padding: 14px 18px;
+  top: 16px;
+  right: 10px;
+  color: #ffffff;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  img {
+    width: 31px;
+    height: 27px;
+    margin-right: 8px;
+  }
+}
+
 .pointer {
   cursor: pointer;
   margin-left: 10px;
   color: #d4f7ff;
+
   &:hover {
     color: #00daf6;
   }
 }
+
 .nav-history::after {
   content: "";
   width: 11px;
@@ -235,6 +267,7 @@ export default defineComponent({
   left: 0px;
   background-color: rgba(25, 125, 237, 20%);
 }
+
 .nav-history::before {
   content: "";
   width: 11px;
@@ -244,9 +277,11 @@ export default defineComponent({
   right: 0px;
   background-color: rgba(25, 125, 237, 20%);
 }
+
 .app-head-warpper {
   // background: #f5f9fb;
   box-sizing: border-box;
+
   .header-bg {
     height: 84px;
     width: 100%;
@@ -255,17 +290,21 @@ export default defineComponent({
     background-repeat: no-repeat;
     background-size: 100% 100%;
     margin-bottom: 5px;
+    position: relative;
   }
+
   .container {
     // padding: 0 20px;
     box-sizing: border-box;
   }
+
   //   一级导航栏
   .app-header {
     background: linear-gradient(to right, #0655bc, #317bdd);
     height: 85px;
     margin: 0 0 20px !important;
     box-sizing: border-box;
+
     .title {
       font-size: 26px;
       display: flex;
@@ -274,10 +313,12 @@ export default defineComponent({
       color: #fff;
       letter-spacing: 5px;
     }
+
     .nav-item {
       display: flex;
       align-items: center;
       justify-content: center;
+
       .rote-link-item {
         display: flex;
         align-items: center;
@@ -286,12 +327,14 @@ export default defineComponent({
         nav {
           font-size: 20px;
           cursor: pointer;
+
           &:hover {
             color: #4198ff;
           }
         }
       }
     }
+
     .active-nav {
       background: #06489e;
     }
@@ -302,9 +345,11 @@ export default defineComponent({
     box-sizing: border-box;
     margin-bottom: 20px;
     cursor: pointer;
+
     .el-card {
       text-align: center;
     }
+
     .second-active-nav {
       color: #fff;
       background: #4198ff;
@@ -323,6 +368,7 @@ export default defineComponent({
     font-size: 14px;
     height: 40px;
     color: #999;
+
     .nav-history {
       padding-left: 10px;
       width: 100%;
@@ -335,9 +381,11 @@ export default defineComponent({
       border-radius: 5px;
       overflow: hidden;
       position: relative;
+
       .nav-history-item {
         display: flex;
         height: 100%;
+
         .proceed-item {
           color: #d4f7ff;
           display: flex;
@@ -345,38 +393,90 @@ export default defineComponent({
           cursor: pointer;
           margin-left: 5px;
           cursor: pointer;
+
           &:hover {
             color: #00daf6;
           }
+
           .el-icon {
             margin-right: 2px;
           }
         }
       }
     }
+
     .year-items {
       display: flex;
       width: 100%;
       margin-left: 16px;
-      border-radius: 5px;
-      overflow: hidden;
+      // overflow: hidden;
       flex: 1;
       height: 40px;
-      background: rgba(25, 125, 237, 15%);
-      border: 1px solid #125caf;
+
       .years {
         display: flex;
         align-items: center;
 
-        height: 40px;
+        height: 42px;
+        flex: 1;
+        // overflow: hidden;
+
+        .left,
+        .right {
+          width: 20px;
+          padding: 0 2px;
+          border: 0;
+          height: 100%;
+          padding: 5px 2px;
+          background-color: rgba(25, 125, 237, 60%);
+          position: relative;
+          border-radius: 2px;
+
+          img {
+            width: 60%;
+            height: 60%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            margin: auto;
+          }
+        }
+
+        .right.is-disabled,
+        .left.is-disabled {
+          // #197ded不透明度20%未选中
+          background-color: rgba(25, 125, 237, 20%);
+        }
+
+        .yearBox {
+          height: 100%;
           flex: 1;
           overflow: hidden;
+          position: relative;
+          border: 1px solid #125caf;
+          background: rgba(25, 125, 237, 15%);
+          border-radius: 5px;
+          margin: 0 6px;
+        }
 
-        span {
+        .yearLi {
           width: 100%;
           display: flex;
+          flex: 1;
+          height: 100%;
+          position: absolute;
+          top: 0;
+        }
+
+        span {
+          // width: 100%;
+          min-width: 25%;
+          box-sizing: border-box;
+          display: flex;
           align-items: center;
-          padding: 0 12px;
+          padding: 0 3px;
           font-size: 14px;
           height: inherit;
           color: #d4f7ff;
@@ -384,6 +484,10 @@ export default defineComponent({
           cursor: pointer;
           border-right: 1px solid #125caf;
         }
+
+        // span:first-child{
+        //   border: ;
+        // }
         .active {
           background-color: #197ded;
           color: #fff;
@@ -395,6 +499,7 @@ export default defineComponent({
       color: #00daf6;
     }
   }
+
   .disabed {
     // background:#f5f5f5 !important;
     cursor: not-allowed !important;

src/views/dataCenter/map/cradMock.js

 export default {
+  "2022Two": {
+    list: [
+      { label: "领跑产品（技术）", value: "58", unit: "个" },
+      { label: "军地协同创新平台", value: "274", unit: "个" },
+      { label: "新兴领域研发经费", value: 3.20, unit: "亿元" },
+    ],
+    list2x: [
+      { label: "军工科研设备设施开放共享", value: "170018", unit: "台" },
+      { label: "军民资源共享信息平台数量", value: "784", unit: "个" },
+      { label: "军地需求对接活动数量", value: "39", unit: "次" },
+    ],
+  },
   "2022One": {
     list: [
       { label: "领跑产品（技术）", value: "63", unit: "个" },

src/views/dataCenter/map/index.vue

 <template>
   <el-row class="map-warpper" :gutter="16">
     <el-col class="map-left" :span="8">
-      <div class="performance-com card-item"><Performance /></div>
-      <div class="card-item rank-list"><RankList /></div>
+      <div class="performance-com card-item">
+        <Performance />
+      </div>
+      <div class="performance-com card-item">
+        <InvestmentProgress />
+      </div>
     </el-col>
     <el-col :span="9">
       <div class="map-middle">
-        <div class="card-item map-item"><Map /></div>
+        <div class="card-item map-item">
+          <Map @mapClick="mapClick"></Map>
+          <div class="sfqx" v-if="curDataType == '2022Two'">
+            <p>创新示范区县</p>
+            <div class="text">
+              <div v-for="(txt,index) in sfqx" :key="index">
+                {{txt}}
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </el-col>
     <el-col :span="7">
       <div class="map-right">
-        <div class="performance-com card-item"><InvestmentProgress /></div>
-        <div class="card-item incom-graphic"><Income /></div>
+
+        <div class="card-item rank-list">
+          <RankList />
+        </div>
+        <div class="card-item incom-graphic">
+          <Income />
+        </div>
       </div>
     </el-col>
   </el-row>
 
   <!-- 卡片信息展示 -->
   <div class="card-list" :gutter="16">
-    <el-col class="card-item"><StrongArmyCard /></el-col>
-    <el-col class="card-item"
-      ><CardItem
-        title="军民协同创新"
-        :infoList="list"
-        :toPage="dataCenterRouter.INNOVATION"
-    /></el-col>
-    <el-col class="card-item"><Industrial /></el-col>
-    <el-col class="card-item"
-      ><CardItem
-        :infoList="list2x"
-        title="资源开放共享"
-        :toPage="dataCenterRouter.RESORCE_SHARE"
-    /></el-col>
-    <el-col class="card-item"><SystemConstruct /></el-col>
+    <el-col class="card-item">
+      <StrongArmyCard />
+    </el-col>
+    <el-col class="card-item">
+      <CardItem title="军民协同创新" :infoList="list" :toPage="dataCenterRouter.INNOVATION" />
+    </el-col>
+    <el-col class="card-item">
+      <Industrial />
+    </el-col>
+    <el-col class="card-item">
+      <CardItem :infoList="list2x" title="资源开放共享" :toPage="dataCenterRouter.RESORCE_SHARE" />
+    </el-col>
+    <el-col class="card-item">
+      <SystemConstruct />
+    </el-col>
   </div>
 </template>
 <script lang="ts">
@@ -64,7 +83,7 @@ export default defineComponent({
     Industrial,
     SystemConstruct,
   },
-  setup() {},
+  setup() { },
   computed: {
     ...mapState({
       curDataType: (state) => state.curDataType,
@@ -80,11 +99,50 @@ export default defineComponent({
   data() {
     return {
       dataCenterRouter: DataCenterRouter,
+      sfqx: ["上城区,西湖区,萧山区", "海曙区,鄞州区,象山县", "南湖区,德清县,长兴县", "诸暨市,永康市,衢江区", "温岭市,缙云县,滨江区", "北仑区,海宁市,柯桥区", "普陀区"]
     };
   },
 });
 </script>
 <style lang="scss" scoped>
+.sfqx {
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+  // height: 184px;
+  width: 145px;
+  background-color: rgba(25, 125, 237, 30%);
+  padding: 10px;
+  box-sizing: border-box;
+
+  p {
+    color: #19ecff;
+    font-size: 16px;
+    line-height: 19.2px;
+    padding-left: 10px;
+    position: relative;
+    margin-bottom: 4px;
+  }
+
+  p::before {
+    content: "";
+    width: 4px;
+    height: 14px;
+    background-color: #19ecff;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+  }
+
+  .text {
+    color: #ffffff;
+    font-size: 13px;
+    line-height: 22px;
+  }
+}
+
 .card-item {
   // background: #fff;
   background-color: rgba(25, 125, 237, 15%);
@@ -94,7 +152,7 @@ export default defineComponent({
   cursor: pointer;
   transition: all 0.2s;
   box-shadow: 2px 2px 10px #04223d10;
-border: 1px solid #10529a;
+  border: 1px solid #10529a;
   // &:hover {
   //   // transform: translateY(-5px);
   //   transition: all 0.2s;
@@ -106,27 +164,35 @@ border: 1px solid #10529a;
   height: 640px;
   box-sizing: border-box;
   flex: 1;
+
   .map-left {
     box-sizing: border-box;
+
     .rank-list {
       margin-top: 16px;
       height: 312px;
       box-sizing: border-box;
     }
   }
+
   .map-middle {
     height: 640px;
     box-sizing: border-box;
     display: flex;
+
     .card-item {
       padding: 0;
     }
+
     .map-item {
       width: 100%;
+      position: relative;
     }
   }
+
   .map-right {
     box-sizing: border-box;
+
     .incom-graphic {
       margin-top: 16px;
       height: 312px;
@@ -140,10 +206,12 @@ border: 1px solid #10529a;
   margin-top: 16px;
   box-sizing: border-box;
   display: flex;
+
   .el-col {
     flex: 1;
     margin-right: 16px;
     height: 310px;
+
     &:last-of-type {
       margin-right: 0;
     }

src/views/dataCenter/map/model/CardList/industrialMcok.js

 export default {
+    "2022Two":  [{
+        title: "军民融合主营业务收入",
+        rate: "8.43%",
+        value: "3876.16",
+        label: "主营业务收入",
+        valueUnit: "亿元",
+    },
+    {
+        title: "国防科技工业产值",
+        rate: "14.4%",
+        value: "1441",
+        label: "产值",
+        valueUnit: "亿元",
+    },
+    ],
     "2022One":  [{
         title: "军民融合主营业务收入",
         rate: "13.66%",

src/views/dataCenter/map/model/CardList/strongArmyMock.js

 export default {
+    "2022Two": {
+        // 贯彻国防要求的建设项目
+        country: [{
+            label: "贯彻国防要求的建设项目",
+            value: 19,
+            unit: "个"
+        },
+        {
+            label: "总投资",
+            value: 30.19,
+            unit: "亿元"
+        },
+        ],
+        // 国防科技工业军品收入
+        technologyIncome: 134.29,
+        // 民口单位人均军品收入
+        militaryIncome: '90.36',
+        // 应届大学生应征入伍
+        enlistVal: 3408,
+        enlistRateVal: "54.7"
+    },
     "2022One": {
         // 贯彻国防要求的建设项目
         country: [{

src/views/dataCenter/map/model/CardList/systemConstructMock.js

 export default {
+    "2022Two": {
+        meetingCount: 8, // 各地召开融委全体会议次数
+        workeCount: 26, // 与当地军分区（警备区）建立并落实军地协作工作机制
+        fullTime: 105, // 专职
+        partTime: 125 // 兼职 数据暂缺 取2021年数据
+    },
     "2022One": {
         meetingCount: 16, // 各地召开融委全体会议次数
         workeCount: 77, // 与当地军分区（警备区）建立并落实军地协作工作机制

src/views/dataCenter/map/model/InvestmentProgress/mock.js

 export default {
+  "2022Two": [{
+    name: "投资金额",
+    type: "level_2",
+    echartType: "bar",
+    barValue: [41.15,51.49,23.91,7.68,35.28,11.60,13.41,7.52,23.21,9.65,10.41],
+    growthRate: [68.19,40.90,43.84,74.96,108.79,61.03,34.55,53.73,29.14,33.10,55.48],
+  }],
   "2022One": [
     {
       name: "投资金额",

src/views/dataCenter/map/model/Map/index.vue

@@ -7,37 +7,176 @@ import * as echarts from "echarts";
 // import { getMapGeoData, getMapPointList } from "../service";
 import getMapGeoData from "./mapGeoData.js";
 import mapPointList from "./mapPointList";
+import mapFiveData from "../Performance/mock";
+import { mapState } from "vuex";
 
+const xAxisValue = [
+  "杭州市",
+  "宁波市",
+  "温州市",
+  "湖州市",
+  "嘉兴市",
+  "绍兴市",
+  "金华市",
+  "衢州市",
+  "舟山市",
+  "台州市",
+  "丽水市",
+];
 export default defineComponent({
-  setup() {},
-  mounted() {
-    this.initEcharts();
-  },
   data() {
     return {
       pointList: [],
       mapEcharts: null,
+      fiveItems: {},
+      cityScore: [],
     };
   },
+  watch: {
+    // 更新地图数据
+    curDataType(val) {
+      if (this.mapEcharts) {
+        this.mapEcharts.setOption(this.options());
+      }
+    }
+  },
   computed: {
+    ...mapState({
+      curDataType: (state) => state.curDataType,
+    }),
+    activeMapData() {
+      return mapFiveData[this.curDataType];
+    },
+  },
+  mounted() {
+    // if(this.curDataType == '2022Two'){
+    //   this.fiveItems = mapFiveData;
+    // }
+    this.initEcharts();
+  },
+  methods: {
+    async initEcharts() {
+      // const { data: getMapData } = await getMapGeoData();
+      // const { data: pointList } = await getMapPointList();
+      const { data: getMapData } = getMapGeoData;
+      const { data: pointList } = mapPointList;
+
+      echarts.registerMap("ZJ", getMapData);
+      const mapEcharts = echarts.init(document.getElementById("map"));
+
+      mapEcharts.showLoading({ color: "#fff" });
+      mapEcharts.on("click", (params) => { this.mapClickHandle(params) });
+
+      this.pointList = pointList || [];
+      setTimeout(() => {
+        mapEcharts.setOption(this.options());
+        mapEcharts.hideLoading();
+        this.mapEcharts = mapEcharts;
+      }, 400);
+    },
+
+    // 点击事件
+    mapClickHandle(data) {
+      // console.log('点击', data);
+      if (data.name == '杭州市' && this.curDataType == '2022Two') {
+        // this.$emit('mapClick',)
+      }
+    },
+    // 数据处理
+    dataFormat() {
+      let mapData = xAxisValue.map(name => { return { name: name } });
+      const fiveItemBgColor = {
+        level_1: "#23bcf9",
+        level_2: "#67bbf9",
+        level_3: "#0ecedd",
+        level_4: "#eca933",
+        level_5: "#4198ff",
+      }
+      mapData.map((item, i) => {
+        let score = 0;
+        let fiveItems = Object.keys(this.activeMapData).map(key => {
+          score += this.activeMapData[key].value[i];
+          return {
+            name: this.activeMapData[key].name,
+            type: this.activeMapData[key].type,
+            fraction: this.activeMapData[key].value[i],
+            bgColor: fiveItemBgColor[this.activeMapData[key].type]
+          }
+        })
+        item.fiveItems = fiveItems;
+        item.score = score;
+      })
+      this.cityScore = mapData;
+      return mapData;
+    },
+    // options
     options() {
+      const cityScore = this.dataFormat();
+      function liHTml(fiveItems) {
+        let fiveScoreHtml = '';
+        fiveItems.map(data => {
+          fiveScoreHtml += `<div class="dataLi"><span class="circular" style="background-color:${data.bgColor}" ></span><span class="name">${data.name}</span> <span class="branchNum">${data.fraction}</span><span class="branch">分</span></div>`
+        })
+        //   `<div class="dataLi">
+        //   <span class="circular" ></span>
+        //    <span class="name">${cityData.fiveItems[i].name}</span> 
+        //    <span class="branchNum">${cityData.fiveItems[i].fraction}</span>
+        //   <span class="branch">分</span>
+        // </div>`
+        //  console.log(JSON.stringify(fiveScoreHtml),'555');
+        return fiveScoreHtml
+      }
+
+      function mapText(data) {
+        const cityData = cityScore.filter(item => data.name == item.name)[0];
+        let titHtml = `<div class="tit">
+        <span class="titIcon"></span>
+        <span class="cityName">${cityData.name}</span>
+        <span class="titBranchNum"> ${cityData.score}</span>
+        <span class="branch">分</span></div>`
+        let fiveScoreHtml = liHTml(cityData.fiveItems);
+        let html = `<div class="mapTooltip">` + titHtml + fiveScoreHtml + `</div>`
+        return html;
+      }
       return {
+        // tooltip 作用在series 中的数据
         tooltip: {
-          // borderColor: "#333",
+          backgroundColor: '#054593',
+          // opacity: '85%',
+          // borderRadius: '3px',
+          // boxShadow:'0px 2.28px 6.83px rgba(19, 65, 132, 0.15)',
+          textStyle: {
+            color: "#fff",
+            fontSize: 16,
+            align: "left"
+          },
+          trigger: "item",
           formatter: function (params) {
-            return params.name;
+            return mapText(params.data);
           },
         },
+        // geo 设置 tooltip 无用
         geo: {
           map: "ZJ",
-          show: true,
-          // roam: true,
+          roam: false,
           label: {
+            normal: {
+              show: false,
+            },
             emphasis: {
               show: false,
             },
           },
-
+          // <----选中效果
+          select: {
+            label: {
+              show: false,
+            },
+            itemStyle: {
+              color: '#2581c3'
+            }
+          },
+          // --->
           itemStyle: {
             normal: {
               areaColor: "#0f4c8f",
@@ -61,6 +200,7 @@ export default defineComponent({
           containLabel: true,
         },
         series: [
+          // 散点
           {
             type: "effectScatter",
             coordinateSystem: "geo",
@@ -96,6 +236,38 @@ export default defineComponent({
             symbolSize: 7,
             data: this.pointList,
           },
+          {
+            type: 'map',
+            map: "ZJ",
+            geoIndex: 0,
+            aspectScale: 0.75, //长宽比
+            showLegendSymbol: false, // 存在legend时显示
+            label: {
+              normal: {
+                show: false,
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  color: '#fff',
+                },
+              },
+            },
+            roam: true,
+            itemStyle: {
+              normal: {
+                show: false,
+                areaColor: '#031525',
+                borderColor: '#3B5077',
+              },
+              emphasis: {
+                show: false,
+                areaColor: '#2B91B7',
+              },
+            },
+            animation: false,
+            data: this.pointList,
+          },
           //   type: 'effectScatter', // 类型
           //   coordinateSystem: 'geo', // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'
           //   // 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond',
@@ -105,28 +277,6 @@ export default defineComponent({
       };
     },
   },
-  methods: {
-    async initEcharts() {
-      // const { data: getMapData } = await getMapGeoData();
-      // const { data: pointList } = await getMapPointList();
-      const { data: getMapData } = getMapGeoData;
-      const { data: pointList } = mapPointList;
-
-      echarts.registerMap("ZJ", getMapData);
-      const mapEcharts = echarts.init(document.getElementById("map"));
-
-      mapEcharts.showLoading({ color: "#fff" });
-      mapEcharts.on("click", this.mapClickHandle);
-
-      this.pointList = pointList || [];
-      setTimeout(() => {
-        mapEcharts.setOption(this.options);
-        mapEcharts.hideLoading();
-        this.mapEcharts = mapEcharts;
-      }, 400);
-    },
-    mapClickHandle() {},
-  },
   unmounted() {
     if (!this.mapEcharts) {
       return;
@@ -138,6 +288,70 @@ export default defineComponent({
 </script>
 
 <style >
+/* // 地图 tooltip format */
+.mapTooltip .titIcon {
+  display: inline-block;
+  width: 3px;
+  height: 13px;
+  background-color: #10f9ff;
+  margin-right: 3px;
+}
+
+.mapTooltip .cityName {
+  width: 47.16px;
+  height: 22.34px;
+  font-family: AlibabaPuHuiTi-Medium;
+  color: #10f9ff;
+  font-size: 16px;
+  line-height: 19.2px;
+}
+
+.mapTooltip .circular {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  margin-right: 3px;
+}
+
+.mapTooltip .name {
+  width: 84.14px;
+  height: 19.61px;
+  font-family: AlibabaPuHuiTiR-GBpc-EUC-H;
+  color: #ffffff;
+  font-size: 14px;
+  line-height: 16.8px;
+}
+
+.mapTooltip .titBranchNum {
+  width: 28.16px;
+  height: 22.2px;
+  font-family: AlibabaPuHuiTi-Medium;
+  color: #10f9ff;
+  font-size: 16px;
+  line-height: 19.2px;
+}
+
+.mapTooltip .branchNum {
+  width: 16.14px;
+  height: 20.12px;
+  font-family: AlibabaPuHuiTi-Medium;
+  color: #19ecff;
+  font-size: 14px;
+  line-height: 16.8px;
+}
+
+.mapTooltip .branch {
+  width: 11.11px;
+  height: 15.08px;
+  font-family: AlibabaPuHuiTiR-GBpc-EUC-H;
+  color: #ffffff;
+  font-size: 11px;
+  line-height: 13.2px;
+  margin-left: 5px;
+}
+
+/*  */
 .map-item canvas:first-of-type {
   transform: scaleY(1.1) scaleX(1.3);
 }

src/views/dataCenter/map/model/Performance/mock.js

@@ -10,6 +10,31 @@ export default {
   // "舟山",
   // "台州",
   // "丽水",
+  "2022Two": [{
+    name: "服务强军兴军",
+    type: "level_1",
+    value: [21.25,21.0,14.25,18.75,22.5,20.25,15.75,21.0,12.25,12.0,17.25],
+  },
+  {
+    name: "军民协同创新",
+    type: "level_3",
+    value: [18.5,13.5,9.5,3.5,13.0,11.5,4.0,13.0,2.5,6.5,2.5],
+  },
+  {
+    name: "产业融合发展",
+    type: "level_2",
+    value: [9.0,10.0,11.0,3.0,11,13.0,11.5,10.5,7.0,11.0,5.0],
+  },
+  {
+    name: "资源开放共享",
+    type: "level_4",
+    value: [12.0,13.5,10.0,13.0,14.5,14.0,9.0,9.0,9.0,12.5,8.0],
+  },
+  {
+    name: "五大体系建设",
+    type: "level_5",
+    value: [10.9,10.4,6.3,7.4,9.2,8.4,5.65,9.4,10.5,7.4,5.9],
+  }],
   "2022One": [{
     name: "服务强军兴军",
     type: "level_1",

src/views/dataCenter/map/model/RankList/index.vue

 <template>
-  <div>
+  <div style="height:100%">
     <MapTitle text="创新示范区县(市、区）排名" />
-
-    <el-scrollbar height="240px">
+    <!-- 内容 -->
+    <div class="rankingContent">
+      <!-- 头部 -->
+      <div class="rankingBox">
         <div class="tableBox">
-
           <el-row class="tabletit">
             <el-col :span="6">序号</el-col>
             <el-col :span="12">地区</el-col>
             <el-col :span="6">分数</el-col>
           </el-row>
-        <el-row class="table_cell" v-for="(item, index) in tableData" :key="index">
+        </div>
+      </div>
+
+      <!-- <el-scrollbar ref="el_Scrollbar" height="100%"> -->
+
+      <div class="tableBox">
+
+        <el-carousel height="200px" trigger="click" :loop="true" :interval="2500" direction="vertical" :autoplay="true">
+          <el-carousel-item v-for="(data, idx) in carouselData" :key="idx">
+            <el-row class="table_cell" v-for="(item, index) in data" :key="index">
               <el-col :span="6">
                 <div>
-              <div v-if="index > 2">{{ index + 1 }}</div>
-              <div v-else class="tab-index" :style="{ background: colors[index + 1] }">{{ index + 1 }}
+                  <div v-if="item.ranking > 3">{{ item.ranking }}</div>
+                  <div v-else class="tab-index" :style="{ background: colors[item.ranking] }">{{ item.ranking }}
                   </div>
                 </div>
               </el-col>
               <el-col :span="12">{{ item.name }}</el-col>
               <el-col :span="6">{{ item.score }}</el-col>
             </el-row>
+          </el-carousel-item>
+        </el-carousel>
       </div>
 
-    </el-scrollbar>
+      <!-- </el-scrollbar> -->
+    </div>
   </div>
 </template>
 <script>
@@ -45,6 +58,19 @@ export default {
     tableData() {
       return Mock[this.curDataType];
     },
+    carouselData() {
+      // 处理数据 index 转 ranking 排名
+      const tableData = this.tableData.map((item, index) => {
+        item.ranking = index + 1;
+        return item;
+      });
+      let carouselData = [];
+      for (let i = 0; i < tableData.length; i += 5) {
+        const list = tableData.slice(i, i + 5);
+        carouselData.push(list);
+      }
+      return carouselData
+    }
   },
   data() {
     return {
@@ -55,6 +81,10 @@ export default {
       },
     };
   },
+  mounted() {
+
+
+  },
 };
 </script>
 <style>
@@ -64,15 +94,36 @@ export default {
   width: 0 !important
 }
 
-.rank-list .el-scrollbar__wrap {
+/* .rank-list .el-scrollbar__wrap {
   width: calc(100% + 20px);
-}
-
+} */
 </style>
 <style lang="scss" scoped>
+.rankingContent {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  // margin-top: 10px;
+  padding-top: 10px;
+  box-sizing: border-box;
+}
+
+.rankingBox {
+  height: 40px;
+
+  .tableBox {
+    width: 100%;
+  }
+}
+
+::v-deep .el-scrollbar {
+  height: calc(100% - 65px);
+}
+
 .tableBox {
   color: #ffffff;
-  width: calc(100% - 17px);
+  width: calc(100% - 0px);
 
   .tabletit .el-col {
     font-weight: bold;
@@ -103,9 +154,11 @@ export default {
 
 }
 
-.el-scrollbar {
-  margin-top: 10px;
-}
+
+
+// .el-scrollbar {
+//   margin-top: 10px;
+// }
 
 .tab-index {
   border-radius: 50%;

src/views/dataCenter/map/model/RankList/mock.js

 export default {
+  "2022Two": [
+    { name: "南湖区", score: 83.00, type: 2, },
+    { name: "西湖区", score: 76.00, type: 2, },
+    { name: "鄞州区", score: 71.00, type: 2, },
+    { name: "滨江区", score: 70.00, type: 2, },
+    { name: "海宁市", score: 68.00, type: 2, },
+    { name: "北仑区", score: 67.50, type: 2, },
+    { name: "德清县", score: 63.50, type: 2, },
+    { name: "上城区", score: 62.00, type: 2, },
+    { name: "长兴县", score: 62.00, type: 2, },
+    { name: "象山县", score: 57.50, type: 2, },
+    { name: "温岭市", score: 56.00, type: 2, },
+    { name: "萧山区", score: 55.50, type: 2, },
+    { name: "海曙区", score: 54.00, type: 2, },
+    { name: "诸暨市", score: 53.00, type: 2, },
+    { name: "柯桥区", score: 51.50, type: 2, },
+    { name: "普陀区", score: 48.50, type: 2, },
+    { name: "衢江区", score: 41.50, type: 2, },
+    { name: "永康市", score: 36.50, type: 2, },
+    { name: "缙云县", score: 30.00, type: 2, },
+  ],
   "2022One": [{
     name: "南湖区",
     score: 71.5,