fix(产业融合): 服务强军未完善

src/route/evaluatIndicator.ts

@@ -11,7 +11,7 @@ export enum evaluatIndicatorRouter {
 export default [
     
     {
-        path: "/evaluatIndicator",
+        path: evaluatIndicatorRouter.EVALUAT_INDICATOR,
         name: "EvaluatIndicator",
         component: () => import("@/views/evaluatIndicator/index/index.vue")
     },
@@ -20,6 +20,11 @@ export default [
         name: "Industrial",
         component: () => import("@/views/evaluatIndicator/industrial/index.vue")
     },
+    // {
+    //     path: evaluatIndicatorRouter.ARMY,
+    //     name: "Army",
+    //     component: () => import("@/views/evaluatIndicator/army/index.vue")
+    // },
     {
         path: "/:pathMatch(.*)*",
         redirect: "/evaluatIndicator",

src/views/evaluatIndicator/army/index.vue

 <template>
-    <div>军队相关</div>
+  <el-row class="map-warpper" :gutter="16">
+    <el-col class="map-left" :span="8">
+      <div class="footer-item card-item"><StrongArmy /></div>
+    </el-col>
+    <el-col class="map-right" :span="16">
+      <el-row :gutter="16">
+        <el-col :span="12">
+          <div class="card-item">
+            <!-- <Person
+              echartsId="incomExtend"
+              echartsTitle="服务强军新军总览"
+              echartsDesText="主营业务收入趋势"
+              :cardItems="extendCardItems"
+            /> -->
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="card-item"><Science /></div>
+        </el-col>
+      </el-row>
+    </el-col>
+  </el-row>
+
+  <!-- foot -->
+  <el-row class="footer-warpper" :gutter="16">
+    <el-col class="map-right" :span="16">
+      <div class="footer-item card-item">
+        <Munitions />
+      </div>
+    </el-col>
+
+    <el-col class="map-left" :span="8">
+      <div class="business-extend footer-item card-item">
+        <Person />
+      </div>
+    </el-col>
+  </el-row>
 </template>
+<script lang="ts">
+import { defineComponent } from "vue";
+import StrongArmy from "./model/StrongArmy/index.vue";
+import Person from "./model/Person/index.vue";
+import Science from "./model/Science/index.vue";
+import Munitions from "./model/Munitions/index.vue";
+
+export default defineComponent({
+  components: {
+    StrongArmy,
+    Person,
+    Science,
+    Munitions,
+  },
+  setup() {},
+  data() {
+    return {
+      industryCardItems: [
+        { label: "国防科技工业产值总量", value: "202" },
+        {
+          label: "国防科技工业产值总量增长率",
+          value: "19",
+        },
+      ],
+      extendCardItems: [
+        { label: "参与军民融合产业互动的规模以上企业主营收入", value: "202" },
+        {
+          label: "参与军民融合产业互动的规模以上企业主营收入增长率",
+          value: "19",
+        },
+      ],
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.card-item {
+  background: #fff;
+  border-radius: 5px;
+  padding: 15px 20px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 2px 2px 10px #eee;
+}
+
+.map-warpper {
+  box-sizing: border-box;
+  .map-right {
+    .card-item {
+      flex: 1;
+
+      // margin-right: 8px;
+      // padding-bottom: 0;
+    }
+  }
+}
+.footer-warpper {
+  margin-top: 20px;
+  .business-extend {
+    // height: 430px;
+  }
+}
+</style>

src/views/evaluatIndicator/army/model/Munitions/index.vue

+<template>
+  <MapTitle text="承担军需品情况" />
+
+  <el-row>
+    <el-col :span="8">
+      <div class="title">国防科技工业军品收入规模及增长率</div>
+      <div id="countryEcharts" class="echart-item"></div>
+    </el-col>
+
+    <el-col class="city-echarts" :span="15" :offset="1">
+      <div class="title">国防科技工业军品收入规模及增长率</div>
+      <div id="cityEcharts" class="echart-item"></div>
+    </el-col>
+  </el-row>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+import MapTitle from "@/components/mapTitle/index.vue";
+import * as echarts from "echarts";
+import { Aim } from "@element-plus/icons";
+
+// 国家增长率
+const seriesCountryData = [
+  {
+    value: [820, 832, 901, 934, 1290],
+    rate: [60, 70, 75, 85, 80],
+  },
+];
+const xAxisCountry = ["2018", "2019", "2020", "2021", "2022"];
+
+// 城市增长率
+const xAxisCity = [
+  "杭州",
+  "宁波",
+  "温州",
+  "胡洲",
+  "嘉兴",
+  "绍兴",
+  "金华",
+  "衡州",
+  "舟山",
+  "台州",
+  "丽水",
+];
+const cityData = {
+  value: [820, 832, 901, 934, 1290],
+  rate: [60, 70, 75, 85, 80],
+};
+
+/**
+ * 承担军需品情况
+ */
+export default defineComponent({
+  components: {
+    MapTitle,
+    Aim,
+  },
+  setup() {},
+  data() {
+    return {
+      countryEcharts: null,
+      cityEcharts: null,
+    };
+  },
+  mounted() {
+    this.initEcharts();
+  },
+  computed: {
+    optionCountry() {
+      const seriesBarList = seriesCountryData.map((item) => {
+        return {
+          type: "bar",
+          itemStyle: {
+            color: "#4198ff",
+          },
+          data: item.value,
+        };
+      });
+
+      const seriesLineList = seriesCountryData.map((item) => {
+        return {
+          type: "line",
+          stack: "Total",
+          itemStyle: {
+            color: "#4198ff",
+          },
+          yAxisIndex: 1,
+          emphasis: {
+            focus: "series",
+          },
+
+          data: item.rate,
+        };
+      });
+
+      return {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          textStyle: {
+            color: "#4198ff",
+          },
+        },
+        legend: {},
+        grid: {
+          top: "10%",
+          left: "0%",
+          right: "5%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "收入(亿元)",
+          },
+          {
+            type: "value",
+            name: "增长率%",
+            min: 0,
+            max: 100,
+          },
+        ],
+        xAxis: {
+          type: "category",
+          data: xAxisCountry,
+        },
+        series: [...seriesBarList, ...seriesLineList],
+      };
+    },
+
+    optionCity() {
+      const seriesBar = {
+        type: "bar",
+        itemStyle: {
+          color: "#4198ff",
+        },
+        data: cityData.value,
+      };
+
+      const seriesLine = {
+        type: "line",
+        stack: "Total",
+        itemStyle: {
+          color: "#fac858",
+        },
+        yAxisIndex: 1,
+        emphasis: {
+          focus: "series",
+        },
+
+        data: cityData.rate,
+      };
+
+      return {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          textStyle: {
+            color: "#4198ff",
+          },
+        },
+        legend: {},
+        grid: {
+          top: "10%",
+          left: "0%",
+          right: "2%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "规模(亿元)",
+          },
+          {
+            type: "value",
+            name: "增长率(%)",
+            min: 0,
+            max: 100,
+          },
+        ],
+        xAxis: {
+          type: "category",
+          data: xAxisCity,
+        },
+        series: [seriesBar, seriesLine],
+      };
+    },
+  },
+  methods: {
+    initEcharts() {
+      this.initCountryEcharts();
+      this.initCityEcharts();
+    },
+    initCountryEcharts() {
+      const dom = document.getElementById("countryEcharts");
+      const mapEcharts = echarts.init(dom);
+      mapEcharts.setOption(this.optionCountry);
+      this.countryEcharts = mapEcharts;
+    },
+    initCityEcharts() {
+      const dom = document.getElementById("cityEcharts");
+      const mapEcharts = echarts.init(dom);
+      mapEcharts.setOption(this.optionCity);
+      this.cityEcharts = mapEcharts;
+    },
+  },
+  unmounted() {
+    if (this.countryEcharts) {
+      this.countryEcharts.dispose();
+      this.countryEcharts = null;
+    }
+
+    if (this.cityEcharts) {
+      this.cityEcharts.dispose();
+      this.cityEcharts = null;
+    }
+  },
+});
+</script>
+<style>
+.business-pie-tooltip .title {
+  color: #333;
+  font-weight: bold;
+}
+.business-pie-tooltip .pie-text {
+  padding-left: 10px;
+  margin-top: 5px;
+  font-size: 12px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.business-pie-tooltip .pie-text span {
+  color: #4198ff;
+  font-size: 20px;
+}
+</style>
+
+<style lang="scss" scoped>
+.echart-item {
+  flex: 1;
+  height: 300px;
+  box-sizing: border-box;
+  margin-top: 10px;
+}
+
+.title {
+  margin-top: 15px;
+  font-size: 14px;
+  color: #4198ff;
+}
+</style>

src/views/evaluatIndicator/army/model/Person/index.vue

+<template>
+  <MapTitle text="地方为国防和军队建设培养输送人才情况" />
+  <div class="describes">
+    <div class="card-items">
+      <div class="item">
+        <span>入伍总人数</span>
+        <div class="value-des"><span>500</span>亿元</div>
+      </div>
+
+       <div class="item">
+        <span>入伍总比列</span>
+        <div class="value-des"><span>5%</span></div>
+      </div>
+    </div>
+
+    <div class="text">各市收入</div>
+  </div>
+
+  <div id="locPerson" class="incom-echarts-line"></div>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+import MapTitle from "@/components/mapTitle/index.vue";
+import * as echarts from "echarts";
+
+const seriesData = [
+  {
+    // name: "国防要求建设项目",
+    value: [820, 832, 1260],
+  },
+];
+const xAxisValue = [
+  "杭州",
+  "宁波",
+  "温州",
+  "胡洲",
+  "嘉兴",
+  "绍兴",
+  "金华",
+  "衡州",
+  "舟山",
+  "台州",
+  "丽水",
+];
+
+/**
+ * 地方为国防和军队建设培养输送人才情况
+ */
+export default defineComponent({
+  props: {},
+  components: {
+    MapTitle,
+  },
+  setup() {},
+  data() {
+    return {
+      mapEcharts: null,
+    };
+  },
+  mounted() {
+    this.initEcharts();
+  },
+  computed: {
+    optionBar() {
+      const seriesLine = seriesData.map((item) => {
+        return {
+          type: "line",
+          itemStyle: {
+            color: "#4198ff",
+          },
+          emphasis: {
+            focus: "series",
+          },
+         
+          data: item.value,
+        };
+      });
+
+      return {
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            color: "#4198ff",
+          },
+        },
+        legend: {},
+        grid: {
+          top: "11%",
+          left: "0%",
+          right: "5%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        yAxis: {
+          type: "value",
+          name: "人数"
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisValue,
+        },
+        series: seriesLine,
+      };
+    },
+  },
+  methods: {
+    initEcharts() {
+      const dom = document.getElementById("locPerson");
+      const mapEcharts = echarts.init(dom);
+      mapEcharts.setOption(this.optionBar);
+      this.mapEcharts = mapEcharts;
+    },
+  },
+  unmounted() {
+    if (!this.mapEcharts) {
+      return;
+    }
+    this.mapEcharts.dispose();
+    this.mapEcharts = null;
+  },
+});
+</script>
+<style lang="scss" scoped>
+.incom-echarts-line {
+  flex: 1;
+  height: 250px;
+  box-sizing: border-box;
+}
+.describes {
+  margin: 0 10px 15px 0;
+  box-sizing: border-box;
+  .card-items {
+    margin: 15px 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    .item {
+      flex: 1;
+      padding: 8px 15px;
+      margin-right: 15px;
+      background: #f8f9fb;
+      border-radius: 5px;
+      font-size: 14px;
+      color: #333;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      &:last-of-type {
+        margin-right: 0;
+      }
+      .value-des {
+        font-size: 12px;
+        color: #999;
+        display: flex;
+        align-items: center;
+        span {
+          font-size: 20px;
+          margin-right: 5px;
+          color: #4198ff;
+        }
+      }
+    }
+  }
+  .text {
+    color: #4198ff;
+    margin-top: 10px;
+    font-size: 14px;
+  }
+}
+</style>

src/views/evaluatIndicator/army/model/Science/index.vue

+<template>
+  <MapTitle text="民口单位服务武器装备科研生产情况" />
+
+  <div class="title">主营业务收入分布</div>
+
+  <div id="incomDistribution" class="incom-distribution"></div>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+import MapTitle from "@/components/mapTitle/index.vue";
+import * as echarts from "echarts";
+
+const seriesData = [
+  {
+    name: "国防要求建设项目",
+    type: "level_1",
+    value: [820, 832, 901, 934, 1290, 1330, 1320],
+  },
+];
+
+const xAxisValue = [
+  "杭州",
+  "宁波",
+  "温州",
+  "胡洲",
+  "嘉兴",
+  "绍兴",
+  "金华",
+  "衡州",
+  "舟山",
+  "台州",
+  "丽水",
+];
+
+/**
+ * 民口单位服务武器装备科研生产情况——柱状图
+ */
+export default defineComponent({
+  components: {
+    MapTitle,
+  },
+  setup() {},
+  data() {
+    return {
+      mapEcharts: null,
+    };
+  },
+  mounted() {
+    this.initEcharts();
+  },
+  computed: {
+    optionBar() {
+      const seriesBarList = seriesData.map((item) => {
+        return {
+          type: "bar",
+          itemStyle: {
+            color: "#4198ff",
+          },
+          data: item.value,
+        };
+      });
+
+      const seriesLineList = seriesData.map((item) => {
+        return {
+          type: "line",
+          stack: "Total",
+          itemStyle: {
+            color: "#fac858",
+          },
+          emphasis: {
+            focus: "series",
+          },
+
+          data: item.value,
+        };
+      });
+
+      return {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          textStyle: {
+            color: "#4198ff",
+          },
+        },
+        legend: {},
+        grid: {
+          left: "0%",
+          right: "5%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        yAxis: {
+          type: "value",
+          show: false,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisValue,
+        },
+        series: [...seriesBarList, ...seriesLineList],
+      };
+    },
+  },
+  methods: {
+    initEcharts() {
+      const dom = document.getElementById("incomDistribution");
+      const mapEcharts = echarts.init(dom);
+      mapEcharts.setOption(this.optionBar);
+      this.mapEcharts = mapEcharts;
+    },
+  },
+  unmounted() {
+    if (!this.mapEcharts) {
+      return;
+    }
+    this.mapEcharts.dispose();
+    this.mapEcharts = null;
+  },
+});
+</script>
+<style lang="scss" scoped>
+.title {
+  color: #4198ff;
+  margin: 30px 0 10px 0;
+  font-size: 14px;
+}
+.incom-distribution {
+  flex: 1;
+  height: 300px;
+  box-sizing: border-box;
+  margin-top: 10px;
+}
+</style>

src/views/evaluatIndicator/army/model/StrongArmy/index.vue

+<template>
+  <MapTitle text="服务强军兴军总览" />
+
+  <div class="echarts-search">
+    <div class="title">各市产业融合创新指标情况</div>
+    <el-row class="" justify="space-between">
+      <div class="years" align="middle">
+        <span
+          v-for="(item, index) in years"
+          :key="item"
+          :class="{
+            active: index === curYearIndex,
+          }"
+          @click="yearHandle(index)"
+          >{{ item }}年</span
+        >
+      </div>
+
+      <el-select v-model="value" size="small" placeholder="Select">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </el-row>
+  </div>
+
+  <div id="TargetBar" class="target-bar"></div>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+import MapTitle from "@/components/mapTitle/index.vue";
+import * as echarts from "echarts";
+
+const xAxisValue = [
+  "杭州",
+  "宁波",
+  "温州",
+  "胡洲",
+  "嘉兴",
+  "绍兴",
+  "金华",
+  "衡州",
+  "舟山",
+  "台州",
+  "丽水",
+];
+
+/**
+ * 服务强军兴军总览——柱状图
+ */
+export default defineComponent({
+  components: {
+    MapTitle,
+  },
+  setup() {},
+  data() {
+    return {
+      value: "",
+      options: [
+        { label: "得分情况", value: 1 },
+        { label: "军转民收入及增长率", value: 2 },
+        { label: "规模以上企业收入及增长率", value: 3 },
+        { label: "国防科工产值", value: 4 },
+      ],
+      years: [2019, 2020, 2021],
+      curYearIndex: 0,
+      mapEcharts: null
+    };
+  },
+  mounted() {
+    this.initEcharts();
+  },
+  computed: {
+    optionBar() {
+      return {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          textStyle: {},
+          className: "target-bar-tooltip",
+          formatter:
+            "<span class='title'>{b0}</span>: <br /> <span class='bar-text'>{c0}</span> 分",
+        },
+        legend: {},
+        grid: {
+          left: "-5%",
+          right: "5%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        yAxis: {
+          type: "value",
+          show: false,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisValue,
+        },
+        series: [
+          {
+            type: "bar",
+            itemStyle: {
+              color: "#4198ff",
+            },
+            label: {
+              show: true,
+              position: "top",
+            },
+            data: [20, 60, 70, 80, 68, 75, 80],
+          },
+        ],
+      };
+    },
+  },
+  methods: {
+    initEcharts() {
+      const dom = document.getElementById("TargetBar");
+      const mapEcharts = echarts.init(dom);
+      mapEcharts.setOption(this.optionBar);
+      this.mapEcharts = mapEcharts
+    },
+    yearHandle(index: number) {
+      this.curYearIndex = index;
+    },
+  },
+  unmounted() {
+    if (!this.mapEcharts) {
+      return;
+    }
+    this.mapEcharts.dispose();
+    this.mapEcharts = null;
+  },
+});
+</script>
+<style>
+.target-bar-tooltip .title{
+  color: #333;
+  font-weight: bold;
+}
+.target-bar-tooltip .bar-text {
+  padding-left: 10px;
+  color: #4198ff;
+
+}
+</style>
+<style lang="scss" scoped>
+.echarts-search {
+  padding-left: 10px;
+  .title {
+    color: #4198ff;
+    margin: 10px 0;
+    font-size: 14px;
+  }
+  .years {
+    display: flex;
+    align-items: center;
+    background: #f4f6f9;
+    border-radius: 5px;
+    overflow: hidden;
+    span {
+      padding: 0 12px;
+      height: 32px;
+      line-height: 32px;
+      font-size: 12px;
+      color: #333;
+    }
+    .active {
+      background-color: #4198ff;
+      color: #fff;
+    }
+  }
+}
+
+.target-bar {
+  flex: 1;
+  height: 250px;
+  box-sizing: border-box;
+  margin-top: 10px;
+}
+</style>