大屏

dengjunjie

2024-06-25 6e39b92ddec5b5b9f8e2b0d49e70313f8cadc1aa

大屏

 ´úÂë¹ÜÀí/PCS/WCS_Client/src/assets/imgs/pageBg.png

 ´úÂë¹ÜÀí/´óÆÁ/.gitignore

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,21 @@
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

 ´úÂë¹ÜÀí/´óÆÁ/LICENSE

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,201 @@
                                 Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "[]"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright [yyyy] [name of copyright owner]

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.

 ´úÂë¹ÜÀí/´óÆÁ/README.md

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,200 @@
 **QQ交流群： 713105837 å¼€æºé¡¹ç›®Vue/Vue3/React-big-screen交流群** 

QQ群二维码：

![输入图片说明](public/image.png)

## ä¸€ã€é¡¹ç›®æè¿°

- ä¸€ä¸ªåŸºäºŽ Vue、Datav、Echart æ¡†æž¶çš„ " **数据大屏项目** "，通过 Vue ç»„件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV è‡ªå¸¦ç»„件，可进行更改，详情请点击下方 DataV æ–‡æ¡£ã€‚

- [**Vue3 ç‰ˆæœ¬è¯·ç‚¹å‡»è¿™é‡ŒæŸ¥çœ‹ï¼Œä½¿ç”¨ Hooks+TypeScript å®žçŽ°ï¼Œå…¨æ–°å†…容等你探索!**](https://gitee.com/MTrun/vue-big-screen-plugin)
- [**React ç‰ˆæœ¬è¯·ç‚¹å‡»è¿™é‡ŒæŸ¥çœ‹ï¼Œå…¨æ–°ç•Œé¢è¶…级好看！！！**](https://gitee.com/MTrun/react-big-screen)
- é¡¹ç›®éœ€è¦å…¨å±å±•ç¤ºï¼ˆæŒ‰ F11）。
- é¡¹ç›®éƒ¨åˆ†åŒºåŸŸä½¿ç”¨äº†å…¨å±€æ³¨å†Œæ–¹å¼ï¼Œå¢žåŠ äº†æ‰“包体积，在实际运用中请使用 **按需引入**。
- æ‹‰å–项目之后，建议按照自己的功能区域重命名文件，现以简单的位置进行区分。
- é¡¹ç›®çŽ¯å¢ƒï¼šVue-cli-3.0、DataV-2.7.3、Echarts-4.6.0(如果5.x版本有问题，请切换到4.x版本)、Webpack-4.0、Npm-6.13、Node-v12.16。
- è¯·æ‹‰å– master åˆ†æ”¯çš„代码，其余分支是开发分支。
- éœ€è¦å…¶å®ƒåœ°å›¾æ•°æ®çš„，请查看我的其它项目（有一个地图合集）

友情链接：

1.  [Vue å®˜æ–¹æ–‡æ¡£](https://cn.vuejs.org/v2/guide/instance.html)
2.  [DataV å®˜æ–¹æ–‡æ¡£](http://datav.jiaminghi.com/guide/)
3.  [echarts å®žä¾‹](https://echarts.apache.org/examples/zh/index.html)，[echarts API æ–‡æ¡£](https://echarts.apache.org/zh/api.html#echarts)
4.  [项目 gitee åœ°å€ï¼ˆå›½å†…速度快）](https://gitee.com/MTrun/big-screen-vue-datav)

项目展示
![项目展示](https://images.gitee.com/uploads/images/2020/1208/183608_b893a510_4964818.gif "20201208_221020.gif")

## äºŒã€ä¸»è¦æ–‡ä»¶ä»‹ç»

| æ–‡ä»¶                | ä½œç”¨/功能                                                              |
| ------------------- | --------------------------------------------------------------------- |
| main.js             | ä¸»ç›®å½•æ–‡ä»¶ï¼Œå¼•å…¥ Echart/DataV ç­‰æ–‡ä»¶                                    |
| utils               | å·¥å…·å‡½æ•°ä¸Ž mixins å‡½æ•°ç­‰                                                |
| views/ index.vue    | é¡¹ç›®ä¸»ç»“æž„                                                             |
| views/其余文件       | ç•Œé¢å„个区域组件（按照位置来命名）                                       |
| assets              | é™æ€èµ„源目录，放置 logo ä¸ŽèƒŒæ™¯å›¾ç‰‡                                       |
| assets / style.scss | é€šç”¨ CSS æ–‡ä»¶ï¼Œå…¨å±€é¡¹ç›®å¿«æ·æ ·å¼è°ƒèŠ‚                                      |
| assets / index.scss | Index ç•Œé¢çš„ CSS æ–‡ä»¶                                                  |
| components/echart   | æ‰€æœ‰ echart å›¾è¡¨ï¼ˆæŒ‰ç…§ä½ç½®æ¥å‘½åï¼‰                                      |
| common/...          | å…¨å±€å°è£…çš„ ECharts å’Œ flexible æ’件代码（适配屏幕尺寸，可定制化修改）     |

## ä¸‰ã€ä½¿ç”¨ä»‹ç»

### å¯åŠ¨é¡¹ç›®

需要提前安装好 `nodejs` ä¸Ž `yarn`,下载项目后在项目主目录下运行 `yarn` æ‹‰å–依赖包。安装完依赖包之后然后使用 `vue-cli` æˆ–者直接使用命令`npm run serve`，就可以启动项目，启动项目后需要手动全屏（按 F11）。如果编译项目的时候提示没有 DataV æ¡†æž¶çš„依赖，输入 `npm install @jiaminghi/data-view` æˆ–者 `yarn add @jiaminghi/data-view` è¿›è¡Œæ‰‹åŠ¨å®‰è£…。

### å°è£…组件渲染图表

所有的 ECharts å›¾è¡¨éƒ½æ˜¯åŸºäºŽ `common/echart/index.vue` å°è£…组件创建的，已经对数据和屏幕改动进行了监听，能够动态渲染图表数据和大小。在监听窗口小大的模块，使用了防抖函数来控制更新频率，节约浏览器性能。

项目配置了默认的 ECharts å›¾è¡¨æ ·å¼ï¼Œæ–‡ä»¶åœ°å€ï¼š`common/echart/theme.json`。

封装的渲染图表组件支持传入以下参数，可根据业务需求自行添加/删除。

参数名称              | ç±»åž‹      | ä½œç”¨/功能                      |
| -------------------| --------- | ------------------------------|
| id                 | String    | å”¯ä¸€ id，渲染图表的节点（非必填，使用了 $el）|
| className          | String    | class样式名称（非必填）                 |
| options            | Object    | ECharts é…ç½®ï¼ˆå¿…填）                   |
| height             | String    | å›¾è¡¨é«˜åº¦ï¼ˆå»ºè®®å¡«ï¼‰                    |
| width              | String    | å›¾è¡¨å®½åº¦ï¼ˆå»ºè®®å¡«ï¼‰                    |

### åŠ¨æ€æ¸²æŸ“图表

动态渲染图表案例为 `components` ç›®å½•ä¸‹å„个图表组件，index æ–‡ä»¶è´Ÿè´£æ•°æ®èŽ·å–和处理，chart æ–‡ä»¶è´Ÿè´£ç›‘听和数据渲染。

chart æ–‡ä»¶çš„主要逻辑为：

```html
<template>
  <div>
    <Echart :options="options" id="id" height="height" width="width" ></Echart>
  </div>
</template>

<script>
  // å¼•å…¥å°è£…组件
import Echart from '@/common/echart'
export default {
  // å®šä¹‰é…ç½®æ•°æ®
  data(){ return { options: {}}},
  // å£°æ˜Žç»„件
  components: { Echart},
  // æŽ¥æ”¶æ•°æ®
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  // è¿›è¡Œç›‘听，也可以使用 computed è®¡ç®—属性实现此功能
  watch: {
    cdata: {
      handler (newData) {
        this.options ={
          // è¿™é‡Œç¼–写 ECharts é…ç½®
        }
      },
      // ç«‹å³ç›‘听
      immediate: true,
      // æ·±åº¦ç›‘听
      deep: true
    }
  }
};
</script>
```

### å¤ç”¨å›¾è¡¨ç»„件

复用图表组件案例为中间部分的 `任务通过率与任务达标率` æ¨¡å—，两个图表类似，区别在于颜色和主要渲染数据。只需要传入对应的唯一 id å’Œæ ·å¼ï¼Œç„¶åŽåœ¨å¤ç”¨çš„组件 `components/echart/center/centerChartRate` é‡Œè¿›è¡ŒæŽ¥æ”¶å¹¶åœ¨å¯¹åº”位置赋值即可。

如：在调用处 `views/center.vue` é‡ŒåŽ»å®šä¹‰å¥½æ•°æ®å¹¶ä¼ å…¥ç»„件

```js
//组件调用
<span>今日任务通过率</span>
<centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />

<span>今日任务达标率</span>
<centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />

...
import centerChart from "@/components/echart/center/centerChartRate";

data() {
  return {
    rate: [
      {
        id: "centerRate1",
        tips: 60,
        ...
      },
      {
        id: "centerRate2",
        tips: 40,
        colorData: {
          ...
        }
      }
    ]
  }
}
```

### æ›´æ¢è¾¹æ¡†

边框是使用了 DataV è‡ªå¸¦çš„组件，只需要去 views ç›®å½•ä¸‹åŽ»å¯»æ‰¾å¯¹åº”的位置去查找并替换就可以，具体的种类请去 DavaV å®˜ç½‘查看
如：

```html
<dv-border-box-1></dv-border-box-1>
<dv-border-box-2></dv-border-box-2>
<dv-border-box-3></dv-border-box-3>
```

### æ›´æ¢å›¾è¡¨

直接进入 `components/echart` ä¸‹çš„文件修改成你要的 echarts æ¨¡æ ·ï¼Œå¯ä»¥åŽ»[echarts å®˜æ–¹ç¤¾åŒº](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。

### Mixins è§£å†³è‡ªé€‚应适配功能

使用 mixins æ³¨å…¥è§£å†³äº†ç•Œé¢å¤§å°å˜åŠ¨å›¾è¡¨è‡ªé€‚应适配的功能，函数在 `utils/resizeMixins.js` ä¸­ï¼Œåº”用在 `common/echart/index.vue` çš„封装渲染组件，主要是对 `this.chart` è¿›è¡Œäº†åŠŸèƒ½æ³¨å…¥ã€‚

### å±å¹•é€‚配

1.5 ç‰ˆæœ¬é¡¹ç›®æ”¾å¼ƒäº† flexible æ’件方案，将 rem æ”¹å›žpx，使用更流程通用的 `css3：scale` ç¼©æ”¾æ–¹æ¡ˆï¼Œé€šè¿‡ `ref` æŒ‡å‘ `views/index`，屏幕改变时缩放内容。项目的基准尺寸是 `1920px*1080px`，所以支持同比例屏幕 100% å¡«å……，如果非同比例则会自动计算比例居中填充，不足的部分则留白。实现代码在 `src/utils/userDraw` ï¼Œå¦‚果有其它的适配方案，欢迎交流。

### è¯·æ±‚数据

现在的项目未使用前后端数据请求，建议使用 axios è¿›è¡Œæ•°æ®è¯·æ±‚，在 main.js ä½ç½®è¿›è¡Œå…¨å±€é…ç½®ã€‚

- axios çš„ main.js é…ç½®å‚考范例（因人而异）

```js
import axios from 'axios';

//把方法放到vue的原型上，这样就可以全局使用了
Vue.prototype.$http = axios.create({
  //设置20秒超时时间
  timeout: 20000,
  baseURL: 'http://localhost:8098', //这里写后端地址http://localhost:8098/
});
```

## å››ã€æ›´æ–°æƒ…况

1. å¢žåŠ äº† Echart ç»„件复用的功能，如：中间任务达标率的两个百分比图使用的是同一个组件。
2. ä¿®å¤äº†å¤´éƒ¨å³ä¾§çš„图案条不对称的问题。
3. ä½¿ç”¨ Mixins æ³¨å…¥å›¾è¡¨å“åº”式代码（scale方案之后无需使用）。
4. vue-awesome æ”¹æˆæŒ‰éœ€å¼•å…¥çš„方式。
5. å°è£…渲染函数，抽离了数据使逻辑更加清晰。
6. æ–°å¢žåœ°å›¾ç»„件，并添加自动轮播功能
7. å°†é€‚配方案从 rem æ”¹æˆ scale
## äº”、其余

这个项目是个人的作品，难免会有问题和 BUG，如果有问题请进行评论，我也会尽力去更新，自己也在前端学习的路上，欢迎交流，非常感谢！

 ´úÂë¹ÜÀí/´óÆÁ/babel.config.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,5 @@
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

 ´úÂë¹ÜÀí/´óÆÁ/public/favicon.ico

 ´úÂë¹ÜÀí/´óÆÁ/public/image.png

 ´úÂë¹ÜÀí/´óÆÁ/public/index.html

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 ´úÂë¹ÜÀí/´óÆÁ/src/App.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,14 @@
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style lang="scss" scoped>
#app {
  width: 100vw;
  height: 100vh;
  background-color: #020308;
  overflow: hidden;
}
</style>

 ´úÂë¹ÜÀí/´óÆÁ/src/assets/logo.png

 ´úÂë¹ÜÀí/´óÆÁ/src/assets/pageBg.png

 ´úÂë¹ÜÀí/´óÆÁ/src/assets/scss/_variables.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,98 @@
// é¢œè‰²
$colors: (
  "primary": #1A5CD7,
  "info-1": #4394e4,
  "info": #4b67af,
  "white": #ffffff,
  "light": #f9f9f9,
  "grey-1": #999999,
  "grey": #666666,
  "dark-1": #5f5f5f,
  "dark": #222222,
  "black-1": #171823,
  "black": #000000,
  "icon": #5cd9e8
);

// å­—体大小
$base-font-size: 0.2rem;
$font-sizes: (
  xxs: 0.1,
  //8px
    xs: 0.125,
  //10px
    sm: 0.2875,
  //12px
    md: 0.1625,
  //13px
    lg: 0.175,
  //14px
    xl: 0.2,
  //16px
    xxl: 0.225,
  //18px
    xxxl: 0.25 //20px,,,,
);

// å®½é«˜
.w-100 {
  width: 100%;
}
.h-100 {
  height: 100%;
}

//flex
.d-flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
$flex-jc: (
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around,
  evenly: space-evenly,
);

$flex-ai: (
  start: flex-start,
  end: flex-end,
  center: center,
  stretch: stretch,
);

.flex-1 {
  flex: 1;
}

//.mt-1 => margin top
//spacing
$spacing-types: (
  m: margin,
  p: padding,
);
$spacing-directions: (
  t: top,
  r: right,
  b: bottom,
  l: left,
);
$spacing-base-size: 0.5rem;
$spacing-sizes: (
  0: 0,
  1: 0.5,
  2: 1,
  3: 1.5,
  4: 2,
  5: 2.5,
);

 ´úÂë¹ÜÀí/´óÆÁ/src/assets/scss/index.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,145 @@
#index {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;
  
  .bg {
    width: 100%;
    height: 100%;
    padding: 16px 16px 0 16px;
    background-image: url("../assets/pageBg.png");
    background-size: cover;
    background-position: center center;
  }

  .host-body {
    .dv-dec-10,
    .dv-dec-10-s {
      width: 33.3%;
      height: 5px;
    }
    .dv-dec-10-s {
      transform: rotateY(180deg);
    }
    .dv-dec-8 {
      width: 200px;
      height: 50px;
    }
    .title {
      position: relative;
      width: 500px;
      text-align: center;
      background-size: cover;
      background-repeat: no-repeat;

      .title-text {
        font-size: 24px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
      }

      .dv-dec-6 {
        position: absolute;
        bottom: -30px;
        left: 50%;
        width: 250px;
        height: 8px;
        transform: translate(-50%);
      }
    }

    // ç¬¬äºŒè¡Œ
    .aside-width {
      width: 40%;
    }
    .react-r-s,
    .react-l-s {
      background-color: #0f1325;
    }

    // å¹³è¡Œå››è¾¹å½¢
    .react-right {
      &.react-l-s {
        text-align: right;
        width: 500px;
      }
      font-size: 18px;
      width: 300px;
      line-height: 50px;
      text-align: center;
      transform: skewX(-45deg);

      .react-after {
        position: absolute;
        right: -25px;
        top: 0;
        height: 50px;
        width: 50px;
        background-color: #0f1325;
        transform: skewX(45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(45deg);
      }
    }

    .react-left {
      &.react-l-s {
        width: 500px;
        text-align: left;
      }
      font-size: 18px;
      width: 300px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      transform: skewX(45deg);
      background-color: #0f1325;

      .react-before {
        position: absolute;
        left: -25px;
        top: 0;
        height: 50px;
        width: 50px;
        background-color: #0f1325;
        transform: skewX(-45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(-45deg);
      }
    }

    .body-box {
      margin-top: 16px;
      display: flex;//弹性布局
      flex-direction: column;//flex容器属性 column主轴垂直方向起点在上沿

      
      //下方区域的布局
      .content-box {
        display: grid;
        grid-template-columns: 5fr  5fr 3fr 2fr;
      }

      // åº•éƒ¨æ•°æ®
      .bototm-box {
        margin-top: 10px;
        display: grid;
        grid-template-columns: repeat(2, 50%);
      }
    }
  }
}

 ´úÂë¹ÜÀí/´óÆÁ/src/assets/scss/style.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,185 @@
@import "./variables";

//  å…¨å±€æ ·å¼
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  outline: none;
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2em;
  background-color: #f1f1f1;
  margin: 0;
  padding: 0;
}

a {
  color: #343440;
  text-decoration: none;
}

.clearfix {
  &::after {
    content: "";
    display: table;
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;
  }
}

//浮动
.float-r {
  float: right;
}

//浮动
.float-l {
  float: left;
}

// å­—体加粗
.fw-b {
  font-weight: bold;
}

//文章一行显示，多余省略号显示
.title-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bg-color-black {
  background-color: rgba(19, 25, 47, 0.6);
}

.bg-color-blue {
  background-color: #1a5cd7;
}

.colorBlack {
  color: #272727 !important;

  &:hover {
    color: #272727 !important;
  }
}

.colorGrass {
  color: #33cea0;

  &:hover {
    color: #33cea0 !important;
  }
}

.colorRed {
  color: #ff5722;

  &:hover {
    color: #ff5722 !important;
  }
}

.colorText {
  color: #d3d6dd !important;

  &:hover {
    color: #d3d6dd !important;
  }
}

.colorBlue {
  color: #257dff !important;

  &:hover {
    color: #257dff !important;
  }
}

//颜色
@each $colorkey, $color in $colors {
  .text-#{$colorkey} {
    color: $color;
  }

  .bg-#{$colorkey} {
    background-color: $color;
  }
}

//对齐
@each $var in (left, center, right) {
  .text-#{$var} {
    text-align: $var !important;
  }
}

//flex
@each $key, $value in $flex-jc {
  .jc-#{$key} {
    justify-content: $value;
  }
}

@each $key, $value in $flex-ai {
  .ai-#{$key} {
    align-items: $value;
  }
}

//字体
@each $fontkey, $fontvalue in $font-sizes {
  .fs-#{$fontkey} {
    font-size: $fontvalue * $base-font-size;
  }
}

//.mt-1 => margin top
//spacing

@each $typekey, $type in $spacing-types {
  //.m-1
  @each $sizekey, $size in $spacing-sizes {
    .#{$typekey}-#{$sizekey} {
      #{$type}: $size * $spacing-base-size;
    }
  }

  //.mx-1
  @each $sizekey, $size in $spacing-sizes {
    .#{$typekey}x-#{$sizekey} {
      #{$type}-left: $size * $spacing-base-size;
      #{$type}-right: $size * $spacing-base-size;
    }

    .#{$typekey}y-#{$sizekey} {
      #{$type}-top: $size * $spacing-base-size;
      #{$type}-bottom: $size * $spacing-base-size;
    }
  }

  //.mt-1
  @each $directionkey, $direction in $spacing-directions {
    @each $sizekey, $size in $spacing-sizes {
      .#{$typekey}#{$directionkey}-#{$sizekey} {
        #{$type}-#{$direction}: $size * $spacing-base-size;
      }
    }
  }

  .#{$typekey} {
    #{$type}: 0;
  }
}

 ´úÂë¹ÜÀí/´óÆÁ/src/common/echart/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,66 @@
<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import tdTheme from './theme.json' // å¼•å…¥é»˜è®¤ä¸»é¢˜
import '../map/fujian.js'

export default {
  name: 'echart',
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '2.5rem'
    },
    options: {
      type: Object,
      default: ()=>({})
    }
  },
  data () {
    return {
      chart: null
    }
  },
  watch: {
    options: {
      handler (options) {
        // è®¾ç½®true清空echart缓存
        this.chart.setOption(options, true)
      },
      deep: true
    }
  },
  mounted () {
    this.$echarts.registerTheme('tdTheme', tdTheme); // è¦†ç›–默认主题
    this.initChart();
  },
  beforeDestroy () {
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart () {
      // åˆå§‹åŒ–echart
      this.chart = this.$echarts.init(this.$el, 'tdTheme')
      this.chart.setOption(this.options, true)
    }
  }
}
</script>

<style>
</style>

 ´úÂë¹ÜÀí/´óÆÁ/src/common/map/fujian.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,48 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*   http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*/

(function (root, factory) {
  // eslint-disable-next-line
  if (typeof define === 'function' && define.amd) {
      // AMD. Register as an anonymous module.
      // eslint-disable-next-line
      define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
}(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    }
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    if (!echarts.registerMap) {
        log('ECharts Map is not loaded')
        return;
    }
    echarts.registerMap('福建', {"type":"FeatureCollection","features":[{"id":"350100","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@K@KLDBLBBIHCAA"],["@@CBABCD@FJFCFBDHFFBB@FM@CCEBCCEMC"],["@@ACCBBDDA"],["@@@CC@@DD@"],["@@B@A@"],["@@MCKEO@ICCCAEAKBKAAIAC@AVFPCRBBFBNHNBVXJ@DADCHAB@@GBCL@B@BCCIEEBC@CHCACG@ABKPA@CC"],["@@@A@B"],["@@A@CDC@WH@FLXCB@DFDATBFH@HELA@CCACI@AFAD@BA@AH@DED@FDBHHHJDT@JC@AEOECGKC@EDOQIACBG@CC@CKC"],["@@B@BCE@BD"],["@@J@BA@AAAI@ABBD"],["@@B@@ACABD"],["@@B@@AA@@B"],["@@B@AC@@@D"],["@@BAA@@B"],["@@@A@B"],["@@BAA@ABB@"],["@@DA@CCB@D"],["@@MDFFAFBH@BCFCDBN@BHFDJJHFBDCDMCCE@AA@EHOD@HDDABC@ECCGDCEGAGACC@G@A"],["@@B@@AA@@B"],["@@B@@AA@@B"],["@@B@A@"],["@@B@A@"],["@@B@AC@B@B"],["@@BA@AAB@B"],["@@BA@CC@ABCCC@@BDDHB"],["@@BKCEEAEF@HBDHDDA"],["@@E@AFCBC@CCABACA@AACFB@@BADQAALDDAB@JBFADLADGAC@@PBHF@@DCAAAECEJCDDAFBDCDBLDBBA@AAADAAADA@ADBDACGDACADCAADEGKE@AA"],["@@ABBBAFEBQBEDQBABCJOLEHD^NF\\BLGFMH@FKD@LBPENB@A@CM@CAAE@CBA@CE@A@@ABA@EDAAKE@MEC@"],["@@@HCBEAEJAH@BDDL@DCFDNBB@@CFBDEEEGGG@A@BCEEEA"],["@@ABFLAB@DJDFNDDJ@BCDAFHBBFC@CGEBCKEA@BEIC@CCBADIIA@ACC@"],["@@FD@A@CAC@ACABFAD"],["@@C@@BDDD@@FBB@DAB@B@BB@BA@AF@@CFEIEIC"],["@@BDHBB@CGBGEADAACCCEACCC@@DE@@DHDBFHJ"],["@@@AA@BB"],["@@FFB@@CACC@AB"],["@@ABD@@BB@HACCABE@"],["@@BBJ@DBDAAEA@CAABC@ACCH"],["@@ABBBF@AACA"],["@@@DFJDBFFHDB@@ECCEGEACEE@"],["@@DHDBD@FADCCEFAFBB@HKBECCEDC@A@CF@@AGEECCCGABABABCAEBAABCAAA@GH@DDDAFF@BBADGBECABARA@CGCECBABBFAFJD@HBBD@JABCDC@EAI@AF@FBF@@F"],["@@CBD@BAA@"],["@@B@@AA@@B"],["@@DBBACAAB"],["@@DFDAACA@AEA@@F"],["@@DB@CC@ABB@"],["@@FNFAFFFACGA@ACC@EEE@@B"],["@@@DBBF@AECAAB"],["@@BDB@@CBAEEA@BH"],["@@BBD@@ACCDAE@@D@B"],["@@JB@@AAE@CA@BB@"],["@@BDDBBAAC@CC@ACA@BH"],["@@DD@CD@ACC@AD"],["@@FDH@GEEB"],["@@C@ADHBBF@@DAFBCEIE"],["@@BCAEBA@IECABBJEHID@FMFBBBBBFD@FFD@D@@HBBF@RADCBE@CGCEBAAGG@CBC"],["@@B@@BD@@CAAAA@BAD@@"],["@@BDAE@B"],["@@CFDDD@DAJ@D@BAACBACC@EAACBABKH"],["@@BB@AA@"],["@@DBBGAAA@CA@BDFAB"],["@@@BDFDBB@CGEA"],["@@@BB@@AA@"],["@@EDBDB@FA@EC@"],["@@CF@DADDFB@BA@CBBHBBABAD@ACAABEAAEAIB"],["@@@@@A@B"],["@@BBBA@ACB"],["@@DB@CA@AB"],["@@DDB@@ABACCABAB"],["@@ABBBD@@CD@@ACACD"],["@@BBDAAEE@BF"],["@@@BB@AA@@"],["@@JFB@CEG@"],["@@@DFBAEC@"],["@@@DD@ACA@"],["@@ABFB@CC@"],["@@B@B@AAAB"],["@@BDB@ACA@"],["@@B@@@A@"],["@@JHB@ACGCA@"],["@@DDHFBBDCFDD@JHDA@@KKCAACEBEGGCABBDCD"],["@@DFNJHBJOJEBACGIACCK@CACBCCC@CDADDP"],["@@ADBBHAAABCAAED"],["@@@BBA@AAB"],["@@HBBCAEGF@B"],["@@HHB@GIAB"],["@@P@@A@CECM@@DDF"],["@@IKGACD@FNLHJHB@EGM"],["@@A@CDG@CBC@EFIDBBAD@BDDFA@FDFD@BICKDAD@JNDBBJAB@BPH@BJJF@FDAHHDF@DAJDBDB@@GCA@CBCCMIKBCE@CA@GECE@IEE@@ABACGIEC@"],["@@BA@ACBBB"],["@@BCAAAAC@DHB@"],["@@DB@CBAE@@D"],["@@@@@@"],["@@FAB@BCAAE@CDBD"],["@@JNPJF@DABAAI@ADAVHZFFBHJJDF@DA@EEI@EFG@C@A@KAEECEAC@GBIJC@IGQA@BC@GEEBE@GCABADMJC@@BAHBD"],["@@DDBA@CCAAB@B"],["@@BAAB"],["@@DBBA@CC@AD"],["@@JFBCDA@AACIACD@D"],["@@@BDAC@"],["@@B@BAA@AB"],["@@BBDBAEAAA@@D"],["@@@DHBBMCG@AAAC@AFBN"],["@@BBBCA@AB"],["@@@BBB@CA@"],["@@@DD@AEC@BB"],["@@BBBAACC@BD"],["@@BBB@@C@AG@DD"],["@@@BB@@CAB"],["@@BBBCC@@B"],["@@BBB@ACAB"],["@@@B@A"],["@@B@@AAB"],["@@BDF@CECB"],["@@ABDBBCC@"],["@@ABDBDEA@CB"],["@@@BBBDAAAC@"],["@@D@AAAB"],["@@E@@FB@@ADA@A"],["@@@BF@DEC@ED"],["@@DDD@@ACAC@"],["@@B@B@AAAB"],["@@HHDAAACEE@@B"],["@@B@AA@B"],["@@BDB@BCCAAB"],["@@FBAAC@@@"],["@@B@AAA@BB"],["@@BBF@B@@EEACB@D"],["@@BDB@@EC@@B"],["@@CDBBDAAC"],["@@CD@F@BDAHA@CD@@E@AC@GD"],["@@FFB@@ACGA@AD"],["@@ADB@BCA@"],["@@@BF@AAC@"],["@@@DBCA@"],["@@@AAAADD@"],["@@DIF@ACCBCAC@@DCBALA@@DF@FG"],["@@BDD@CI@@AF"],["@@@@@@"],["@@@BB@@AA@"],["@@BHBBFA@AAABCCCBCAAA@ABC@@FBB"],["@@CB@BF@@AAA"],["@@ADBDB@FMC@CF"],["@@ADBBDEC@"],["@@@BBAA@"],["@@ADD@@CA@"],["@@AB@BBC@@"],["@@B@@AAB"],["@@@B@A"],["@@@BDAC@"],["@@@BBDFADB@CE@ACCA@D"],["@@J@BCCCG@@H"],["@@A@@DBC@@"],["@@@EAACFAAAFBBBCF@"],["@@EDADD@DABBD@@EEA"],["@@@BBFCBC@A@ERBBJ@FBF@EFE@@DDBN@HED@FBCFFBBDD@JC@CEEBCAANCBCB@@CKEEEOAGCADE@ME"],["@@@BBBF@@CAAEB"],["@@@BBBBECA@D"],["@@ABBBDCCA@B"],["@@GDDFHABAACCA"],["@@BDB@DA@CAAA@CD"],["@@DB@CAAAD"],["@@ABBBHACAC@"],["@@DHH@BA@EFBBA@ICCACCBE@@FEF@D"],["@@DFHDBAACCCCACB"],["@@@DFBD@@CAAGA@B"],["@@B@@AA@@B"],["@@@DF@ACDCAGA@@FCF"],["@@@DDBDCBAAAE@AB"],["@@@BDAC@"],["@@DBBAEAABB@"],["@@ABBBBAAA"],["@@DBB@AAC@"],["@@@BB@@CA@@B"],["@@B@AA@B"],["@@@@@@@@"],["@@ADDADDDB@GEEE@BF"],["@@ADFBFBDA@ACACECBAB"],["@@BFFGCAA@AD"],["@@AB@BDCA@"],["@@B@@CE@AD@@F@"],["@@CDM@@BDBAFFBBDBB@FFDRFLDAK@ICEHKACGACBABC@K@"],["@@DBDA@CEAAB@D"],["@@DDAEA@@B"],["@@CCA@DLB@DCBCE@"],["@@BBBCCAABBB"],["@@BBBAAAAB"],["@@@BDJDBDDDACEBCDAHCBAEACDQ@"],["@@@DDAAAA@"],["@@AB@BFCA@A@"],["@@@BB@AA"],["@@@AAB@@B@"],["@@DBCA"],["@@@BB@@CAB"],["@@ADD@@CA@"],["@@AB@DDCAA"],["@@AAABD@"],["@@f•f¯BGEOBGBCLKbqBEBOBCRORQBAIKAEBEVEZ@\\HjRXJ\\@FA@COeCEe_aUGEAOEEKAIAmDQEG@A@CRCDGFSDG@…]GGBILENADC@EAIEIYWIACBMLOPIFI@Ÿ_YCYAmGECGG@KDGRQBE@EAGUMAC@UAIEEoM]_YISKAM@MFILIFcFKBCNEPARM@ECEJYR@BWHMJyH]BEFAHBdNH@F@NERGLODMAiCUIaYOuCIGCSC{CMCICEEEGGWGeAeD{D‡HMBCH@DOAGCEQKEIEEMGCCEOCAAEEA@EJCBGFC@AQcQIUA‘JaA‰SAKMEKBGEAE@IHMDUAIBA`BNMFAJFF@^EFBHJJ@FCBGAQFM@GACQSACDKJ@REVBTCJDJDPNJBL@DAHMEQ@ATOFQHC@GAGHWBKCGKKAKDWFELKJM@E@EGG@GBADAJ@FDTVLDDABA@]BAlJHV@BEB@HHFBFVHFPDDTFREF@JDBD@DSHABDLCH@F@DH@@V@LKXELcPALIJAH@JJHH@BJLLBHXND@FAD@DBBPDHHFTJXFTLBH@@HAjZF@FAFG@KCEYa@C@GDOJMDAJA\\HLAD@HIFCH@PKPGFG@ECCECCIIK@ADCH@PMhKN@ZLH@DA@EE[GKYUKEGAI@CDGPGDIBiSGECCEUAWDODGBCXCDCDIDEBANDDBB@JCDIPHBDB@FEAKBIKS@KEEK@EBABCLCFAB[FGAECCEKCEBIAKIKCc[IAGACCEO@MHCN@FCLAFC@GMC@KEABCACE@EBCAAB@DA@GCE@SPCHAHGDCFSBIFKAKPKDW@C@@B@DVD@FAHEBAEM@CBEHGDCD@DNR@FG@CAC@IL@D{OAA@GCKCIYMG@CC@CHEPADAH@BBBHD@D@JILA@FAHBHF@F@FBFCDE@SDI@AEG@MEAIBGA@KAC@EJ[DC@MDA@AGEBEAAA@GHC@SMQCKE@CDAVBTHHHF@BA@CCMGIECEG_IWBABMBEAMIIAEBCHKN@HDBLBQXIV@LBFJLDRCFAPIDCH@LHJCDIFADDH@NCJGFMAEAEECEBEGUHIFADADE@IBAH@DBDEDKDI@AGEMECIAEACIEGBECAKEABG@CEEIAMEE@@JDF@D@HEBEBO@KAGIQEEQC@QHCD@JJP^XDD@HENQVGFGBCDBNJfCFGDE@GA]BCACIGOQSG[EACDBTCJON@DPJTT@HIFA@AHDVBFHHJ^AFGDMBI@OSAAEAiHEDATEFsVIFIDIAEIGUKsAODOJYJO@EBQAICCI@CECBCDGHO@IGG[IEIDM@OASBWTOJKVA`JZJRHFGDMEIBEF@TA@o]AIO@EAEJA@GACBADFJ@DELCD@DDBLANCD@LVBFENB@JCF@DDDBDDAHFP@FGNMT@PIJAPIGGCQOIGCCADAHIBIFICGBCBKRMDCRSTBBBBJBFGFCB@BHCPEB@EAAC@C@DN@DADEBIB@HBB@BBDGDALMFGFMR@HAH@JJTFPFJANFBHAJ@BBCFIBIJETBDNBDBBDCHADGAAHADEBI@@HIAAABAEC@BCB@A@AABBHHFPNJDJHLT@DABIDG@EBEBGHMGEHkDEAKGAACBCLA@CAEGGCKDCD@HEC@EgGMK_BSIACmAIGKDMAEEEIMCCCAGOGANDTDHBFCPEF@D@HDDF@DB@DADCBC@MG@GGGG@ICIOMMAKIACAQCGECBCGCCCEKGIIEAEEC@ABHL@FGBCCO@OGC@MDADEBG@QLEHADW@EBEGOI@AHABAMSUMWIICMBIDMNCBCA@CBEBGCGIGMAIMEEE@GBADL`@NCBUOI@EGCAKF@HA@CCIFAJSAMBED@BBBHFON]FO@EAI@ECACAOICEBIHIDAJABC@CA@EDMCAEDCA@CBOAGEAGAADELABGACA@MCGCAGPEBEAAC@CJIGEC@INUKIFOMCGDEEEGCYAEBCLKJGLGFC@IJKJALUPAJWFMJGJA@CBKEGBIFQRGV@LBBARCHIHCH@JG`EJSHGFKRMCEF@FVXDP@NDLD@LEHDLNF@HF@DEJIZABKFADBDJBCLDFN@BDCJV\\LNHC\\ULOFAFCBCI{BAJHP@FHBZCFAHAFC@AFBDJHHBPINALCP@JO@AACD@HB@BKPCJEBHHALBFNRDJAFG@AFDTHLAHDFKLBDDFDFEF@FEDJTBHCXGF@L@BH@ETBFJJBZIPAHAHBB\\CpBnHJ@XSRFONBHJHFNCBGCGBAFE^CBEFAN@LAFFHFLAFDD@FCBSGG@GFGNA`FL@LCFBD@LD@PGDBDDITDJDHBDCFBDABBB@BF@FDBB@DBB\\BTKFLIHKTEFPLFHDAhANINGLANJD@HCBDDLFHBDCDHB@F@NK`BHABHJVJDDCJH@D@@DD@BADCF@DBBD@DABKDBZDDNJFFHDHHR\\|AFABA@ENE\\EFB\\RHDDVDJBJEHQLE@EBCDGLIHDHEFGFQBEDAFDF@JJBELJPEDSH]PGFHNBFCRDJ@RBFHFD@HJRHBHAHIBBLCDEB@B@HDHVAFBD@DCHAT@FEFIEKBAJAPENEDG@]OK@CXSDEACC@@E@KFKJGJAL@XHbTJNBLPHDD@J@D\\HDDHDbJLAVBF@PSHEN@LHH\\ALEFOAEFAHDLPNDVFJLFRH`BFAJGF@DBBDFB@DEHBDFF@DOP@DDDFDD@LEHF@BCJBDJJ@DE@AD@HHBBDBNFBJED@@DANHD`CJ@DBNND@DADENIFEFE@EACIAKGEGAEDCRGL@PDB@DCDAJBBB@LDBD@@GDCAEFGACAAJADEBCFCAIFG@CDCHBFABB@DDBT@DAHGBBBHHBF@FCHBDAD@BFJJD@H@NFDDJNHDFJDBNEDENYHG@SDCNSFAD@ZHJJJZDFHAVIJGBCJCDDH†HRVXFBF@VA@GFABAAIE@CE@CB@HD@CFCBFFBB@DAHDFH@FJFJAFFAFED@B@DBBH@DC@LDAH@DCDAVDFFJP@NBFPBNAJCJADAH@JDAHYJABBBH@BB@DDBLANOFANBVDNFT@HADCF@FB@DFBTKLC@EXBDCJKAC@INQJCBILELQ@AKIPUDCN@^KBC@EECDCDAJDFANKRBHGF@HFF@NEFCDC@EFA@CB@NABAAE@ADAF@RFNHDAHBPEJ@FBBH@DDHF@FENF@DPpDDFBJ@NJVEH@FAXKJDTPDBGF@DDBLA\\DJATMJCDGTKBGJM"]],"encodeOffsets":[[[121678,27068]],[[122867,26893]],[[123104,26891]],[[123102,26881]],[[122918,26872]],[[122887,26845]],[[122899,26847]],[[122808,26762]],[[123295,26793]],[[122500,26759]],[[122597,26600]],[[122653,26290]],[[122432,26267]],[[122495,26224]],[[122330,26023]],[[122337,25968]],[[122386,25960]],[[122568,25912]],[[122491,25946]],[[122489,25944]],[[122479,25933]],[[122477,25932]],[[122575,25918]],[[122572,25914]],[[122600,25884]],[[122600,25866]],[[122778,26197]],[[122515,26757]],[[122816,26587]],[[122847,26569]],[[122779,27057]],[[122762,27045]],[[122794,27053]],[[122756,27019]],[[122755,26998]],[[122828,27009]],[[122848,27000]],[[122971,27014]],[[123107,26964]],[[123388,27005]],[[122776,26927]],[[122780,26924]],[[122774,26924]],[[122896,26865]],[[122900,26866]],[[122880,26870]],[[122857,26818]],[[122855,26792]],[[122703,26916]],[[122688,26897]],[[122685,26889]],[[122705,26880]],[[122597,26897]],[[122598,26867]],[[122549,26752]],[[122532,26772]],[[122538,26773]],[[122508,26742]],[[122877,26603]],[[122846,26566]],[[122564,26378]],[[122535,26397]],[[122528,26369]],[[122546,26375]],[[122686,26379]],[[122731,26321]],[[122734,26322]],[[122700,26282]],[[122700,26286]],[[122708,26284]],[[122643,26330]],[[122631,26281]],[[122600,26328]],[[122566,26286]],[[122561,26282]],[[122575,26281]],[[122577,26283]],[[122534,26303]],[[122539,26306]],[[122511,26289]],[[122521,26281]],[[122483,26327]],[[122477,26331]],[[122496,26319]],[[122487,26291]],[[122494,26291]],[[122458,26284]],[[122450,26243]],[[122414,26223]],[[122416,26230]],[[122478,26197]],[[122483,26194]],[[122473,26208]],[[122535,26263]],[[122567,26229]],[[122588,26246]],[[122671,26268]],[[122676,26263]],[[122686,26264]],[[122691,26237]],[[122726,26231]],[[122737,26209]],[[122786,26210]],[[122722,26189]],[[122715,26193]],[[122751,26184]],[[122716,26129]],[[122701,26140]],[[122691,26129]],[[122691,26122]],[[122699,26124]],[[122696,26122]],[[122542,26118]],[[122578,26154]],[[122582,26156]],[[122583,26146]],[[122580,26168]],[[122590,26165]],[[122580,26144]],[[122571,26142]],[[122568,26189]],[[122479,26187]],[[122495,26125]],[[122497,26125]],[[122499,26129]],[[122500,26143]],[[122545,26107]],[[122532,26091]],[[122519,26069]],[[122539,26058]],[[122556,26069]],[[122511,26041]],[[122587,26026]],[[122681,26067]],[[122677,26060]],[[122686,26053]],[[122695,26033]],[[122691,26034]],[[122693,26038]],[[122818,26043]],[[122753,26083]],[[122747,26086]],[[122725,26100]],[[122643,26003]],[[122650,26004]],[[122634,25999]],[[122631,26000]],[[122628,26000]],[[122620,26011]],[[122548,26022]],[[122539,26005]],[[122542,26007]],[[122602,25961]],[[122588,25985]],[[122578,25962]],[[122579,25943]],[[122579,25951]],[[122570,25955]],[[122565,25953]],[[122556,25945]],[[122648,25899]],[[122646,25905]],[[122632,25906]],[[122619,25901]],[[122600,25885]],[[122442,26033]],[[122436,26036]],[[122438,26056]],[[122438,25999]],[[122455,26007]],[[122420,25975]],[[122403,25968]],[[122376,25971]],[[122375,25972]],[[122375,25975]],[[122470,25938]],[[122346,25914]],[[122355,25916]],[[122358,25920]],[[122351,25932]],[[122342,25940]],[[122331,25960]],[[122336,25979]],[[122230,26022]],[[122230,26020]],[[122245,26043]],[[122256,26046]],[[122280,26060]],[[122299,26064]],[[122846,26708]],[[122684,26856]],[[122684,26858]],[[122686,26859]],[[122689,26858]],[[122586,25928]],[[122556,26196]],[[122676,27184]]]},"properties":{"cp":[119.206239,26.075302],"name":"福州市","childNum":197}},{"id":"350200","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@C@@DJ@@AEA"],["@@QDKHAHJPLBJIFCDCBE@GCCGA"],["@@BFF@@CCACA@B"],["@@JDFFJ@HCFDDABAAAC@AEMAC@GCGBCF"],["@@FDJC@AEBECAGA@AACB@BHDAF"],["@@FcAIO[•…MOMKQAcDUFaNIJKTMNAFCP@HHNFjTxBHJXJNHHXNfHJDNBFAFEJQFC^ClQNKFIDOB["],["@@iDoCEBSHKREDQBEDONKTCLHV@@CBABHHBHAJBBG`E@AFOHCHCBEAEBADCPEHKHCBO@GD@LBJBDGHAFDRFF@HEHEDMHMLMHADJFDJ@J@FALDBBBNCPDRADBTfJHNFLLJDDDDNDH@DAJLDDF@FCNK\\CNBLABMFCFIhARFLDTDHJDFBALHJDLBNAXALGNF@DBBF@FABAFDJAFFTIFCBSCG@EBWbMHQLBJBDFDH@H@DCJGFKBAXJTEHIHQHEDGDAHHF@ZLLDBBONAD@DLNL@RCDBBFCHOJSDGF@FDFHBZMHADDBPFBXGLBFADEAQDGLKHMFEHAFDHNH@DABE@SDMFAPTrXBAF@LTLHTLFBLEN@LB@FJDN@JADADEDAD@DDJCNBRUAAKAEM@EFGTKLCHGTGBIACEEBELODIDAFAH@FBDLHBF@DGFBDADCF@FBHHTDH@JERCFCHWFCHMLEHEHACGHEAEGIBCRMD@BFDDDBFCDE@KA@CBCBCACE@EFEESCCC@CDSAEE@EDCFUDANADCJMAG]iAEDCHGXM@EAGBC\\QA_OMHWCQEEIAEOCCEE@CDIDBFBJNB@BC@GCQLGLEBEBKBAJ@DW@]IUEGOGkG‰GsMkGl]ZgZOZIJKNICOGaOQMMUOGGIIOIKUO}AEQSGSEu"]],"encodeOffsets":[[[120993,25143]],[[120906,25022]],[[121027,25035]],[[121218,25145]],[[121249,25142]],[[121042,25093]],[[120883,25005]]]},"properties":{"cp":[118.11022,24.690474],"name":"厦门市","childNum":7}},{"id":"350300","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@ABG@DFAFHDDH@B@BF@@CHBBCAAHCAGDC@CE@GBMC"],["@@@FAAGDBNDFD@@EBA@CBCB@DBDAGGA@CC"],["@@F@@ACAAD"],["@@EBMLCF@FHBLEDEDG@CAAAA"],["@@B@A@@@"],["@@BBB@ACAB"],["@@BDD@CCA@"],["@@BBB@ACAB"],["@@DBFAFCCCE@ED@D"],["@@KDADDBDADDHCBA@CGA"],["@@T@BA@AECC@KFG@@DB@FA"],["@@@BDFBCDDDABCACMB"],["@@@BBBF@BAJAACB@@ACCKAGDABBDDB"],["@@FD@BD@@GI@A@BB"],["@@@FBBH@BA@IF@@EBCC@CDAACDAAC@AFBD"],["@@AEEBCCEAADDJA@A@@FB@FAF@@BBBFGAC"],["@@FBDAAAC@C@@B"],["@@CD@BFBBHH@B@AC@AJ@CCBA@ACCA@CDIA"],["@@HDBCGAAB@@"],["@@FHADDBDIAGEACF"],["@@@BEBAFDBJLBAAGH@@CEEAMGB@DBD"],["@@OJ@FJAZK@AAEC@MF"],["@@ADBFFDHABEAAEIA@E@BDAB"],["@@BHFBBBD@BEACGCDC@AA@GF@B"],["@@ADCBBBD@BC@AAA"],["@@BAACABBD"],["@@@BBDAFDBDBBDPI@C@CGEIAGF"],["@@RDDAACCACEE@ACAHIFBBFA"],["@@YDI@SFETDJFFBFOR@D@HDDD@JEHADDBHDHDDD@JADB@HBJFHFBJEDEBIAECA@CBAFCFBBBABBDDBJAHCDEAQBSDIJER@BGDEbKL@BDDHDFDABEBAHBDED@FBFHHDPAFABC@CECA@AAFGEEEAIAIBEFCACEDQ@AMDCC@CNSCGDC@AICGAW@QGA@ABBHADCDGFODAB@FCD@DDFABKDG@GDIDGAGHSJ"],["@@FJFFFBH@LCJHnBBDTJ`ANLhH@FFD@GDCLCHDFHDBB@DKDABBLHNBdCFGNHHGFAFAH@JCBAAGIOIGICOMGEAEBC@DDA@AFDABBBJB@GJ@FABCBGHBBCDGACCAMAACFSJIJADEAAI@GBEABMEIEOIS@IBG@GNQHENEBKHCAC@AAA@GJAFABC@CCMD@D@BB@FFADOAGA@EDEHIAAAAATSDQNCLQDAHAJDJEJADKDDJHRPHDJHBOJI@ONSHM@EEOBGAAECCCE@IDA@FMAEKUC@MDKBCC@ADCFK@CEIBCDAHBB@FIMIuSqYEGOUKkAaBELCJBNFD@HE@MDCpMPAFDDBXEHKBC@IFCBCAKBGPS@OJG@EDAFAFBBJCZBDD@F@HATIHATBJBFBPAFCXgnkHGVEN@HIVGH@PHF@BAEIAIAKBMACCCYIIEIA]BGACE@IEAQDMHGBKEC@EFI@EAAEFI@CAC@EFKBKDKJMNEDGCCGAEEIMCAC@ADEAYQGMOEEB@JED@DDFADqVIFEBWCWOSEQ@ODGFOHEDEJcZGJCHBLAHEDMCEGEIMECC@EGGAIAAEB@CJYLOR@NIN@DCDGAMGECBAABEFCHEF@B@JHN@FCDGCeBG@EK_@KAKIAIKKECAAI@KHMEEAEBCL@BC@GAAGAAGGCAGGICUICFKAE@@K@C@@HBJALGDEFKBCDBDHD@BCHCBODOLADFDJ@ZIHBDDDD@DO\\EHBDDDJ@HPLFJJFBTBDB@DAFIFG@©FMQSFSNGNUHKJM\\AVBLANDPDDFFB@TIRCJBHJPXBJBbDHLHBHU\\_EI@GAIIEASBIAACCOAEEEOIKAKDICE@AFBNQREH@JDHHJFDBH@LBJHHDNDBLGFGBEBAHALDFHDDDHAHEHKBMAOFIBGCIIC@Q@IBK@GDG@CCCGCAiSGAKDI@MIGMIE[CUBACICBKAGGGQAECGIC@ADDH@FOBE@BGCACAIAEASBICGBKCEBBHMEGCQECCEKDQ@AAAMAKBEAGEQEICGBEKWYCBM@IIEGGC@ASAA@AEC@BHC@DJCFBJOFEHEBCNDNKJ@BBFFBL@DFHDBFFF@B@BECAFG@@EAA@RAHBBF@@FEFBBHFBD@BCBADAH@DJRLF@BYREFGCGGCAK@ABCBEQA@CFIFAHGBBHFFTDFFBJFHKPDHMDSEG@MFEAMOEACBI@EBIJA@CAAEA@KNA@OEI@IDCC@CE@A@@GCB@ADGAEC@AFIB]@ACCAEF@BS@BLGNAHFHFL@FELCBECCECIGKA@G@ADAHBFFFDJDDN@ABIFBZJJDD@HQJ@JAFCBUNGLEBK@AD@FJRADSFEP@VADCBICMBA@AJILERADDHNTFNJBBDDP@HADC@KCC@CB@BJDDDBFADOFBLEF@JJH@DGB@BJLJFJPLNLLBBCD@DFFJDZNBR@DABBJjpBLLFBHLFADADFFHPEF[LCBABJLRL@DADEFFFCFDHPNJEVLJMD@HFIJ@DBDFBFAHODBDH@NDBHBBAFKBCHBFBBHAP@DDBFCDBCN@FDBD@BABIJCJGFAJDBPDFdD^EDCLIGEAA@AFCNATBBIJEDDB@@GJCF@FHL@TPDA@MK_BCHAF@FFJNNBJHDHAHAF@DDBDANMJCNAJDXJVNNTABGB@BPJFHFAX@BCFGRKH@FABCNCD@PHP@DDHA@EGKBAD@FFFBJJLHDFDDDHDAHFRDDBJBBLNNJPJDH@HH@HFDLDDABC@CCAE@CC@G@CFEDOAECGCSBMPHBHDDND"]],"encodeOffsets":[[[122386,25872]],[[122237,25718]],[[121933,25635]],[[122329,25582]],[[122027,26000]],[[122033,25986]],[[122061,25979]],[[122434,25772]],[[122266,25758]],[[122516,25833]],[[122474,25841]],[[122480,25849]],[[122461,25848]],[[122461,25821]],[[122449,25855]],[[122450,25871]],[[122423,25772]],[[122463,25792]],[[122389,25759]],[[122350,25860]],[[122207,25920]],[[122233,25935]],[[122120,25960]],[[122130,25957]],[[122231,25718]],[[122143,25765]],[[121875,25778]],[[121906,25704]],[[122339,25802]],[[121825,26342]]]},"properties":{"cp":[119.007558,25.431011],"name":"莆田市","childNum":30}},{"id":"350400","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@A@CFUPGBQAQKC@EDCbADKF@FARCHIFEBIAEIK]IEK@O@GHIXEDCAOOEAGFGNI@IAIIGIAGLSBECEECIAIDMAEECIKCGEGEOLIJIHM@EEEKKGQCOBGF@JFF@HCBODOJIBMMGCO@QBKEQEEGE@IDOKKCQBGAAG@GHCHCBCBEAEICKGKMIGE@EDEHGHC@MCG@EFEHABC@CAAGWCAA@EFCBKJAFEBCLGDIIMCD@HADGIEACCCMIE@IEOAC@CHC@CCIBOEGAMOEE@GBGFC@AAAEAOAAEDE@@A@GBCJC@IDGFEDE@GBCNBFA@AGGBCHEDIBALRD@FA@IMgAMEGECWAKGC@M@WCEC@ABCACK@EDG@ACHE@AKCEECCCM@CBAH@NHJ@BECEHQFDFALD@AFCAGH@HG@CCCJADEF@AEDEFAAAC@BCB@BCB@FNDEPAPHTDJNLCLBDABADMBOAGBECOCICCGCAEDKGEAA@MACOGOMCEQGACMSYGCE@KAGBAD@DAACCACBKLULK@IEICI@EKIACKGCQEEBCAEEAAYAA@@ECAYBSGC@MBUMIAEBIFUdMJEFK@SOCAIDO@CCBKBQNMDEBGACC@GBKFMNIHINC@EEEBCNEFI@SEMDEDADFB@DABQAIBCCABICC@KFCFQGCEGR@XBHFJDPFPBBH@HHRKLKHAD@JPRPJNJlAJG@CEMBcGKLK\\U\\YVMHGNGTKTQJOBECG@GC_UOIKAI@GBGJKVBFLJAHOPIPCBKBI@ODOHEFCPKTEFE@GGG@QGKIKSGCA@@HIH@NGNBFPLBHABQGGBCNEBG@GEOCO@CC@CHEFDHCFC@CAECCKEOISoKgIG{M]@EHBJTdDJANCN@TEjEHACBSAGAASNCVGPBBJFDDATEDGf]FM@KICQBMAQYEWI]OQCM@MAWKKMASECAKMOMYLGZFPBJALQBIEMg[SQaQCMAQGKEIMIIWMECC@IQU\\AACCAKCCEIEIFQ\\EBGAACEEEAGBBRDN@TSbYXGLCXOPwNQAAAGAKAK@CPKP@BDBHCF@BLG@AD@FABG@@HE@KCCBEB@DTNBZ@FOZCBA@A@DOCAQRADBDPFFHLB@FMV@D@FJFBD@DADKLBLBF@HENQRW`KhC^GPOHOBWCUCQGKGeGGJSFKJQBOAWIWYO[CCOGGKM_IGODMEOGcGUNMPg\\INF\\FPJRLNAFIDSA[OQGOLGjA`CJIJOHQFYTMDUBMVEDKAOPU@GBCFAZDLCJGF@VFRDFAFBDFFEBK@ABDHSNKDGkIKGCKAGDGFKDGBMOIEQHgJ]NG@IEMM[Q[WK@GFGLCPB`CLIJOHwFWFOD]PIHFLCPDBLDTJDFBRDDFBTNPFTPJLLBDF^RLLFFBPANCHADIH@JDHGJ@FDJAF@DEBEHBDABB@IFO@CGC@CCC@EA@CB@AAEACBWKQAGBCCADBDHFGHCAGOE@C@ADCFUDIH@DDFHFAFBFBLFD@BE@AFDDABEACD@DB@JB@BGFBF@@EBAACCF@@AAAG@IFHDD@FNCNGNCNVN@D@FAFEF@BDJHHAJDFFDbHDDDL@JSN^DBBPLBBD\\JHFB@@DDJFFJFRLHPFN@DFPJL@HDBDCFGDFL@PBJFBLAHHBJ@LFNHD^CBE@IVGJBFDDE@GHO@MIYDA^LL@FA@CDAFANJNBFBBJNNDTMXBHALBDDBAJBHHLFFFFNDFDDFBJ@JBHFFFDBDAJDL@DMAUBSCMNCAIB@BHNEBMDCFNJFJ@FCDK@ADED@HQDBJ@JCFMFONIFQHIFGDAFADDNDDH@NLLjFrFN@PHNEP_BIRIFGJadGLGdFZNNRHNJBHXVLRFNANINKVGZBbHhRXHFPHllNFJLh~X^``VZh`NFRLTHLDLBPATBXGHEPEPbRLRFvLRFJARAhMTD^TJL\\LTB^@RCRYHFJRDNX`RR„fXJPBZFZPLDDDB@DFPLF@B@BGAGJGPCNCHDFJDLDBD@JCNINMHAHBJFPDPNFDN@DFD@HKPGFEFCDEFSHIHORWJEN@JGRCHCDCVGDQDCF@JDDBFJFPBBPFNNJ@BB@RDJBFAPGNDJLHBDAVCFG@EAEEG@@FDTBFFDFBJ@`SNEHAFAL@FAJMPGNCFEBCNHL@JBPAHCLBFEBIGK@KCEBK@ADADBRCFC@CBGNOLANNPBLJHBF@DA@CEGQQEE@CBCHCJLFBHCDCDUBEGK@ALEBACMFMHCF@NNZHDHFFDDHC@CGQ@AdAFBBFLDBAAGLCFGFCLDDABCACBERBHEBAEGAEOEAG@KAEASAAEC_EGCCECIAQBE@IBCJILCRLFBJ@PGD@D@HNFBN@HKFCF@LHHADCF[LaJC@CBAHAHCX[B@HBDAHMLI@CAIFGBGBEPKNQFMJK\\S@CGE@QHIBGIKIEIICI@KCIEGGOKEOCCAIMAESDEAEECKKSAAI@ACAEDEFCP@HC@C@CKIBCJCLAJIDFNENAJC@IHGICCBA@@ABCHADG^ATBDA@EAEMGBGHOD@TFDLDBZEFPHJNHNDH@HDFDJAFEB@BBAHDDDADAFKD@TFF@TKHNLHFBDAP@XJPAFED@FHDALERFJLTHHADABED@IEDEEEAEAACAACVK@BCF@BF@BABCAICEECAKLEBGRCFCACGIO@GEGBCGHEDYNCDCBKGQ@AFANBBCDGBGEIJSDDHJXJHD@@@EBGB@FFDBDABKBAXARJNTB@B@LEHMLFPCLFB@NIJJBD@FGJBDD@FCJBF@DAJIHAN@BA@AKIU[@KCC@EXQDC@UEI@ED@DED@NFF@DEXHF@D@JEDEAEAACDA@GMC@@AJQIAECAC@IHUDCDAFJDFFBFBFANGAKBEPMCCEC@ICA@CBELEBQDCB@HDD@HEL@@EHKBGEI@CBCFC@IJ@JDHGFALB@GFEEG@GJ@FCR@D@DE@OBAB@d\\F@FCB@DDH@BB@NFDHBHCFBLG@CFCHBHFJBHDDFHBHFAN@JNFF@DEFCRAJ@EM@A`CNL@JEDAFBDHLHJX@DALKDAVJBF@FGJ@DTLDADKZATPD@@@@CESICECCE@KDGFCL@FDL@@FFHB@BCFSDCDANDBEB@NJDHVIFKDCLEJ@V@FFPBf@DCHADBBJBDDBH@@CCEHOAICCCCC@OPCDE@IGGI@OBKFEFIDCBGFEPCFCDQDCZNFFJDBFTHRNHDFADGDALANMBGPWFBR@DHDBNBNAPKBEEK@CHEDAPFdABCGIDGFCBEFGHCFDD@JGBEDQJBLCHBBADO@GBGJIDEZ@DCLQRWAEEECKACGDC@MIKBMHMJgBCBEGOKFELSJGEKSL]CAEECE@@AAABAACDEACCGCIJSCCCAOHC@@KACDE@KEKB_HMHEH@THDA@ECCBEEKEGBE@KBMFEDAF]BEHAHDDAEMIGAGPMQEWTI@mGoA[DAABGBGJOAYIIAEFSG@@A@KHEDWAGISFC@EFECECEACLKCEBGGKCSBEH@BECIMQAEBKGGFADILO@AGAC@BD@BIPO@KDMBOJGAIGACBED@BEBGDEAYEGO@IGABJ|ADEDEBKP[VGDKMU[DIACM@CE"],"encodeOffsets":[[121252,26511]]},"properties":{"cp":[117.435001,26.265444],"name":"三明市","childNum":1}},{"id":"350500","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@D@ACC@BD"],["@@DAJBAEEAG@AFDB"],["@@CB@F@DDBBDH@BAAGEGC@"],["@@BAAAEBBBD@"],["@@HBDAACG@A@@D"],["@@@AABB@"],["@@DDDACCC@@B"],["@@@A@B"],["@@DA@AEAADDB"],["@@B@@AA@@B"],["@@F@B@GA@B@@"],["@@MHIBEF@BJFBDBFCJ@FFFN@DZDJHDR@BBBDFBDBDAPKVIAKCG@MEKAAI@ABADE@IGBECGICGDC@EAIMEA"],["@@BAAAE@@BFB"],["@@H@AEBGHAFBD@AEICGFE@BFEHDD"],["@@B@DCJ@CCGACDC@@DDB"],["@@ACA@@BDB"],["@@BA@AC@@BBB"],["@@GAADLJH@@EDCAAK@"],["@@BBB@ACAB"],["@@@BDAAAAB"],["@@BBBACA@B"],["@@FB@CC@AB"],["@@DBDACAC@@B"],["@@@BBA@AAB"],["@@BBBAAAAB"],["@@BB@AAA@B"],["@@BBFBACCCAB@B"],["@@DDFB@CAAEAAB"],["@@DBAAA@"],["@@@@BAAA@D"],["@@BDBAACAB"],["@@BBB@ACAB"],["@@D@@@AAAB"],["@@BBBAAAAB"],["@@BB@AAA@B"],["@@D@@AA@AB"],["@@@BB@BCC@@B"],["@@B@BA@@CB"],["@@DBBA@CC@AD"],["@@BA@AGABFD@"],["@@@AABB@"],["@@@AA@@BB@"],["@@HC@AC@CD@B"],["@@@BBBBC@ECB@D"],["@@AACAAEEAAIC@AJBDDBBADJBFFBD@@AAABAAC"],["@@@AA@BB"],["@@@A@ACB@BD@"],["@@ABBBF@@ABDD@AGIB"],["@@B@BGAECCAD@HDF"],["@@@B@BD@DA@C@@GB"],["@@@AC@BDBA"],["@@DB@CAAAD"],["@@B@BAC@@B"],["@@EDBBFA@CA@"],["@@@FAB@DCDBDBBBAF@BA@EBCHA@AGGGBAB"],["@@@BB@AA"],["@@A@@BBA"],["@@ACCAEB@BNF@AAA"],["@@BAAAE@ABHB"],["@@AB@BD@DA@CAACD"],["@@BAAACB@BD@"],["@@BAAAC@BDB@"],["@@AB@BBABBBAAAA@"],["@@ADDAAA"],["@@@BB@@AA@"],["@@DBB@AAC@"],["@@D@AAAB"],["@@DBB@@AAACB"],["@@DAA@AB"],["@@B@BACB"],["@@BBBACA@B"],["@@@BAA@BD@@AA@"],["@@BBBAC@"],["@@D@AAAB"],["@@@DF@@CCAAB"],["@@@DDACA"],["@@@@D@AAAB"],["@@BAAB"],["@@FDD@@AECCB"],["@@BBD@BAG@"],["@@BNCHBDD@BEFCB@@DHBH@DCDBBACCFGBKFEDAZAFA@AAI@EBCFABCBOHIDAHDHA@CIMAG@MFMDEH@FC@E@GCEEAC@@BABAACEEABEBAFIGGC@CBCAAABG@AEEQGC@MGUACFBDHDJ@BDADIHSBKDKHKFY@gCWKOICE[sGGGAG@MBWPOBAHGF@FWNAD@DDDN@DB@DEHBDHBd@@BC`I\\CHCDKFABAJDLNJTFBHFBLEDCl]NEdIJCNBPLDJAJMNBBJAF@BFLFBFAFEB@BBB@FCN@FRBRH"],["@@D@A@A@"],["@@@DD@@CC@"],["@@AB@BH@@CAACB"],["@@BBBAA@A@"],["@@@DB@@CA@"],["@@@BBAA@"],["@@BBBAAAAB"],["@@AAABDB@A"],["@@DDJARBBA@CEABCFCNCTFJ@FEDMFAFFD@JMJGNMLEHAD@BDAHCFMNARALDDP@JCDBTPL@FENIVcJEFAJBVNNAD@THZADB@FB@ZBBBFFDBFARFHDDLJBFLJ@JDJFL@VKLKDADBBDIDBH@LDFZHNTBDRHDFPNPHBD@NBBHFCLBFHDDDDJDPAFBHAPCNABCBKAKDIMSCOGOBCFEMA@ADA@ADD@BBEBCFBFE@CFIBDD@DGHG@BHED@BKCEBECGRDFAFI@MGG@AB@DDNDDFFLD@BGFBDH@FCL@BDAD@BFDXDN@D@LHXBFDFHBNNh@JEBC@KQABCJGFADHH@BEBMAAD@HCFEFCH@JIDAD@H@BF@FCBBBPBFBBD@HEHAF@PFBNFHAPDJ@DGD@DBDFP@JJFDNDDFBHJBC@GDCJNCJKHADEFIBALED@FBBXDBHDBD@BAFGFEH@NDD@HGFGFCF@JHLNLHJDBFAFADGDGD@HBHHBRALDPLJCF@FHRFLFRAP@HDNNJAPIPCDA@GEE@IHEPARDLHFLFFN@JGJIPKHFHFLDDJFFNBJCJBFDDFAFKTBHHJJJJBJ@HMHEFBPPDBFCJWHGP@L@JFL^FJJBFAJEDGBQ@ELEBCDaFCD@RLRBHAVODEB@DKIA@GLEBAJYFI@CGEE@KMGCKFC@CK@MCOUW@EFENDLQHETGFIH_@IDGJGDGBQAA@KHURQJEHALFDAB@HINIXEBIVOBKLIJID@HEHKLIDGBC^@HDDCDE@CQKIKBADA\\KFEGOEEBCBCKEAGKEAKioAIBA@CAQYMICEE@CDCAAKKKMIOIEEECGHA@CIG@E@CFEAKPEBCAECCIC@ADAD@LDD@BC@GCOACIAEMMSCGBCFQJKBIB@NAJDDABC@UFOTEBCIQ@EBCL@FAHKVMDABE@IRI@GCCIIAYJEBAM@CCCIGI@ABGDCF@B@HLDJDFFDDADGBIEKEGBGHMAKT@@AFEDBBD^@JABED@BFCH@BDA@HB@F@@DDDJCJ@PFB@LMB@BFDBB@JIFAJ@DAFBNPFBNEH@TFNCCGLOEGAIEEEAMAEEAGHABGJEFGBBDRDABAL@DBHHHDFETMFEKEGMAGDKDA@AACGEAAFE@EE@AABG@QBB@FH@BEFD@A@AEEAEGCCEK@EAAE@ALICMDMFAFGPEAIDECID@AGD@BFB@TB@BHDFHJJN@DAXZFLHAJDRFHFFBLANBBB@BCRBFHJhPAGFAHDLAJDTAFBJBHDAHF@PA@ECGBCD@HJFDRBHHBHALJDBDPADAZBNCLFDCJADKRCJIRCBGEE@EDEDAHGF@bFHADOBCVG@mBKEAKIGCOKYAAE@MBSBIFANBFGRCBCAEMGYIEEICSIG@KDUAEE_GM@qST]FGJGJ@TBJALEHMAYHKVKJAF@JFHBHAPIHAL@HBLHJ\\BFDBP@DBLJRJH@JIJ@BC@CIMIKIE@QEEAMHG@CCAI@@CDCBCGAKAEFG@EKAGBMLUNID@HDDADE@OD@PJFBDCL@JAACBC[UII_C_KCD@BFBABGBƒ\\G@GAIE]cAEBIDGLADADQBCDARBFCJKDCHAJBHDPDP@NGBABMHIBCCEWGaEKCA@DDABA@CCC@ABADCBGAE@KGIASF]FMFGJIB]FWAGCEEEAMKS@AKCCRCDCAACAAGEEIAGLKJIHMDMAIGCCWO‰UGI@WCGCCCAGBEFATAHCBYDYDKHAJHV@DGDC@CAMSIEUIkGECCU@GJgFEJAHCFIHCHCJ@FBRJXIRBHF@DCJ@BHNJDV@DEBCGSBODKDGJEHANANBBAFBHENBJABAHBH@@CEE@CDCEIDE@CCCGYEEIAGEAE@C@EAAIABEGGGCABKJGCCGDANBBCQOC@@CEABKB@FBBAEGAEA@KCAGCACBADAAAADABCEG@ECAK@EGGACEGEUEM@IDGFIPCJMEKGCGE_DiDIFIHCJ@FLBHDBLBBA@CF@@FBBDABCBmIQ@MGUCGIGQAMGCGBMBIAAG@EBIAKI@COGKOA@CBC@GSCGIEMEYCUMCAIDCDE@KAEBADRRC`AF]NEFALDHHFJBDBBF@FCFytSPMDƒN_BeAMGYUEC_IƒcMIEEACCTI@ABALAFKFKHDR@HADA@IMEACACJ@DFFDDFPJBFFDRGXPNB`[RADBH@FWNGHCDBF^jBHINCDMBCBEVCD@FFFTBDCD@DDFTEF@FDFDBDADAB@@JCHCDEACCAEC@QNADHJBFGFDHGBGFKFGNEDGXEDQDIFG@SCGGEAE@CDCBEACHE@GACKEAG@EBCBCJKPAFFFBDAJSHGHKDSLEH@FFNLBBBQVMAIDCCC@CBCFCBIBM@IC@EKAM@KFEASKKGKSE@ABqWOSEBCN@TAFCBG@GMECGBEFGNKLCHBRCFEBKAWHEAAOCCGBYNGACE@EHETCPIDGAECAQDK@KM@CBCPMAAKCYKE@GGCBCHGFGRGJSFWIABELIHCDG@G@ECACAKI@GHIBIJAFBHCFIJIDAABIAAEIGEAE@ICCCBKLMAGEEAKDULG@IEGGHOIIDC@CIECGCAIDKB@DCD@LEFE@AACICECAQIE@IJBF@BCRADC@ICEDIDAHEBOBKFE@OCOIGGEMCCECYGMEGGEAMBIJEBOCINKAC@IJGFGBOAENIHAFBD@FCJ@J@FBBRJFJHHBVCDW@ODGF@JEN@LJJJPJHfNHDFFXL@DCJBJ@FFBR@JDHALIHIF@JDDD@HJNJBPAF@FXDFHBZPFF@JAFYLLPADGN@VEJCDE@KGGKC@QVGFO@SNGHCNA\\BXABMJUHa@ADCJCBIGKTAFDH@LMFK@IBIFCHMDI@EDON@BDDADEDO@ECEBEF@FDZEJPLFFD@F@@FHFBHFBFAPGF@B@DA@EB@LCB@DDJAF@FFJVDLCNGJKJOHDf@HELCD@DLJT@HBTPRFVLLJFRHNJJ\\LFD@FIFBFNDLR@JCPDRON@HPRFJBHHJOZ@JDL@HDFDDLDDFBNFNHHLBFDGJELALFPBN"]],"encodeOffsets":[[[121802,25820]],[[121740,25685]],[[121899,25675]],[[121684,25454]],[[121623,25425]],[[121623,25333]],[[121555,25259]],[[121539,25232]],[[121508,25224]],[[121270,25180]],[[121098,25050]],[[121068,24987]],[[121114,25038]],[[121002,24979]],[[120996,24966]],[[121182,24971]],[[121184,24974]],[[121622,25426]],[[121505,25152]],[[121225,25095]],[[121247,25105]],[[121281,25132]],[[121310,25121]],[[121294,25099]],[[121308,25078]],[[121313,25080]],[[121224,25052]],[[121217,25047]],[[121312,25017]],[[121314,25021]],[[121048,25070]],[[121078,25061]],[[121087,25044]],[[121071,25039]],[[121068,25037]],[[121054,25036]],[[121052,25033]],[[121055,25030]],[[121034,25014]],[[121843,25475]],[[121818,25469]],[[121820,25470]],[[121739,25478]],[[121837,25804]],[[121861,25787]],[[121838,25757]],[[121820,25703]],[[121800,25650]],[[121798,25647]],[[121880,25681]],[[121897,25672]],[[121871,25658]],[[121870,25623]],[[121876,25629]],[[121885,25631]],[[121885,25580]],[[121891,25561]],[[121897,25564]],[[121836,25535]],[[121815,25501]],[[121685,25431]],[[121692,25439]],[[121642,25448]],[[121650,25451]],[[121624,25406]],[[121606,25376]],[[121609,25377]],[[121549,25420]],[[121535,25397]],[[121552,25256]],[[121505,25148]],[[121483,25130]],[[121401,25127]],[[121359,25192]],[[121301,25152]],[[121289,25160]],[[121259,25116]],[[121278,25108]],[[121282,25109]],[[121304,24997]],[[121255,25103]],[[121040,25021]],[[121071,24986]],[[121034,24979]],[[121012,24979]],[[121005,24963]],[[120979,24957]],[[120982,24961]],[[120987,24961]],[[120544,26125]]]},"properties":{"cp":[118.289421,25.108853],"name":"泉州市","childNum":90}},{"id":"350600","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@@BBDH@ACGA"],["@@@DD@DA@CAAC@AD"],["@@@@B@BAAAAD"],["@@BBBAAAAB"],["@@AABB@@"],["@@ADBBHADGA@EDC@"],["@@@DBA@AA@"],["@@@DDABDD@ACCCCB@@"],["@@ABD@AA"],["@@CB@DD@DA@ECB"],["@@A@CDBBDE"],["@@B@BAA@AB"],["@@@BDACA@B"],["@@AFB@BCAA@@"],["@@PHDAACECC@EAAB@B"],["@@AACBHFAC@A"],["@@BAAABAACEBCBC@ADBBFAHB"],["@@BBB@AEA@@D"],["@@CDAHFABBF@BCFBFABAB@DAAEBAA@IFCGIAA@@FAB"],["@@AB@BB@DBHCCGEDAB"],["@@FCFDBIFC@EGBCFEDC@@HB@"],["@@D@@AA@AB"],["@@@DAF@LBDB@BADG@IDAACDA@AACCACDCF"],["@@BBD@EC@@@B"],["@@BACA@DB@"],["@@B@DA@E@AGF@DB@"],["@@RKNGXaFAH@TDDAJEESBECIBEBA@EAECAE@HMBKBWAMCKGIBKEAICCGCSEKBQJgDENEBAAKDML[DM@ECEKCBI@CCGCMCCICKKMEIGSeCAQBOCMDAACABK@E@ICIIEBCNGNKNGFCFG@GEECQBEHGACAI@KHCP@DALGFGDOBCFAFBDADGPGBEF@H_AABIAGGGBADA@@GUDKLSPMFCRAFCLQZIpDXAVAˆODC@EGiBQCKEGGEAEBCJEJDTBVAJAPMDEBUFABC@]B@XGJGDICQ@GTSHKBOAMCIEEKEGAcBA@AaAEECGCQAEKCIGMSGEGEcKKAM@EI_a@mIKIG_QWQa[UWOUAEC[FaBSCMQ]EOIIUKSCs@ICWcmeeeIUS}IMeWMA…BqDYAWIMK[uM‹BGDGJKDGAMCGgeWe]‰IOMGK@I@UJULqHMCcSc@CAO[GU@IBEHAFADCFO@QCGMIKAiAICGIEI@aBKPOBUACSUWGM@OBIAWKyWM@G@SFI@OA_G_CM@QBGHGJEXiIßGAÀBJCHIFEAIBICGHK@GDKJMRIEADC@CAG@OIAAERKVKBUAIHIAABEJKLEPEFE@GCQFEDCJ@NBFEF@DBJCFAFDFAJBF@DCJ@XCJILE^EHENSPIJBFCL@BRPEPCVEJAHABEDAHABYHIFIBICEIQ@OFEFEJBBDDDBZACFBFBJFD@BABIBAB@DDFCH]LADDFBD@HAFEDCHBDHBFAJBLHFHBNFFBNCJHNORCF@FBJAFBDBNLLBFIJMFGAKGKHAD@DDN@FKJGHGBCF@DBBLBDBBFBJALDBBFGBMEG@ABCNIHADBHC^BLCJAJBFHLFZBHJJDFJBDBHNHFJLFDR@DBBHHHRHDDDJJJBDAFGJWLGJCBKAGJCJOJ@HU@EAQFANDJF@@@BRAFELDNAVFF@F@FA@C@@B@DDF@DGFIBQEC@GFCnBJLNCFMHADAXYT@FBLRZ@DELL@NATDFBNPJpFTBRIbEPQXEPM^GVC^DJRLN[D@BBHP@JGN`Xv@NA`GTHVXJRBX@TDP@PS\\BXHDdELNFRBT@BMVML@DFJBJDD@PCDUB@LCHMLL~@`AZBLHL^TJ@HHFJA\\BNFJNDJGBGDSCY@IBIFENCTJBDJBLBzIN@NLNbHLXRFHB^BT@NBRHJVLDJF@LHFL@DGB@NKBCDGT@HCJBHZGR@JANUDCJAFBFJPTAPHNBFDDF@BPCFUB@JDFlNTJNLJPNFLGBEMO@EDANHL@LOHAHDBAD@HF\\HLHPCLENCNBFDNNLFTGP@fCDBFCHELMNMHC^ARB^AHBJFFRIžBNJJFPHJFNBbBLFhOfkXEF@HJNBd@ZDDNCDB@LDFPDVAHDLHHHBZFFBBLMLED@BFIX@FBDF@N@FICY@EFEFAFDP@FCBCCC@APMFCJ@NCDGJEJAL@NE@KCGBELSJHDADIBCb@VGNIBAAWB[DMHGTMP@HERUD@HLLHF@DCFI@UHMBCKOZKBE@IEEYOGACEEWE@OBIAIM@GCCICE@GJKJGBICQ@EA@EAIDI@CWKEEGCeMIGIOII@KFM@IHEPCX@DCAUGGEIQIAA@E@IDI@EACBEJGFMPBHAHEJID@LBJMPDFAJINAFBHHNFZHFDDDFNHHPJPDF@LEPAFABGJCFCJDD@BCDQ@AAEJIF@RJDBDFDJBBF@FE@KDC@CLAJCDBDHJF@DCDJJGPHHJFH@VKLCFBHFNBLKDADD@JBFHFFJBBAJBBJCJIDEAGBEJIJAHGJB"],["@@JE@EA@AAA@BHED@B@@"],["@@DDFBBBB@@EECC@CCABBD"],["@@BDD@@CAAC@@B"],["@@BDB@DCEAAB"],["@@C@@FCFBBCFDB@BAFA@AF@DBBD@LGBEDAACEA@CBCB@@ADCCCE@AA"]],"encodeOffsets":[[[120963,24945]],[[120535,24416]],[[120559,24424]],[[120918,24768]],[[120921,24767]],[[120968,24911]],[[120975,24931]],[[120916,24946]],[[120923,24946]],[[120861,24766]],[[120641,24511]],[[120694,24484]],[[120562,24394]],[[120570,24387]],[[120585,24385]],[[120560,24355]],[[120557,24362]],[[120543,24340]],[[120537,24344]],[[120521,24355]],[[120509,24356]],[[120498,24353]],[[120494,24362]],[[120517,24095]],[[120494,24116]],[[120293,24163]],[[120743,25468]],[[120278,24145]],[[120239,24127]],[[120243,24135]],[[121075,24739]],[[120987,24903]]]},"properties":{"cp":[117.561801,24.310897],"name":"漳州市","childNum":32}},{"id":"350700","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@NCDCHMHE@GCIEGCMACSCSUECKAGEU_@KBAR@HDPHJ@VGJGDIBMEYEMDOAIDCSIGKCAC@QBKAEAEECQKEKDMGAACICAEGCGMGGKI@@A@]BGJCPODIAEIOES@SFGHKCCBGCYBELEbeBKH@N@LCBAZEhQBGECAC@AdC@CEGJK@C@OJKFCFAKKBKNEDI@GEEAEAMCCCCROBGBCCEFQFGLGBE@OFKBECAE@ICECFKCENEDEJ@BABOJKJSL]DAHAFCJMJKJBF@AIHI@CAEG@UBM@CAAGJKBEAECEGE@EBCHI@EBELKPIHMJKBIEKDCBAAMFCJ@DABCAIGEAMCIBGGGBE@M@KFEHCCEQCGECMIQMIYEKUGAEK@GBAJEFBNDBBFCBKAA@CBAFA@CCCDCLDDGDG@KCC@CBEJBHEJSAIFCFAX@DBJ@NBD@FADGVEJKFDJVAFADCBNJH@PFNAHDBHAFDF@DEFEDCD@FPJHGHEN@XDHAFGLEPSFCD@DFVGBKRKDBLJF@FAHKHAD@HDDFFDJHNFLJPCHCFGFSACO@ICBCHEDC@CCKAIAG@ANIF@HDD@LAFE@GDAHDDBJEFBFDFEB@J@JFD@JENEFGJBJADDFDJAPGZDFEBBJD@RFDBABE@I@EFDHDHAFAAEAMDOFMJIHGBOMSKEM@CC@MDM@EICEA@GAEECAEDG@KBGUBECAIAAA@KFCAGEM]DE@EAGEA@WBKDKACG@C@BCHCBGFAF@D@LSTONHH@BABEDBLIDDFA@AACAELEDILGBCEKEGAIC@ABAJIBCCE@ACCAAD@HCFEBEEABGHBNAD@HGDGAKFI@GHE@C@CE@GG_UGIAKFCEDCCE@K@K@M@GEI@C@AF@LBHADEDIAKIaAGBCJEJ@RGFCBEEEAGGAIICBEHMFCCEAE@GCOCECAOFGACCCEBECUGSDKAAABSBCJIFYACaE@LEDAB@FCDE@C@AD@JADMDKJAJDH@HCDWBGDABEA@BC@ECC@ADAAACG@AFBHA@IIA@CHIFE@AA@GIBEAYBECIIIBGHEGE@CBAFGBCJNRDLOJCFDTGhCHEDKAE@SJQ@IBMDGHE@ECGG@CFC@AAG@AD@LFAIMY@KFAJ@JBFDAM@MT@@KDEACCAIQGCSDGFAHC@I@AAAEAKGGCEQEGEIWAMQMGKIKCICOCKSQCAEGKFEBECIIAKBGFEAKGCCCDG@CWKIGQEWCQMEGBMAKGGKCU@QFQAMBYNGAOMKEIAODIHEH@LKHSAEEMYFIf]J]DEHI@CEAAK@IAGMKHSCCGKOEIBIEIBGDYCEEBEACC@G@UAAAIWDENIFGFGBI@GGiEEI@CACEDE@ECEAOGIKUAI@[CGKG@IES@MC@GDC@ECEDC@KOCKDEKIEIACDCJGVAPGDADM@EKMBKCQEME@CGBG@EEMHQ@GEO@KCIBOCI@ECCDGFILEJAHADAFBLHLAD@FE@EMOFM@IYmHW@IEIGMEGE@C@AJC@GGWIKEECEGCEAEBIAEIGBAJCFEDGAIAEIEEKGAGG@K@AAABQDA@GVGDC@OAUBAJADDBFDDPAFBDHAFFBDC@CEM@GDCJC@KCGL@FDNPDBD@HHFBJALMFCRCTMLCLG@CCEFOSMCEFEFIBCAGFKHGBEBOCOFGAGNeAG@EAAE@MTKRCDGBOAOPAH@HCRA@KAGDIACRAFIHC@ECIFELILHJADcBOECBGF@DFLAFOLMBMACACGQ@EAOXAHMNKBCBCHCBICQMSGAEICEEYMCDCREDODEFAHCDEJEFAL@PHJJHF@DCPOD@DDDDBJGPDF@DG@CAACAICAGBCDe@OAEEU@I@KFCDELUJCGMIA@AFMCCBCDETADA@EG@EK@ECK@EDCH@LDFFDJDFT@D@@C@SOYBCLCBSK@CHI@EAEUICBKLCBW@GIGKACBEFC@IMK_D@BFNI@QBEDCFE@ME@IBMGEGACEGCIAGEGAED@DKHEAGDGAEC@MAAG@CCA@EDE@c[A@AB@PCFC@Q@EDI@@HFHEF@HKAEBGHICI@@JEDAD@DFJAHGL@FK@GFC@GCA@CDARKFAF@DDB@JFDDDONAFBLMHEBEAEACEEICBCDGV@JBDFDJBIR@BD@HNB@DCBBBFCFIFC@E@WGCFE@MEC@CFC@@FFJ@VCDWR@FDD@LV\\LJ@BABM@GBIJCBE@IAEDC@ACHI@EACIIMJA@KEODKEGNKFA@A@MSQIWBABALCBCAEEA@AH@F@@GCWIGICCITFJAHCHADMAEB@BHRALCDMDCZGFDHHAHFP@HJBDEDQDAHKFBLFDDFBJADABE@@ADE@AULBDDBBBBFFFCFJFC@AFCBGBSGIKQEKFCBEGC@EFOBWIO@CBEAKGGMSLE@SEC@ELCBCBCCBGAAA@EFIBECGCG@MCMGGIEOYFCACKSEC@GPAHNHBF@FCBSA]BCHGBAD@BB@DAJDGH@JIDMBMFCEIJKBIDADLJ@D@DGDO@EDCFBFBDJ@BBLTDLFFFBTCBFJNDBPDLFHPFHDJ@LDJJJJFJLAHGJ@RHF@D[TILENMROLAFAHEHBJ@DKJGNCBGAA@W\\GDGBAB@DIDKbE\\CDGBKGE@EDGLM@EAGMC@C@OHI@EAQKKDIJAD@JAFBRDJDFHD`FFDBBBTBF@LBHPFBFFHABGFQAAFBDADCBKCEDEHKDBHABKCAEEAcB@BHR@DGDCCEECGYGMME@GDENDNABKF@BHLAFCVCDGDEAIKGDAD@DFFRRFH@DCBE@GAKIOAMMKBMPAH@DEDQDCACB@BALDF@LHLAJEFKAGDOBIAK@MGADEFMDOHINEBK@EBGBMF_TI@EAECAECS@EH@FFFBH@DEBUACKGCIHMBOAECI@QAAI@MMOEAAEOEICAICE@CDCRUHCDGDQDIHM@IFQXGPGJETCFEDEFOHGLC@CEM@ECOMOCIEGAGBMNMJIDC@CACKEIGCMDODEDCDBLCDE@OKCEA@EX@JADEHET@NDPFHRJDNTX`PDFDJR^HDHGXHDFDLJDFJVNFLNHBDCJLL@RDDHDHAFF@LFDCHDFFRCDG@GBCDGNM@IAQDBJJP@FCHU@]LGCA@IHGLAFFZCPFRADEJAHNF@RBF`NFHDDBJHVBFMRAdCBIAMJCDBNCD@DFNIHCD@FBJJLFBCFEBAJCHEDALB`APEHOFEJBJINCDCBICEMMGIOGECAGNE@MCIFG@GBMHGJAHFPJjEHAHCDIDAB@DHJ@BOLEJEFDDFDBFJEDBFNFJCTLPPHHJFBL@JDPCLILOPM@CAEBG`]DAF@JFLFABCBAF@JHBDDSdKJ@@HTLH@JJBHJFDJ@BCJAFGLDL@PGJBfQRFFFN@JDNA@@AF@HBPCH@HBJFHFBJANFNBN@LCFBJPFDFBNCFDBNFJJJLDBDGV@FDJD@LGV@JPHHBF@FQb@DD\\HfCHONO@GBGDADF^DHCD@DDBDABCFAJFN@HDLJ@LJJHLHBH@DAJGDCBIBICMBECE@GB@HCHGNBFBDD@JJLPXXLNCHDLJT@PHFH`\\BJDDDBFBHDHPHDFJNDD@DE@CDCJABEB@HALRl`FDDJDZVPNBDA@KFEVGN@FCHCDGFCBEGQDMHGHCHNLHNGCMDA@SDKAECG@GBCBANGFOHGFECYBGBCFA@AFCV@FEvQLITGHKHQNID@JHD@HCB@FDHJHBBAFKJGHOTMHIFCHAF@BBJLPJFVJPJFFFL@DDJTJLBDAFEDCJBNFJDLCJAJBFDBNDHFBJHFJDJPLFXFJFZPDFJNFBDADCDIDANJJBTHFBRCHFR@@HJJFJPFH@FFHHHBF@VGDADGFCH@ZHLHFHDPPPDALSHDH@DAF@NLRBD@FCFKFAB@DBDBN@HDNEFEBODCVCL@JBDB@FIXDPAF@JBLFFLHDNFAHEPAH@JHBDALCHIJARJF@FTL@DDDN@LDJFNGTALCLGL@HDB@FEF@LFJHDBFAVFXRLNTMFBVRPHN@HDPCdPFAJCLDVAF@BEDAXFFHBLALFJBHEJ@NFFRF@BADILADBJGLBBBHRFPLDDIP@HBPADCBSBKFUCMFIZKDQLIL@FLHdRB@JAFLFFBDAJBBRBJD@FHJNJD@DCRDJH@DHFNBBFBBJFJBRNJ@FDB@BIGQFEDQHBDA@EEEBAT@BCII@A@EHBDEHCHABAF@DCLFLCHFNKJEHNND@FDF@BGAABBB@FC@CHGD@@DHBLBDHBFHD@RSHAXB`HBB@L@F@DBBTGXFLCTBHCFILKBEEIBMJENFZAD@HHNBNZN@JFF@JIJCJ@LBNPPZHVLPHBHAHFH@HAFCLKDE@KCIAG@KZEBE@O\\[RG\\GHE^@"],"encodeOffsets":[[121647,28921]]},"properties":{"cp":[118.178459,27.335627],"name":"南平市","childNum":1}},{"id":"350800","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@JG^OPCXExEPGJIDKA_DOHKHEL@\\X\\RNNJFH@^MhIRGJFNPHALCHEHCLBHDJLHlLCTMCGBAL@FAEEACBECEEQ@UHEDICKBYDEHAV@POLBFCNUVANCZSREPGJIDIB_HiPKRH\\PTBJCBEKMIQEOE[JMh[NOVMdHPHNFPCJHN`HLPHDDP\\XZXJPBRALITEHIfHLHRHVDXDPAPGHOD]LgX_RQFM@GAEAKLKBC@CACIE@E@CNU@EKAEGOEACBCRQDBCPB@B@DAPY@EAYSM@CFADALDF@@GH@BA@EBCH@AKE@GDCA@ALODOL@LBHBBBRBxMPODWHKZWTa@SCMAQHAFBFFBDHBFAR[JEJFDFLDDBBD[BRV@JDDNFJXNJFJHLBRDNbRTRh\\FNAJKRIBOAYEKHNZNPBLFDBTLNXLNBN@RD^PXJZFBRANBJBHLJN@^EHeFCBSCCIEAAHODUTMBBBHATBDFGFi@SDMBMCIScAIFG^@|NJHLhTpPJLFDDBF@DEDGDECGF@DDDP@PDHFH@FADMHARHBAAGOKAEHM@MJG@GB@HDLTLJRHH@HHF@FELSDOFEPGPCJ@LADAJOPOBGKIAELUHIHAJ@LBPJ`VHDH@FDPARILSHSHMNGZUV[L[LKdHNAFFF@@A@QGaIMQOIOC@GBKLQLGGG@AAEOCOEIA_HQDFRHDELED@JDBAAMEOBKFKHIECKAGGEMAMCEKCEGAICK@EBGNUGIAGEIOQ@GPMCQDO@IKQMCAEJE@EEC[KIIGMEQKIUKQESOGAS@KI@CDCFK@GCePGLIHIDMCKIUEEE@IBCCA@KDA@@FCBA@E@OHEBEAAGGE@EE@C@EEOKS@AC@EJWAEC@KFKNAAEEAYGGKGGCUBOCCE@KCAMDCC@YAcIM@GFElWPeEgAKAaEMGIEOIIAMJEQIEGA]BQA]BGDMNKNGFEDCAeDO@SHKEMMECMAMDKFODKG[GGEC@ABGCGBKPK@MGCB@FNPAFKHMEIOMKSIkMCE@IVADEAOE@CCAEGMBOOSEIEAIBCDMVIBQ@YHAGDI@GHSDCLA@MHA@CEKKGE@CIUKGIAQ@MASA]EGWQGKMaMKM@yJKAIAACSIMDEFAJ@JDZE\\IHMCEIAMB[EIGGI@]SGKAKBY@_K}NKDG@KVADC@OCCAIEI@CNKNU@AASEQKMcFGCAWT[@OCO@SAWIQKMIISG_HMBu@_WHM@IGOAAC@M\\QKCID]HUN]FORWFOJaAQESIoMOEASCMBK@FK@CCEKXURCLE@EAKGCHCF@TIBABKVCFOHABO^@DHFCLBBTCBBLHDF@DMPIROPOT[SKEA@@D@BHH@B_NIHORINGN@FBLCBM@[XCH@JBDHFNHIXEHBFjjDHFHBHPJDDDDCRBJFDFBFFJDBBDREJCLQZIBIASDGAQQMKQS@@MHGJAFCBM@I@KEKDGAI@CCAEAEECUHICQBQ@UEEAAEC@QAEEG@CGAGA@CBKBEHGDEAE@SNGBGIAKIMSGIEAE@EAEQCAEIACAACSAKEOGG@KLIDIFGLHHAHFL@JBF@DHFBHCFGBAJIJCFCHAV@FDH@LCFSVEPGFE@GEQD[KI@IBGFCLANCHEDI@AHABQDEDAFDFHBIJ@BFHF@CH@DOPIFCFCJCNADC@KGE@I@EFBJMLAFFRAHHHFDJBFDJ@NHXJFF@DILI@ALMAEBEFAHDNIHDDHB@DAB_@ECC@@ABGACI@GFGCOSGEBE@GCM@MCKGGI@CACGC@@JIGSIGIOGIKGAYEY@MB[MK@IDOJ@DBHJNNNJD@H@DGDKBMCECCAMHABAXADADIDELCDODIPGXGBMEGKWUGEQSGAOAIF_DIDGCIBC@CCEDG@CABIGKA@GFBFALCFA@WBAEEAEPCDI@KDCFEHDHABABGEE@@BDBBDCBAPCFQNMPGFGBA@SQA@KAMHG@C@CNCDAH@FC@A@ICA@CFAEEAGD@BMFCCEBCCAFCBI@I@GBI@UHG@EAABAFADQPABGAKRCJGDG@EBEL@RDHVJDADGJCFODAF@JFZKH@FBBBAHMTedaFCDBHIFAFAF@NAHLJRCDFBJJBBFBDDBDAFHPDLGDDFJH@DFADKJAD@HO@@FFDAHHFEFEJIHMFKBW@EBAFBPFHOLCFAD@NDDLAJFDHAJCNEBCDALCDC@OEGBEHKAADAHAHBBPD@DCDGFCHJD@DAXBFC^PLHNFAHCDGDAPFBAHDVZRDPEBBHDLDDBDLHJFPJH@FJJBNEPALFLDBF@JCLIJ@DBFD@NBBDBF@HEDIB@HHJHLNDNHP@DEDIB@DHDBD@LEHCFQD@@BHLDDNOZ@HFJZ\\AFIX@HBBDDT@JHDD@HAD@HDLADIJ@HIRBPFLFJABMGGFAFDTCBAFJHFHFTHBVDLHCHBD@DAPBTDLBBDBPCLBDBBHHHDJ@DKLBJGJ@^CJIFGBED@FNTGFCNDBP@BDDLFFFBDAFGD@BDBTKHAHIJ@DJH@DCHBHH@@B@BQLHN@LFBBABIFBATBFDBFGHBLKD@D@HHNAF@PHDB@HAN@RJNFBDDCLBFHLJJBFDHP@FBBBJCDFH@JFJBH@B@BCEIBI@KHCLFBbDJFL@DEDCJCDGBAFCFCDGBCBDPCHUNMBCD@FEFGECD@RADAF@ZDFAJXNBDBFBBRJRDNAHN@FHNZNPATDJHVFD@DAJMFALDLBNCFBDBFPHFFBZ@LHF@H@NFDBDNFHJHHBHFHTBHDDT@LHLBbAFBDDBBEVEPIR@FBD@HHJJ@FBAJLLLZBB`D"],"encodeOffsets":[[119194,26658]]},"properties":{"cp":[116.72978,25.191603],"name":"龙岩市","childNum":1}},{"id":"350900","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@KBWJOLYXEJAFDRFHHHXLLDRARGPKJKFUDI\\KDEBEACEAUDC@]SIA"],["@@MFEFM^@RJXDHPLHDH@PKTGjEZHTJ\\HRCLGBOIOosKuC"],["@@I@IHIHEJAJPLLFFHFNTTHJFDHBJ@LGFE@I@MI_CAKBOEAIBGSMIC"],["@@E@IH@JBBJDBDBFDH@BEFBDNDFDJBRGDLDDFBF@DCDC@CASEICMGECAEDO@AAAEEES@"],["@@DMA@K@IBIHABNHFEL@"],["@@BBH@DDD@AGKCA@AF"],["@@NLFBPBDBDAACEIE@EAAAIBIEAB@D"],["@@BFF@DBB@BCHB@GDA@AKAE@BCH@@ACCC@@ADA@CEACAID@FFBABBDABCB@BFDAB"],["@@CFHB@FBABBDCD@D@BADBFEE@EEB@BBDACC@AIA@ACC@ACAC@ABBFBB@DCD@B"],["@@ADD@DEE@@B"],["@@ADDAAA"],["@@@FBBBGDEAAA@ABAF"],["@@JDBBD@B@BEAAC@M@@B"],["@@BBDCD@DDDACGE@EAA@AFBD"],["@@BBD@FEFFJAJABCCAGBKEC@AAA@AB@FCBAD"],["@@JBABBBN@RC@CACF@DFB@BCAA@AD@BCEACDEA@AC@@CCABECAIBEAADEAADG@EAOHEFBDDBHAPF"],["@@H@@AB@HBBACCEAKFBB"],["@@D@DEJADHDALBBBD@@CGAKIEC@AD@D@JBD@@E@AE@AIA@ADCACBEAAAE@AEG@@D@HJHGDBFAHBD"],["@@ILDHRJL@@AECBC@CDACEKGG@"],["@@FBJ@NBD@EEI@CCK@EA@DDD"],["@@HBHCD@DB@FNDDAACFEAAGCEAIBCAKAGF@BDD"],["@@C@CB@DG@IDEH@DF@BDB@BCD@BAFDDABEH@BCAEEE"],["@@JBDHHDB@DCB@BCH@@CFABA@EAAM@CCG@KGCA@F@FEAEBBFABBDDDB@@C@@"],["@@@DJJJABCDABEBAHDFCEC@ECAIDAF@@ICCDEAAF"],["@@HHJ@@CF@ACAAKCCAA@AB@B@D"],["@@DDL@@AHB@@CEKAGD"],["@@HBFD@HD@B@BGDCDCCCBAAAGBGAE@GB@DB@BD"],["@@BDFADBDFCLJBFFBA@EBCHEDGIACGWBED"],["@@AB@DPBHHD@BEAC@CEEEGIAAF@DAD"],["@@CPBBF@DABAEIFBFA@C@CECAGGGI@ABBDBBHP"],["@@FDD@DIQBDD"],["@@H@@CACC@BDC@@D"],["@@BBJ@HBF@FAT@JBFDBBTCDC@AKIE@@ABCACCC@GEE@ALGFI@AAAKBEBEJA@ECG@ABBFCNQACFKDAFGB@BFDADBD"],["@@IFIHBDADN@FAHEF@DCD@BA@A@AHDD@@EF@CEEACEEAEAC@AD@@DD@DGDE@"],["@@A@AFDLDFJDNC@CBCAC[K"],["@@CH@FBBLDHDLBL@dLDADERCNIBCACIGEGC@GDOBAEGEYEEEC@AFEBG@CDCDCJ"],["@@FJHBJKEECAEBEAAD@D"],["@@BBFBFARHB@EE@ADACEBCAEEBE@@BG@AFCBAD"],["@@A@BCCCIDGEJOJ@HGH@DCBKACDEHEAIBCFAP@HCDGJCAEDCDCJABM@INFFC@EIGKMPEDMDEH@HEN@D@DGCG@CBEHEH@JAHGAEKGILCBA@AEBU@ACE@CDAB@F@JCTCDDDLD@^KHKLCDB@HDBFA@ABANDLCDBFNKBIJPRFDFADEHEDCHDJCN@BAAAMG@CDANBBAAGDCFD@HBHHABCB@BF@FB@JEHBF@BHDDHBD@D@H@LIDBADDBNAHBHAPCBDCLG@ADDDCF@BJHABI@ABDDL@DBDF@DFHRJDDFH@DABOEADBHHDVDRFP@BB@JLFVEFABG@ONBFKPO@GAEDCP@TGN@BLDFL@JVDDHBFFDLLBNNJ@FDAVDDRHVDHAFABEFAJBFHBJCJEFCHBFFFPFdDF@BBFABCJ@LEBBF@VNH@LBD@LKFCHADDFABDJBDHPDRLDJD@XMDE@G@OGECE@EDELKNWDAH@HDJJJDFANGJ@DFBCHABBAHDJ@H@BFDHCBC@CGEBANEH@RHLIHKDGEMGI@ABECCACDGRGBE@AEK@ELIBERKJADAHKJUJI\\UDYJOLIFCZUAGCEICGDEHI@QKGIBEVMHG@AGOIG@CDEKEDAJ@BA@CGEJIBGEE@ARADGNGBCCEDIRIDE@GBAHBFAbeuoQMoUAI@MACOKY@kH_D]ACDCJCBE@[KCAIBSLC@GCAEBKLKBEAIEOHOPUBG@CGC@I@CAAEDAXAJCDGBEDUAKCIFIBGCICCaCGIKG@EFMIGCKAOCKBAFBBAAK@OEEMIISC@MBDJC@O@KFeECBMJEB_@QEIBGHC@MMECEBGJCBK@CCACACBQHS@I@EGIMIMKMAQ@QAGCIIEAIA]DKAIECKBOJ]BEFEJApARAhHFECCKEEGFWJOHAD@LFNBB@FEHAPFD@BICG]QOaOQ@CPQL@LCnPDBJ@DE@EACIGAC@CTBDAFC@QGMCASMkGKCMKIICEBCDCDQHMCMBEHCNDHBB@@CIGAEBG@@JBJDJAFC@A@ECEIG…cKKGA]FIDCDING@ƒgoYSCIAQBSFMDUESKIQGG@AFCAADKFCHA@CAAEAACICAOEEYAUIEGIECCBEEIKQSGQ@KAYDQDQBGDELGDAFBBDPAFBFLP@HAPBDPLDF@JEJ@BFNLLFD`NPJJLRDTPD@D@VED@LDNALBF@FGBIBCDADBBDATDDLDJR@HEFAJFHT@DDCN@HBDHHFFAFKJAFAFBHNJNNDBFLJTNH^DJDBLAHBBRJFHBBP@ddFFBJAJGLCBGBgGo@QAUCYKI@GBAB@FDH@FEDGAGGG@IDM@UIECGIAENONY@OEGGUc[IMGQKIDOFGBIEE@EBEHADC@EGEKAIGKCGIUGG@IBEBEHAH@J@DLV@BAFUPeRMA[GECmNG@•MW@Q@SFaT}|CHI^G@BGBI@EBIFEJE@GGYEIOCMFEDCAECCCBGNM@EMQK@IgGOQIQGUOKDA@OMBIrqLGLENBLJLBHHrPHFFHFBR@JCLITA^DVDT@JEFEPQDETIP@fOHMBEEGACJOJGDMAEINAHSLCHIDSNIB[CKBCA@CHECASOICWLEBG@UFMII@EACCOo@CMEEFE@CG@CAGEAI@OFGACBMGQEE@CB@BBFABMBA@@DEB@FCDEDMFE@GEE@GHQAMLEBICCBCDFD@FAD]LM@CDOVLJ@BKRKFAJIDMR@JBDILCDWA@FKDSLEA@CEAE@CDGBS@MEUCMAEBMPKBCA@CAAG@AABAZIBGICG@CBIBIDMBOAAE@MIOEEUCCBCDG@CB@KCDG@AA@C@AFCBEEEIBIE@EEGGCCBA@EAAEED@DGCA@@DDFF@BJABEB@HUBE@EAUWGQG…CCIDADIHUJGBCEIYII]GEBQX@TGHMZCFMFCAEIGCIMCCMEG@C@IIAEC@CBGAEDE@GAAGAAGHEBQ@CA@CAAO@AD@DEHBJEDADCFIBBBBDEHBFCD@HC@CA@KAAIACBCDA@OCK@QHCDBFFHLHJBBD@FEFEFMJCFCBC@MMCAI@_DGCBMACKFEAAMACGA@EBEF@@CIIACDI@AGEKFC@ECCC@CPO@CEEACFG@AECACCAE@IHEBS@KAQGKEEICUOMCKBGFEPBFEBKG[GECAM@CDSVE@UAKBaIGCCC[G@C@ICCOGAKIMaSUGCNBBGDAJOCFEMGCJ@L@FD@BDCFWT@DPL@^CHMFOFIBABFLEJEFS@GBCDC@EAUBCG@G@AFADCAKJABGAGQGGIC@GEAE@QCIDQAEGMHE^OTGFCIOFKIA@ICEBEFCRAHEFECGJGHKDCFAF@RKFGAICICUGC[QEA[FMF@FABEB{BQ[GGGCEEMICCAYLCBA@CACCAE@CDABC@@CC@G@DICCUIGICFDPAPAFGHELBHADEJEFDFTNEPDF@DKHKDSNQDEDKNIBEAGGC@CAMOECK@DH@LIDCD@HFN@DCDEABECGEAOBCCAECCIBABBV@PCDUH@HCB@HAJBB@B@LHHHBFLJFBFBJCHEFID@DHFBFAJBFJNRJXJHHD@BID@F@JLJT@JGXZn@JENNP@FEFC@KBKGEACBGBIBKFEJCHDD@FDJAPDJ@LFP@HGRFN@FAHDHF@FNDRALLN@FCNCBOHUBIHCDBDFJLJCFDLLPD@FCFDD@HCD@@NFT@JLHDH@\\BJLVHJBPDF@FCFDFDBJ@FFHj@HAJEHEHMJCFJXBBVBH@D@BDAFFFZDHCJAJFJAPFHLDDGTNLBH@JBLFB@DGJCFI^e^EJHPLPTBLG@KFGJGPCJBLFPNHBZMNARBREV@LDHHBLANFHRNXDRFJHXL@DCHDDHDBLEFAHBLJJFDFALEFHDBTRDLDPDJJLHLRNBNJXHFRFDFHHBLBFBBJ@D@BGHETCHDJRDBBDCF@LS@@NBNECIAI@EB@LNZBJKEC@@BBH@BED@DHHFDF@HGNCJAR@TIF@LBFCDGHgCSDEPICKMQDIHABEDAF@FHHGJAJJFDZAFBJA@HBBF@JEDGB@JJB@AGBEH@BDBBBCD@FDD@@AFBBAHCXADC@GCGBILINCBC@IBCD@F@DC@EBAFC@KbFBDEZIJADATBBLBTCVHFDFADDBDEHBPFDPDHDF@FBDDNEFGDAJJHBBHFFAFEDQHI@IFADBHJbBLCJCFGBKAE@@B@DFJ@H@N@L@LDFCDDFLEJBVHH`@HDFD@F@HGJ@LEHBHC@GBCAMHGBAFFFADE@GBCDBBDF@DDJABIBAD@BJFHFJAFKHCJKFBFBD@BEBCCKJCAAFABG@MGSPKTC@E@EBAHGDADD@H@BDCLAL@XFBBH@FCFN^HFDBLEB@BBBJFDVAAH@LCHBFFDBF@HFBJD@FCN@NDDN@LFNR@BAPGHIJCDCPAPDNLBBBDJLPBF@DNdNH~ZLHNDLHFHD@AHHBAHEB@F@JCBFHJHTTVPLFfJl@LEJK@IDMHKJIPFLDJHTTRZDL@RLTDNE^N\\XRBD@BENBHCHFFAFD\\@JN@FHFAFCFAFDBDBJBDVCFBDH@FELBFH@DGHABI@A@ABAHBDAD@HFHCBBLFDFB@DAFEDALALDDJB@PFD@NAFBFCBC\\CDCF@HE@EIQBEPQ@ACIECCG@EAAGDAAGEC@ECAKDGFE@ECE@GDGBWFCLBJEH@vGDGIM@OC@C@ACEKEGCIHCDCACD@JFPBFADB@FBBDEHACCBCVQACDKHAFC@EIGAOBALC@GBGGC@EBCFB@A@CEADGEIHMMIDGCC@KIEEA"]],"encodeOffsets":[[[123250,27563]],[[122541,27268]],[[123020,27189]],[[122916,27125]],[[121678,27068]],[[123398,27612]],[[123294,27747]],[[123611,27636]],[[123592,27651]],[[123587,27574]],[[123587,27576]],[[123438,27501]],[[123358,27630]],[[123380,27622]],[[123263,27607]],[[123185,27583]],[[123137,27586]],[[123136,27581]],[[123105,27518]],[[123002,27474]],[[123025,27443]],[[123021,27325]],[[123237,27343]],[[123240,27281]],[[123209,27290]],[[122984,27247]],[[123034,27193]],[[123016,27168]],[[123017,27126]],[[122884,27182]],[[122850,27191]],[[122865,27137]],[[122785,27331]],[[122683,27314]],[[122653,27317]],[[122636,27252]],[[122672,27239]],[[122677,27206]],[[122569,28102]]]},"properties":{"cp":[119.527082,26.95924],"name":"宁德市","childNum":39}}],"UTF8Encoding":true});
}));

 ´úÂë¹ÜÀí/´óÆÁ/src/components/echart/bottom/bottomLeftChart/chart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,154 @@
<template>
  <div>
    <!-- å¹´åº¦å¼€å·¥çŽ‡ -->
    <Echart
      :options="options"
      id="bottomLeftChart"
      height="480px"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data () {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        this.options = {
          title: {
            text: "",
          },
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(255,255,255,0.1)",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                backgroundColor: "#7B7DDC"
              }
            }
          },
          legend: {
            data: ["入库量", "出库量"],
            textStyle: {
              color: "#B4B4B4"
            },
            top: "0%",
            left:"15%"
            
          },
          grid: {
            x: "8%",
            width: "90%",
            y: "4%"
          },
          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: "line",
            //   smooth: true,
            //   showAllSymbol: true,
            //   symbol: "emptyCircle",
            //   symbolSize: 8,
            //   yAxisIndex: 1,
            //   itemStyle: {
            //     normal: {
            //       color: "#F02FC2"
            //     }
            //   },
            //   data: newData.rateData
            // },
            {
              name: "出库量",
              type: "bar",
              barWidth: 40,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#956FD4" },
                    { offset: 1, color: "#3EACE5" }
                  ])
                }
              },
              data: newData.barData
            },
            {
              name: "入库量",
              type: "bar",
              barGap: "-100%",
              barWidth: 40,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: new this.$echarts.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
            }
          ]
        }
      },
      immediate: true,
      deep: true
    },
  },
}
</script>

 ´úÂë¹ÜÀí/´óÆÁ/src/components/echart/bottom/bottomLeftChart/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,76 @@
<template>
  <div>
    <Chart :cdata="cdata"  />
  </div>
</template>

<script>
import Chart from './chart.vue'
export default {
  data () {
    return {
      cdata: {
        category: [
        ],
        lineData: [
        ],
        barData: [
        ],
        rateData: [],
        locationData:[]
      }
    };
  },
  components: {
    Chart,
  },
  mounted () {
    // this.GetLocationData();
    this.setData();
  },
  methods: {
    // æ ¹æ®è‡ªå·±çš„业务情况修改
    setData () {
      for (let i = 0; i < this.cdata.barData.length -1; i++) {
        let rate = this.cdata.barData[i] / this.cdata.lineData[i];
        this.cdata.rateData.push(rate.toFixed(2));
      }
    },
    setData(){
      this.GetLocationData()
       setInterval(() => {
         this.GetLocationData()
       }, 40000);
    },
    //获取立库货位数据
    GetLocationData(){
      var _this=this;
      this.cdata.category=[];
      this.cdata.barData=[];
      this.cdata.lineData=[];
      this.$http.post("/api/Largescreen/fifteenTotal_quantityndex","查询中...").then((x)=>{
        for (let i = 0; i < x.data.daily_statistics.length; i++) {
        let dailyData = x.data.daily_statistics[i];

        this.cdata.category.push(dailyData.date);
        this.cdata.barData.push(dailyData.day_outbound);
        this.cdata.lineData.push(dailyData.day_inventory);
        }
      //   for (let i = 0; i <= this.cdata.barData.length -1; i++) {
      //     if(this.cdata.rateData.length!=this.cdata.barData.length){
      //   let rate = this.cdata.barData[i] / this.cdata.lineData[i];
      //   this.cdata.rateData.push(rate.toFixed(2));
      //     }
      // }
      }).catch((x)=>{
        console.log(x);
      })
    },
    
  }
};
</script>

<style lang="scss" scoped>

</style>

 ´úÂë¹ÜÀí/´óÆÁ/src/components/echart/bottom/bottomRightChart/chart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,358 @@
<template>
  <div>
    <Echart
      :options="options"
      id="centreLeft1Chart"
      height="480px"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data() {
    return {
      options: {},
      // å®šä¹‰é¢œè‰²
      colorList: {
        linearYtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#f5b44d'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        linearGtoB: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#43dfa2'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        linearBtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#1c98e8'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        areaBtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(35,184,210,.2)'
            },
            {
              offset: 1,
              color: 'rgba(35,184,210,0)'
            }
          ]
        }
      }
    }
  },
  components: {
    Echart
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          title: {
            text: '',
            textStyle: {
              color: '#D3D6DD',
              fontSize: 24,
              fontWeight: 'normal'
            },
            subtext: newData.year + '/' + newData.weekCategory[6],
            subtextStyle: {
              color: '#fff',
              fontSize: 16
            },
            top: 50,
            left: 80
          },
          legend: {
            top: 120,
            left: 80,
            orient: 'vertical',
            itemGap: 15,
            itemWidth: 12,
            itemHeight: 12,
            data: ['平均指标', '我的指标'],
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          },
          tooltip: {
            trigger: 'item'
          },
          radar: {
            center: ['68%', '27%'],
            radius: '40%',
            name: {
              color: '#fff'
            },
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                color: this.colorList.linearYtoG,
                opacity: 0.6
              }
            },
            splitLine: {
              lineStyle: {
                color: this.colorList.linearYtoG,
                opacity: 0.6
              }
            },
            splitArea: {
              areaStyle: {
                color: '#fff',
                opacity: 0.1,
                shadowBlur: 25,
                shadowColor: '#000',
                shadowOffsetX: 0,
                shadowOffsetY: 5
              }
            },
            indicator: [
              {
                name: '服务态度',
                max: newData.maxData
              },
              {
                name: '产品质量',
                max: 10
              },
              {
                name: '任务效率',
                max: 12
              },
              {
                name: '售后保障',
                max: 3.5
              }
            ]
          },
          grid: {
            left: 90,
            right: 80,
            bottom: 40,
            top: '60%'
          },
          xAxis: {
            type: 'category',
            position: 'bottom',
            axisLine: true,
            axisLabel: {
              color: 'rgba(255,255,255,.8)',
              fontSize: 12
            },
            data: newData.weekCategory
          },
          // ä¸‹æ–¹Yè½´
          yAxis: {
            name: '工单',
            nameLocation: 'end',
            nameGap: 24,
            nameTextStyle: {
              color: 'rgba(255,255,255,.5)',
              fontSize: 14
            },
            max: newData.maxData,
            splitNumber: 4,

            axisLine: {
              lineStyle: {
                opacity: 0
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#fff',
                opacity: 0.1
              }
            },
            axisLabel: {
              color: 'rgba(255,255,255,.8)',
              fontSize: 12
            }
          },
          series: [
            {
              name: '',
              type: 'radar',
              symbolSize: 0,
              data: [
                {
                  value: newData.radarDataAvg[6],
                  name: '平均指标',
                  itemStyle: {
                    normal: {
                      color: '#f8d351'
                    }
                  },
                  lineStyle: {
                    normal: {
                      opacity: 0
                    }
                  },
                  areaStyle: {
                    normal: {
                      color: '#f8d351',
                      shadowBlur: 25,
                      shadowColor: 'rgba(248,211,81,.3)',
                      shadowOffsetX: 0,
                      shadowOffsetY: -10,
                      opacity: 1
                    }
                  }
                },
                {
                  value: newData.radarData[6],
                  name: '我的指标',
                  itemStyle: {
                    normal: {
                      color: '#43dfa2'
                    }
                  },
                  lineStyle: {
                    normal: {
                      opacity: 0
                    }
                  },
                  areaStyle: {
                    normal: {
                      color: this.colorList.linearGtoB,
                      shadowBlur: 15,
                      shadowColor: 'rgba(0,0,0,.2)',
                      shadowOffsetX: 0,
                      shadowOffsetY: 5,
                      opacity: 0.8
                    }
                  }
                }
              ]
            },
            {
              name: '',
              type: 'line',
              smooth: true,
              symbol: 'emptyCircle',
              symbolSize: 8,
              itemStyle: {
                normal: {
                  color: '#fff'
                }
              },
              lineStyle: {
                normal: {
                  color: this.colorList.linearBtoG,
                  width: 3
                }
              },
              areaStyle: {
                normal: {
                  color: this.colorList.areaBtoG
                }
              },
              data: newData.weekLineData,
              lineSmooth: true,
              markLine: {
                silent: true,
                data: [
                  {
                    type: 'average',
                    name: '平均值'
                  }
                ],
                precision: 0,
                label: {
                  normal: {
                    formatter: '平均值: \n {c}'
                  }
                },
                lineStyle: {
                  normal: {
                    color: 'rgba(248,211,81,.7)'
                  }
                }
              },
              tooltip: {
                position: 'top',
                formatter: '{c} m',
                backgroundColor: 'rgba(28,152,232,.2)',
                padding: 6
              }
            },
            {
              name: '占位背景',
              type: 'bar',
              itemStyle: {
                normal: {
                  show: true,
                  color: '#000',
                  opacity: 0
                }
              },
              silent: true,
              barWidth: '50%',
              data: newData.weekMaxData,
              animation: false
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

 ´úÂë¹ÜÀí/´óÆÁ/src/components/echart/bottom/bottomRightChart/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,89 @@
<template>
  <div>
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue'
export default {
  data () {
    return {
      drawTiming: null,
      cdata: {
        year: null,
        weekCategory: [],
        radarData: [],
        radarDataAvg: [],
        maxData: 12000,
        weekMaxData: [],
        weekLineData: []
      }
    }
  },
  components: {
    Chart,
  },
  mounted () {
    this.drawTimingFn();
  },
  beforeDestroy () {
    clearInterval(this.drawTiming);
  },
  methods: {
    drawTimingFn () {
      this.setData();
      this.drawTiming = setInterval(() => {
        this.setData();
      }, 6000);
    },
    setData () {
      // æ¸…空轮询数据
      this.cdata.weekCategory = [];
      this.cdata.weekMaxData = [];
      this.cdata.weekLineData = [];
      this.cdata.radarData = [];
      this.cdata.radarDataAvg = [];

      let dateBase = new Date();
      this.cdata.year = dateBase.getFullYear();
      // å‘¨æ•°æ®
      for (let i = 0; i < 7; i++) {
        // æ—¥æœŸ
        let date = new Date();
        this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate()-i].join("/"));

        // æŠ˜çº¿å›¾æ•°æ®
        this.cdata.weekMaxData.push(this.cdata.maxData);
        let distance = Math.round(Math.random() * 11000 + 500);
        this.cdata.weekLineData.push(distance);

        // é›·è¾¾å›¾æ•°æ®
        // æˆ‘的指标
        let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
        let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
        let hour = +(distance / 1000 / averageSpeed).toFixed(1);
        let radarDayData = [distance, averageSpeed, maxSpeed, hour];
        this.cdata.radarData.unshift(radarDayData);

        // å¹³å‡æŒ‡æ ‡
        let distanceAvg = Math.round(Math.random() * 8000 + 4000);
        let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
        let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
        let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
        let radarDayDataAvg = [
          distanceAvg,
          averageSpeedAvg,
          maxSpeedAvg,
          hourAvg
        ];
        this.cdata.radarDataAvg.unshift(radarDayDataAvg);
      }

    }
  }
};
</script>

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

 ´úÂë¹ÜÀí/´óÆÁ/src/components/echart/center/centerChartRate/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,104 @@
<template>
  <div>
    <!-- é€šè¿‡çŽ‡/达标率 -->
    <Echart
      :options="options"
      :id="id"
      height="100px"
      width="100px"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data () {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    id: {
      type: String,
      required: true,
      default: "chartRate"
    },
    tips: {
      type: Number,
      required: true,
      default: 50
    },
    colorObj: {
      type: Object,
      default: function () {
        return {
          textStyle: "#3fc0fb",
          series: {
            color: ["#00bcd44a", "transparent"],
            dataColor: {
              normal: "#03a9f4",
              shadowColor: "#97e2f5"
            }
          }
        };
      }
    }
  },
  watch: {
    // tips æ˜¯ä¼šå˜æ›´çš„数据，所以进行监听
    tips: {
      handler (newData) {
        this.options = {
          title:{
            text: newData * 1 + "%",
            x: "center",
            y: "center",
            textStyle: {
              color: this.colorObj.textStyle,
              fontSize: 16
            }
          },
          series: [
            {
              type: "pie",
              radius: ["75%", "80%"],
              center: ["50%", "50%"],
              hoverAnimation: false,
              color: this.colorObj.series.color,
              label: {
                normal: {
                  show: false
                }
              },
              data: [
                {
                  value: newData,
                  itemStyle: {
                    normal: {
                      color: this.colorObj.series.dataColor.normal,
                      shadowBlur: 10,
                      shadowColor: this.colorObj.series.dataColor.shadowColor
                    }
                  }
                },
                {
                  value: 100 - newData
                }
              ]
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
};
</script>

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

 ´úÂë¹ÜÀí/´óÆÁ/src/components/echart/centerLeft/centerLeft1Chart/chart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,78 @@
<template>
  <div>
    <Echart :options="options" id="centreLeft1Chart" height="220px" width="560px"></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          color: [
            "#37a2da",
            "#32c5e9",
            "#9fe6b8",
            "#ffdb5c",
            "#ff9f7f",
            "#fb7293",
            "#e7bcf3",
            "#8378ea"
          ],
          tooltip: {
            trigger: "item",
            formatter: (params) => {
              return ` åº“存占比<br/>${params.data.name}总货位 : ${params.data.value} (${params.data.vale}%)<br/>目前占用货位：${params.data.vale2}`;
            }
          },
          toolbox: {
            show: true
          },
          calculable: true,
          legend: {
            orient: "horizontal",
            icon: "circle",
            bottom: 0,
            x: "center",
            data: newData.xData,
            textStyle: {
              color: "#fff"
            }
          },
          series: [
            {
              name: "库存占比",
              type: "pie",
              radius: [10, 50],
              roseType: "area",
              center: ["50%", "50%"],
              data: newData.seriesData,
            }
          ],

        }
      },
      immediate: true,
      deep: true
    }
  }
};
</script>

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

 ´úÂë¹ÜÀí/´óÆÁ/src/components/echart/centerLeft/centerLeft1Chart/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,63 @@
<template>
  <div>
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue';
export default {
  data () {
    return {
      cdata: {
        xData: ["小托盘叠放区", "大托盘叠放区", "库区2", "库区3", "库区4"],
        seriesData: [
          //  { value: 10, name: "小托盘叠放区",vale: "1",vale2: "1"},
          // { value: 5, name: "大托盘叠放区",vale: "2",vale2: "2"},
          // { value: 15, name: "库区2",vale: "3",vale2: "3"},
          // { value: 25, name: "库区3",vale: "4",vale2: "4"},
          // { value: 20, name: "库区4",vale: "5",vale2: "5"}
        ],
      }
    }
  },
  components: {
    Chart,
  },
  mounted () {
    this.changeNumber();
  },
  methods: {
    changeTiming() {
      setInterval(() => {
        this.changeNumber()
      },100000)
    },
    changeNumber() {
      this.$http.post('/api/Largescreen/Statistical_chart')
        .then(response => {

          let seriesDatas = []
          response.data.responseData.forEach(element => {
            let dataObject = {
              name: element.item1,
              value: element.item2, // è¿™é‡Œå¯ä»¥æ ¹æ®å®žé™…情况进行修改
              vale: element.item3,
              vale2: element.item4
            };
            seriesDatas.push(dataObject);
          });
          this.cdata = {
            seriesData: seriesDatas
          }
        })
        .catch(error => {
          console.error('请求出错：', error);
        });
    }
  }
}
</script>

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

 ´úÂë¹ÜÀí/´óÆÁ/src/components/echart/centerLeft/centerLeft2Chart/chart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,290 @@
<template>
  <div>
    <Echart
      id="centreLeft2Chart"
      ref="centreLeft2ChartRef"
      :options="options"
      height="360px"
      width="330px"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart';
export default {
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        // è®¾ç½®ç‚¹çš„位置(经纬度)
        const geoCoordMap = {
          åŽ¦é—¨å¸‚: [118.11022, 24.490474, 20],
          ç¦å·žå¸‚: [119.206239, 26.275302, 20],
          æ³‰å·žå¸‚: [118.589421, 24.908853, 20],
          æ¼³å·žå¸‚: [117.561801, 24.510897, 20],
          é¾™å²©å¸‚: [116.82978, 25.391603, 20],
          èŽ†ç”°å¸‚: [119.007558, 25.591011, 20],
          ä¸‰æ˜Žå¸‚: [117.435001, 26.465444, 20],
          å—平市: [118.178459, 27.535627, 20],
          å®å¾·å¸‚: [119.527082, 27.15924, 20],
        };
        let seriesData = [
          {
            name: '厦门市',
          },
          {
            name: '福州市',
          },
          {
            name: '泉州市',
          },
          {
            name: '漳州市',
          },
          {
            name: '龙岩市',
          },
          {
            name: '莆田市',
          },
          {
            name: '三明市',
          },
          {
            name: '南平市',
          },
          {
            name: '宁德市',
          },
        ];
        let convertData = function (data) {
          let scatterData = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              scatterData.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
              });
            }
          }
          return scatterData;
        };
        this.options = {
          showLegendSymbol: true,
          tooltip: {
            trigger: 'item',
            textStyle: {
              fontSize: 14,
              lineHeight: 22,
            },
            position: point => {
              // å›ºå®šåœ¨é¡¶éƒ¨
              return [point[0] + 50, point[1] - 20];
            },
            // å¦‚果需要自定义 tooltip样式，需要使用formatter
            /*
              formatter: params => {
                return `<div style=""> ... </div>`
              }
            */
          },
          visualMap: {
            min: 0,
            max: 10,
            show: false,
            seriesIndex: 0,
            // é¢œè‰²
            inRange: {
              color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
            },
          },
          // åº•éƒ¨èƒŒæ™¯
          geo: {
            show: true,
            aspectScale: 0.85, //长宽比
            zoom: 1.2,
            top: '10%',
            left: '16%',
            map: '福建',
            roam: false,
            itemStyle: {
              normal: {
                areaColor: 'rgba(0,0,0,0)',
                shadowColor: 'rgba(7,114,204, .8)',
                shadowOffsetX: 5,
                shadowOffsetY: 5,
              },
              emphasis: {
                areaColor: '#00aeef',
              },
            },
          },
          series: [
            {
              name: '相关指数',
              type: 'map',
              aspectScale: 0.85, //长宽比
              zoom: 1.2,
              mapType: '福建', // è‡ªå®šä¹‰æ‰©å±•å›¾è¡¨ç±»åž‹
              top: '10%',
              left: '16%',
              itemStyle: {
                normal: {
                  color: 'red',
                  areaColor: 'rgba(19,54,162, .5)',
                  borderColor: 'rgba(0,242,252,.3)',
                  borderWidth: 1,
                  shadowBlur: 7,
                  shadowColor: '#00f2fc',
                },
                emphasis: {
                  areaColor: '#4f7fff',
                  borderColor: 'rgba(0,242,252,.6)',
                  borderWidth: 2,
                  shadowBlur: 10,
                  shadowColor: '#00f2fc',
                },
              },
              label: {
                formatter: params => `${params.name}`,
                show: true,
                position: 'insideRight',
                textStyle: {
                  fontSize: 14,
                  color: '#efefef',
                },
                emphasis: {
                  textStyle: {
                    color: '#fff',
                  },
                },
              },
              data: newData,
            },
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              symbolSize: 7,
              effectType: 'ripple',
              legendHoverLink: false,
              showEffectOn: 'render',
              rippleEffect: {
                period: 4,
                scale: 2.5,
                brushType: 'stroke',
              },
              zlevel: 1,
              itemStyle: {
                normal: {
                  color: '#99FBFE',
                  shadowBlur: 5,
                  shadowColor: '#fff',
                },
              },
              data: convertData(seriesData),
            },
          ],
        };
        // é‡æ–°é€‰æ‹©åŒºåŸŸ
        this.handleMapRandomSelect();
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // å¼€å¯å®šæ—¶å™¨
    startInterval() {
      const _self = this;
      // åº”通过接口获取配置时间，暂时写死5s
      const time = 2000;
      if (this.intervalId !== null) {
        clearInterval(this.intervalId);
      }
      this.intervalId = setInterval(() => {
        _self.reSelectMapRandomArea();
      }, time);
    },
    // é‡æ–°éšæœºé€‰ä¸­åœ°å›¾åŒºåŸŸ
    reSelectMapRandomArea() {
      const length = 9;
      this.$nextTick(() => {
        try {
          const map = this.$refs.centreLeft2ChartRef.chart;
          let index = Math.floor(Math.random() * length);
          while (index === this.preSelectMapIndex || index >= length) {
            index = Math.floor(Math.random() * length);
          }
          map.dispatchAction({
            type: 'mapUnSelect',
            seriesIndex: 0,
            dataIndex: this.preSelectMapIndex,
          });
          map.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: index,
          });
          map.dispatchAction({
            type: 'mapSelect',
            seriesIndex: 0,
            dataIndex: index,
          });
          this.preSelectMapIndex = index;
        } catch (error) {
          console.log(error)
        }
      });
    },
    handleMapRandomSelect() {
      this.$nextTick(() => {
        try {
          const map = this.$refs.centreLeft2ChartRef.chart;
          const _self = this;
          setTimeout(() => {
            _self.reSelectMapRandomArea();
          }, 0);
          // ç§»å…¥åŒºåŸŸï¼Œæ¸…除定时器、取消之前选中并选中当前
          map.on('mouseover', function (params) {
            clearInterval(_self.intervalId);
            map.dispatchAction({
              type: 'mapUnSelect',
              seriesIndex: 0,
              dataIndex: _self.preSelectMapIndex,
            });
            map.dispatchAction({
              type: 'mapSelect',
              seriesIndex: 0,
              dataIndex: params.dataIndex,
            });
            _self.preSelectMapIndex = params.dataIndex;
          });
          // ç§»å‡ºåŒºåŸŸé‡æ–°éšæœºé€‰ä¸­åœ°å›¾åŒºåŸŸï¼Œå¹¶å¼€å¯å®šæ—¶å™¨
          map.on('globalout', function () {
            _self.reSelectMapRandomArea();
            _self.startInterval();
          });
          this.startInterval();
        } catch (error) {
          console.log(error)
        }
      });
    },
  },
};
</script>

 ´úÂë¹ÜÀí/´óÆÁ/src/components/echart/centerLeft/centerLeft2Chart/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,67 @@
<template>
  <div>
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue';
export default {
  data () {
    return {
      cdata: [
        {
          // åå­—需要与 â€œcommon/map/fujian.js” åœ°å›¾æ•°æ®æ–‡ä»¶é‡Œé¢å®šä¹‰çš„一一对应，不能是 â€œç¦å·žâ€ æˆ–者 â€œé—½â€ ä¹‹ç±»çš„缩写
          name: '福州市',
          value: 10,
          elseData:{
            // è¿™é‡Œæ”¾ç½®åœ°å›¾ tooltip é‡Œæƒ³æ˜¾ç¤ºçš„数据
          }
        },
        {
          name: '厦门市',
          value: 9,
        },
        {
          name: '漳州市',
          value: 8,
        },
        {
          name: '泉州市',
          value: 7,
        },
        {
          name: '三明市',
          value: 6,
        },
        {
          name: '莆田市',
          value: 5,
        },
        {
          name: '南平市',
          value: 4,
        },
        {
          name: '龙岩市',
          value: 3,
        },
        {
          name: '宁德市',
          value: 2,
        }
      ]
    }
  },
  components: {
    Chart,
  },
  mounted () {
  },
  methods: {
  }
}
</script>

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

 ´úÂë¹ÜÀí/´óÆÁ/src/components/echart/centerRight/centerRightChart/chart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,132 @@
<template>
  <div>
    <Echart
      :options="options"
      id="centreRight2Chart1"
      height="200px"
      width="260px"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data () {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        // å›ºå®šæ ·å¼æ•°æ®
        let lineStyle = {
          normal: {
            width: 1,
            opacity: 0.5
          }
        };

        this.options = {
          radar: {
            indicator: newData.indicatorData,
            shape: "circle",
            splitNumber: 5,
            radius: ["0%", "65%"],
            name: {
              textStyle: {
                color: "rgb(238, 197, 102)"
              }
            },
            splitLine: {
              lineStyle: {
                color: [
                  "rgba(238, 197, 102, 0.1)",
                  "rgba(238, 197, 102, 0.2)",
                  "rgba(238, 197, 102, 0.4)",
                  "rgba(238, 197, 102, 0.6)",
                  "rgba(238, 197, 102, 0.8)",
                  "rgba(238, 197, 102, 1)"
                ].reverse()
              }
            },
            splitArea: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "rgba(238, 197, 102, 0.5)"
              }
            }
          },
          series: [
            {
              name: "北京",
              type: "radar",
              lineStyle: lineStyle,
              data: newData.dataBJ,
              symbol: "none",
              itemStyle: {
                normal: {
                  color: "#F9713C"
                }
              },
              areaStyle: {
                normal: {
                  opacity: 0.1
                }
              }
            },
            {
              name: "上海",
              type: "radar",
              lineStyle: lineStyle,
              data: newData.dataSH,
              symbol: "none",
              itemStyle: {
                normal: {
                  color: "#B3E4A1"
                }
              },
              areaStyle: {
                normal: {
                  opacity: 0.05
                }
              }
            },
            {
              name: "广州",
              type: "radar",
              lineStyle: lineStyle,
              data: newData.dataGZ,
              symbol: "none",
              itemStyle: {
                normal: {
                  color: "rgb(238, 197, 102)"
                }
              },
              areaStyle: {
                normal: {
                  opacity: 0.05
                }
              }
            } //end
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
};
</script>

 ´úÂë¹ÜÀí/´óÆÁ/src/components/echart/centerRight/centerRightChart/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,55 @@
<template>
  <div>
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue';
export default {
  data () {
    return {
      cdata: {
        indicatorData: [
          { name: "data1", max: 300 },
          { name: "data2", max: 250 },
          { name: "data3", max: 300 },
          { name: "data4", max: 5},
          { name: "data5", max: 200 },
          { name: "data6", max: 100 }
        ],
        dataBJ: [
          [94, 69, 114, 2.08, 73, 39, 22],
          [99, 73, 110, 2.43, 76, 48, 23],
          [31, 12, 30, 0.5, 32, 16, 24],
          [42, 27, 43, 1, 53, 22, 25],
          [154, 117, 157, 3.05, 92, 58, 26],
          [234, 185, 230, 4.09, 123, 69, 27],
          [160, 120, 186, 2.77, 91, 50, 28]
        ],
        dataGZ: [
          [84, 94, 140, 2.238, 68, 18, 22],
          [93, 77, 104, 1.165, 53, 7, 23],
          [99, 130, 227, 3.97, 55, 15, 24],
          [146, 84, 139, 1.094, 40, 17, 25],
          [113, 108, 137, 1.481, 48, 15, 26],
          [81, 48, 62, 1.619, 26, 3, 27],
          [56, 48, 68, 1.336, 37, 9, 28]
        ],
        dataSH: [
          [91, 45, 125, 0.82, 34, 23, 1],
          [65, 27, 78, 0.86, 45, 29, 2],
          [83, 60, 84, 1.09, 73, 27, 3],
          [109, 81, 121, 1.28, 68, 51, 4],
          [106, 77, 114, 1.07, 55, 51, 5],
          [109, 81, 121, 1.28, 68, 51, 6],
          [106, 77, 114, 1.07, 55, 51, 7]
        ]
      }
    }
  },
  components: {
    Chart,
  }
}
</script>

 ´úÂë¹ÜÀí/´óÆÁ/src/main.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,40 @@
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import dataV from '@jiaminghi/data-view';
// å¼•å…¥å…¨å±€css
import './assets/scss/style.scss';
// æŒ‰éœ€å¼•å…¥vue-awesome图标
import Icon from 'vue-awesome/components/Icon';
import 'vue-awesome/icons/chart-bar.js';
import 'vue-awesome/icons/chart-area.js';
import 'vue-awesome/icons/chart-pie.js';
import 'vue-awesome/icons/chart-line.js';
import 'vue-awesome/icons/align-left.js';

//引入axios
import axios from 'axios'
//引入echart
//4.x å¼•ç”¨æ–¹å¼
import echarts from 'echarts'

Vue.prototype.$http = axios.create({
  timeout: 20000,
  baseURL: 'http://localhost:8098', 
});
//5.x å¼•ç”¨æ–¹å¼ä¸ºæŒ‰éœ€å¼•ç”¨
//希望使用5.x版本的话,需要在package.json中更新版本号,并切换引用方式
//import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false;

// å…¨å±€æ³¨å†Œ
Vue.component('icon', Icon);
Vue.use(dataV);

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

 ´úÂë¹ÜÀí/´óÆÁ/src/router/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,15 @@
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [{
  path: '/',
  name: 'index',
  component: () => import('../views/index.vue')
}]
const router = new VueRouter({
  routes
})

export default router

 ´úÂë¹ÜÀí/´óÆÁ/src/store/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,15 @@
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

 ´úÂë¹ÜÀí/´óÆÁ/src/utils/drawMixin.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,57 @@
// å±å¹•é€‚配 mixin å‡½æ•°

// * é»˜è®¤ç¼©æ”¾å€¼
const scale = {
  width: '1',
  height: '1',
}

// * è®¾è®¡ç¨¿å°ºå¯¸ï¼ˆpx）
const baseWidth = 1920
const baseHeight = 1080

// * éœ€ä¿æŒçš„比例（默认1.77778）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))

export default {
  data() {
    return {
      // * å®šæ—¶å‡½æ•°
      drawTiming: null
    }
  },
  mounted () {
    this.calcRate()
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    calcRate () {
      const appRef = this.$refs["appRef"]
      if (!appRef) return 
      // å½“前宽高比
      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
      if (appRef) {
        if (currentRate > baseProportion) {
          // è¡¨ç¤ºæ›´å®½
          scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
          scale.height = (window.innerHeight / baseHeight).toFixed(5)
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
        } else {
          // è¡¨ç¤ºæ›´é«˜
          scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
          scale.width = (window.innerWidth / baseWidth).toFixed(5)
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
        }
      }
    },
    resize () {
      clearTimeout(this.drawTiming)
      this.drawTiming = setTimeout(() => {
        this.calcRate()
      }, 200)
    }
  },
}

 ´úÂë¹ÜÀí/´óÆÁ/src/utils/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,51 @@
/**
 * @param {Function} fn é˜²æŠ–函数
 * @param {Number} delay å»¶è¿Ÿæ—¶é—´
 */
export function debounce(fn, delay) {
  var timer;
  return function () {
    var context = this;
    var args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

/**
 * @param {date} time éœ€è¦è½¬æ¢çš„时间
 * @param {String} fmt éœ€è¦è½¬æ¢çš„格式 å¦‚ yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
 */
export function formatTime(time, fmt) {
  if (!time) return '';
  else {
    const date = new Date(time);
    const o = {
      'M+': date.getMonth() + 1,
      'd+': date.getDate(),
      'H+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds(),
      'q+': Math.floor((date.getMonth() + 3) / 3),
      S: date.getMilliseconds(),
    };
    if (/(y+)/.test(fmt))
      fmt = fmt.replace(
        RegExp.$1,
        (date.getFullYear() + '').substr(4 - RegExp.$1.length)
      );
    for (const k in o) {
      if (new RegExp('(' + k + ')').test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          RegExp.$1.length === 1
            ? o[k]
            : ('00' + o[k]).substr(('' + o[k]).length)
        );
      }
    }
    return fmt;
  }
}

 ´úÂë¹ÜÀí/´óÆÁ/src/utils/resizeMixin.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,32 @@
// æ··å…¥ä»£ç  resize-mixins.js
import { debounce } from '@/utils';
const resizeChartMethod = '$__resizeChartMethod';

export default {
  data() {
    // åœ¨ç»„件内部将图表 init çš„引用映射到 chart å±žæ€§ä¸Š
    return {
      chart: null,
    };
  },
  created() {
    window.addEventListener('resize', this[resizeChartMethod], false);
  },
  activated() {
    // é˜²æ­¢ keep-alive ä¹‹åŽå›¾è¡¨å˜å½¢
    if (this.chart) {
      this.chart.resize()
    }
  },
  beforeDestroy() {
    window.removeEventListener('reisze', this[resizeChartMethod]);
  },
  methods: {
    // é˜²æŠ–函数来控制 resize çš„频率
    [resizeChartMethod]: debounce(function() {
      if (this.chart) {
        this.chart.resize();
      }
    }, 300),
  },
};

 ´úÂë¹ÜÀí/´óÆÁ/src/views/bottomLeft.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,52 @@
<template>
  <div id="bottomLeft">
    <div class="bg-color-black" >
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-bar" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span >5日数据统计</span><!--  class="fs-xl text mx-2" -->
        </div>
      </div>
      <div>
        <BottomLeftChart />
      </div>
    </div>
  </div>
</template>

<script>
import BottomLeftChart from '@/components/echart/bottom/bottomLeftChart'
export default {
  components: {
    BottomLeftChart
  }
}
</script>

<style lang="scss" scoped>
$box-height: 520px;
$box-width: 100%;
#bottomLeft {
  padding: 20px 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 35px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 170px;
    .active-ring-name {
      padding-top: 10px;
    }
  }
}
</style>

 ´úÂë¹ÜÀí/´óÆÁ/src/views/bottomRight.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,63 @@
<template>
  <div id="bottomRight" >
    <div class="bg-color-black" style="width: 100%;">
      <!-- <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-area" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
          <div class="decoration2">
            <dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
          </div>
        </div>
      </div> -->
      <div>
        <!-- <BottomRightChart /> -->
        <centerRight3/>
      </div>
    </div>
  </div>
</template>

<script>
// import BottomRightChart from "@/components/echart/bottom/bottomRightChart";
import centerRight3 from './centerRight3'
export default {
  components: {
    // BottomRightChart
    centerRight3
  }
};
</script>

<style lang="scss" class>
$box-height: 520px;
$box-width: 895px;
#bottomRight {
  padding: 14px 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  //下滑线动态
  .decoration2 {
    position: absolute;
    right: 0.125rem;
  }
  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 170px;
    .active-ring-name {
      padding-top: 10px;
    }
  }
}
</style>

 ´úÂë¹ÜÀí/´óÆÁ/src/views/center.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,365 @@
<template>
  <div id="center">
    <div class="up">
      <div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
        <p >{{ item.title }}</p>
        <div>
          <dv-digital-flop class="dv-dig-flop ml-1 mt-2 pl-3" :config="item.number" />
        </div>
      </div>
    </div>
    <div class="down">
      <div class="ranking bg-color-black">
        <span>
          <icon name="chart-pie" class="text-icon"></icon>
        </span>
        <span>库存数量统计</span>
        <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
      </div>
      <div class="percent">
        
        <!-- <div class="bg-color-black item" v-for="item in titleItem2" :key="item.title">
        <p >{{ item.title }}</p>
        <div>
          <dv-digital-flop class="dv-dig-flop ml-1 mt-2 pl-3" :config="item.number" />
        </div>
      </div> -->
      <div class="item bg-color-black">
          <!--替换-->
          <!-- <div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
        <p >{{ item.title }}</p>
        <div>
          <dv-digital-flop class="dv-dig-flop ml-1 mt-2 pl-3" :config="item.number" />
        </div>
      </div> -->

          <span>1单元合格率</span>
          <CenterChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />
        </div>
        <div class="item bg-color-black">
          <span>2单元合格率</span>
          <CenterChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />
        </div>
        <div class="water">
          <dv-water-level-pond class="dv-wa-le-po" :config="water" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CenterChart from '@/components/echart/center/centerChartRate'

export default {
  data() {
    return {
      titleItem: [],
      titleItem2: [],
      ranking: {},
      water: {
        
      },
      // é€šè¿‡çŽ‡å’Œè¾¾æ ‡çŽ‡çš„组件复用数据
      rate: [
        {
          id: 'centerRate1',
          tips: 0,
          colorData: {
            textStyle: '#3fc0fb',
            series: {
              color: ['#00bcd44a', 'transparent'],
              dataColor: {
                normal: '#03a9f4',
                shadowColor: '#97e2f5'
              }
            }
          }
        },
        {
          id: 'centerRate2',
          tips: 0,
          colorData: {
            textStyle: '#67e0e3',
            series: {
              color: ['#faf3a378', 'transparent'],
              dataColor: {
                normal: '#ff9800',
                shadowColor: '#fcebad'
              }
            }
          }
        }
      ]
    }
  },
  components: {
    CenterChart
  },
  mounted() {
    this.setData();
  },
  methods: {
    setData() {
      this.GetLocationData();
      setInterval(() => {
        this.GetLocationData()
      },100000)
    },
    GetLocationData() {
      var self = this;
      this.$http.post("/api/Largescreen/Outbound_inventory", "查询中...").then((x) => {

        //第一版
        this.titleItem=[
        {
          title: '待检测入库',
          number: {
            number: [x.data.dayTaskType_Inbound],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}件',
            style: {
              fontSize: 26
            }
          }
        },
        
        {
          title: '外协库入库',
          number: {
            number: [x.data.dayTaskType_OutsourceInbound],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}件',
            style: {
              fontSize: 26
            }
          }
        },
        
        {
          title: '待检移库外协',
          number: {
            number: [x.data.dayTaskType_OutsourceCarry],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}件',
            style: {
              fontSize: 26
            }
          }
        },

        
        {
          title: '待检测出库',
          number: {
            number: [x.data.dayTaskType_Outbound],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}件',
            style: {
              fontSize: 26
            }
          }
        },
        
        {
          title: '外协库出库',
          number: {
            number: [x.data.dayTaskType_OutsourceOutbound],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}件',
            style: {
              fontSize: 26
            }
          }
        },
        {
          title: '空托数量',
          number: {
            number: [x.data.dayTaskType_EmptyPallet],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}个',
            style: {
              fontSize: 26
            }
          }
        }
        ]

        this.titleItem2=[
        {
          title: '月入库总量',
          number: {
            number: [x.data.monthlyInventory],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}件',
            style: {
              fontSize: 26
            }
          }
        },
        {
          title: '月出库总量',
          number: {
            number: [x.data.monthlyOutbound],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}件',
            style: {
              fontSize: 26
            }
          }
        },
        {
          title: '今日入库总量',
          number: {
            number: [x.data.dayInventory],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}件',
            style: {
              fontSize: 26
            }
          }
        },
        {
          title: '今日出库总量',
          number: {
            number: [x.data.dayOutbound],
            toFixed: 0,
            textAlign: 'left',
            content: '{nt}件',
            style: {
              fontSize: 26
            }
          }
        }
        ]

        //第二版
        let GetAGVTaskData = []
        for (var i = 0; i < x.data.number_wheels.length; i++) {
          var item = {
            name: x.data.number_wheels[i].stationType,
            value: x.data.number_wheels[i].totalQuantity
          };
          if (item.name == "SmallTray") {
            item.name = "小托盘";
          }
          if (item.name == "LargeTray") {
            item.name = "大托盘";
          }
          GetAGVTaskData[i] = item;
        }
        this.ranking = {
          data: GetAGVTaskData,
          carousel: 'single',
          unit: '个'
        }

        //第三版
        if(x.data.qualified1 !="NaN"){
          var sk=parseInt(x.data.qualified1.replace('%', ''), 10);
          this.rate[0].tips=sk;
        }
        if(x.data.qualified2 !="NaN"){
          this.rate[1].tips=parseInt(x.data.qualified2.replace('%', ''), 10);
        }
        
        //第四版
        var bfb=parseInt(x.data.areaper.replace('%', ''), 10);
        this.water = {
          data: [0, bfb],
        shape: 'roundRect',
        formatter: '{value}%',
        waveNum: 3
        }
      }).catch((x) => {
        console.log(x);
      });
    },
  }
}
</script>

<style lang="scss" scoped>
#center {
  display: flex;
  flex-direction: column;
  width: 650PX;

  .up {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    .item {
      border-radius: 6px;
      padding-top: 8px;
      margin-top: 8px;
      width: 32%;
      height: 70px;

      .dv-dig-flop {
        width: 150px;
        height: 30px;
      }
    }
  }

  .down {
    padding: 6px 4px;
    padding-bottom: 0;
    width: 100%;
    display: flex;
    height: 255px;
    justify-content: space-between;

    .bg-color-black {
      border-radius: 5px;
    }

    .ranking {
      padding: 10px;
      width: 59%;

      .dv-scr-rank-board {
        height: 225px;
      }
    }

    .percent {
      width: 40%;
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 50%;
        height: 120px;

        span {
          margin-top: 8px;
          font-size: 14px;
          display: flex;
          justify-content: center;
        }
      }

      .water {
        width: 100%;

        .dv-wa-le-po {
          height: 120px;
        }
      }
    }
  }
}
</style>

 ´úÂë¹ÜÀí/´óÆÁ/src/views/centerLeft1.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,173 @@
<template>
  <div id="centerLeft1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-bar" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">任务通过率</span>
          <dv-decoration-3 class="dv-dec-3" />
        </div>
      </div>
      <div class="d-flex jc-center">
        <CenterLeft1Chart />
      </div>
      <!-- 4个主要的数据 -->
      <div class="bottom-data">
        <div
          class="item-box mt-2"
          v-for="(item, index) in numberData"
          :key="index"
        >
          <div class="d-flex" style="margin-left:60px">
            <span class="coin"></span>
            <dv-digital-flop class="dv-digital-flop" :config="item.number" />
          </div>
          <p class="text" style="text-align: center;">
            {{ item.text }}
            <span class="colorYellow">(件)</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CenterLeft1Chart from '@/components/echart/centerLeft/centerLeft1Chart'
export default {
  data() {
    return {
      numberData: [
      ]
    }
  },
  components: {
    CenterLeft1Chart
  },
  mounted() {
    this.changeTiming()
  },
  methods: {
    changeTiming() {
      this.changeNumber()
      setInterval(() => {
        this.changeNumber()
      }, 10000)
    },
    changeNumber() {
      var self = this;
      this.$http.post("/api/Largescreen/Total_quantityndex", "查询中...").then((x) => {
        this.numberData=[
        {
          number: {
            number: [x.data.dayInventory],
            toFixed: 1,
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 24
            }
          },
          text: '今日入库总量'
        },
        {
          number: {
            number: [x.data.monthlyInventory],
            toFixed: 1,
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 24
            }
          },
          text: '月入库总量'
        },
        {
          number: {
            number: [x.data.dayOutbound],
            toFixed: 1,
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 24
            }
          },
          text: '今日出库总量'
        },
        {
          number: {
            number: [x.data.monthlyOutbound],
            toFixed: 1,
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 24
            }
          },
          text: '月出库总量'
        }
        ]
      }).catch((x) => {
        console.log(x);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
$box-width: 610px;
$box-height: 410px;

#centerLeft1 {
  padding: 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 10px;
  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .dv-dec-3 {
    position: relative;
    width: 100px;
    height: 20px;
    top: -3px;
  }

  .bottom-data {
    .item-box {
      & > div {
        padding-right: 5px;
      }
      font-size: 14px;
      float: right;
      position: relative;
      width: 50%;
      color: #d3d6dd;
      .dv-digital-flop {
        width: 120px;
        height: 30px;
      }
      // é‡‘币
      .coin {
        position: relative;
        top: 6px;
        font-size: 20px;
        color: #ffc107;
      }
      .colorYellow {
        color: yellowgreen;
      }
      p {
        text-align: center;
      }
    }
  }
}
</style>

 ´úÂë¹ÜÀí/´óÆÁ/src/views/centerLeft2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,59 @@
<template>
  <div id="centerLeft1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-pie" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">地图数据</span>
          <dv-decoration-1 class="dv-dec-1" />
        </div>
      </div>
      <div class="d-flex jc-center">
        <CenterLeft2Chart />
      </div>
    </div>
  </div>
</template>

<script>
import CenterLeft2Chart from "@/components/echart/centerLeft/centerLeft2Chart";
export default {
  components: {
    CenterLeft2Chart
  },
};
</script>

<style lang="scss" scoped>
#centerLeft1 {
  $box-width: 300px;
  $box-height: 410px;
  padding: 16px;
  height: $box-height;
  min-width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .dv-dec-1 {
    position: relative;
    width: 100px;
    height: 20px;
    top: -3px;
  }
  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 170px;
    .active-ring-name {
      padding-top: 10px;
    }
  }
}
</style>

 ´úÂë¹ÜÀí/´óÆÁ/src/views/centerRight1.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,108 @@
<template>
  <div id="centerRight1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-line" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span >炉号分布</span>
        </div>
      </div>
      <div class="d-flex jc-center body-box">
        <dv-scroll-board class="dv-scr-board" :config="config" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {
        header: ['库区','库排', '图号', '炉号'],
        data: [],
        rowNum: 7, //表格行数
        headerHeight: 35,
        headerBGC: '#0f1325', //表头
        oddRowBGC: '#0f1325', //奇数行
        evenRowBGC: '#171c33', //偶数行
        index: true,
        columnWidth: [70,70,80,100],
        align: ['center']
      }
    }
  },
  components: {},
  mounted() {
    this.GetLocationData();
    this.setData();
  },
  methods: {
    setData(){
      this.GetLocationData();
      setInterval(() => {
        this.GetLocationData()
      },100000)
    },
    GetLocationData(){
      var _this=this;
      this.data = [];
      this.$http.post("/api/Largescreen/Warehouse_area","查询中...").then((x)=>{
        let GetAGVTaskData = []
          x.data.forEach(element => {
            let data = [element.area,
             element.line,element.stationType,element.combined_heatNumber]
            GetAGVTaskData.push(data)
          });
          this.config.data = GetAGVTaskData
          this.config = {
            header: ['库区','库排', '图号', '炉号'],
            data: GetAGVTaskData,
            rowNum: 10, //表格行数
            headerHeight: 35,
            headerBGC: '#0f1325', //表头
            oddRowBGC: '#0f1325', //奇数行
            evenRowBGC: '#171c33', //偶数行
            index: true,
            columnWidth: [85,85,90,100],
            align: ['center'],
          }
      }).catch((x)=>{
        console.log(x);
      })
    },
  }
}
</script>

<style lang="scss" scoped>
$box-height: 410px;
$box-width: 630px;
#centerRight1 {
  padding: 10px;
  padding-top: 20px;
  
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .dv-scr-board {
       width: 100%;
      height: 340px;
    }
  }
}

</style>

 ´úÂë¹ÜÀí/´óÆÁ/src/views/centerRight2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,80 @@
<template>
  <div id="centerRight2">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="align-left" class="text-icon"></icon>
        </span>
        <span class="fs-xl text mx-2">产品销售渠道分析</span>
      </div>
      <div class="d-flex ai-center flex-column body-box">
        <dv-capsule-chart class="dv-cap-chart" :config="config" />
        <centerRight2Chart1 />
      </div>
    </div>
  </div>
</template>

<script>
import centerRight2Chart1 from '@/components/echart/centerRight/centerRightChart'

export default {
  data() {
    return {
      config: {
        data: [
          {
            name: '南阳',
            value: 167
          },
          {
            name: '周口',
            value: 67
          },
          {
            name: '漯河',
            value: 123
          },
          {
            name: '郑州',
            value: 55
          },
          {
            name: '西峡',
            value: 98
          }
        ]
      }
    }
  },
  components: { centerRight2Chart1 }
}
</script>

<style lang="scss" scoped>
#centerRight2 {
  $box-height: 410px;
  $box-width: 340px;
  padding: 5px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    padding: 5px;
    height: $box-height;
    width: $box-width;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .dv-cap-chart {
      width: 100%;
      height: 160px;
    }
  }
}
</style>

 ´úÂë¹ÜÀí/´óÆÁ/src/views/centerRight3.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,118 @@

<template>
  <div id="centerRight1">
    <div class="bg-color-black" style="width: 100%;">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-line" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span >AGV任务看板</span>
        </div>
      </div>
      <div class="d-flex jc-center body-box">
        <dv-scroll-board class="dv-scr-board" :config="config" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      config: {
        header: ['任务号', '起点地址', '终点地址', '任务状态','任务类型','创建时间','下发时间'],
        data: [
        ],
        rowNum: 7, //表格行数
        headerHeight: 35,
        headerBGC: '#0f1325', //表头
        oddRowBGC: '#0f1325', //奇数行
        evenRowBGC: '#171c33', //偶数行
        index: true,
        columnWidth: [50],
        align: ['center']
      }
    }
  },
  mounted() {
    this.changeTiming()
  },
  methods: {
    changeTiming() {
        this.changeNumber()
      setInterval(() => {
        this.changeNumber()
      },100)
    },
    changeNumber() {
      this.$http.post('/api/Largescreen/Current_agvtask')
      .then(response => {
          let GetAGVTaskData = []
          if(response.data<=0){
            let data = ["<span  class='colorRed'>暂无数据</span>","<span  class='colorRed'>暂无数据</span>","<span  class='colorRed'>暂无数据</span>","<span  class='colorRed'>暂无数据</span>","<span  class='colorRed'>暂无数据</span>","<span  class='colorRed'>暂无数据</span>","<span  class='colorRed'>暂无数据</span>"]
            GetAGVTaskData.push(data)
          }else{
            response.data.forEach(element => {
            let data = [element.agv_tasknum,"<span  class='colorRed'>"+element.agv_fromaddress+"</span>" , 
            "<span  class='colorGrass'>" + element.agv_toaddress + "</span>",element.agv_taskstate,
             element.agv_tasktype,element.agv_createtime,element.agv_realesstime]
            GetAGVTaskData.push(data)
          });
          }
          this.config.data = GetAGVTaskData;
          this.config = {
            header: ['任务号', '起点地址', '终点地址', '任务状态','任务类型','创建时间','下发时间'],
            data: GetAGVTaskData,
            rowNum: 10, //表格行数
            headerHeight: 35,
            headerBGC: '#0f1325', //表头
            oddRowBGC: '#0f1325', //奇数行
            evenRowBGC: '#171c33', //偶数行
            index: true,
            columnWidth: [50,100,100,100,100,100],
            align: ['center'],

          }
      })
      .catch(error => {
        console.error('请求出错：', error);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
$box-height: 600px;
$box-width: 97%;

#centerRight1 {
  padding: 16px;
  padding-top: 20px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;

  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }

  .text {
    color: #c3cbde;
  }

  .body-box {
    border-radius: 10px;
    overflow: hidden;

    .dv-scr-board {
      width: 100%;
      height: 435px;
    }
  }
}
</style>

 ´úÂë¹ÜÀí/´óÆÁ/src/views/centerRight4.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,110 @@
<template>
  <div id="centerRight1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-line" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span >检测线工单信息</span>
        </div>
      </div>
      <div class="d-flex jc-center body-box">
        <dv-scroll-board class="dv-scr-board" :config="config" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      config: {
        header: ['工单编号','图号', '计划数量', '炉号'],
        data: [],
        rowNum: 10, //表格行数
        headerHeight: 35,
        headerBGC: '#0f1325', //表头
        oddRowBGC: '#0f1325', //奇数行
        evenRowBGC: '#171c33', //偶数行
        index: true,
        columnWidth: [70,70,80,100],
        align: ['center']
      }
    }
  },
  components: {},
  mounted() {

    this.setData();
  },
  methods: {
    setData(){
      this.GetLocationData();
      setInterval(() => {
        this.GetLocationData()
      },1000)
    },
    GetLocationData(){
      var _this=this;
      this.data = [];
      axios.post("http://localhost:8099/api/Readplc/Workinfo_information").then((x)=>{
        let GetAGVTaskData = []
          x.data.forEach(element => {
            let data = [
              element.jobID,element.drawingNo,element.quantity,element.heatID]
            GetAGVTaskData.push(data)
          });
          this.config.data = GetAGVTaskData
          this.config = {
            header: ['工单编号','图号', '数量', '炉号'],
            data: GetAGVTaskData,
            rowNum: 10, //表格行数
            headerHeight: 40,
            headerBGC: '#0f1325', //表头
            oddRowBGC: '#0f1325', //奇数行
            evenRowBGC: '#171c33', //偶数行
            index: true,
            columnWidth: [50,130,100,60,200],
            align: ['center'],
          }
      }).catch((x)=>{
        console.log(x);
      })
    },
  }
}
</script>

<style lang="scss" scoped>
$box-height: 520px;
$box-width: 630px;
#centerRight1 {
  padding: 10px;
  padding-top: 20px;
  
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .dv-scr-board {
       width: 100%;
      height: 450px;
    }
  }
}

</style>

 ´úÂë¹ÜÀí/´óÆÁ/src/views/centerRight5.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,108 @@
<template>
  <div id="centerRight1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-line" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span >炉号分布</span>
        </div>
      </div>
      <div class="d-flex jc-center body-box">
        <dv-scroll-board class="dv-scr-board" :config="config" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {
        header: ['库区','库排', '图号', '炉号'],
        data: [],
        rowNum: 7, //表格行数
        headerHeight: 35,
        headerBGC: '#0f1325', //表头
        oddRowBGC: '#0f1325', //奇数行
        evenRowBGC: '#171c33', //偶数行
        index: true,
        columnWidth: [70,70,80,100],
        align: ['center']
      }
    }
  },
  components: {},
  mounted() {
    this.GetLocationData();
    this.setData();
  },
  methods: {
    setData(){
      this.GetLocationData();
      setInterval(() => {
        this.GetLocationData()
      },100000)
    },
    GetLocationData(){
      var _this=this;
      this.data = [];
      this.$http.post("/api/Largescreen/Warehouse_area","查询中...").then((x)=>{
        let GetAGVTaskData = []
          x.data.forEach(element => {
            let data = [element.area,
             element.line,element.stationType,element.combined_heatNumber]
            GetAGVTaskData.push(data)
          });
          this.config.data = GetAGVTaskData
          this.config = {
            header: ['库区','库排', '图号', '炉号'],
            data: GetAGVTaskData,
            rowNum: 10, //表格行数
            headerHeight: 35,
            headerBGC: '#0f1325', //表头
            oddRowBGC: '#0f1325', //奇数行
            evenRowBGC: '#171c33', //偶数行
            index: true,
            columnWidth: [85,85,90,100],
            align: ['center'],
          }
      }).catch((x)=>{
        console.log(x);
      })
    },
  }
}
</script>

<style lang="scss" scoped>
$box-height: 410px;
$box-width: 630px;
#centerRight1 {
  padding: 10px;
  padding-top: 20px;
  
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .dv-scr-board {
       width: 100%;
      height: 340px;
    }
  }
}

</style>

 ´úÂë¹ÜÀí/´óÆÁ/src/views/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,169 @@
<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']" />
            <div class="title">
              <span class="title-text">太重WMS数据统计</span>
              <dv-decoration-6
                class="dv-dec-6"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
              />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="['#568aea', '#000000']"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- ç¬¬äºŒè¡Œ -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s">
              <span class="react-before"></span>
              <span class="text">库位数据分析</span>
            </div>
            <div class="react-right ml-3">
              <span class="text">任务信息统计</span>
            </div>
          </div>
          <div class="d-flex aside-width">
            <div class="react-right bg-color-blue mr-3">
              <span class="text fw-b">任务信息</span>
            </div>
            <div class="react-right mr-4 react-l-s">
              <span class="react-after"></span>
              <span class="text"
                >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
              >
            </div>
          </div>
        </div>

        <div class="body-box">
          <!-- ç¬¬ä¸‰è¡Œæ•°æ® -->
          <div class="content-box">
            <div>
              <dv-border-box-12>
                <centerLeft1 />
              </dv-border-box-12>
            </div> 

            <!-- <div>
              <dv-border-box-13 style="width: 600px;">
                <centerRight5 style="width: 600px;" />
              </dv-border-box-13>
            </div> -->

            <!-- ä¸­é—´ -->
            <div>
              <center />
            </div>
            <!-- ä¸­é—´ -->
            <!-- <div>
              <centerRight2 />
            </div> -->
            <div>
              <dv-border-box-13>
                <centerRight1 />
              </dv-border-box-13>
            </div>

          </div>

          <!-- ç¬¬å››è¡Œæ•°æ® -->
          <div class="content-box">
            <dv-border-box-13 style="width: 400px;">
              <bottomLeft />
            </dv-border-box-13>

            <div>
              <dv-border-box-12>
                <centerRight4 />
              </dv-border-box-12>
            </div>

            <div >
              <dv-border-box-12 style="width: 95%;">
              <bottomRight  />
            </dv-border-box-12>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin";
import { formatTime } from '../utils/index.js'
import centerLeft1 from './centerLeft1'
import centerLeft2 from './centerLeft2'
import centerRight1 from './centerRight1'
import centerRight2 from './centerRight2'
import centerRight4 from './centerRight4'
import centerRight5 from './centerRight5'
import center from './center'
import bottomLeft from './bottomLeft'
import bottomRight from './bottomRight'

export default {
  mixins: [ drawMixin ],
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    }
  },
  components: {
    centerLeft1,
    centerLeft2,
    centerRight1,
    centerRight2,
    centerRight4,
    centerRight5,
    center,
    bottomLeft,
    bottomRight
  },
  mounted() {
    document.title = '太重数据统计';
    this.timeFn()
    this.cancelLoading()
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  }
}
</script>

<style lang="scss">
@import '../assets/scss/index.scss';
</style>

 ´úÂë¹ÜÀí/´óÆÁ/vue.config.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,30 @@
const path = require('path')
const resolve = dir => {
  return path.join(__dirname, dir)
}
module.exports = {
  publicPath: './',
  chainWebpack: config => {
    config.resolve.alias
      .set('_c', resolve('src/components')) // key,value自行定义，比如.set('@@', resolve('src/components'))
  },
  lintOnSave: false,
  chainWebpack: (config) => {
    // ç§»é™¤ prefetch æ’件
    config.plugins.delete('prefetch');
    //自下定义title
    config.plugin('html').tap((args) => {
      args[0].title = '太重数据统计';
      
      return args;
    });

    // æˆ–者
    // ä¿®æ”¹å®ƒçš„选项：
    // config.plugin('prefetch').tap(options => {
    //   options[0].fileBlacklist = options[0].fileBlacklist || []
    //   options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
    //   return options
    // })
  }
}

 ´úÂë¹ÜÀí/´óÆÁ/yarn.lock

¶Ô±ÈÐÂÎļþ
ÎļþÌ«´ó