feat: 增加安装计划,增加右侧结构

刘嘉威

2022-10-25 50cd9f6356fdf511908c33e9a085ae7a54501082

feat: 增加安装计划,增加右侧结构

 components.d.ts

@@ -8,13 +8,10 @@
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    CountUp: typeof import('./src/components/count-up/count-up.vue')['default']
    DialogContent: typeof import('./src/components/Plugins/DialogContent/index.vue')['default']
    ElButton: typeof import('element-plus/es')['ElButton']
    ElDrawer: typeof import('element-plus/es')['ElDrawer']
    ElRadio: typeof import('element-plus/es')['ElRadio']
    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
    ItemWrap: typeof import('./src/components/item-wrap/item-wrap.vue')['default']
    LoadingContent: typeof import('./src/components/Plugins/LoadingContent/index.vue')['default']
    MessageContent: typeof import('./src/components/Plugins/MessageContent/index.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']

 src/api/api.ts

@@ -1,7 +1,7 @@


/*

 * @LastEditors: Please set LastEditors

 * @LastEditTime: 2022-10-25 11:07:25

 * @LastEditTime: 2022-10-25 15:34:56

 */

import axios from 'axios';



@@ -114,7 +114,7 @@
 */

export const GETNOBASE = async (url: string, params?: Params): Promise<any> => {

    try {

        const data = await axios.get(url, {

        const data = await axios.get(location.pathname+url, {

            params: params,

        });

        return data;


 src/api/modules/index.ts

@@ -2,4 +2,10 @@
    'leftTop':'/bigscreen/countDeviceNum',//左上

    'leftCenter':'/bigscreen/countUserNum',//左中

    "centerMap":"/bigscreen/centerMap",

    "centerBottom":"/bigscreen/installationPlan",



    // 'big3':"/bigscreen/sbtx", //设备提醒

    // 'big4':"/bigscreen/alarmNum", //报警次数

    // 'big5':'/bigscreen/ssyj',//实时预警 
    // 'big7':'/bigscreen/ranking',// 报警排名

}

 src/mock/mock-index.ts

@@ -10,7 +10,18 @@
    }, [])

    return arrays

}



/**

* @description: min ≤ r ≤ max  随机数

* @param {*} Min

* @param {*} Max

* @return {*}

*/

function RandomNumBoth(Min: any, Max: any) {

    var Range = Max - Min;

    var Rand = Math.random();

    var num = Min + Math.round(Rand * Range); //四舍五入

    return num;

}

//左中

export default [

    {

@@ -44,6 +55,32 @@
            })

            a.data.onlineNum = a.data.totalNum - a.data.offlineNum

            return a

        }

    },

    //安装计划

    {

        url: "/bigscreen/installationPlan",

        type: "get",

        response: () => {



            let num = RandomNumBoth(26, 32);

            const a = Mock.mock({

                ["category|" + num]: ["@city()"],

                ["barData|" + num]: ["@integer(10, 100)"],

            })

            let lineData = [], rateData = [];

            for (let index = 0; index < num; index++) {

                let lineNum = Mock.mock('@integer(0, 100)') + a.barData[index]

                lineData.push(lineNum)

                let rate = a.barData[index] / lineNum;

                rateData.push((rate * 100).toFixed(0))

            }

            a.lineData = lineData

            a.rateData = rateData

            return {

                success: true,

                data: a

            }

        }

    },

    {

@@ -80,7 +117,7 @@
                    }

                })

                // 去重

                a.data.dataList = ArrSet(a.data.dataList,"name")

                a.data.dataList = ArrSet(a.data.dataList, "name")

                return a

            }

        }


 src/plugins/echarts.ts

@@ -5,7 +5,7 @@
    CanvasRenderer

  } from 'echarts/renderers'

  import {

    BarChart,PieChart,MapChart,EffectScatterChart

    BarChart,PieChart,MapChart,EffectScatterChart,LineChart 
  } from 'echarts/charts'

  import {

    GridComponent,

@@ -19,7 +19,7 @@


  use([

    CanvasRenderer,

    BarChart,PieChart,MapChart,EffectScatterChart,

    BarChart,PieChart,MapChart,EffectScatterChart,LineChart,

    GridComponent,

    LegendComponent,

    TooltipComponent,


 src/views/index/center-bottom.vue

New file
@@ -0,0 +1,160 @@
<script setup lang="ts">

import { ref, reactive, onMounted, nextTick } from "vue";

import { currentGET } from "@/api";

import {graphic} from "echarts/core"

const option = ref({});

const getData = () => {

  currentGET("centerBottom", {}).then((res) => {

    console.log("安装计划", res);

    if (res.success) {

      setOption(res.data);

    } else {

      window["$message"]({

        text: res.msg,

        type: "warning",

      });

    }

  });

};

const setOption =async (newData: any) => {

  await nextTick()

  option.value = {

    tooltip: {

      trigger: "axis",

      backgroundColor: "rgba(0,0,0,.6)",

      borderColor: "rgba(147, 235, 248, .8)",

      textStyle: {

        color: "#FFF",

      },

      formatter: function (params: any) {

        // 添加单位

        var result = params[0].name + "<br>";

        params.forEach(function (item: any) {

          if (item.value) {

            if (item.seriesName == "安装率") {

              result +=

                item.marker +

                " " +

                item.seriesName +

                " : " +

                item.value +

                "%</br>";

            } else {

              result +=

                item.marker +

                " " +

                item.seriesName +

                " : " +

                item.value +

                "个</br>";

            }

          } else {

            result += item.marker + " " + item.seriesName + " :  - </br>";

          }

        });

        return result;

      },

    },

    legend: {

      data: ["已安装", "计划安装", "安装率"],

      textStyle: {

        color: "#B4B4B4",

      },

      top: "0",

    },

    grid: {

      left: "50px",

      right: "40px",

      bottom: "30px",

      top: "20px",

    },

    xAxis: {

      data: newData.category,

      axisLine: {

        lineStyle: {

          color: "#B4B4B4",

        },

      },

      axisTick: {

        show: false,

      },

    },

    yAxis: [

      {

        splitLine: { show: false },

        axisLine: {

          lineStyle: {

            color: "#B4B4B4",

          },

        },



        axisLabel: {

          formatter: "{value}",

        },

      },

      {

        splitLine: { show: false },

        axisLine: {

          lineStyle: {

            color: "#B4B4B4",

          },

        },

        axisLabel: {

          formatter: "{value}% ",

        },

      },

    ],

    series: [

      {

        name: "已安装",

        type: "bar",

        barWidth: 10,

        itemStyle: {

          borderRadius: 5,

          color: new graphic.LinearGradient(0, 0, 0, 1, [

            { offset: 0, color: "#956FD4" },

            { offset: 1, color: "#3EACE5" },

          ]),

        },

        data: newData.barData,

      },

      {

        name: "计划安装",

        type: "bar",

        barGap: "-100%",

        barWidth: 10,

        itemStyle: {

          borderRadius: 5,

          color: new graphic.LinearGradient(0, 0, 0, 1, [

            { offset: 0, color: "rgba(156,107,211,0.8)" },

            { offset: 0.2, color: "rgba(156,107,211,0.5)" },

            { offset: 1, color: "rgba(156,107,211,0.2)" },

          ]),

        },

        z: -12,

        data: newData.lineData,

      },

      {

        name: "安装率",

        type: "line",

        smooth: true,

        showAllSymbol: true,

        symbol: "emptyCircle",

        symbolSize: 8,

        yAxisIndex: 1,

        itemStyle: {

          color: "#F02FC2",

        },

        data: newData.rateData,

      },

    ],

  };

};

getData();

</script>



<template>

  <v-chart class="chart" :option="option" v-if="JSON.stringify(option)!='{}'"/>

</template>



<style scoped lang="scss"></style>


 src/views/index/center-map.vue

@@ -6,7 +6,7 @@
import type { MapdataType } from "./center.map";

const option = ref({});

const code = ref("china"); //china 代表中国 其他地市是行政编码

const centerMapRef = ref();



withDefaults(

  defineProps<{

    // 结束数值

@@ -36,7 +36,6 @@
    }

  });

  await nextTick();

  centerMapRef.value?.resize();



  option.value = optionHandle(regionCode, list, mapData);

};

@@ -56,7 +55,7 @@
      mapjson = mapjson.geoJSON;

      resolve(mapjson);

    } else {

      mapjson = await GETNOBASE(`/map-geojson/${regionCode}.json`).then(

      mapjson = await GETNOBASE(`map-geojson/${regionCode}.json`).then(

        (data) => data

      );

      code.value=regionCode

@@ -98,6 +97,7 @@
        :option="option"

        ref="centerMapRef"

        @click="mapClick"

        v-if="JSON.stringify(option)!='{}'"

      />

    </div>

  </div>

@@ -147,7 +147,7 @@
  }



  .mapwrap {

    height: 548px;

    height: 580px;

    width: 100%;

    // padding: 0 0 10px 0;

    box-sizing: border-box;


 src/views/index/index.vue

@@ -3,6 +3,12 @@
import LeftTop from "./left-top.vue";

import LeftCenter from "./left-center.vue";

import CenterMap from "./center-map.vue";

import CenterBottom from "./center-bottom.vue";

import RightTop from "./right-top.vue";

import RightCenter from "./right-center.vue";

import RightBottom from "./right-bottom.vue";









</script>

@@ -32,11 +38,11 @@
    <div class="contetn_center">

      <CenterMap class="contetn_center_top" title="设备分布图"/>

      <ItemWrap class="contetn_center-bottom" title="安装计划">

        <!-- <CenterBottom /> -->

        <CenterBottom />

      </ItemWrap>

    </div>

    <div class="contetn_right">

      <!-- <ItemWrap class="contetn_left-bottom contetn_lr-item" title="报警次数">

      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="报警次数">

        <RightTop />

      </ItemWrap>

      <ItemWrap

@@ -48,7 +54,7 @@
      </ItemWrap>

      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="数据统计图 ">

        <RightBottom />

      </ItemWrap> -->

      </ItemWrap>

    </div>

  </div>

</template>


 src/views/index/right-bottom.vue

New file
@@ -0,0 +1,13 @@
<script setup lang='ts'>



</script>



<template>

  <div class=''>



  </div>

</template>



<style scoped lang='scss'>



</style>

 src/views/index/right-center.vue

New file
@@ -0,0 +1,13 @@
<script setup lang='ts'>



</script>



<template>

  <div class=''>



  </div>

</template>



<style scoped lang='scss'>



</style>

 src/views/index/right-top.vue

New file
@@ -0,0 +1,13 @@
<script setup lang='ts'>



</script>



<template>

  <div class=''>



  </div>

</template>



<style scoped lang='scss'>



</style>