可视化大屏系统是一个类似在线ps设计器，它需要非常多素材资源，才能非常简单、快速的设计各种大屏。可视化大屏系统由三个站点构成：可视化大屏后端站点，可视化大屏设计器前端站点、可视化大屏资源文件站点组成。

🚀可视化大屏设计器前端站点:用户界面呈现、用户交互

🚀可视化大屏设计器后端站点:数据处理、业务逻辑，保障其安全性，并将上传的图片资源，视屏资源存放在文件资源站点中。

🚀可视化大屏设计器资源文件站点:提供2w+的echart组件实例、提供全国4W+的乡镇地图信息，图片，视屏资源等等。

可视化大屏设计器前端站点部署介绍：

Src/configs/build.js 结构说明

const apiUrl = "http://bg.kyform.cn:8086"; //可视化大屏后端站点访问路径
const echartUrl = "http://f.kyform.cn"; //可视化大屏资源文件站点访问路径
export default {
  apiUrl: apiUrl,
  echartUrl: echartUrl,
  getechartImg: (code) => {
    return echartUrl + "/echartdb/" + code + "/" + code + ".png";
  },
  getechartjson: (code, fun) => {
    window.$.get(echartUrl + "/echartdb/" + code + "/contex.json", function(
      geoJson
    ) {
      fun({ data: geoJson.jscode, code: 0 });
    });
  },
  getmapjson: (mapJsonPath, fun) => {
    window.$.get(
      echartUrl + "/echartdb/" + mapJsonPath.replace("\\", "/"),
      function(geoJson) {
        fun({ data: geoJson, code: 0 });
      }
    );
  },
  isDemo: true,
  // apiUrl: 'http://localhost:8086',
};

可视化大屏设计器后端站点部署

kylinworkflowapi\src\main\resources\application.properties 文件目录结构

mybatis-plus.type-aliases-package=com.flowwork.api.mapper
mybatis-plus.mapper-locations=classpath:mapper 
mybatis-plus.type-enums-package=com.flowwork.api.enums
mybatis-plus.configuration.default-enum-type-handler=org.apache.ibatis.type.EnumOrdinalTypeHandler
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/bigscreen?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true
spring.datasource.username=root
spring.datasource.password=root123456
#spring.datasource.password=root
spring.datasource.max-idle=10
spring.datasource.max-wait=10000
spring.datasource.min-idle=5
spring.datasource.initial-size=5
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8
logging.config=classpath:log4j2.xml
server.servlet.session.timeout=30m
spring.thymeleaf.cache=false
pagehelper.helper-dialect=MYSQL
pagehelper.reasonable=true
pagehelper.support-methods-arguments=true
pagehelper.params=count=countSql
server.port=8086
spring.servlet.multipart.max-file-size=5MB
spring.servlet.multipart.max-request-size=5MB
sysparam.echarimg=D:\\nginx-1.20.2\\html\\echartdb

spring.datasource.url：数据库连接地址

spring.datasource.username:数据库账号

spring.datasource.password：数据库密码

sysparam.echarimg：文件上传的目录，这里必须要配置到资源文件站点的bigtemp文件夹中

可视化大屏设计器资源文件站点结构如下图

Bigtemp：是可视化大屏设计器后端站点上传的资源文件。

Mapjson：是4W+全国乡镇地图geojson

其它的文件夹：则是2w+的echart图表例子