'完善静态页面布局'

zhang

2023-12-09 7ed119626616e067eb45d4a02a83d8412904c878

'完善静态页面布局'

 public/images/anonymous.png

 public/images/notanonymous.png

 public/images/pic.png

 src/App.vue

@@ -22,5 +22,4 @@
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

</style>

 src/main.js

@@ -15,6 +15,7 @@
import "./components/autoRegister";
import Vant from "vant";
import "vant/lib/index.css";
import { Picker } from 'vant';

import DC from "@dvgis/dc-sdk/dist/dc.base.min"; //基础包
import DcCore from "@dvgis/dc-sdk/dist/dc.core.min"; //核心包
@@ -41,6 +42,7 @@
Vue.prototype.$EventBus = EventBus;
Vue.use(ElementUI);
Vue.use(Vant);
Vue.use(Picker);

Vue.use(VueAxios, axios);


 src/router/page/index.js

@@ -38,6 +38,11 @@
    path: "/toexamine",
    component: () => import("../../views/toexamine/index.vue"),
  },
  // 去评优
  {
    path: "/toAppraising",
    component: () => import("../../views/toAppraising/index.vue"),
  },
];

const router = new VueRouter({

 src/views/Addmessage/index.vue

@@ -33,7 +33,9 @@
      fileList: []
    };
  },

  mounted() {
    localStorage.setItem("Appraising", "message");
  },
  computed: {},
  created() {},
  methods: {

 src/views/Appraising/index.vue

@@ -1,22 +1,111 @@
<!--评优-->
<template>
  <div class="Appraising">
    <P>评优</P>
    <div class="view" v-for="(item,index) in ViewData" :key="index">
      <p class="TaskNumber">
        <span>部门评优</span>
        <span :class="item.fraction=='待完成'?'evaluation':'evaluationget'">{{item.fraction}}</span>
      </p>
      <p class="Tasktime">
        <span>评优任务名称：</span>
        <span>2024元旦评优</span>
      </p>
      <p class="Tasktime">
        <span>本次类别：</span>
        <span>优秀员工</span>
      </p>
      <p class="Tasktime">
        <span>认定标准描述：</span>
        <span>无</span>
      </p>
      <van-button @click="toAppraising(item)">去评优</van-button>
    </div>
  </div>
</template>
            
  <script>
          
<script>
export default {
  data() {
    return {};
    return {
      ViewData: [
        {
          id: "202402",
          fraction: "待完成",
          Assessmentpeople: "王五",
          department: "技术部"
        }
      ]
    };
  },

  computed: {},
  created() {},
  methods: {}
  methods: {
    toAppraising(item) {
      this.$router.push({
        path: "/toAppraising"
      });
    }
  }
};
</script>
            
  <style scoped lang="scss">
          
<style scoped lang="scss">
.Appraising {
  padding: 20px;
  height: 100%;
  overflow: auto;
  background: #f5f5f5;
  .view {
    width: 100%;
    padding: 20px;
    background: white;
    border-radius: 8px;
    margin-bottom: 15px;
    .TaskNumber {
      display: flex;
      span:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
        line-height: 40px;
      }
      .evaluation {
        margin-left: auto;
        border: 1px solid #f2bf42;
        background: rgba(242, 191, 66, 0.1);
        padding: 0px 10px;
        line-height: 30px;
        height: 30px;
        color: #f2bf42;
      }
      .evaluationget {
        margin-left: auto;
        border: 1px solid #30d17c;
        background: rgba(48, 209, 124, 0.1);
        padding: 0px 10px;
        line-height: 30px;
        height: 30px;
        color: #30d17c;
      }
    }
    .Tasktime {
      font-size: 16px;
      line-height: 30px;
      span:nth-child(1) {
        color: #8894a8;
      }
      span:nth-child(2) {
        color: #313d51;
      }
    }
    .van-button {
      margin-top: 10px;
      width: 100%;
      color: white;
      background: linear-gradient(163deg, #01bdfc 0%, #017bfc 100%);
      border-radius: 8px;
    }
  }
}
</style>
            
          

 src/views/discrimination/index.vue

@@ -72,7 +72,7 @@
  width: 100%;
  height: 100vh;
  padding: 50px 20px;
  background: url(/bigScreen/images/bg.png) no-repeat center / 100% 100%;
  background: url(/images/bg.png) no-repeat center / 100% 100%;
  .top {
    color: #333333;
    font-size: 30px;
@@ -87,16 +87,14 @@
    width: 100%;
    height: 120px;
    margin: 20px 0px;
    background: url(/bigScreen/images/backcustomis.png) no-repeat center / 100%
      100%;
    background: url(/images/backcustomis.png) no-repeat center / 100% 100%;
    position: relative;
  }
  .companyis {
    width: 100%;
    height: 120px;
    margin: 20px 0px;
    background: url(/bigScreen/images/backcompanyis.png) no-repeat center / 100%
      100%;
    background: url(/images/backcompanyis.png) no-repeat center / 100% 100%;
    position: relative;
  }
}

 src/views/layout/index.vue

@@ -1,13 +1,13 @@
<template>
  <div class="appdefalut">
    <!-- 主体内容展示区域 -->
    <div class="content">
    <div class="content" :class="hidshow ? 'footerin' : 'notfooterin'">
      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>
    </div>
    <!-- 底层tab切换栏 -->
    <div class="footer" v-show="hidshow">
    <div class="footer" v-if="hidshow">
      <div
        class="footerin"
        v-for="(item,index) in TabName"
@@ -43,7 +43,7 @@
      docmHeight: document.documentElement.clientHeight, //默认屏幕高度
      showHeight: document.documentElement.clientHeight, //实时屏幕高度
      hidshow: true, //显示或者隐藏footer
      comName: "examine", //默认展示页
      comName: "message", //默认展示页
      TabName: [],
      ygTabName: [
        {
@@ -117,6 +117,9 @@
        this.showHeight = document.body.clientHeight;
      })();
    };
    if (localStorage.getItem("Appraising") != null) {
      this.comName = localStorage.getItem("Appraising");
    }
  },
  watch: {
    showHeight: function() {
@@ -125,7 +128,7 @@
      } else {
        this.hidshow = true;
      }
    },
    }
  }
};
</script>
@@ -136,13 +139,17 @@
  height: 100vh;
  .content {
    width: 100%;
    height: calc(100% - 80px);
    box-sizing: border-box;
    overflow: auto;
  }
  .footerin {
    height: calc(100% - 80px);
  }
  .notfooterin {
    height: calc(100%);
  }
  .footer {
    position: fixed;
    height: 80px;
    bottom: 0;
    left: 0;
    width: 100%;

 src/views/message/index.vue

@@ -27,14 +27,14 @@
        />
      </p>
      <!-- 评论区域 -->
      <div class="tocomments">
      <!-- <div class="tocomments">
        <p>
          <img src="images/Anonymouscomments.png" />
          <span>匿名评论</span>
          <img src="images/Anonymouscomments.png" />
          <span>评论</span>
        </p>
      </div>
      </div>-->
      <!-- 评论区域 -->
      <div class="comment">
        <p>
@@ -45,6 +45,14 @@
          <span class="name">匿名用户:</span>
          <span class="comin">可以的，确实可以哦</span>
        </p>
        <div class="tocomment">
          <van-field v-model="value" placeholder="说点什么吧" />
          <img src="images/pic.png" class="pic" />
          <img src="images/anonymous.png" class="anonymous" />
          <div class="notanonymous">
            <img src="images/notanonymous.png" />
          </div>
        </div>
      </div>
    </div>
    <img src="images/Addmessage.png" class="Addmessage" @click="Addmessage()" />
@@ -96,7 +104,7 @@
}

.message {
  padding: 20px;
  padding: 20px 20px 0px;
  position: relative;
  .info {
    display: flex;
@@ -155,7 +163,7 @@
    }
  }
  .comment {
    background: #f4f5f7;
    // background: #f4f5f7;
    padding: 10px;
    font-size: 16px;
    p {
@@ -164,6 +172,39 @@
    .name {
      color: #4a80ea;
    }
    .tocomment {
      display: flex;
      align-items: center;
      background: #f4f5f7;
      padding: 5px;
      margin-top: 5px;
      .van-cell {
        background: none;
        font-size: 20px;
      }
      .pic {
        width: 25px;
        height: 25px;
        margin-right: 2px;
      }
      .anonymous {
        width: 40px;
        height: 40px;
      }
      .notanonymous {
        width: 50px;
        height: 30px;
        border-radius: 100px;
        background: #017bfc;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}
</style>

 src/views/toAppraising/index.vue

New file
@@ -0,0 +1,137 @@
<!--去评优-->
<template>
  <div class="toAppraising">
    <div class="Beingevaluated">
      <p class="title">部门评优</p>
      <p class="info">
        <span>评优任务名称：</span>
        <span>2024元旦评优</span>
      </p>
      <p class="info">
        <span>本次类别：</span>
        <span>优秀员工</span>
      </p>
      <p class="info">
        <span>认定标准描述：</span>
        <span>无</span>
      </p>
      <div class="toin">
        <van-field
          v-model="currentValue"
          is-link
          readonly
          label="请选择:"
          placeholder="选择人员"
          @click="showPicker = true"
          class="van-hairline"
        />
        <p class="Reasons">评选理由:</p>
        <van-field
          class="van-borderline"
          v-model="Reasonsin"
          rows="5"
          type="textarea"
          placeholder="请输入对该评选人的评选理由..."
        />
      </div>
      <van-button @click="SubmitTo(item)">提交</van-button>
    </div>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        @cancel="showPicker = false"
        @confirm="onConfirm"
        :columns="columns"
        v-model="currentValue"
      />
    </van-popup>
  </div>
</template>
          
    <script>
import { Picker } from "vant";
export default {
  data() {
    return {
      showPicker: false,
      currentValue: "", // 用于绑定选择结果的变量
      columns: ["张三", "李四", "王五"] // 选择器的选项列表
    };
  },

  computed: {},
  mounted() {
    localStorage.setItem("Appraising", "Appraising");
  },
  created() {},
  methods: {
    onConfirm(select) {
      this.currentValue = select;
      this.showPicker = false;
    },
    //提交
    SubmitTo() {
      this.$router.push({
        path: "/"
      });
    }
  }
};
</script>
          
<style scoped lang="scss">
.toAppraising {
  padding: 20px;
  height: 100vh;
  overflow: auto;
  background: #f5f5f5;
  .Beingevaluated {
    background: white;
    padding: 20px;
    .title {
      font-size: 18px;
      line-height: 35px;
    }
    .info {
      font-size: 16px;
      line-height: 30px;
      span:nth-child(1) {
        color: #8894a8;
      }
      span:nth-child(2) {
        color: #313d51;
      }
    }
    .toin {
      margin-top: 40px;
      [class*="van-hairline"]::after {
        border: none;
      }
      .van-field {
        font-size: 16px;
        font-weight: bold;
        padding: 10px 0px;
      }
      .Reasons {
        font-size: 16px;
        font-weight: bold;
        color: #646566;
        margin-bottom: 10px;
      }
      .van-borderline {
        border: 1px solid #dee1e7;
        border-radius: 8px;
        padding: 5px;
      }
    }
    .van-button {
      margin: 30px 0px;
      width: 100%;
      color: white;
      background: linear-gradient(163deg, #01bdfc 0%, #017bfc 100%);
      border-radius: 8px;
    }
  }
}
</style>
          

 src/views/toexamine/index.vue

@@ -56,7 +56,7 @@

  computed: {},
  mounted() {
    console.log(this.$route.query.name);
    localStorage.setItem("Appraising", "examine");
  },
  created() {},
  methods: {

 vue.config.js

@@ -9,176 +9,144 @@
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
 */

const path = require("path")
const CopywebpackPlugin = require("copy-webpack-plugin")
const dvgisDist = "./node_modules/@dvgis"
const webpack = require("webpack")
const path = require("path");
const CopywebpackPlugin = require("copy-webpack-plugin");
const dvgisDist = "./node_modules/@dvgis";
const webpack = require("webpack");

const CompressionPlugin = require("compression-webpack-plugin")
const pxtovw = require("postcss-px-to-viewport")
const CompressionPlugin = require("compression-webpack-plugin");
const pxtovw = require("postcss-px-to-viewport");

const productionGzipExtensions = ["js", "css"]
const productionGzipExtensions = ["js", "css"];

module.exports = {
    //路径前缀
    publicPath: "/bigScreen/",
  //路径前缀
  publicPath: "/ZhongtuBronzeMirror/",

    css: {
        loaderOptions: {
            // 给 sass-loader 传递选项
            scss: {
                prependData: `@import "~@/styles/scssFile.scss";`,
            },
            // postcss: {
            //     plugins: [   //配置px转rem进行适配
            //         require('postcss-px2rem')({
            //             // 根标签字号大小根据设计稿宽度/flexible.js里的份数得到，这里假定设计稿宽度为3840 3840/24 = 160px
            //             remUnit: 80
            //         }),
            //     ]
            // }
            // postcss: {
            //     //给postcss-loader传递选项
            //     plugins: [
            //         new pxtovw({
            //             unitToConvert: 'px', //需要转换的单位，默认为"px"；
            //             viewportWidth: 1920, //设计稿的视口宽度
            //             viewportHeight: 1080, //设计稿的视口宽度
            //             unitPrecision: 5, //单位转换后保留的小数位数
            //             propList: ['*'], //要进行转换的属性列表,*表示匹配所有,!表示不转换
            //             viewportUnit: 'vw', //转换后的视口单位
            //             fontViewportUnit: 'vw', //转换后字体使用的视口单位
            //             selectorBlackList: [], //不进行转换的css选择器，继续使用原有单位
            //             minPixelValue: 1, //设置最小的转换数值
            //             mediaQuery: false, //设置媒体查询里的单位是否需要转换单位
            //             replace: true, //是否直接更换属性值，而不添加备用属性
            //             exclude: [/node_modules/], //忽略某些文件夹下的文件
            //             // landscape: true,
            //             // landscapeUnit: 'vw',
            //             // landscapeWidth: 1920
            //         })
            //     ]
            // }
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      scss: {
        prependData: `@import "~@/styles/scssFile.scss";`,
      },
      // postcss: {
      //     plugins: [   //配置px转rem进行适配
      //         require('postcss-px2rem')({
      //             // 根标签字号大小根据设计稿宽度/flexible.js里的份数得到，这里假定设计稿宽度为3840 3840/24 = 160px
      //             remUnit: 80
      //         }),
      //     ]
      // }
      // postcss: {
      //     //给postcss-loader传递选项
      //     plugins: [
      //         new pxtovw({
      //             unitToConvert: 'px', //需要转换的单位，默认为"px"；
      //             viewportWidth: 1920, //设计稿的视口宽度
      //             viewportHeight: 1080, //设计稿的视口宽度
      //             unitPrecision: 5, //单位转换后保留的小数位数
      //             propList: ['*'], //要进行转换的属性列表,*表示匹配所有,!表示不转换
      //             viewportUnit: 'vw', //转换后的视口单位
      //             fontViewportUnit: 'vw', //转换后字体使用的视口单位
      //             selectorBlackList: [], //不进行转换的css选择器，继续使用原有单位
      //             minPixelValue: 1, //设置最小的转换数值
      //             mediaQuery: false, //设置媒体查询里的单位是否需要转换单位
      //             replace: true, //是否直接更换属性值，而不添加备用属性
      //             exclude: [/node_modules/], //忽略某些文件夹下的文件
      //             // landscape: true,
      //             // landscapeUnit: 'vw',
      //             // landscapeWidth: 1920
      //         })
      //     ]
      // }
    },
  },

  outputDir: "ZhongtuBronzeMirror",

  // 其他配置
  chainWebpack: (config) => {
    config.plugin("copy").use(CopywebpackPlugin, [
      [
        {
          from: path.join(dvgisDist, "dc-sdk/dist/resources"),
          to: "libs/dc-sdk/resources",
        },
    },

    outputDir: 'bigScreen',

    // 其他配置
    chainWebpack: (config) => {
        config.plugin("copy").use(CopywebpackPlugin, [
            [
                {
                    from: path.join(dvgisDist, "dc-sdk/dist/resources"),
                    to: "libs/dc-sdk/resources",
                },
                {
                    from: "./public/libs",
                    to: "libs",
                },
                {
                    from: "./public/depend",
                    to: "depend",
                },
                {
                    from: "./public/images",
                    to: "images",
                },
                {
                    from: "./public/check",
                    to: "check",
                },
                {
                    from: "./public/mapIcons",
                    to: "mapIcons",
                }
            ],
        ])

        // config.plugin("define").tap((args) => {
        //     args[0]["process"] = { ...args[0]["process.env"] }
        //     return args
        // })
    },

    configureWebpack: {
        externals: {
            vue: "Vue",
            Vuex: "Vuex",
            "vue-router": "VueRouter",
            "element-ui": "ELEMENT",
            echarts: "echarts",
        {
          from: "./public/libs",
          to: "libs",
        },
        // webpack plugins
        plugins: [
            // Ignore all locale files of moment.js
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

            // 配置compression-webpack-plugin压缩
            new CompressionPlugin({
                algorithm: "gzip",
                test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
                threshold: 10240,
                minRatio: 0.8,
            }),
            new webpack.optimize.LimitChunkCountPlugin({
                maxChunks: 5,
                minChunkSize: 100,
            }),
            // 提供带 Content-Encoding 编码的压缩版的资源
            // new CompressionPlugin({
            //     algorithm: 'gzip',
            //     test: /\.js$|\.html$|\.css/, // 匹配文件名
            //     // test: /\.(js|css)$/,
            //     threshold: 10240, // 对超过10k的数据压缩
            //     deleteOriginalAssets: false, // 不删除源文件
            //     minRatio: 0.8 // 压缩比
            // })
        ],
    },

    devServer: {
        // open: false, // 编译完成是否打开网页
        // host: "0.0.0.0", // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问
        // // port: 82, // 访问端口
        // https: false, // 编译失败时刷新页面
        // hot: true, // 开启热加载
        // hotOnly: false,
        // proxy: {
        //     [process.env.VUE_APP_API]: {//拦截器(拦截链接中有/api)
        //         target: process.env.VUE_API_DEV_TARGET,//'http://192.168.1.114:3000', //process.env.VUE_API_DEV_TARGET, //API服务器的地址
        //         changeOrigin: true,
        //         pathRewrite: {
        //             //'^/api': '/'
        //             [`^${process.env.VUE_APP_API}`]: '',
        //             //[`^${process.env.VUE_APP_API}`]: '/', //配置出来的接口没有 /api
        //         }
        //     }
        // }
        proxy: {

            // 中台接口
            "/services": {
                target: "https://sk.hubeishuiyi.cn",
                changeOrigin: true, //开启代理跨域
                // pathRewrite: {
                //     "^/services": "/",
                // },
            },
            // 业务平台接口
            "/api": {
                // target用于配置你允许访问数据的计算机名称，即是你的api接口的服务器地址
                // target: "http://127.0.0.1",
                target: "https://sk.hubeishuiyi.cn/api",
                // target: "http://192.168.0.100:82",
                // target: "http://17.20.10.3:82",
                // target: "http://10.141.11.11/api",
                // ws: true, //启用webSocket6566
                changeOrigin: true, //开启代理跨域
                // pathRewrite: {
                //     "^/api": "/",
                // },
            },
        {
          from: "./public/depend",
          to: "depend",
        },
        {
          from: "./public/images",
          to: "images",
        },
        {
          from: "./public/check",
          to: "check",
        },
        {
          from: "./public/mapIcons",
          to: "mapIcons",
        },
      ],
    ]);
  },

  configureWebpack: {
    externals: {
      vue: "Vue",
      Vuex: "Vuex",
      "vue-router": "VueRouter",
      "element-ui": "ELEMENT",
      echarts: "echarts",
    },
}
    // webpack plugins
    plugins: [
      // Ignore all locale files of moment.js
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

      // 配置compression-webpack-plugin压缩
      new CompressionPlugin({
        algorithm: "gzip",
        test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
        threshold: 10240,
        minRatio: 0.8,
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5,
        minChunkSize: 100,
      }),
    ],
  },

  devServer: {
    proxy: {
      // 中台接口
      "/services": {
        target: "https://sk.hubeishuiyi.cn",
        changeOrigin: true, //开启代理跨域
        // pathRewrite: {
        //     "^/services": "/",
        // },
      },
      // 业务平台接口
      "/api": {
        // target用于配置你允许访问数据的计算机名称，即是你的api接口的服务器地址
        // target: "http://127.0.0.1",
        target: "https://sk.hubeishuiyi.cn/api",
        // target: "http://192.168.0.100:82",
        // target: "http://17.20.10.3:82",
        // target: "http://10.141.11.11/api",
        // ws: true, //启用webSocket6566
        changeOrigin: true, //开启代理跨域
        // pathRewrite: {
        //     "^/api": "/",
        // },
      },
    },
  },
};