# 移动大屏-前端

**Repository Path**: onest/wf-data-view

## Basic Information

- **Project Name**: 移动大屏-前端
- **Description**: vue2实现的大屏展示
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 2
- **Created**: 2023-12-09
- **Last Updated**: 2024-10-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 搭建 vue2 开发环境

## 工欲善其事必先利其器———vscode 插件推荐

> 1. 汉化插件：Chinese (Simplified) (简体中文) Language Pack for Visual Studio
> 2. GitLens: 可以显示光标所在行上次编辑人及时间
> 3. IntelliJ IDEA Keybindings : pycharm 快捷键与 vscode 快捷键保持一致
> 4. TONGYI Lingma ：阿里出的智能代码提示插件
> 5. Unocss : 提供 Unocss 智能提示
> 6. Auto Rename Tag : 自动修改标签
> 7. Vetur: Vue 官方的语法插件
> 8. element-ui-helper : element-ui 语法插件
> 9. vue2-file-peek : 快速预览 vue 文件

## vscode 代码片段配置

文件-->首选项-->配置用户代码片段，选择 vue.json 文件，在里面添加以下代码

```json
	"vue": {
		"prefix": "!vue2-js",
		"body": [
		  "<!-- 组件用途 -->",
		  "<template>",
		  "    <div></div>",
		  "</template>",
		  "",
		  "<script>",
		  "export default {"
		  "    name: 'YourComponentName',",
		  "    data() {",
		  "        return {",
		  "        }",
		  "    }",
		  "}"
		  "</script>",
		  ""
		  "<style lang='scss' scoped></style>"
		],
		"description": "vue2 js 基础模板"
	  },
```

## 设置 cnpm 加快包下载速度

```bash
# 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 当遇到下载失败的包或下载速度慢时，可以使用cnpm来进行安装
```

# 1、创建项目

## 1.1 安装 vue-cli

```bash
npm install -g @vue/cli
```

## 1.2 创建项目

```bash
vue create {your-project-name}
```

## 1.3 选择项目类型

```bash
? Please pick a preset: (Use arrow keys)
# 选择vue2
> Default ([Vue 2] babel, eslint)
# ...
```

## 1.4 运行

```bash
cd {your-project-name}
npm run serve
```

# 2、项目配置

## 2.1 配置 element-ui

### 2.2.1 安装 element-ui 插件

```bash
npm install element-ui --save
```

### 2.2.2 导入 element-ui

```js
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI, { size: "default", zIndex: 3000 });
```

### 2.2.3 按需导入

```bash
# 安装插件
npm install babel-plugin-component -D
```

修改 bable.config.js,添加 plugins 节

```js
module.exports = {
  // ...
  plugins: [
    // ...
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk",
      },
    ],
  ],
};
```

## 2.2 配置路径别名 alias

修改 vue.config.js，加入 chainWebpack 配置节

```js
import path from "path";

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  transpileDependencies: true,
  // ...
  chainWebpack: {
    resolve: {
      alias: {
        "@": path.resolve("src"),
      },
    },
  },
});
```

## 2.3 Unocss 配置

### 2.3.1 安装插件

```bash
# 安装插件
# unocss解析 https://unocss.dev/interactive/
npm install --save-dev @unocss/webpack --save-dev
npm install --save-dev unocss
# 安装 sass 解析器
npm install --save-dev node-sass
npm install --save-dev sass-loader
```

### 2.3.2 vue.config.js 中配置 unocss

```js
const Unocss = require("@unocss/webpack").default;

module.exports = defineConfig({
  transpileDependencies: true,

  configureWebpack: {
    //...
    plugins: [new Unocss()],
  },
});
```

### 2.3.3 新建 uno.config.js，写入以下内容：

```js
import {
  defineConfig,
  presetUno,
  presetAttributify,
  transformerDirectives,
} from "unocss";

export default defineConfig({
  presets: [
    presetAttributify({
      /* preset options */
    }),
    presetUno(), // 添加 UnoCSS 的默认样式预设
  ],
  transformers: [transformerDirectives()],
  rules: [
    // 自定义宽度
    [/^wf-w-(\d+)$/, ([, d]) => ({ width: `${d / 4}rem` })],
    // 自定义高度
    [/^wf-h-(\d+)$/, ([, d]) => ({ height: `${d / 4}rem` })],
  ],
  shortcuts: [
    {
      // 居中布局
      "flex-center": "flex items-center justify-center",
      // 右对齐布局
      "flex-end": "flex items-center justify-end",
    },
  ],
});
```

### 2.3.4 编辑入口文件 main.js，添加 unocss 配置

```js
// 在element-ui的引入之后添加unocss配置
import "uno.css";
```

### 2.3.5 验证 unocss 是否有效

修改 App.vue 文件为以下内容：

```html
<template>
  <div id="app" flex flex-col items-center>
    <img alt="Vue logo" src="./assets/logo.png" />
    <div w-100 bg-red text-center>Welcome to Your Vue.js App</div>
    <el-button w-30 type="primary">按钮</el-button>
  </div>
</template>

<script>
  export default {
    name: "App",
    components: {},
  };
</script>
```

查看效果：
![Alt text](readme-images/001.png)

## 2.4 配置 vue-router

### 2.4.1 安装插件

```bash
npm install --save vue-router@3
```

### 2.4.2 新增路由文件 src/router/index.js，并写入如下内容

```js
import VueRouter from "vue-router";
import Vue from "vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "index",
    component: () => import("@/views/Index"),
    meta: {
      title: "首页",
      keepAlive: true,
    },
  },
  {
    path: "/404",
    name: "404",
    component: () => import("@/views/404"),
  },
  { path: "*", redirect: "/404" },
];

const createRouter = () =>
  new VueRouter({
    // mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }),
    routes,
  });

const router = createRouter();

export default router;
```

### 2.4.3 打开入口文件 main.js 添加如下代码：

```js
import Vue from "vue";
// 引入router
import router from "@/router";

Vue.use(Router);
```

### 2.4.4 验证 vue-router 是否有效

修改 Index.vue 文件为以下内容：

```html
<template>
  <div>
    <h1>首页</h1>
    <el-button type="primary">按钮</el-button>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  components: {
  }
}
```

启动首页，可以看到 Home 字样，在地址栏随便输入几个字符，跳转到 404 页面，可以看到 404 字样。

## 2.5 配置 vuex

### 2.5.1 安装插件

```bash
npm install vuex@^3.6.2
```

### 2.5.2 新增 store 文件 src/store/index.js，并写入如下内容

```js
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from './plugins/persistedState'

Vue.use(Vuex)

const store = new Vuex.Store({
  plugins: [
    createPersistedState( {
      storage: window.sessionStorage
      key: 'vuex'
    })
    ],
  modules: {
  },
  getters: {
  },
})

export default store
```

### 2.5.3 新增 store/plugins/persistedState.js，写入如下内容:

```js
export default function createPersistedState(options = {}) {
  return function (store) {
    let { key, storage } = options || {};
    let _key = key || "custom_vuex";
    let _storage = storage || window.localStorage;

    // 页面卸载前保存数据
    window.addEventListener("beforeunload", () => {
      _storage.setItem(_key, JSON.stringify(store.state));
    });

    try {
      const localState = _storage.getItem(_key);
      if (localState) {
        store.replaceState(JSON.parse(localState));
      }
    } catch (e) {
      console.error("本地存储数据异常");
    }
  };
}
```

### 2.5.4 验证 vuex 是否配置成功

#### 2.5.4.1 新增文件 src/store/modules/settings.js，并写入如下内容：

```js
const getDefaultState = () => {
  return {
    title: "大数据看板",
  };
};

const state = getDefaultState();

const mutations = {
  SET_TITLE: (state, title) => {
    state.title = title;
  },
};

const actions = {
  setTitle({ commit }, title) {
    commit("SET_TITLE", title);
  },
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
};
```

#### 2.5.4.2 新增文件 src/store/getters.js，并写入如下内容：

```js
const getters = {
  title: (state) => state.settings.title || "大数据看板",
};

export default getters;
```

#### 2.5.4.3 修改 store/index.js，写入如下内容：

```js
import settings from "./modules/settings";
import getters from "./getters";

const store = new Vuex.Store({
  // ..
  modules: {
    //..
    settings, // 引入settings模块
  },
  getters, // 引入getters
});
```

#### 2.5.4.4 修改 views/Index.vue，写入如下内容：

```html
<template>
  <div>
    <!-- 验证vuex是否配置成功，如果界面显示：“大数据看板”，表示vuex配置成功 -->
    <h2>{{ $store.state.settings.title }}</h2>
    <!-- 验证getters是否配置成功，如果界面显示：“大数据看板”，表示getters配置成功 -->
    <h2 c-red>{{ title}}</h2>
  </div>
</template>

<script>
  import { mapGetters } from "vuex";

  export default {
    computed: {
      ...mapGetters(["title"]),
    },
  };
</script>
```

## 2.6 axios 配置

### 2.6.1 安装插件

```bash
# 安装axios插件
npm install axios --save
# 安装coookie插件
npm install js-cookie --save
```

### 2.6.2 新建文件 src/utils/auth.js，并写入如下内容：

```js
import cookie from "js-cookie";

/**
 * 获取token
 * @returns {String}
 */
export function getToken() {
  return cookie.get("authorization");
}

/**
 * 设置token
 * @param {String} token
 */
export function setToken(token) {
  cookie.set("authorization", token);
}

/**
 * 移除token
 */
export function removeToken() {
  cookie.remove("authorization");
}
```

### 2.6.3 新建文件 src/utils/request.js，并写入如下内容：

```js
import axios from "axios";
import { getToken, removeToken } from "@/utils/auth";
import { MessageBox, Message } from "element-ui";

const service = axios.create({
  baseUrl: process.env.VUE_APP_BASE_API,
  timeout: 5000,
});

service.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers["Authorization"] = token;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

service.interceptors.response.use(
  (response) => {
    if (response.status === 200) {
      return response.data.data;
    } else {
      Message.error(
        response?.data?.data?.message || "系统发生未知错误，请稍后重试"
      );
      return Promise.reject(response);
    }
  },
  (error) => {
    const { url } = error.config;
    console.error("request has error: ", url, error);
    let errorResponse = undefined;
    const errorCode = error?.response?.status || 500;
    const errorMessage =
      error.response.data.message || "系统繁忙，请稍后重试...";
    if (errorCode === 500) {
      Message.error("系统发生未知错误，请稍后重试");
    } else if (errorCode === 401) {
      MessageBox.alert("您的登录凭证失效，请重新登录", "系统提示", {
        confirmButtonText: "确定",
        type: "error",
        callback: () => removeToken(),
      });
    } else if (errorCode === 404) {
      let message = errorMessage || "对不起，您访问的资源不存在";
      Message.error(message);
    } else {
      Message.error(errorMessage);
    }
    errorResponse = { code: errorCode, message: errorMessage };
    return Promise.reject(errorResponse);
  }
);

export default service;
```

## 2.7 集成 dataV

### 2.7.1 安装插件

```bash
# 安装dataV,官网地址：http://datav.jiaminghi.com/
npm install @jiaminghi/data-view
```

### 2.7.2 修改入口文件 src/main.js，加入如下内容：

```js
// 引入dataV
import dataV from "@jiaminghi/data-view";

Vue.use(dataV);
```

### 2.7.3 修改 src/views/Index.vue 的 template 节，内容如下：

```html
<template>
  <dv-full-screen-container>
    <div bg-red h-full w-full pos-relative>
      <div font-size-20>测试dataV全屏容器</div>
      <div pos-absolute left-0 bottom-0 w-full font-size-20 bg-blue>
        底部文字
      </div>
    </div>
  </dv-full-screen-container>
</template>
```

### 2.7.4 启动项目，在浏览器中打开首页，调整页面大小，可以看到 dataV 全屏容器的效果。

![Alt text](readme-images/002.png)

## 2.8 集成 echarts

### 2.8.1 安装插件

```bash
# 安装echarts
npm install echarts --save
```

### 2.8.2 新建文件 src\views\Test\Chart.vue，并写入如下内容：

```html
<template>
  <div w-full h-full>
    <div id="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'EchartTest',
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const ctx = document.getElementById('chart');
      const myChart = echarts.init(ctx);
      myChart.setOption({
        xAxis: {
          data: ['G20', '智博会', '东盟', '东盟', 'G20', '智博会']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [100, 200, 200, 100, 300, 200],
          type: 'bar'
        }]
      });
    }
  }
};
</script>

<style>
#chart {
  width: 600px;
  height: 400px;
}
</style>
```

### 2.8.3 修改 src\router\index.js，并加入如下内容：

```js
// 注意，{ path: '*', redirect: '/404' } 要在routers的最后
const routes = [
  //...
 {
        path: '/test/chart',
        name: 'test-chart',
        component: () => import('@/views/Test/Chart'),
        meta: {
            title: '图表',
        }
  }
  //...
```

### 2.8.4 浏览器输入http://localhost:8000/#/test/chart，可以查看到图标的效果了

![Alt text](readme-images/003.png)

### 2.8.5 美化Echarts图表

上节中echart图表样式不美观，我们使用https://www.isqqw.com/里面的图表进行美化。由于代码比较多，这里不贴出来了，大家可以去 src\views\Index\components\ProductTotal.vue 里面查看。

先看下效果：

![Alt text](readme-images/004.png)

页面布局我们下一章中详解。


# 3、页面布局

> 常用大屏布局

![Alt text](readme-images/005.png)

由于大屏布局比较复杂，代码较多，所以我们对首页进行布局优化（组件化）。

1、新增文件夹 src/views/Index \
2、把 src/views/Index.vue 移动到 src/views/Index/Index.vue \
3、修改 src/router/index.js 的path: '/'的路由，指向/views/Index/Index.vue \
4、新增文件夹 src/views/Index/components，用于存放Index私有组件 \
5、新增文件夹 src/components，用于存放公共组件 

## 3.1 首页布局

### 3.1.1 修改 src/views/Index/Index.vue 文件的 template 节，内容如下：
```html
<template>
  <dv-full-screen-container sd-bg-222255 sd-c-ffffff>
    <!-- header -->
    <div h-80px flex-center>
      头部
    </div>
    <!-- content -->
    <div flex flex-col style="height: calc(100% - 80px)">
      <!-- content-row-1 -->
      <div sd-flex-3 flex justify-between>
        <div sd-flex-1 flex flex-col>
          <div sd-flex-1 flex-center>左1图表</div>
          <div sd-flex-1 flex-center>左2图表</div>
        </div>
        <div sd-flex-3 p-t-10 flex-center>主图</div>
        <div sd-flex-1 flex flex-col>
          <div sd-flex-1 flex-center>右1图表</div>
          <div sd-flex-1 flex-center>右2图表</div>
        </div>
      </div>
      <!-- content-row-2 -->
      <div sd-flex-2 flex justify-between>
        <div sd-flex-1 flex-center>底1图表</div>
        <div sd-flex-1 flex-center>底2图表</div>
        <div sd-flex-1 flex-center>底3图表</div>
        <div sd-flex-1 flex-center>底4图表</div>
      </div>
    </div>
  </dv-full-screen-container>
</template>
```

## 3.2 头部布局

```html
布局分析：
 1. 头部高度固定，两侧有动画装饰，中间有标题
 2. 有多个页面，头部布局一致，标题不同
```

### 3.2.1 新建文件 src/components/Header.vue，并写入如下内容：

```html
<!-- 组件用途 -->
<template>
  <div id="header" flex justify-between>
    <!-- 左侧装饰 -->
    <dv-decoration-1 class="sd-decoration-mini" />
    <!-- 中间标题容器 -->
    <div pos-relative w-full>
      <div pos-absolute w-full text-center font-size-12>
        <!-- 标题 -->
        <span min-w-300px sd-bg-222255 p-l-10 p-r-10>{{ title }}</span>
      </div>
      <!-- 标题两侧装饰 -->
      <div w-full flex justify-center flex-gap-10>
        <dv-decoration-8 class="sd-decoration" />
        <dv-decoration-8 :reverse="true" class="sd-decoration" />
      </div>
    </div>
    <!-- 右侧装饰 -->
    <dv-decoration-1 class="sd-decoration-mini" style="transform: scaleX(-1)" />
  </div>
</template>

<script>
export default {
  name: "SfHeader",
  props: {
    title: String,
  },
};
</script>

<style lang='scss' scoped>
$decoration-width: 400px;
$decoration-height: 80px;

.sd-decoration {
  width: $decoration-width;
  height: $decoration-height;
}

.sd-decoration-mini {
  width: $decoration-width;
  height: $decoration-height / 2;
}
</style>
```

### 3.2.2 新增文件 src/components/index.js，并写入如下内容：

```js
// 全局组件注册
// 公共Header
import WfHeader from '@/components/Header/index.vue';

export default {
    install: (app) => {
        app.component('WfHeader', WfHeader);
    }
}
```

### 3.2.3 应用公共Header组件

修改 src/views/Index/Index.vue 文件的 template 节，把WfHeader加入到header容器中，具体代码如下：

```html
<template>
  <dv-full-screen-container sd-bg-222255 sd-c-ffffff>
    <!-- header -->
    <div b-2-solid-ffffff h-80px flex-center>
      <!-- 要加入的代码 -->
      <WfHeader :title="title" />
    </div>
  </dv-full-screen-container>
</template>
```

## 3.3 加入echart图表

在 “左1图表” 位置放入我们优化好的echart图表组件，代码如下：

```html
<template>
  <dv-full-screen-container sd-bg-222255 sd-c-ffffff>
    <!-- header -->
    <WfHeader :title="title" />
    <!-- content -->
    <div flex flex-col style="height: calc(100% - 80px)">
      <!-- content-row-1 -->
      <div sd-flex-3 flex justify-between>
        <div sd-flex-1 flex flex-col>
          <div sd-flex-1 flex-center>左1图表</div>
          <div sd-flex-1 flex-center>左2图表</div>
        </div>
      </div>
    </div>
    <!-- //... -->
  </dv-full-screen-container>
</template>


<script>
// 引入优化后的echart图表组件
import ProductTotal from "./components/ProductTotal.vue";

export default {
  name: "IndexPage",
  // 注册局部组件
  components: { ProductTotal },
  data() {
    return {
      title: "大数据看板",
    }
  }
}
</script>
```
效果：

![Alt text](readme-images/006.png)

## 3.4 地图主图