fix(产业融合): 样式待调整

src/App.vue

@@ -5,7 +5,7 @@
     <AppHead />
 
     <div class="main-warpper">
-      <router-view >  </router-view>
+      <router-view> </router-view>
     </div>
   </div>
 </template>
@@ -27,8 +27,11 @@ export default defineComponent({
   padding: 0;
   margin: 0;
 }
+@font-face {
+  font-family: "tabTypeFace";
+  src: url("../public/assets/tabTypeFace.TTF");
+}
 #app {
-  height: 100vh;
   box-sizing: border-box;
 }
 
@@ -36,11 +39,14 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-width: 1920px;
+  padding: 20px 30px;
+  background: #f5f9fb;
+
+  box-sizing: border-box;
 }
 .main-warpper {
-  padding: 0 20px 20px;
   flex: 1;
-  background: #f5f9fb;
   box-sizing: border-box;
 }
 </style>

src/components/mapTitle/index.vue

@@ -31,6 +31,7 @@ export default defineComponent({
   display: flex;
   justify-content: space-between;
   align-items: center;
+  font-size: 20px;
   &::before {
     content: " ";
     display: inline-block;
@@ -46,9 +47,10 @@ export default defineComponent({
     color: #666;
     cursor: pointer;
     font-size: 14px;
-    &:hover {
     color: #4197ff;
-    }
+    // &:hover {
+    //   color: #4197ff;
+    // }
   }
 }
 </style>
\ No newline at end of file

src/layout/head.vue

@@ -164,7 +164,7 @@ export default defineComponent({
   box-sizing: border-box;
 
   .container {
-    padding: 0 20px;
+    // padding: 0 20px;
     box-sizing: border-box;
   }
   //   一级导航栏
@@ -220,7 +220,6 @@ export default defineComponent({
 
   // 行动轨迹记录
   .proceed-record {
-    margin-top: 20px;
     margin-bottom: 20px;
     padding: 0 20px;
     background: #fff;

src/route/index.ts

-import { createRouter, createWebHistory } from "vue-router"
+import { createRouter, createWebHistory, createWebHashHistory } from "vue-router"
 import evaluatIndicator from "./evaluatIndicator"
 
 
@@ -9,13 +9,11 @@ const routes: any[] = [
 ]
 
 const router = createRouter({
-    history: createWebHistory(),
+    history: createWebHashHistory(),
     routes,
     scrollBehavior(to, from, savedPosition) {
         return { top: 0 }
     },
 })
 
-
-
 export default navigation(router);
\ No newline at end of file

src/views/evaluatIndicator/index/index.vue

 <template>
-  <el-row class="map-warpper" :gutter="16">
-    <el-col class="map-left" :span="8">
+  <el-row class="map-warpper">
+    <el-col class="map-left">
       <div class="performance-com card-item"><Performance /></div>
       <div class="card-item rank-list"><RankList /></div>
     </el-col>
-    <el-col class="map-middle" :span="8">
-      <div class="card-item"><Map /></div>
-    </el-col>
-    <el-col class="map-right" :span="8">
+    <div class="map-middle" >
+      <div class="card-item map-item"><Map /></div>
+    </div>
+    <div class="map-right">
       <div class="performance-com card-item"><InvestmentProgress /></div>
       <div class="card-item incom-graphic"><Income /></div>
-    </el-col>
+    </div>
   </el-row>
 
   <!-- 卡片信息展示 -->
@@ -71,11 +71,11 @@ export default defineComponent({
 .card-item {
   background: #fff;
   border-radius: 5px;
-  padding: 15px 8px;
+  padding: 16px;
   overflow: hidden;
   cursor: pointer;
   transition: all 0.2s;
-  box-shadow: 2px 2px 10px #eee;
+  box-shadow: 2px 2px 10px #04223d10;
 
   // &:hover {
   //   // transform: translateY(-5px);
@@ -89,6 +89,10 @@ export default defineComponent({
   box-sizing: border-box;
   flex: 1;
   .map-left {
+    min-width: 586px;
+    max-width: 586px;
+    box-sizing: border-box;
+    margin-right: 16px;
     .rank-list {
       margin-top: 16px;
       height: 312px;
@@ -99,14 +103,25 @@ export default defineComponent({
     height: 640px;
     box-sizing: border-box;
     display: flex;
-    padding-left: -8px !important;
-    width: 100%;
-    height: 100%;
+    margin-right: 16px;
+
+    // width: 100%;
+     min-width: 662px;
+     max-width: 662px;
+
     .card-item {
-      flex: 1;
+      // flex: 1;
+      padding: 0;
+    }
+    .map-item {
+      min-width: 662px;
     }
   }
   .map-right {
+    min-width: 580px;
+    width: 580px;
+    box-sizing: border-box;
+
     .incom-graphic {
       margin-top: 16px;
       height: 312px;

src/views/evaluatIndicator/index/model/CardList/common.css

@@ -22,3 +22,10 @@
     background: #f8f9fb;
     border-radius: 5px;
 }
+.flex-row {
+    display: flex;
+    align-items: center;
+}
+.margin-left5{
+    margin-left: 5px;
+}
\ No newline at end of file

src/views/evaluatIndicator/index/model/CardList/index.vue

@@ -5,13 +5,13 @@
     <el-row
       v-for="item in infoList"
       :key="item.label"
-      class="font-size14 color-666 item-bg margin-bottom8"
+      class="row-item font-size14 color-666 item-bg margin-bottom8"
       justify="space-between"
       align="middle"
     >
       <el-col :span="18"> {{ item.label }}</el-col>
       <el-col :span="6">
-        <el-row align="middle">
+        <el-row align="middle" justify="end">
           <span class="font-size20 color-pramiry">{{ item.value }}</span>
           <span class="font-size12 color-999">{{ item.unit }}</span>
         </el-row>
@@ -49,7 +49,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import url("./common.css");
 .info {
-  padding: 10px 5px;
+  padding: 10px 0;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -62,5 +62,11 @@ export default defineComponent({
   .el-row {
     height: 28%;
   }
+  .row-item {
+    padding: 0 16px;
+  }
+  .row-text {
+    text-align: right;
+  }
 }
 </style>

src/views/evaluatIndicator/index/model/CardList/industrial.vue

@@ -85,7 +85,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import url("./common.css");
 .info {
-  padding: 10px 5px;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -113,11 +112,22 @@ export default defineComponent({
       margin-bottom: 0;
     }
     .title {
+      margin-left: 15px;
       margin-bottom: 5px;
       color: #333;
       font-weight: bold;
-
-     
+      position: relative;
+      &::before{
+        content: " ";
+        display: inline-block;
+        position: absolute;
+        top: 6px;
+        left: -12px;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #87bded;
+      }
     }
   }
 }

src/views/evaluatIndicator/index/model/CardList/strongArmy.vue

@@ -43,36 +43,43 @@
     </div>
 
     <!-- foot -->
-    <el-row class="foot-wrapper" :gutter="10">
-      <el-col :span="16">
+    <el-row class="foot-wrapper " :gutter="16">
+      <el-col :span="15" class="foot-row-text">
         <el-row class="item-bg margin-bottom8">
-          <el-col class="font-size14 color-666">国防科技工业军品收入</el-col>
-          <el-col>
+          <el-col class=" padding0-8 font-size14 color-666"
+            >国防科技工业军品收入</el-col
+          >
+          <el-col class="padding0-8">
             <span class="font-size20 color-pramiry">30</span>
             <span class="font-size12 color-999">亿元</span>
           </el-col>
         </el-row>
 
         <el-row class="item-bg">
-          <el-col class="font-size14 color-666">民口单位军需品收入</el-col>
-          <el-col>
+          <el-col class="padding0-8 font-size14 color-666"
+            >民口单位军需品收入</el-col
+          >
+          <el-col class="padding0-8">
             <span class="font-size20 color-pramiry">30</span>
             <span class="font-size12 color-999">亿元</span>
           </el-col>
         </el-row>
       </el-col>
-      <el-col class="font-size14 color-666 item-bg" :span="8">
+
+      <el-col class="font-size14 color-666 item-bg" :span="9">
         <el-row class="margin-bottom8">
-          <el-col class="font-size14 color-666">应届大学生应征入伍</el-col>
-          <el-col>
+          <el-col class="padding0-8 font-size14 color-666"
+            >应届大学生应征入伍</el-col
+          >
+          <el-col class="padding0-8">
             <span class="font-size20 color-pramiry">30</span>
             <span class="font-size12 color-999">人</span>
           </el-col>
         </el-row>
 
         <el-row>
-          <el-col class="font-size14 color-666">应征入伍率</el-col>
-          <el-col>
+          <el-col class="padding0-8 font-size14 color-666">应征入伍率</el-col>
+          <el-col class="padding0-8">
             <span class="font-size20 color-pramiry">30</span>
             <span class="font-size12 color-999">亿元</span>
           </el-col>
@@ -101,19 +108,28 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import url("./common.css");
 .info {
-  padding: 10px 5px;
+  padding: 10px 0;
   .text-list {
     .el-row {
       margin-bottom: 6px;
+      padding: 0 8px;
       &:last-of-type {
         margin-bottom: 0;
       }
     }
   }
 }
-
+.foot-row-text {
+  margin-left: 0 !important;
+}
 .foot-wrapper {
   margin-top: 10px;
+  width: 100%;
+ 
+
+  .padding0-8 {
+    padding: 0 8px;
+  }
   .margin-bottom8 {
     margin-bottom: 8px;
   }

src/views/evaluatIndicator/index/model/CardList/systemConstruct.vue

@@ -12,42 +12,48 @@
       2021年
     </el-row>
 
-    <el-row class="item-bg margin-bottom12" align="middle" justify="space-between">
-      <el-col class="font-size14 color-666" :span="18"
-        >各地召开融委全体会议次数</el-col
+    <el-row
+      class="item-bg margin-bottom12"
+      align="middle"
+      justify="space-between"
     >
-      <el-col class="font-size20 color-pramiry" :span="5">
-        30 <span class="font-size12 color-999">次</span>
+      <el-col class="item-text font-size14 color-666" :span="16">
+        各地召开融委全体会议次数
+      </el-col>
+      <el-col class="jf-end flex-row font-size20 color-pramiry" :span="5">
+        30 <span class="margin-left5 font-size12 color-999">次</span>
       </el-col>
     </el-row>
 
-    <el-row class="item-bg margin-bottom12"  align="middle" justify="space-between">
-      <el-col class="font-size14 color-666" :span="18"
-        >与当地军分区（警备区）建立并落实军地协作机制</el-col
+    <el-row
+      class="item-bg margin-bottom12 flex-one"
+      align="middle"
+      justify="space-between"
     >
-      <el-col class="font-size20 color-pramiry" :span="5">
-        30 <span class="font-size12 color-999">次</span>
+      <el-col class="item-text font-size14 color-666" :span="18">
+        与当地军分区（警备区）建立并落实军地协作机制
+      </el-col>
+      <el-col class="jf-end flex-row font-size20 color-pramiry" :span="5">
+        30 <span class="margin-left5 font-size12 color-999">次</span>
       </el-col>
     </el-row>
 
     <el-row class="info-item font-size14 color-666 item-bg margin-bottom12">
-      <el-row class="title">
-        各地军民融合办工作人员
-      </el-row>
+      <el-row class="item-text title"> 各地军民融合办工作人员 </el-row>
 
       <el-col :span="24">
         <el-row justify="space-between">
           <div class="item-row">
             <span class="font-size14 color-666">专职</span>
-            <el-col class="font-size20 color-pramiry">
-              30 <span class="font-size12 color-999">人</span>
+            <el-col class="jf-end flex-row font-size20 color-pramiry">
+              30 <span class="margin-left5 font-size12 color-999">人</span>
             </el-col>
           </div>
 
           <div class="item-row">
             <span class="font-size14 color-666">兼职</span>
-            <el-col class="font-size20 color-pramiry">
-              30 <span class="font-size12 color-999">人</span>
+            <el-col class="flex-row font-size20 color-pramiry">
+              30 <span class="margin-left5 font-size12 color-999">人</span>
             </el-col>
           </div>
         </el-row>
@@ -77,7 +83,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import url("./common.css");
 .info {
-  padding: 0 5px 10px 5px;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -94,25 +99,50 @@ export default defineComponent({
 
   .info-item {
     margin-bottom: 10px;
-    padding: 15px 10px;
+    padding: 15px;
     &:last-of-type {
       margin-bottom: 0;
     }
     .title {
       margin-bottom: 5px;
       color: #333;
-      font-weight: bold;
     }
     .item-row {
       padding: 0 20px;
       flex-direction: column;
       display: flex;
-      text-align: center;
+      div {
+        margin-top: -6px;
+      }
     }
   }
   .color-pramiry {
     text-align: center;
   }
+
+  .item-text {
+    margin-left: 15px;
+    color: #333;
+    position: relative;
+    &::before {
+      content: " ";
+      display: inline-block;
+      position: absolute;
+      top: 5px;
+      left: -10px;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: #87bded;
+    }
+  }
+  .flex-one{
+    flex-wrap: nowrap;
+    padding-right: 15px;
+  }
+  .jf-end{
+    justify-content: flex-end;
+  }
 }
 </style>
 

src/views/evaluatIndicator/index/model/Income/index.vue

@@ -10,8 +10,8 @@ import { defineComponent } from "vue";
 import MapTitle from "@/components/mapTitle/index.vue";
 import * as echarts from "echarts";
 enum Echart_color_Enum {
-  level_1 = "#fac858",
-  level_2 = "#4198ff",
+  level_1 = "#4198ff",
+  level_2 = "#4f5d81",
 }
 
 const seriesData = [
@@ -20,13 +20,13 @@ const seriesData = [
     type: "level_1",
     echartType: "bar",
     growthRate: [80, 85, 95, 65, 85, 70, 85],
-    barValue: [1820, 1032, 2045, 1852],
+    barValue: [1820, 1332, 2045, 1852],
   },
   {
     name: "民口单位军品收入",
     type: "level_2",
     echartType: "bar",
-    barValue: [1232, 1264, 156, 2661, 15616],
+    barValue: [1232, 1264, 2661, 15616],
     growthRate: [50, 60, 70, 80, 80, 60, 85],
   },
 ];
@@ -55,7 +55,7 @@ export default defineComponent({
           itemStyle: {
             color: Echart_color_Enum[item.type],
           },
-
+          barWidth: 20,
           data: item.barValue.map((barItem, barIndex) => {
             return {
               value: barItem,
@@ -91,8 +91,7 @@ export default defineComponent({
           },
           className: "tooltip-income",
           formatter: (params) => {
-            let html = "";
-            console.log("---", params);
+            let html = `<span class="year">${params[0].axisValue}年</span>`;
             params.forEach((item) => {
               const { data = {} } = item;
 
@@ -108,10 +107,12 @@ export default defineComponent({
             return html;
           },
         },
-        legend: {},
+        legend: {
+          right: "2%",
+        },
         grid: {
-          left: "0%",
-          right: "5%",
+          left: "2%",
+          right: "2%",
           bottom: "3%",
           containLabel: true,
         },
@@ -155,16 +156,24 @@ export default defineComponent({
 });
 </script>
 <style>
+.tooltip-income .year {
+  margin-bottom: 15px;
+  font-size: 14px;
+  color: #333;
+  font-weight: bold;
+}
 .tooltip-income .title {
   font-weight: 600;
-  color: #333;
+  font-size: 12px;
+  color: #666;
 }
 .tooltip-income .row-item {
   padding: 0 15px 10px 15px;
 
   display: flex;
   align-items: center;
-  font-size: 14px;
+  font-size: 12px;
+    color: #999;
   justify-content: space-between;
 }
 .tooltip-income .row-item div {

src/views/evaluatIndicator/index/model/InvestmentProgress/index.vue

@@ -11,7 +11,7 @@ import MapTitle from "@/components/mapTitle/index.vue";
 import * as echarts from "echarts";
 enum Bar_Enum {
   level_1 = "#fac858",
-  level_2 = "#4198ff",
+  level_2 = "#1ba6eb",
 }
 
 const seriesData = [
@@ -19,15 +19,15 @@ const seriesData = [
     name: "国防要求建设项目",
     type: "level_1",
     echartType: "bar",
-    growthRate: [80, 85, 95, 65, 85, 70, 85],
-    barValue: [820, 832, 901, 934, 1290, 1330, 1320],
+    growthRate: [80, 85, 95, 65, 85, 70, 85, 70, 80, 90, 40],
+    barValue: [820, 832, 901, 934, 1290, 1330, 1320, 1180, 1292, 1000, 1205],
   },
   {
     name: "省军民融合重大示范项目",
     type: "level_2",
     echartType: "bar",
-    barValue: [820, 832, 901, 934, 1290, 1330, 1320],
-    growthRate: [50, 60, 70, 80, 80, 60, 85],
+    barValue: [820, 832, 901, 934, 1290, 1330, 1320, 1251, 1120, 1050, 888],
+    growthRate: [50, 60, 70, 80, 80, 60, 85, 62, 75, 85, 72],
   },
 ];
 
@@ -67,6 +67,7 @@ export default defineComponent({
           itemStyle: {
             color: Bar_Enum[item.type],
           },
+          barWidth: 12,
           
           data: item.barValue.map((barItem, barIndex) => {
             return {
@@ -103,10 +104,9 @@ export default defineComponent({
           },
           className: "tooltip-progress",
           formatter: (params) => {
-            let html = "";
+            let html = `<span class="name">${params[0].axisValue}</span>`;
             params.forEach((item) => {
               const { data = {} } = item;
-              console.log(data);
 
               html += `<div class="tooltip-progress">
               <span class="title">${item.seriesName}</span>
@@ -120,16 +120,19 @@ export default defineComponent({
             return html;
           },
         },
-        legend: {},
         grid: {
-          left: "0%",
-          right: "5%",
+          left: "2%",
+          right: "2%",
           bottom: "3%",
           containLabel: true,
+        },
+         legend: {
+          right: "2%"
         },
         yAxis: [
           {
             type: "value",
+            name: "金额(亿元)",
           },
           {
             type: "value",
@@ -164,17 +167,29 @@ export default defineComponent({
 });
 </script>
 <style>
+.tooltip-progress .name {
+  margin-bottom: 15px;
+  font-size: 14px;
+  color: #333;
+  font-weight: bold;
+}
 .tooltip-progress .title {
   font-weight: 600;
-  color: #333;
+  font-size: 12px;
+  color: #666;
 }
 .tooltip-progress .row-item {
   padding: 0 15px 10px 15px;
+
   display: flex;
   align-items: center;
-  font-size: 14px;
+  font-size: 12px;
+    color: #999;
   justify-content: space-between;
 }
+.tooltip-progress .row-item div {
+  margin-right: 15px;
+}
 .tooltip-progress .row-item p {
   font-size: 12px;
   color: #999;
@@ -193,7 +208,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .investment-progress {
   flex: 1;
-  height: 250px;
+  height: 245px;
   box-sizing: border-box;
   margin-top: 10px;
 }

src/views/evaluatIndicator/index/model/Map/index.vue

@@ -6,8 +6,9 @@ import { defineComponent } from "vue";
 import * as echarts from "echarts";
 // import { getMapGeoData, getMapPointList } from "../service";
 // import mapGeoData from "../../../../../../mocks/evaluatIndicator/mapGeoData.json"
-import MapGeoData from "./mapGeoData"
-import MapPointList from "./mapPointList"
+import MapGeoData from "./mapGeoData";
+import MapPointList from "./mapPointList";
+
 
 
 export default defineComponent({
@@ -18,18 +19,16 @@ export default defineComponent({
   data() {
     return {
       pointList: [],
-      mapEcharts: null
+      mapEcharts: null,
     };
   },
   computed: {
     options() {
       return {
         tooltip: {
-          borderColor: '#333',
+          borderColor: "#333",
           formatter: function (params) {
-            return (
-              params.name 
-            );
+            return params.name;
           },
         },
         geo: {
@@ -52,16 +51,19 @@ export default defineComponent({
             },
           },
         },
+        grid: {
+          top: "0",
+          left: "0%",
+          right: "0%",
+          bottom: "3%",
+          containLabel: true,
+        },
         series: [
           {
             type: "scatter",
             coordinateSystem: "geo",
             zlevel: 2,
-            rippleEffect: {
-              period: 4,
-              brushType: "stroke",
-              scale: 2,
-            },
+           
             label: {
               normal: {
                 show: true,
@@ -76,10 +78,11 @@ export default defineComponent({
               },
             },
             itemStyle: {
-              color: '#f3696a',
+              color: "#f3696a",
             },
-            symbol: "pin",
-            symbolSize: 40,
+            symbolKeepAspect: true,
+            symbol: 'path://M6.09,0a5,5,0,0,0-5,5c0,2.77,5,9.28,5,9.28s5-6.51,5-9.28A5,5,0,0,0,6.09,0Zm0,7.41A2.29,2.29,0,1,1,8.38,5.12,2.31,2.31,0,0,1,6.09,7.41Z',
+            symbolSize: 16,
             data: this.pointList,
           },
         ],
@@ -94,7 +97,6 @@ export default defineComponent({
       const { data: getMapData } = MapGeoData;
       const { data: pointList } = MapPointList;
 
-
       echarts.registerMap("ZJ", getMapData);
 
       const mapEcharts = echarts.init(document.getElementById("map"));
@@ -120,10 +122,17 @@ export default defineComponent({
   },
 });
 </script>
+
+<style >
+.map-item canvas:first-of-type{
+  transform: scaleY(1.1) scaleX(1.3);
+}
+</style>
 <style lang="scss" scoped>
 .map-item {
   flex: 1;
   box-sizing: border-box;
   height: 100%;
+  
 }
 </style>

src/views/evaluatIndicator/index/model/Performance/index.vue

 <template>
   <MapTitle
-    text="全省军民融合创新示范绩效评价情况(2020年度)"
+    text="全省军民融合创新示范绩效评价情况(2020上半年度)"
     :detailsHandle="detailsHandle"
   />
   <div id="performanceBar" class="performance-bar"></div>
@@ -13,42 +13,42 @@ import { defineComponent } from "vue";
 import MapTitle from "@/components/mapTitle/index.vue";
 import * as echarts from "echarts";
 enum Bar_Enum {
-  level_1 = "#4f5d81",
+  level_1 = "#4f2d11",
   level_2 = "#429a9d",
   level_3 = "#007fb2",
   level_4 = "#eca933",
-  level_5 = "#4198ff",
+  level_5 = "#4191ff",
 }
 
 const seriesData = [
   {
     name: "服务强军兴军",
     type: "level_1",
-    value: [820, 832, 901, 934, 1290, 1330, 1320],
+    value: [12, 12, 11, 14, 12, 12, 12, 12, 22, 10, 20],
   },
   {
     name: "产业融合发展",
     type: "level_2",
 
-    value: [820, 832, 901, 934, 1290, 1330, 1320],
+    value: [12, 12, 22, 21, 12, 22, 11, 22, 22, 12, 20],
   },
   {
     name: "军民协同创新",
     type: "level_3",
 
-    value: [820, 832, 901, 934, 1290, 1330, 1320],
+    value: [12, 12, 21, 15, 12, 2, 12, 21, 22, 12, 20],
   },
   {
     name: "资源开放共享",
     type: "level_4",
 
-    value: [820, 832, 901, 934, 1290, 1330, 1320],
+    value: [8, 12, 5, 14, 22, 22, 12, 22, 22, 15, 20],
   },
   {
     name: "五大体系建设",
-    type: "level_5",
+    type: "level_2",
 
-    value: [820, 832, 901, 934, 1290, 1330, 1320],
+    value: [22, 12, 21, 12, 12, 12, 12, 22, 21, 19, 20],
   },
 ];
 
@@ -81,22 +81,29 @@ export default defineComponent({
   },
   computed: {
     optionBar() {
-      const seriesList = seriesData.map((item) => {
+      const seriesList = seriesData.map((item, index) => {
         return {
           name: item.name,
           type: "bar",
           stack: "total",
           label: {
             show: true,
+            color: "#fff",
           },
+          barWidth: 26,
           itemStyle: {
             color: Bar_Enum[item.type],
           },
           emphasis: {
-            focus: "series",
+            show: false,
           },
 
-          data: item.value,
+          data: item.value.map((valItem) => {
+            return {
+              value: valItem,
+              class: `color_${index + 1}`,
+            };
+          }),
         };
       });
 
@@ -106,19 +113,32 @@ export default defineComponent({
           axisPointer: {
             type: "shadow",
           },
-          textStyle: {
-            color: "#4198ff",
+          className: "per-formance-echart",
+          formatter: (params) => {
+            let html = `<span class="name">${params[0].axisValue}</span>`;
+            params.forEach((item) => {
+              const { data = {} } = item;
+
+              html += `<div class="per-formance-echart">
+                <span class="${data.class} title">${item.seriesName}</span>
+                <span class="text">${data.value}</span>
+            </div>`;
+            });
+
+            return html;
           },
         },
         legend: {},
         grid: {
           left: "0%",
-          right: "5%",
+          right: "0%",
           bottom: "3%",
           containLabel: true,
         },
         yAxis: {
           type: "value",
+          min: 0,
+          max: 100,
         },
         xAxis: {
           type: "category",
@@ -148,10 +168,82 @@ export default defineComponent({
   },
 });
 </script>
+<style>
+.per-formance-echart {
+  width: 120px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.per-formance-echart .name {
+  margin-bottom: 15px;
+  font-size: 14px;
+  color: #333;
+  font-weight: bold;
+}
+.per-formance-echart .title {
+  padding-left: 10px;
+  font-weight: 600;
+  font-size: 12px;
+  color: #666;
+  position: relative;
+}
+.per-formance-echart .title::before {
+  position: absolute;
+  top: 5px;
+  left: 0;
+  content: " ";
+  width: 6px;
+  height: 6px;
+  display: inline-block;
+  border-radius: 50%;
+  background: red;
+
+}
+.per-formance-echart .row-item {
+  padding: 0 15px 10px 15px;
+
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  color: #999;
+  justify-content: space-between;
+}
+.per-formance-echart .row-item div {
+  margin-right: 15px;
+}
+.per-formance-echart .row-item p {
+  font-size: 12px;
+  color: #999;
+}
+.per-formance-echart .row-item p span {
+  font-size: 18px;
+  margin-right: 5px;
+}
+.per-formance-echart .text{
+  color: #4191ff
+}
+.per-formance-echart .color_1::before {
+  background: #4f2d11;
+}
+.per-formance-echart .color_2::before {
+  background: #429a9d;
+}
+.per-formance-echart .color_3::before {
+  background: #007fb2;
+}
+.per-formance-echart .color_4::before {
+  background: #eca933;
+}
+.per-formance-echart .color_5::before {
+  background: #4191ff;
+}
+</style>
+
 <style lang="scss" scoped>
 .performance-bar {
   flex: 1;
-  height: 250px;
+  height: 245px;
   box-sizing: border-box;
   margin-top: 10px;
 }

src/views/evaluatIndicator/index/model/RankList/index.vue

 <template>
-  <MapTitle text="创新示区、县排名" />
+  <MapTitle text="创新示范区、县排名" />
 
   <el-scrollbar height="260px">
     <el-table
       :data="tableData"
       size="small"
       style="width: 100%"
-      :header-row-style="() => {
-        return {
-            background: 'red'
-        }
-      }"
+      empty-text="--"
+     header-row-class-name="tabs-header" 
+    >
+      <el-table-column label="序号" width="120" align="center" >
+        <template #default="scope">
+          <div  >
+            <div v-if="scope.$index > 2"> {{ scope.$index + 1 }}</div>
+            <div
+              v-else
+              class="tab-index"
+              :style="{ background: `${colors[scope.$index + 1]}` }"
             >
-      <el-table-column type="index" label="序号" />
-      <el-table-column prop="name" label="地区" />
-      <el-table-column prop="score" label="分数" />
+              {{ scope.$index + 1 }}
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="地区" align="center" />
+      <el-table-column prop="score" label="分数" width="120" align="center">
+        <template #default="scope">
+          <div>
+            {{ scope.row.score }}
+            <el-icon :color="scope.row.type === 1 ? '#67C23A' : '#F56C6C'">
+              <Bottom v-if="scope.row.type === 1" />
+              <Top v-else />
+            </el-icon>
+          </div>
+        </template>
+      </el-table-column>
     </el-table>
   </el-scrollbar>
 </template>
 <script lang="ts">
 import { defineComponent } from "vue";
 import MapTitle from "@/components/mapTitle/index.vue";
+
+import { Bottom, Top } from "@element-plus/icons";
 const TabData = [
   {
     name: "上城区",
     score: 50,
+    type: 1,
   },
   {
     name: "萧山区",
     score: 50,
+    type: 2,
   },
   {
     name: "海曙区",
     score: 50,
+    type: 2,
   },
   {
     name: "西湖区",
     score: 50,
+    type: 2,
   },
 
   {
     name: "象山县",
     score: 50,
+    type: 1,
   },
 ];
+const Colors = {
+  1: "#e45c5c",
+  2: "#ea8234",
+  3: "#fac858",
+};
 
 export default defineComponent({
   components: {
     MapTitle,
+    Bottom,
+    Top,
   },
   setup() {},
   data() {
     return {
       tableData: TabData,
+      colors: Colors,
     };
   },
   methods: {
@@ -60,8 +95,35 @@ export default defineComponent({
   },
 });
 </script>
+<style>
+.tabs-header {
+ 
+}
+.tabs-header .el-table__cell{
+   background-color: #e3f0ff !important;
+  color: #333;
+  font-weight: bold;
+}
+</style>
 <style lang="scss" scoped>
+
 .el-scrollbar {
   margin-top: 10px;
 }
+.tab-other-index{
+  text-align: center;
+}
+.tab-index {
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: 1px solid;
+  color: #fff;
+  font-size: 16px;
+  font-family: tabTypeFace;
+  margin: 0 auto;
+}
 </style>

src/views/evaluatIndicator/industrial/index.vue

@@ -3,8 +3,8 @@
     <el-col class="map-left" :span="8">
       <div class="footer-item card-item"><TargetBar /></div>
     </el-col>
-    <el-col class="map-right card-item" :span="16">
-      <el-row :gutter="10">
+    <el-col :span="16">
+      <el-row class="map-right card-item" >
         <el-col :span="12">
           <IncomExtendLine
             echartsId="incomExtend"
@@ -13,7 +13,7 @@
             :cardItems="extendCardItems"
           />
         </el-col>
-        <el-col :span="12"><IncomDistribution /></el-col>
+        <el-col :span="10" :offset="1"><IncomDistribution /></el-col>
       </el-row>
     </el-col>
   </el-row>
@@ -77,7 +77,7 @@ export default defineComponent({
 .card-item {
   background: #fff;
   border-radius: 5px;
-  padding: 15px 8px;
+  padding: 16px;
   overflow: hidden;
   cursor: pointer;
   transition: all 0.2s;

src/views/evaluatIndicator/industrial/model/BusinessIncome/index.vue

@@ -73,7 +73,7 @@ export default defineComponent({
     return {
       pieList: PIE_LIST,
       pieColor: PieColor,
-      mapEcharts: null
+      mapEcharts: null,
     };
   },
   mounted() {
@@ -105,10 +105,6 @@ export default defineComponent({
         tooltip: {
           trigger: "item",
         },
-        legend: {
-          top: "5%",
-          left: "center",
-        },
         series: [
           {
             name: "Access From",
@@ -140,7 +136,7 @@ export default defineComponent({
       const dom = document.getElementById("businessIncome");
       const mapEcharts = echarts.init(dom);
       mapEcharts.setOption(this.optionBar);
-      this.mapEcharts = mapEcharts
+      this.mapEcharts = mapEcharts;
     },
   },
   unmounted() {
@@ -153,6 +149,9 @@ export default defineComponent({
 });
 </script>
 <style>
+.business-income canvas:first-of-type {
+  transform: scale(1.2);
+}
 .business-pie-tooltip .title {
   color: #333;
   font-weight: bold;

src/views/evaluatIndicator/industrial/model/IncomDistribution/index.vue

@@ -10,12 +10,14 @@ import * as echarts from "echarts";
 
 const seriesData = [
   {
-    name: "国防要求建设项目",
+    name: "主营业务收入",
     type: "level_1",
-    value: [820, 832, 901, 934, 1290, 1330, 1320],
+    value: [820, 832, 901, 934, 1290, 1330, 1320, 846, 945, 462, 622],
+    rateData: [30, 40, 60, 80, 70, 75,85,52,33,12,12]
   },
 ];
 
+
 const xAxisValue = [
   "杭州",
   "宁波",
@@ -48,28 +50,40 @@ export default defineComponent({
   },
   computed: {
     optionBar() {
-      const seriesBarList = seriesData.map((item) => {
+      const seriesBarList = seriesData.map((item,index) => {
         return {
           type: "bar",
           itemStyle: {
             color: "#4198ff",
           },
-          data: item.value,
+          barWidth: 20,
+
+          data: item.value.map((valItem) => {
+            return {
+              value: valItem,
+              label: "主营业务收入"
+            };
+          }),
         };
       });
 
       const seriesLineList = seriesData.map((item) => {
         return {
           type: "line",
-          stack: "Total",
           itemStyle: {
             color: "#fac858",
           },
+           yAxisIndex: 1,
           emphasis: {
             focus: "series",
           },
 
-          data: item.value,
+          data: item.rateData.map(val => {
+            return {
+              value: val,
+              label: "增长率"
+            }
+          }),
         };
       });
 
@@ -79,8 +93,25 @@ export default defineComponent({
           axisPointer: {
             type: "shadow",
           },
-          textStyle: {
-            color: "#4198ff",
+          className: "income-echart",
+          formatter: (params) => {
+            console.log("----",params)
+            let html = `<span class="name">${params[0].axisValue}</span>`;
+          
+
+              html += `<div class="income-echart ">
+                <span class="${params[0].class} title color_1">${params[0].data.label}</span>
+                <br />
+                <span class="text text-color_1">${params[0].data.value}</span>亿元
+               </div>
+              <div class="income-echart">
+                <span class="${params[1].data.class} title  color_2">${params[1].data.label}</span>
+                  <br />
+                <span class="text text-color_2">${params[1].data.value}%</span>
+            </div>`
+         
+
+            return html;
           },
         },
         legend: {},
@@ -90,10 +121,18 @@ export default defineComponent({
           bottom: "3%",
           containLabel: true,
         },
-        yAxis: {
+        yAxis:[
+            {
+            type: "value",
+            name: "金额(亿元)",
+          },
+          {
             type: "value",
-          show: false,
+            name: "增长率%",
+            min: 0,
+            max: 100,
           },
+        ],
         xAxis: {
           type: "category",
           data: xAxisValue,
@@ -119,6 +158,59 @@ export default defineComponent({
   },
 });
 </script>
+
+<style>
+.income-echart {
+  width: 180px;
+}
+
+.income-echart .name {
+  margin-bottom: 15px;
+  font-size: 14px;
+  color: #333;
+  font-weight: bold;
+}
+.income-echart .title {
+  padding-left: 10px;
+  font-weight: 600;
+  font-size: 12px;
+  color: #666;
+  position: relative;
+}
+.income-echart .title::before {
+  position: absolute;
+  top: 8px;
+  left: 0;
+  content: " ";
+  width: 6px;
+  height: 6px;
+  display: inline-block;
+  border-radius: 50%;
+}
+.income-echart .text{
+  padding-left: 20px;
+  margin-bottom: 20px;
+  font-size: 20px;
+}
+.income-echart .text:last-of-type {
+  margin: 0;
+}
+
+.income-echart .text-color_1{
+  color: #4198ff
+}
+.income-echart .text-color_2{
+  color: #eca933
+}
+.income-echart .color_1::before {
+  background: #4198ff;
+}
+.income-echart .color_2::before {
+  background: #eca933;
+}
+
+</style>
+
 <style lang="scss" scoped>
 .title {
   color: #4198ff;
@@ -127,7 +219,7 @@ export default defineComponent({
 }
 .incom-distribution {
   flex: 1;
-  height: 300px;
+  height: 315px;
   box-sizing: border-box;
   margin-top: 10px;
 }

src/views/evaluatIndicator/industrial/model/IncomExtendLine/index.vue

@@ -161,7 +161,6 @@ export default defineComponent({
   box-sizing: border-box;
 }
 .describes {
-  padding-left: 10px;
   margin: 0 10px;
   height: 150px;
   box-sizing: border-box;
@@ -172,6 +171,8 @@ export default defineComponent({
     justify-content: space-between;
     font-size: 14px;
     .item {
+    flex: 1;
+
       padding: 10px 15px;
       margin-right: 15px;
       background: #f8f9fb;

src/views/evaluatIndicator/industrial/model/TargetBar/index.vue

@@ -16,7 +16,7 @@
         >
       </div>
 
-      <el-select v-model="value" size="small" placeholder="Select">
+      <el-select v-model="value" size="small" placeholder="请选择">
         <el-option
           v-for="item in options"
           :key="item.value"
@@ -59,7 +59,7 @@ export default defineComponent({
   setup() {},
   data() {
     return {
-      value: "",
+      value: 1,
       options: [
         { label: "得分情况", value: 1 },
         { label: "军转民收入及增长率", value: 2 },
@@ -68,7 +68,7 @@ export default defineComponent({
       ],
       years: [2019, 2020, 2021],
       curYearIndex: 0,
-      mapEcharts: null
+      mapEcharts: null,
     };
   },
   mounted() {
@@ -109,12 +109,13 @@ export default defineComponent({
             itemStyle: {
               color: "#4198ff",
             },
+            barWidth: 20,
             label: {
               show: true,
               position: "top",
               // formatter: "{c}亿元"
             },
-            data: [820, 832, 901, 934, 1290, 1330, 1320],
+            data: [820, 832, 901, 934, 1290, 1330, 1320, 1518,825,561,899],
           },
         ],
       };
@@ -125,7 +126,7 @@ export default defineComponent({
       const dom = document.getElementById("TargetBar");
       const mapEcharts = echarts.init(dom);
       mapEcharts.setOption(this.optionBar);
-      this.mapEcharts = mapEcharts
+      this.mapEcharts = mapEcharts;
     },
     yearHandle(index: number) {
       this.curYearIndex = index;
@@ -141,14 +142,13 @@ export default defineComponent({
 });
 </script>
 <style>
-.target-bar-tooltip .title{
+.target-bar-tooltip .title {
   color: #333;
   font-weight: bold;
 }
 .target-bar-tooltip .bar-text {
   padding-left: 10px;
   color: #4198ff;
-
 }
 </style>
 <style lang="scss" scoped>