Skip to content

B
BCDH-APP
Commit dd0118ca authored by 罗新东's avatar 罗新东
Browse files
Options

添加了扫码

parent c8ef7242
Pipeline #7614 passed with stage
    in 17 seconds
    Show whitespace changes
    Inline Side-by-side
    Showing with 872 additions and 379 deletions
    package.json
    View file @ dd0118ca
    ...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
    "vant": "^2.12.30", "vant": "^2.12.30",
    "vue": "^2.6.10", "vue": "^2.6.10",
    "vue-esign": "^1.0.5", "vue-esign": "^1.0.5",
    "vue-qrcode-reader": "^3.1.0",
    "vue-router": "^3.0.7", "vue-router": "^3.0.7",
    "vue2-verify": "^1.1.5", "vue2-verify": "^1.1.5",
    "vuex": "^3.1.2" "vuex": "^3.1.2"
    ......
    src/App.vue
    View file @ dd0118ca
    ...@@ -74,7 +74,7 @@ export default { ...@@ -74,7 +74,7 @@ export default {
    }, },
    computed: { computed: {
    showTab() { showTab() {
    return !["login", "login2", "choose-people"].includes( return !["login", "login2", "choose-people","scan",'success','fail','warn'].includes(
    this.$route.name this.$route.name
    ); );
    }, },
    ......
    src/components/QrCodeReader.vue 0 → 100644
    View file @ dd0118ca
    // qrcode.vue
    <template>
    <div>
    <!-- <p class="error">{{ error }}</p> -->
    <!--错误信息-->
    <!-- <p class="decode-result">
    扫描结果:
    <b>{{ result }}</b>
    </p> -->
    <!--扫描结果-->
    <!-- <p @click="openCamera">打开相机</p>
    <div v-show="show" class="cameraMessage">
    <p @click="closeCamera">关闭相机</p>
    <p @click="openFlash">打开手电筒</p>
    <p @click="switchCamera">相机反转</p>
    </div> -->
    <qrcode-stream
    v-show="qrcode"
    :camera="camera"
    :torch="torchActive"
    @decode="onDecode"
    @init="onInit"
    >
    <div>
    <div class="qr-scanner">
    <div class="box">
    <div class="line"></div>
    <div class="angle"></div>
    </div>
    <div class="txt">
    将二维码/条码放入框内，即自动扫描
    <div class="myQrcode">我的二维码</div>
    </div>
    </div>
    </div>
    </qrcode-stream>
    </div>
    </template>
    <script>
    // 下载插件
    // cnpm install --save vue-qrcode-reader
    // 引入
    import { QrcodeStream } from "vue-qrcode-reader";
    export default {
    // 注册
    components: { QrcodeStream },
    data() {
    return {
    result: "", // 扫码结果信息
    error: "", // 错误信息
    // show: false,
    // qrcode: false,
    qrcode: true,
    torchActive: false,
    camera: "rear",
    // camera: "front"
    };
    },
    methods: {
    onDecode(result) {
    console.log(result);
    this.result = result;
    this.$emit('success',result)
    },
    async onInit(promise) {
    const { capabilities } = await promise;
    const TORCH_IS_SUPPORTED = !!capabilities.torch;
    try {
    await promise;
    } catch (error) {
    if (error.name === "NotAllowedError") {
    this.error = "ERROR: 您需要授予相机访问权限";
    } else if (error.name === "NotFoundError") {
    this.error = "ERROR: 这个设备上没有摄像头";
    } else if (error.name === "NotSupportedError") {
    this.error = "ERROR: 所需的安全上下文(HTTPS、本地主机)";
    } else if (error.name === "NotReadableError") {
    this.error = "ERROR: 相机被占用";
    } else if (error.name === "OverconstrainedError") {
    this.error = "ERROR: 安装摄像头不合适";
    } else if (error.name === "StreamApiNotSupportedError") {
    this.error = "ERROR: 此浏览器不支持流API";
    }
    }
    },
    // 打开相机
    // openCamera() {
    // this.camera = 'rear'
    // this.qrcode = true
    // this.show = true
    // },
    // 关闭相机
    // closeCamera() {
    // this.camera = 'off'
    // this.qrcode = false
    // this.show = false
    // },
    // 打开手电筒
    // openFlash() {
    // switch (this.torchActive) {
    // case true:
    // this.torchActive = false
    // break
    // case false:
    // this.torchActive = true
    // break
    // }
    // },
    // 相机反转
    // switchCamera() {
    // // console.log(this.camera);
    // switch (this.camera) {
    // case 'front':
    // this.camera = 'rear'
    // console.log(this.camera)
    // break
    // case 'rear':
    // this.camera = 'front'
    // console.log(this.camera)
    // break
    // }
    // }
    },
    };
    </script>
    <style scoped lang="less">
    .error {
    font-weight: bold;
    color: red;
    }
    .cameraMessage {
    width: 100%;
    height: 60px;
    }
    .qr-scanner {
    background-image: linear-gradient(
    0deg,
    transparent 24%,
    rgba(32, 255, 77, 0.1) 25%,
    rgba(32, 255, 77, 0.1) 26%,
    transparent 27%,
    transparent 74%,
    rgba(32, 255, 77, 0.1) 75%,
    rgba(32, 255, 77, 0.1) 76%,
    transparent 77%,
    transparent
    ),
    linear-gradient(
    90deg,
    transparent 24%,
    rgba(32, 255, 77, 0.1) 25%,
    rgba(32, 255, 77, 0.1) 26%,
    transparent 27%,
    transparent 74%,
    rgba(32, 255, 77, 0.1) 75%,
    rgba(32, 255, 77, 0.1) 76%,
    transparent 77%,
    transparent
    );
    background-size: 3rem 3rem;
    background-position: -1rem -1rem;
    width: 100%;
    /* height: 100%; */
    height: 100vh;
    /* height: 288px; */
    position: relative;
    background-color: #1110;
    /* background-color: #111; */
    }
    /* .qrcode-stream-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 82px;
    clear: both;
    } */
    /* .qrcode-stream-wrapper >>> .qrcode-stream-camera {
    width: 213px;
    height: 210px;
    clear: both;
    margin-top: 39px;
    } */
    .qr-scanner .box {
    width: 213px;
    height: 213px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border: 0.1rem solid rgba(0, 255, 51, 0.2);
    /* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */
    }
    .qr-scanner .txt {
    width: 100%;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    text-align: center;
    /* color: #f9f9f9; */
    margin: 0 auto;
    position: absolute;
    top: 70%;
    left: 0;
    }
    .qr-scanner .myQrcode {
    text-align: center;
    color: #00ae10;
    }
    .qr-scanner .line {
    height: calc(100% - 2px);
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
    border-bottom: 3px solid #00ff33;
    transform: translateY(-100%);
    animation: radar-beam 2s infinite alternate;
    animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
    animation-delay: 1.4s;
    }
    .qr-scanner .box:after,
    .qr-scanner .box:before,
    .qr-scanner .angle:after,
    .qr-scanner .angle:before {
    content: "";
    display: block;
    position: absolute;
    width: 3vw;
    height: 3vw;
    border: 0.2rem solid transparent;
    }
    .qr-scanner .box:after,
    .qr-scanner .box:before {
    top: 0;
    border-top-color: #00ff33;
    }
    .qr-scanner .angle:after,
    .qr-scanner .angle:before {
    bottom: 0;
    border-bottom-color: #00ff33;
    }
    .qr-scanner .box:before,
    .qr-scanner .angle:before {
    left: 0;
    border-left-color: #00ff33;
    }
    .qr-scanner .box:after,
    .qr-scanner .angle:after {
    right: 0;
    border-right-color: #00ff33;
    }
    @keyframes radar-beam {
    0% {
    transform: translateY(-100%);
    }
    100% {
    transform: translateY(0);
    }
    }
    /deep/.qrcode-stream-camera{
    height:100vh !important;
    }
    </style>
    \ No newline at end of file
    src/router/index.js
    View file @ dd0118ca
    ...@@ -674,6 +674,42 @@ const routes = [{ ...@@ -674,6 +674,42 @@ const routes = [{
    }, },
    component: () => import('@/views/danger/myDelay/index') component: () => import('@/views/danger/myDelay/index')
    }, },
    {
    path: '/scan',
    name: 'scan',
    meta: {
    title: '',
    index: 1
    },
    component: () => import('@/views/scan/index')
    },
    {
    path: '/success',
    name: 'success',
    meta: {
    title: '',
    index: 1
    },
    component: () => import('@/views/common/success')
    },
    {
    path: '/fail',
    name: 'fail',
    meta: {
    title: '',
    index: 1
    },
    component: () => import('@/views/common/fail')
    },
    {
    path: '/warn',
    name: 'warn',
    meta: {
    title: '',
    index: 1
    },
    component: () => import('@/views/common/warn')
    },
    ] ]
    const router = new VueRouter({ const router = new VueRouter({
    ......
    src/views/common/fail.vue 0 → 100644
    View file @ dd0118ca
    <template>
    <div id='content'>
    <van-image
    width="100"
    height="100"
    :src="require('../../assets/result/fail.png')"
    />
    <div class='text'>{{text}}</div>
    <div class='button'>
    <van-button block color="#52c41a" @click="$router.back()">返回</van-button>
    </div>
    </div>
    </template>
    <script>
    export default {
    data(){
    return {
    text:'操作失败'
    }
    },
    mounted(){
    let text = this.$route.query.text;
    if(text){
    this.text=text
    }
    }
    };
    </script>
    <style scoped>
    #content{
    text-align: center;
    padding-top: 2rem;
    }
    .text{
    margin-top:0.6rem;
    font-size: 0.8rem;
    color:#e84335
    }
    .button{
    padding: 1rem 0.5rem;
    }
    </style>
    \ No newline at end of file
    src/views/common/success.vue 0 → 100644
    View file @ dd0118ca
    <template>
    <div id='content'>
    <van-image
    width="100"
    height="100"
    :src="require('../../assets/result/success.png')"
    />
    <div class='text'>{{text}}</div>
    <div class='button'>
    <van-button block color="#52c41a" @click="$router.back()">返回</van-button>
    </div>
    </div>
    </template>
    <script>
    export default {
    data(){
    return {
    text:'操作成功'
    }
    },
    mounted(){
    let text = this.$route.query.text;
    if(text){
    this.text=text
    }
    }
    };
    </script>
    <style scoped>
    #content{
    text-align: center;
    padding-top: 2rem;
    }
    .text{
    margin-top:0.6rem;
    font-size: 0.8rem;
    color:#52c41a
    }
    .button{
    padding: 1rem 0.5rem;
    }
    </style>
    \ No newline at end of file
    src/views/common/warn.vue 0 → 100644
    View file @ dd0118ca
    <template>
    <div id='content'>
    <van-image
    width="100"
    height="100"
    :src="require('../../assets/result/warn.png')"
    />
    <div class='text'>{{text}}</div>
    <div class='button'>
    <van-button block color="#52c41a" @click="$router.back()">返回</van-button>
    </div>
    </div>
    </template>
    <script>
    export default {
    data(){
    return {
    text:'警告信息'
    }
    },
    mounted(){
    let text = this.$route.query.text;
    if(text){
    this.text=text
    }
    }
    };
    </script>
    <style scoped>
    #content{
    text-align: center;
    padding-top: 2rem;
    }
    .text{
    margin-top:0.6rem;
    font-size: 0.8rem;
    color:#faad14
    }
    .button{
    padding: 1rem 0.5rem;
    }
    </style>
    \ No newline at end of file
    src/views/saveWorkbench/index.vue
    View file @ dd0118ca
    <template> <template>
    <div> <div>
    <!-- 头部标签 --> <!-- 头部标签 -->
    <van-sticky> <van-sticky>
    <header class="header-wrap">首开集团安全隐患排查治理体系</header> <header class="header-wrap">
    首开集团安全隐患排查治理体系
    <van-icon
    :name="require('../../assets/sq.png')"
    class="iconColorRight"
    size="0.5rem"
    @click="$router.push('/scan')"
    />
    </header>
    </van-sticky> </van-sticky>
    <!-- 搜索 -->
    <!-- <div class="search-wrap">
    <van-search v-model="searchVal" placeholder="搜索" @search="onSearch" />
    </div> -->
    <!-- 滚动通知 -->
    <!-- <van-notice-bar left-icon="volume-o" :scrollable="false" mode="link">
    <van-swipe
    vertical
    class="notice-swipe"
    :autoplay="3000"
    :show-indicators="false"
    >
    <van-swipe-item>提示：您有1条待办事项需要处理</van-swipe-item>
    <van-swipe-item>提示：您有2条待办事项需要处理</van-swipe-item>
    </van-swipe>
    </van-notice-bar> -->
    <!-- 内容 --> <!-- 内容 -->
    <div class="con"> <div class="con">
    <!-- 消息中心 -->
    <!-- <van-cell-group inset v-if="finalNewsCenterList.length > 0">
    <van-cell value="消息中心" />
    <van-grid :column-num="5">
    <van-grid-item
    v-for="item in finalNewsCenterList"
    :key="item.key"
    :icon="item.imgUrl"
    :text="item.text"
    @click="myClick(item.text)"
    />
    </van-grid>
    </van-cell-group> -->
    <!-- 风控分级管控 --> <!-- 风控分级管控 -->
    <van-cell-group inset v-if="finalRiskList.length > 0"> <van-cell-group inset v-if="finalRiskList.length > 0">
    <van-cell value="风险分级管控" /> <van-cell value="风险分级管控" />
    ...@@ -88,6 +64,7 @@ ...@@ -88,6 +64,7 @@
    </template> </template>
    <script> <script>
    let scan = null;
    import tabBar from "@/components/TabBar"; import tabBar from "@/components/TabBar";
    import { postWork } from "@/service/workbench"; import { postWork } from "@/service/workbench";
    export default { export default {
    ...@@ -261,14 +238,14 @@ export default { ...@@ -261,14 +238,14 @@ export default {
    key: "7", key: "7",
    path: "", path: "",
    imgUrl: require("@/assets/workbench/ehcek-record.png"), imgUrl: require("@/assets/workbench/ehcek-record.png"),
    text: "检查记录" text: "检查记录",
    }, },
    { {
    key: "8", key: "8",
    path: "/checked-confirm", path: "/checked-confirm",
    imgUrl: require("@/assets/workbench/ehcek-record.png"), imgUrl: require("@/assets/workbench/ehcek-record.png"),
    text: "整改确认" text: "整改确认",
    } },
    ], ],
    // 后台给的数据权限对象 // 后台给的数据权限对象
    ...@@ -284,6 +261,10 @@ export default { ...@@ -284,6 +261,10 @@ export default {
    // 根据权限显示对应的图标 // 根据权限显示对应的图标
    this.getWorkList(); this.getWorkList();
    }, },
    async mounted() {
    await this.startRecognize();
    await this.startScan();
    },
    methods: { methods: {
    myClick(data) {}, myClick(data) {},
    jump(path) { jump(path) {
    ...@@ -313,7 +294,9 @@ export default { ...@@ -313,7 +294,9 @@ export default {
    if (this.powerObj.风险分级管控) { if (this.powerObj.风险分级管控) {
    // 对两个数组进行比较 拿到需要的数据 赋值给新数组 （赋值给新数组是为了解决页面闪屏问题） // 对两个数组进行比较 拿到需要的数据 赋值给新数组 （赋值给新数组是为了解决页面闪屏问题）
    this.finalRiskList = [...this.riskList].filter((x) => this.finalRiskList = [...this.riskList].filter((x) =>
    [...this.powerObj.风险分级管控].some((y) => y.menuName === x.text) [...this.powerObj.风险分级管控].some(
    (y) => y.menuName === x.text
    )
    ); );
    // 如果有隐患上报权限 则在添加一个 上报退回的权限 // 如果有隐患上报权限 则在添加一个 上报退回的权限
    ...@@ -333,8 +316,11 @@ export default { ...@@ -333,8 +316,11 @@ export default {
    } }
    // 隐患排查治理 // 隐患排查治理
    if (this.powerObj.隐患排查治理) { if (this.powerObj.隐患排查治理) {
    this.finalDangerList = [...this.dangerList].filter((x) => this.finalDangerList = [...this.dangerList].filter(
    [...this.powerObj.隐患排查治理].some((y) => y.menuName === x.text) (x) =>
    [...this.powerObj.隐患排查治理].some(
    (y) => y.menuName === x.text
    )
    ); );
    // 如果有隐患上报权限 则在添加一个 上报退回的权限 // 如果有隐患上报权限 则在添加一个 上报退回的权限
    this.powerObj.隐患排查治理.map((item) => { this.powerObj.隐患排查治理.map((item) => {
    ...@@ -354,8 +340,12 @@ export default { ...@@ -354,8 +340,12 @@ export default {
    // this.finalDangerList = this.dangerList // this.finalDangerList = this.dangerList
    // 安全监督检查 // 安全监督检查
    if (this.powerObj.安全监督检查) { if (this.powerObj.安全监督检查) {
    this.finalSafetyCheckList = [...this.safetyCheckList].filter((x) => this.finalSafetyCheckList = [
    [...this.powerObj.安全监督检查].some((y) => y.menuName === x.text) ...this.safetyCheckList,
    ].filter((x) =>
    [...this.powerObj.安全监督检查].some(
    (y) => y.menuName === x.text
    )
    ); );
    } else { } else {
    this.finalSafetyCheckList = []; this.finalSafetyCheckList = [];
    ...@@ -367,7 +357,7 @@ export default { ...@@ -367,7 +357,7 @@ export default {
    } }
    }); });
    }, },
    }, }
    }; };
    </script> </script>
    <style lang="less" scoped> <style lang="less" scoped>
    ...@@ -410,4 +400,16 @@ export default { ...@@ -410,4 +400,16 @@ export default {
    height: 40px; height: 40px;
    line-height: 40px; line-height: 40px;
    } }
    header .iconColorRight {
    color: white;
    float: right;
    position: relative;
    top: 32%;
    right: 5%;
    transform: scale(2);
    .van-icon__image {
    width: 0.35rem;
    height: 0.35rem;
    }
    }
    </style> </style>
    src/views/scan/index.vue 0 → 100644
    View file @ dd0118ca
    <template>
    <div class="qrcode">
    <qrcode @success="success" />
    </div>
    </template>
    <script>
    import { getFun, postFun } from "@/service/table.js";
    export default {
    components: {
    // 注册
    qrcode: () => import("@/components/QrCodeReader"),
    },
    mounted() {},
    methods: {
    success(val) {
    // alert(val);
    let formdata = new FormData();
    formdata.append("activityid", val);
    postFun("/train/sign", formdata)
    .then((res) => {
    this.$toast.clear();
    // this.$toast.success("扫码成功");
    let obj ={
    签到成功:'success',
    签到失败:'fail',
    重复签到:'warn'
    }
    this.$router.replace({
    name:obj[res.data.details],
    query:{
    text:res.data.details
    }
    })
    })
    .catch(() => {
    this.$toast.clear();
    this.$toast.fail("扫码失败,请稍后再试");
    });
    },
    },
    };
    </script>
    \ No newline at end of file
    Markdown is supported
    0% or
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment