员工概况的静态页面布局

2020-05-13 10:43:02 +08:00 · 2020-05-13 10:43:02 +08:00 · a32aa2992e
commit a32aa2992e
parent 0beb562a98 c2e661b1a8
9 changed files with 202 additions and 32 deletions
--- a/config/index.js
+++ b/config/index.js
@ -17,6 +17,11 @@ module.exports = {
        target: 'http://demo.open.renren.io',
        changeOrigin: true
      },
+      '/sys': {
+        // target: 'http://demo.open.renren.io',
+        target: 'http://10.0.1.180:8001',
+        changeOrigin: true
+      },
    },

    // Various Dev Server settings
--- a/index.html
+++ b/index.html
@ -7,7 +7,7 @@
  <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>数字化管理系统</title>
-  <script src="./static/plugins/mock-1.0.0-beta3/mock-min.js"></script>
+  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
 </head>

 <body>
--- a/package-lock.json
+++ b/package-lock.json
@ -3827,6 +3827,14 @@
        "safer-buffer": "^2.1.0"
      }
    },
+    "echarts": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.7.0.tgz",
+      "integrity": "sha512-NlOTdUcAsIyCCG+N4uh0ZEvXtrPW2jvcuqf03RyqYeCKzyPbiOQ4I3MdKXMhxG3lBdqQNdNXVT71SB4KTQjN0A==",
+      "requires": {
+        "zrender": "4.3.0"
+      }
+    },
    "editorconfig": {
      "version": "0.15.3",
      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
@ -19771,6 +19779,11 @@
          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
        }
      }
+    },
+    "zrender": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.0.tgz",
+      "integrity": "sha512-Dii6j2bDsPkxQayuVf2DXJeruIB/mKVxxcGRZQ9GExiBd4c3w7+oBuvo1O/JGHeFeA1nCmSDVDs/S7yKZG1nrA=="
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -11,7 +11,8 @@
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
-    "build": "gulp"
+    "build": "node build/build.js",
+    "gulp": "gulp"
  },
  "dependencies": {
    "axios": "^0.19.2",
--- a/src/main.js
+++ b/src/main.js
@ -10,21 +10,21 @@ import '@/assets/scss/index.scss'
 import httpRequest from '@/utils/httpRequest' // api: https://github.com/axios/axios
 import { isAuth } from '@/utils'
 // import cloneDeep from 'lodash/cloneDeep'
+import echarts from 'echarts'
+
 import VCharts from 'v-charts'
 Vue.use(VCharts)
-// import echarts from 'echarts/lib/echarts'
-// console.log(111)
-// console.log(echarts)
-// debugger
+
 Vue.use(VueCookie)
 Vue.config.productionTip = false

 // 非生产环境, 适配mockjs模拟数据                 // api: https://github.com/nuysoft/Mock
-if (process.env.NODE_ENV !== 'production') {
-  require('@/mock')
-}
+// if (process.env.NODE_ENV !== 'production') {
+//   require('@/mock')
+// }

 // 挂载全局
+Vue.prototype.$echarts = echarts // echarts画图
 Vue.prototype.$http = httpRequest // ajax请求方法
 Vue.prototype.isAuth = isAuth     // 权限方法

--- a/src/views/business/staff/staff-archives/index.vue
+++ b/src/views/business/staff/staff-archives/index.vue
@ -1,5 +1,37 @@
 <template>
  <div class="staff-archives">
    员工档案
+    <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
  </div>
 </template>
+
+<script>
+export default {
+  data () {
+    return {
+    }
+  },
+  mounted () {
+    this.handleDrawLine()
+  },
+  methods: {
+    handleDrawLine () {
+      let myChart = this.$echarts.init(document.getElementById('myChart'))
+      // 绘制图表
+      myChart.setOption({
+        title: { text: '在Vue中使用echarts' },
+        tooltip: {},
+        xAxis: {
+          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+        },
+        yAxis: {},
+        series: [{
+          name: '销量',
+          type: 'bar',
+          data: [5, 20, 36, 10, 10, 20]
+        }]
+      })
+    }
+  }
+}
+</script>
--- a/src/views/business/staff/staff-profile/componments/chart-form/index.vue
+++ b/src/views/business/staff/staff-profile/componments/chart-form/index.vue
@ -3,7 +3,7 @@
  <div class="staff-archives-charts">
    <div class="staff-archives-title">性别分布</div>
    <div>
-      <!-- <ve-ring :data="chartData"></ve-ring> -->
+      <ve-ring height="300px" :data="chartData" :extend="chartExtend" :settings="chartSettings"></ve-ring>
    </div>
  </div>
 </template>
@ -11,17 +11,47 @@
 <script>
 export default {
  data () {
+    this.chartExtend = {
+      legend: {
+        orient: 'vertical',
+        x: 'center',
+        y: '80%',
+        show: true
+      },  // 隐藏legend
+      color: ['#09f', '#eeeeee', '#468251', '#666666'],
+      series: {
+        center: ['50%', '40%']
+      }
+    }
    return {
      chartData: {
-        columns: ['日期', '访问用户'],
+        columns: ['分类', '数量'],
        rows: [
-          { '日期': '1/1', '访问用户': 1393 },
-          { '日期': '1/2', '访问用户': 3530 },
-          { '日期': '1/3', '访问用户': 2923 },
-          { '日期': '1/4', '访问用户': 1723 },
-          { '日期': '1/5', '访问用户': 3792 },
-          { '日期': '1/6', '访问用户': 4593 }
+          { '分类': '0-3年', '数量': '50' },
+          { '分类': '3-5年', '数量': '80' },
+          { '分类': '5-8年', '数量': '58' },
+          { '分类': '8-10年', '数量': '58' }
        ]
+      },
+      chartSettings: {
+        radius: ['60px', '80px'],
+        itemStyle: {
+          textAlign: 'center'
+        },
+        label: {
+          formatter: params => {
+            console.log(params)
+            return `{a|${params.data.name}\n${params.data.value}人}`
+          },
+          rich: {
+            a: {
+              color: '#ccc',
+              textAlign: 'center'
+
+            }
+          }
+        }
+
      }
    }
  },
@ -36,6 +66,6 @@ export default {

 <style lang='scss' scoped>
 .staff-archives-charts {
-  width: 50%;
+  // width: 50%;
 }
 </style>
--- a/src/views/business/staff/staff-profile/componments/query-form/index.vue
+++ b/src/views/business/staff/staff-profile/componments/query-form/index.vue
@ -4,19 +4,36 @@
    <div class="staff-archives-title">条件筛选</div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline staff-archives-form">
      <el-form-item label="选择部门">
-        <!-- <el-select v-model="formInline.region" placeholder="请选择业务部门">
-            <el-option label="全部" value="all"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
+        <el-input placeholder="请选择部门" @focus="isChoose=true" readonly :value="formInline.input3">
+          <!-- <i
+            slot="suffix"
+            class="el-input__icon el-icon-arrow-up"
+            :style="{transform:isChoose?'rotate(0deg)':'rotate(-180deg)'}"
+            @click="isChoose = !isChoose"
+          ></i>-->
+        </el-input>
+        <!-- <div :class="{'staff-archives-choose':true,'staff-archives-choose1' :isChoose}">
+          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
+            <span class="custom-tree-node" slot-scope="{ node, data }">
+              <span>{{ data.label }}</span>
+              <span>({{ data.number }})人</span>
+            </span>
+          </el-tree>
+        </div>-->
+        <!-- <el-select v-model="value" placeholder="请选择">
+          <el-option>
+            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+          </el-option>
        </el-select>-->
-        <el-cascader
+        <!-- <el-cascader
          v-model="formInline.value"
          :options="options"
          :props="{ expandTrigger: 'hover' }"
          @change="handleChange"
-        ></el-cascader>
+        ></el-cascader>-->
      </el-form-item>

-      <el-form-item label="选择时间段(仅对员工数量生效)">
+      <el-form-item :label="`选择时间段\n(仅对员工数量生效)`">
        <el-date-picker
          v-model="formInline.value2"
          type="daterange"
@ -33,6 +50,19 @@
        <el-button type="primary" @click="onSubmit">重置</el-button>
      </el-form-item>
    </el-form>
+
+    <el-dialog title="提示" :visible.sync="isChoose" width="30%">
+      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <span>{{ data.label }}</span>
+          <span>({{ data.number }})人</span>
+        </span>
+      </el-tree>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="isChoose = false">取 消</el-button>
+        <el-button type="primary" @click="onsumbit">确 定</el-button>
+      </span>
+    </el-dialog>
  </div>
 </template>

@ -40,7 +70,36 @@
 export default {
  data () {
    return {
-      formInline: {},
+      isChooseText: '',
+      isChoose: true,
+      data: [{
+        label: '业务前台',
+        number: 24,
+        children: [{
+          label: '商务中心',
+          number: 10
+        }, {
+          label: '运营中心',
+          number: 12
+        }]
+      }, {
+        label: '业务中台',
+        number: 25,
+        children: [{
+          label: '产品中心',
+          number: 12
+        }, {
+          label: '客服中心',
+          number: 13
+        }]
+      }],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      formInline: {
+        input3: ''
+      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
@ -268,11 +327,37 @@ export default {
  computed: {},
  beforeMount () { },
  mounted () { },
-  methods: {},
+  methods: {
+    onsumbit () {
+      this.formInline.input3 = this.isChooseText
+      this.isChoose = false
+    },
+    handleNodeClick (a, b) {
+      this.isChooseText = a.label
+
+      console.log(this.formInline.input3)
+    }
+  },
  watch: {}

 }
 </script>

-<style lang='' scoped>
+<style lang='scss' scoped>
+.el-input__icon {
+  transition: all 0.5s;
+}
+.staff-archives-choose {
+  margin: 2px;
+  height: 200px;
+  overflow: auto;
+  transition: all 0.3s;
+  position: relative;
+  border: 1px solid #dcdfe6;
+}
+.staff-archives-choose1 {
+  height: 0px;
+  opacity: 0;
+  overflow: hidden;
+}
 </style>
--- a/src/views/business/staff/staff-profile/index.vue
+++ b/src/views/business/staff/staff-profile/index.vue
@ -7,11 +7,11 @@
    <el-card>
      <employees-number />
    </el-card>
-    <el-card>
-      <div class="staff-archives-chart">
-        <chart-form v-for="i in 10" />
-      </div>
-    </el-card>
+    <div class="staff-archives-chart">
+      <el-card v-for="i in 10">
+        <chart-form />
+      </el-card>
+    </div>
  </div>
 </template>

@ -59,5 +59,9 @@ export default {
 .staff-archives-chart {
  display: flex;
  flex-wrap: wrap;
+  justify-content: space-between;
+  > div {
+    width: 49.6%;
+  }
 }
 </style>