代码提交

2023-02-12 15:26:01 +08:00 · 2023-02-12 15:26:01 +08:00 · c46cb81bb4
parent bd7259b9f7
commit c46cb81bb4
10 changed files with 477 additions and 56 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1122,7 +1122,6 @@
      "version": "7.20.1",
      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.20.1.tgz",
      "integrity": "sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==",
-      "dev": true,
      "requires": {
        "regenerator-runtime": "^0.13.10"
      }
@ -1182,6 +1181,56 @@
        "@hapi/hoek": "^9.0.0"
      }
    },
+    "@jiaminghi/bezier-curve": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz",
+      "integrity": "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
+    "@jiaminghi/c-render": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz",
+      "integrity": "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/bezier-curve": "*",
+        "@jiaminghi/color": "*",
+        "@jiaminghi/transition": "*"
+      }
+    },
+    "@jiaminghi/charts": {
+      "version": "0.2.18",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz",
+      "integrity": "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/c-render": "^0.4.3"
+      }
+    },
+    "@jiaminghi/color": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz",
+      "integrity": "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
+    },
+    "@jiaminghi/data-view": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/data-view/-/data-view-2.10.0.tgz",
+      "integrity": "sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/charts": "*"
+      }
+    },
+    "@jiaminghi/transition": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz",
+      "integrity": "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
    "@jridgewell/gen-mapping": {
      "version": "0.1.1",
      "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@ -6226,8 +6275,7 @@
    "regenerator-runtime": {
      "version": "0.13.10",
      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz",
-      "integrity": "sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==",
-      "dev": true
+      "integrity": "sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw=="
    },
    "regenerator-transform": {
      "version": "0.15.0",
--- a/package.json
+++ b/package.json
@ -8,6 +8,7 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
+    "@jiaminghi/data-view": "^2.10.0",
    "axios": "^1.1.3",
    "core-js": "^3.8.3",
    "echarts": "^5.4.0",
--- a/src/assets/images/itemBtn.png
+++ b/src/assets/images/itemBtn.png
--- a/src/assets/images/itemImg.png
+++ b/src/assets/images/itemImg.png
--- a/src/assets/images/notice-item.png
+++ b/src/assets/images/notice-item.png
--- a/src/assets/images/stratHead.png
+++ b/src/assets/images/stratHead.png
--- a/src/main.js
+++ b/src/main.js
@ -5,6 +5,9 @@ import '../src/assets/font/font.less'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 Vue.use(ElementUI)
+import dataV from '@jiaminghi/data-view'
+
+Vue.use(dataV)
 // import Plugin from 'v-fit-cdcolumns';
 // Vue.use(Plugin);
 import * as echarts from 'echarts'
--- a/src/router.js
+++ b/src/router.js
@ -24,5 +24,10 @@ export default new Router({
      name: 'index',
      component: () => import ('./view/index.vue')
    },
+    {
+      path: '/smartPage',
+      name: 'smartPage',
+      component: () => import ('./view/smartPage.vue')
+    },
  ]
 })
--- a/src/view/index.vue
+++ b/src/view/index.vue
@ -204,8 +204,11 @@
        </div>
      </div>
      <div class="middleBottom">
-        <div class="menuBtn"  :class="{'menuBtn1' : menuAc == index}" v-for="(item,index) in menu" :key="index" @click="handelBtn(index)">
-          <img :src="item.icon"/>
+
+          <div class="menuBtn" :class="{ 'menuBtn1': menuAc == index }" v-for="(item, index) in menu" :key="index"
+            @click="handelBtn(index)">
+            <img :src="item.icon" />
+
      </div>
    </div>
    <div class="middleBottomIcon">
@ -370,7 +373,7 @@ export default {
          num: '在线'
        }
      ],
-      menu:[
+      menu: [
        {
          icon: require("@/assets/images/zongti.png")
        },
@ -394,17 +397,17 @@ export default {
  },
  methods: {
    //菜单切换
-     handelBtn(index){
+    handelBtn(index) {
      this.menuAc = index
      if (index == 0) {
        this.menu[0].icon = require("@/assets/images/zongtiAc.png")
        this.menu[1].icon = require("@/assets/images/zhihui.png")
        this.menu[2].icon = require("@/assets/images/shebei.png")
-      }else if (index == 1) {
+      } else if (index == 1) {
        this.menu[0].icon = require("@/assets/images/zongti.png")
        this.menu[1].icon = require("@/assets/images/zhihuiAc.png")
        this.menu[2].icon = require("@/assets/images/shebei.png")
-      }else if (index == 2) {
+      } else if (index == 2) {
        this.menu[0].icon = require("@/assets/images/zongti.png")
        this.menu[1].icon = require("@/assets/images/zhihui.png")
        this.menu[2].icon = require("@/assets/images/shebeiAc.png")
@ -1618,7 +1621,8 @@ export default {
  position: relative;
  display: flex;
  justify-content: center;
-   .middleBottom{
+
+  .middleBottom {
    width: 52%;
    height: 10%;
    display: flex;
@ -1627,16 +1631,19 @@ export default {
    position: absolute;
    bottom: -26px;
    z-index: 999;
-      .menuBtn{
-        width:142px;
-        height:52px
+
+    .menuBtn {
+      width: 142px;
+      height: 52px
    }
-      .menuBtn1{
-        width:188px;
-        height:74px
+
+    .menuBtn1 {
+      width: 188px;
+      height: 74px
    }
  }
-    .middleBottomIcon{
+
+  .middleBottomIcon {
    z-index: 100;
    width: 1115px;
    height: 57px;
@ -1685,15 +1692,18 @@ export default {
        display: inline-block;

      }
-      .span0{
+
+      .span0 {
        background-image: url(../assets/images/select-font.png);
        background-size: 100% 100%;
      }
-      .span1{
+
+      .span1 {
        background-image: url(../assets/images/default-font.png);
        background-size: 100% 100%;
        margin-left: 6px;
      }
+
      .hall-icon span {
        background-size: 100% 100%;

@ -2221,11 +2231,13 @@ export default {
      margin-top: 7px;
      color: #4bbfde
    }
-    .item-value3{
+
+    .item-value3 {
      color: #ebad22;
    }
-    .item-value4{
-      color:#2c6e43
+
+    .item-value4 {
+      color: #2c6e43
    }
  }

--- a/src/view/smartPage.vue
+++ b/src/view/smartPage.vue
@ -0,0 +1,352 @@
+<template>
+    <div class="container">
+        <div class="left-content">
+            <!-- 排班管理 -->
+            <div class="work-force">
+                <div class="title">
+                    <p class="titleText" text="排班管理" style="font-family: maleGod">
+                        排班管理
+                    </p>
+                    <!-- <p class="work-time">
+                        <el-date-picker v-model="workTime" type="date" placeholder="选择日期">
+                        </el-date-picker>
+                    </p> -->
+                </div>
+                <!-- 当前值班人员 -->
+                <div class="nowWork">
+                    <p class="titleText" text="当前值班人员" style="font-family: maleGod;">
+                        当前值班人员
+                    </p>
+                    <div class="work-items">
+                        <p class="work-item">
+                            <img src="../assets/images/itemImg.png" alt="">
+                            <span>刘伟</span>
+                        </p>
+                        <p class="work-item">
+                            <img src="../assets/images/itemImg.png" alt="">
+                            <span>李坤霞</span>
+                        </p>
+                        <p class="work-item">
+                            <img src="../assets/images/itemImg.png" alt="">
+                            <span>蒋玲</span>
+                        </p>
+                    </div>
+                </div>
+                <!-- 中午值班人员 -->
+                <div class="wuWork">
+                    <p class="titleText" text="中午值班人员" style="font-family: maleGod;">
+                        中午值班人员
+                    </p>
+                    <div class="work-items">
+                        <p class="work-item">
+                            <img src="../assets/images/itemImg.png" alt="">
+                            <span>刘伟</span>
+                        </p>
+
+                    </div>
+                </div>
+                <div class="itemBtn">
+                    <span>查看排班</span>
+                </div>
+            </div>
+            <!-- 起点业务 -->
+            <div class="start-business">
+                <div class="title">
+                    <p class="titleText" text="起点业务" style="font-family: maleGod">
+                        起点业务
+                    </p>
+                </div>
+                <div style="width: 100%;height:calc(100% - 40px)">
+                    <dv-scroll-board :config="config" style="height:100%" />
+                </div>
+            </div>
+            <!-- 学习资料 -->
+            <div class="study-means">
+                <div class="title">
+                    <p class="titleText" text="学习资料" style="font-family: maleGod">
+                        学习资料
+                    </p>
+                </div>
+                <div style="width: 100%;height:calc(100% - 40px)">
+
+                    <dv-scroll-board :config="studyData" style="height:100%" />
+                </div>
+            </div>
+        </div>
+        <div class="right-content">
+            <!-- 任务通知 -->
+            <div class="notice">
+                <div class="title">
+                    <p class="titleText" text="任务通知" style="font-family: maleGod">
+                        任务通知
+                    </p>
+                </div>
+                <!-- 交办的任务 -->
+                <div class="my-notice">
+                    <p class="titleText" text="我交办的任务" style="font-family: maleGod">
+                        我交办的任务
+                    </p>
+                </div>
+                <div class="jiao-notice">
+                    <p class="titleText" text="我承办的任务" style="font-family: maleGod">
+                        我承办的任务
+                    </p>
+                </div>
+
+
+            </div>
+            <!-- 服务 -->
+            <div class="service">
+                <div class="title">
+                    <p class="titleText" text="服务" style="font-family: maleGod">
+                        服务
+                    </p>
+                </div>
+
+            </div>
+
+        </div>
+    </div>
+</template>
+<script>
+
+export default {
+    name: 'smartPage',
+    components: {
+    },
+    data() {
+        return {
+            workTime: '',
+            config: {
+                header: ['排名', '业务类型', '占比'],
+                data: [
+                    [1, '过户', '53.85%'],
+                    [2, '电费结算协议变更', '19.23%'],
+                    [3, '更名', '3.5%'],
+                    [4, '低压居民新装增000', '15.30%'],
+                    [5, '客户基础信息000', '3.85%'],
+                    [6, '低压非居民新装000', '3.85%'],
+                    [7, '过户', '3.85%'],
+                    [8, '更名', '3.85%'],
+                    [9, '电费', '3.85%'],
+                    [10, '过户', '3.85%']
+                ],
+                oddRowBGC: 'transparent',
+                evenRowBGC: '#102c50',
+                waitTime: 10000,
+                headerBGC: 'transparent',
+                rowNum: 6,
+                columnWidth: [80],
+                align: ['center']
+            },
+            studyData: {
+                header: ['序号', '标题', '时间'],
+                data: [[1, '关于进一步规范...', '2023-12-12 14:58'], [2, '关于重申在全市... ', '2023-12-12 14:58'], [3, '南京供电公司营...', '2023-12-12 14:58'], [4, '关于重申在全市...', '2023-12-12 14:58']],
+                oddRowBGC: 'transparent',
+                evenRowBGC: '#102c50',
+                waitTime: 10000,
+                headerBGC: 'transparent',
+                rowNum: 4,
+                columnWidth: [80],
+                align: ['center']
+            },
+            // 我交办的任务
+            myNotice1: [
+                {
+                    name: '任务总数',
+                    num: 3,
+                },
+                {
+                    name: '已完成',
+                    num: 3,
+                },
+                {
+                    name: '未完成',
+                    num: 0
+                }
+            ],
+            // 我承办的任务
+            myNotice2: [{
+                name: '任务总数',
+                num:2,
+            },
+            {
+                name: '已完成',
+                num: 1,
+            },
+            {
+                name: '未完成',
+                num: 1
+            }
+            ]
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.el-date-editor.el-input {
+    width: 100px;
+
+}
+
+.el-input__inner {
+    height: 30px !important;
+}
+
+/deep/ .dv-scroll-board {
+    color: #f8fcfd;
+}
+
+/deep/ .dv-scroll-board .header {
+    background-image: url(../assets/images/stratHead.png) !important;
+}
+
+/deep/ .start-business .dv-scroll-board .rows .row-item>div:nth-child(3) {
+    font-family: maleGod;
+    color: #40accd;
+    font-size: 14px;
+}
+
+.container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+}
+
+.left-content,
+.right-content {
+    // position: absolute;
+    width: 20.6%;
+    // top: 0;
+    height: 100%;
+}
+
+.left-content>div,
+.right-content>div {
+    width: 100%;
+    background-image: url(../assets/images/border.png);
+    background-size: 100% 100%;
+    margin-bottom: 5px;
+    padding: 13px;
+    box-sizing: border-box;
+}
+
+.left-content,
+.right-content {
+
+
+
+    // 左边内容
+    .work-force {
+        height: 39%;
+
+        .itemBtn {
+            width: 356px;
+            height: 35px;
+            text-align: center;
+            background-size: 100% 100%;
+            margin: 0 auto;
+            line-height: 35px;
+            color: #fff;
+            font-size: 14px;
+            background-image: url(../assets/images/itemBtn.png);
+        }
+
+        .nowWork,
+        .wuWork {
+            .titleText {
+                margin-bottom: 3px;
+            }
+
+            .work-items {
+                display: flex;
+                justify-content: space-evenly;
+
+                .work-item>img {
+                    width: 83px;
+                    height: 76px;
+                }
+
+                span {
+                    display: block;
+                    text-align: center;
+                    color: #fff;
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+
+    .start-business {
+        height: 35%;
+    }
+
+    @media screen and (min-height:980px) {
+        .wuWork>.titleText {
+            margin-top: 15px;
+        }
+
+        .nowWork,
+        .wuWork {
+            .titleText {
+                margin-bottom: 15px !important;
+            }
+
+        }
+
+        .itemBtn {
+            margin: 8px auto 0 !important;
+        }
+    }
+
+    .study-means {
+        height: 24.8%;
+        margin-bottom: 0;
+    }
+
+    // 标题样式
+    .title {
+        width: 100%;
+        background-image: url(../assets/images/border-title.png);
+        height: 30px;
+        background-size: 100% 100%;
+        display: flex;
+        padding-left: 8%;
+        box-sizing: border-box;
+        color: #fff;
+        font-family: 'maleGod';
+        align-items: center;
+        letter-spacing: 1px;
+        margin-bottom: 10px;
+
+    }
+
+    // 右边内容
+    .notice {
+        height: 31.6%;
+    }
+
+    .service {
+        height: 67.5%;
+    }
+}
+
+.titleText {
+    position: relative;
+    display: inline-block;
+    color: #fff;
+}
+
+// 渐变颜色
+.titleText:before {
+    content: attr(text);
+    position: absolute;
+    z-index: 10;
+    right: 0;
+    bottom: 0;
+    color: rgb(163, 227, 245);
+    -webkit-mask: linear-gradient(to top, rgb(163, 227, 245), transparent);
+}
+</style>