|
|
@@ -1,480 +1,1429 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <div class="tool-box" style="display: flex;justify-content: space-between;align-items: center;">
|
|
|
+ <div class="app-container" style="height: 100vh;">
|
|
|
+ <!-- v-loading="loading" -->
|
|
|
+ <!-- element-loading-text="拼命加载中" -->
|
|
|
+ <!-- element-loading-spinner="el-icon-loading" -->
|
|
|
+ <!-- element-loading-background="rgba(0, 0, 0, 0.8)" -->
|
|
|
+ <div class="ntgs" style="padding: 0;">
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <div class="iuer" style="margin-bottom:10px;">
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
<div>
|
|
|
- <p style="margin: 0;font-size: 13px;color: #FF6969;">点击绘制按钮开始绘制(黑边框内不可绘制,需在图片内绘制)，单击鼠标左键即是当前点绘制完成可绘制下一个点， 双击鼠标左键即本次绘制完成。</p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- :type="isDrawing ? 'warning' : 'primary'"
|
|
|
- @click="startDraw"
|
|
|
- >绘制区域</el-button
|
|
|
- >
|
|
|
-
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="danger"
|
|
|
- :disabled="isDrawing"
|
|
|
- @click="clearAll"
|
|
|
- >全部清除</el-button
|
|
|
- >
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="success"
|
|
|
- :disabled="isDrawing"
|
|
|
- @click="savePoints"
|
|
|
- >保存</el-button
|
|
|
- >
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <!-- postList -->
|
|
|
+ <el-col :span='4'>
|
|
|
+ <div style="background-color: #fff;border-radius: 10px;padding: 20px 20px;height: 95vh;">
|
|
|
+ <p
|
|
|
+ style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">
|
|
|
+ 通道管理</p>
|
|
|
+ <div :class="ishge == index ? 'anche' : ''"
|
|
|
+ style=" height: 36px;;line-height: 36px;margin-top: 10px;padding: 0 10px;"
|
|
|
+ v-for="(item,index) in channelNumberList" :key="index">
|
|
|
+ <div @click="ishg(item,index)"
|
|
|
+ style="display: flex;align-items: center;justify-content: space-between;">
|
|
|
+ <el-tooltip class="item" effect="dark" :content="item.channelNum == null?'暂无数据' : item.channelNum" placement="top-start">
|
|
|
+ <div style="font-size: 16px;
|
|
|
+ color: #333333; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"> {{item.channelNum == null?'暂无数据' : item.channelNum}}</div>
|
|
|
+ </el-tooltip>
|
|
|
+ <img src="../../../assets/images/icon_htgl_zd.png" alt="" style="width: 10px;height: 12px;">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <!-- v-if="isshoe" -->
|
|
|
+ <el-col :span='14'
|
|
|
+ style="padding-left: 30px; background-color: #fff;border-radius: 10px;padding: 20px; height: 95vh;">
|
|
|
+ <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 18px;">
|
|
|
+ <p
|
|
|
+ style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">
|
|
|
+ 坐标点配置
|
|
|
+ <!-- <span style="font-size: 12px; color: red;cursor: pointer;" @click="xiazag">下载插件</span> -->
|
|
|
+ </p>
|
|
|
+ <div>
|
|
|
+ <!-- <el-button type="danger" plain>删除</el-button> -->
|
|
|
+ <span style="font-size: 12px; color: red;">(点击保存之前，请先确认参数配置和坐标点配置都完成)</span>
|
|
|
+ <el-button type="warning" v-hasPermi="['manage:parameterSet:add']" plain @click="submitForm">保存</el-button>
|
|
|
+ <el-button type="success" plain>关闭</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="tool-box" style="margin: 0;padding: 0;height: 80px;text-align: left;">
|
|
|
+
|
|
|
+ <!-- <div>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ :type="isDrawing ? 'warning' : 'primary'"
|
|
|
+ @click="startDraw"
|
|
|
+ >绘制区域</el-button
|
|
|
+ >
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="danger"
|
|
|
+ :disabled="isDrawing"
|
|
|
+ @click="clearAll"
|
|
|
+ >全部清除</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="success"
|
|
|
+ :disabled="isDrawing"
|
|
|
+ @click="savePoints"
|
|
|
+ >保存</el-button
|
|
|
+ >
|
|
|
+ </div> -->
|
|
|
+ <div class=" ">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-button :type="isDrawing ? 'warning' : 'primary'" @click="startDraw">绘制区域</el-button>
|
|
|
+ <el-button type="primary" :disabled="isDrawing" plain @click="savePoints">保存</el-button>
|
|
|
+ <el-button type="primary" plain @click="clearAll">全部清除</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <div style="flex: 1;"></div> -->
|
|
|
+ <!-- <el-button type="primary" plain @click="clickCapturePic">抓图</el-button> -->
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 5px;">
|
|
|
+ <p style="text-align: left; margin: 0;font-size: 13px;color: #FF6969;">每次绘制前,点击绘制按钮开始绘制，单击鼠标左键即是当前点绘制完成可绘制下一个点， 双击鼠标左键即本次绘制完成。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="canvas-wrap">
|
|
|
+ <canvas id="imgCanvas" ref="canvaxbox"></canvas>
|
|
|
+ <!--用来和鼠标进行交互操作的canvas-->
|
|
|
+ <canvas
|
|
|
+ id="drawCanvas"
|
|
|
+ ref="canvas"
|
|
|
+ :style="{ cursor: isDrawing ? 'crosshair' : 'default' }"
|
|
|
+ >
|
|
|
+ </canvas>
|
|
|
+ <!--存储已生成的点线，避免被清空-->
|
|
|
+ <canvas id="saveCanvas" ref="canvasSave"></canvas>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div style="width: 100%; height: 70vh;">
|
|
|
+ <div v-if="isfse" id="divPlugin" style="width: 100%; height: 69vh;"></div>
|
|
|
+
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <img src="../../../assets/images/pic_ssyl_lt.png" alt="" style="width: 100%; margin-top: 20px;"> -->
|
|
|
+ <!-- 344 -->
|
|
|
+ <!-- <video id="video" controls autoplay muted width="100%" height="480px"style="margin-top: 20px;"></video> -->
|
|
|
+ <!-- <video
|
|
|
+ class="videosmall"
|
|
|
+ ref="videosmallone"
|
|
|
+ preload="auto"
|
|
|
+ muted
|
|
|
+ autoplay
|
|
|
+ width="95%"
|
|
|
+ type="rtmp/flv"
|
|
|
+ >
|
|
|
+ <source src="" />
|
|
|
+ </video> -->
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div style="background-color: #fff;border-radius: 10px;padding: 20px 20px;height: 95vh;">
|
|
|
+ <p
|
|
|
+ style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">
|
|
|
+ 参数配置</p>
|
|
|
+ <div>
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="60px">
|
|
|
+ <p style="margin: 0; margin-top: 10px; color:#03BF8A ; margin-bottom: 10px;">时间配置(分钟 <span
|
|
|
+ style="font-size: 12px;color: #FEA71B;">只能输入正数</span>)</p>
|
|
|
+ <el-form-item label="离岗" prop="leaveTime">
|
|
|
+ <el-input :min="0" type="number" v-model="form.leaveTime" placeholder="请输入离岗时间设置 默认：10 分钟" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="玩手机" prop="playTime">
|
|
|
+ <el-input :min="0" type="number" v-model="form.playTime" placeholder="请输入玩手机时间设置 默认：10 分钟" />
|
|
|
+ </el-form-item>
|
|
|
+ <p style="margin: 0; margin-top: 10px; color:#03BF8A ; margin-bottom: 10px;">相似度配置<span
|
|
|
+ style="font-size: 12px;color: #FEA71B;">(只能输入正数)</span></p>
|
|
|
+ <el-form-item label="离岗" prop="leaveRate">
|
|
|
+ <el-input :min="0" :max="1" type="number" v-model="form.leaveRate"
|
|
|
+ placeholder="请输入离岗时间相似度设置 默认：0.5" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="玩手机" prop="playRate">
|
|
|
+ <el-input :min="0" :max="1" type="number" v-model="form.playRate"
|
|
|
+ placeholder="请输入玩手机相似度设置 默认：0.5" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <p
|
|
|
+ style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">
|
|
|
+ 绘制区域</p>
|
|
|
+ <div class="drawings-list">
|
|
|
+ <div class="tflex" v-for="(shape, index) in shapes" :key="index">
|
|
|
+ <!-- :class="{ selected: selectedIndex === index }" -->
|
|
|
+ <div class="txt">
|
|
|
+ <el-popover placement="top-start" width="200" trigger="hover">
|
|
|
+ <div v-for="(ite,idx) in shape.points">
|
|
|
+ {{ite.x}},{{ite.y}}
|
|
|
+ </div>
|
|
|
+ <div slot="reference" class="snhseinu">
|
|
|
+ <el-input v-model="shape.name" placeholder="请输入内容"></el-input>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ <img class="delimg" src="../../../assets/images/del.png"
|
|
|
+ @click.stop="clickDelSnapPolygon(shape.id,index)" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <!-- <el-col :span="24">
|
|
|
+ <div class="ihgswq wrapper" ref="wrapper" style=" overflow: hidden;">
|
|
|
+ <div class="fijge content nhgwesvq" ref="content" style="width:1610px;">
|
|
|
+ <div class='shotw ' v-for="(item,index) in postList" :key="index" @click="isfgw(item)" >
|
|
|
+ <img src="../../../assets/images/fengm.png" alt="">
|
|
|
+ <img src="../../../assets/images/icon_spjk_play.png" alt="" class="iges">
|
|
|
+ <p style="font-size: 14px;">{{item.name}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col> -->
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <pagination
|
|
|
+ v-show="total>0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNo"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ /> -->
|
|
|
</div>
|
|
|
+
|
|
|
+
|
|
|
</div>
|
|
|
- <div class="canvas-wrap">
|
|
|
- <canvas id="imgCanvas" ref="canvaxbox"></canvas>
|
|
|
- <!--用来和鼠标进行交互操作的canvas-->
|
|
|
- <canvas
|
|
|
- id="drawCanvas"
|
|
|
- ref="canvas"
|
|
|
- :style="{ cursor: isDrawing ? 'crosshair' : 'default' }"
|
|
|
- >
|
|
|
- </canvas>
|
|
|
- <!--存储已生成的点线，避免被清空-->
|
|
|
- <canvas id="saveCanvas" ref="canvasSave"></canvas>
|
|
|
- </div>
|
|
|
+
|
|
|
+ <!-- 添加或修改岗位对话框 -->
|
|
|
+ <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
|
|
+
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-dialog :title="titles" :visible.sync="opens" width="1000px" append-to-body>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-dialog title="页面二维码" :visible.sync="opent" width="200px" style="padding: 0;" class="nhgrls" append-to-body>
|
|
|
+ <div v-show="opent" style="display: flex;justify-content: center;align-items: center;">
|
|
|
+ <!-- <span>{{'https://qszdh.qs163.cn/pages/index/index?id=' + this.bg}}</span> -->
|
|
|
+ <!-- <vue-qr :text="'https://qszdh.qs163.cn/pages/index/index?id=' + this.bg" :size="200"></vue-qr> -->
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
-<script>
|
|
|
-// import mqttHandle from "../../../utils/mqttHandler.js"
|
|
|
-import mqtt from 'mqtt';
|
|
|
-import { MqttClient } from 'mqtt'
|
|
|
-// 状态变量
|
|
|
- // const client = mqtt.connect('ws://13.229.167.76:1884/mqtt')
|
|
|
- var client = MqttClient||null
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- imgUrl: "",
|
|
|
- isDrawing: false, // 是否正在绘制
|
|
|
- ratio: 1,
|
|
|
- imgWidth: 3020,
|
|
|
- imgHeight: 1080,
|
|
|
- wrapWidth: 600,
|
|
|
- wrapHeight: 300,
|
|
|
- canvasWidth: 600,
|
|
|
- canvasHeight: 300,
|
|
|
- drawingPoints: [],
|
|
|
- drawedPoints: [],
|
|
|
- imgCanvas: null,
|
|
|
- imgCtx: null,
|
|
|
- drawCanvas: null,
|
|
|
- drawCtx: null,
|
|
|
- saveCanvas: null,
|
|
|
- saveCtx: null,
|
|
|
- submitData: [
|
|
|
- // {"polygon":{"x1":0,"y1":0,"x2":1920,"y2":0,"x3":1920,"y3":1080,"x4":0,"y4":1080}},
|
|
|
- // {
|
|
|
- // polygon: {
|
|
|
- // x1: 700,
|
|
|
- // y1: 273,
|
|
|
- // x2: 975,
|
|
|
- // y2: 278,
|
|
|
- // x3: 1107,
|
|
|
- // y3: 368,
|
|
|
- // x4: 718,
|
|
|
- // y4: 354,
|
|
|
- // },
|
|
|
- // },
|
|
|
- // {
|
|
|
- // polygon: {
|
|
|
- // x1: 49,
|
|
|
- // y1: 32,
|
|
|
- // x2: 183,
|
|
|
- // y2: 35,
|
|
|
- // x3: 181,
|
|
|
- // y3: 100,
|
|
|
- // x4: 55,
|
|
|
- // y4: 97,
|
|
|
- // },
|
|
|
- // },
|
|
|
- // {
|
|
|
- // polygon: {
|
|
|
- // x1: 433,
|
|
|
- // y1: 250,
|
|
|
- // x2: 706,
|
|
|
- // y2: 253,
|
|
|
- // x3: 707,
|
|
|
- // y3: 392,
|
|
|
- // x4: 435,
|
|
|
- // y4: 393,
|
|
|
- // },
|
|
|
- // },
|
|
|
- // {
|
|
|
- // polygon: {
|
|
|
- // x1: 45,
|
|
|
- // y1: 539,
|
|
|
- // x2: 193,
|
|
|
- // y2: 538,
|
|
|
- // x3: 192,
|
|
|
- // y3: 622,
|
|
|
- // x4: 41,
|
|
|
- // y4: 623,
|
|
|
- // x5: 42,
|
|
|
- // y5: 623,
|
|
|
- // },
|
|
|
- // },
|
|
|
- ],
|
|
|
- connectionStatus:'',
|
|
|
- isConnected:false,
|
|
|
- connecting:false,
|
|
|
- messages:[{ type: 'sent' , content: '', timestamp: '' }],
|
|
|
- messageToSend:[],
|
|
|
- mqttConfig:{
|
|
|
- url: 'ws://13.229.167.76:1884/mqtt',
|
|
|
- topic: 'detection/rect'
|
|
|
- },
|
|
|
- mqttThemeName:{
|
|
|
- url: 'ws://13.229.167.76:1884/mqtt',
|
|
|
- topic: 'detection/rect'
|
|
|
- },
|
|
|
- // [
|
|
|
- // {"polygon": {"x1":700,"y1":273,"x2":975,"y2":278,"x3":1107,"y3":368,"x4":718,"y4":354}}
|
|
|
- // ]
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
-
|
|
|
- console.log(JSON.parse(this.$route.query.src))
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.initCanvas();
|
|
|
- this.getImage();
|
|
|
- });
|
|
|
- // this.toggleConnection()
|
|
|
- // this.mqttzz()
|
|
|
- // setTimeout(() => {
|
|
|
- // }, 500);
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 创mqtt最终版
|
|
|
- mqttzz(){
|
|
|
- // 创建一个连接到MQTT broker的客户端实例
|
|
|
- // 连接成功后，订阅一个主题
|
|
|
- client.on('connect', function () {
|
|
|
- client.subscribe('detection/rect', function (err) {
|
|
|
- if (!err) {
|
|
|
- console.log('成功订阅 detection/rect 主题！')
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
- // 监听订阅主题上的消息
|
|
|
- client.on('message', function (topic, message) {
|
|
|
- // 处理接收到的消息
|
|
|
- console.log('收到主题 ' + topic + ' 的消息: ' + message.toString())
|
|
|
- })
|
|
|
- },
|
|
|
- initCanvas() {
|
|
|
- // 初始化canvas画布
|
|
|
-
|
|
|
- let canvasWrap = document.getElementsByClassName("canvas-wrap");
|
|
|
- this.wrapWidth = canvasWrap[0].clientWidth;
|
|
|
- this.wrapHeight = canvasWrap[0].clientHeight;
|
|
|
|
|
|
- this.imgCanvas = document.getElementById("imgCanvas");
|
|
|
- this.imgCtx = this.imgCanvas.getContext("2d");
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ listChannelNumber,
|
|
|
+ listChannelNumbernopa,
|
|
|
+ getChannelNumber,
|
|
|
+ delChannelNumber,
|
|
|
+ addChannelNumber,
|
|
|
+ updateChannelNumber
|
|
|
+ } from "@/api/system/channelNumber"
|
|
|
+ import {
|
|
|
+ listWarnManage,
|
|
|
+ getWarnManage,
|
|
|
+ delWarnManage,
|
|
|
+ addWarnManage,
|
|
|
+ updateWarnManage
|
|
|
+ } from "@/api/manage/warnManage"
|
|
|
+ import {
|
|
|
+ listParameterSet,
|
|
|
+ getParameterSet,
|
|
|
+ delParameterSet,
|
|
|
+ addParameterSet,
|
|
|
+ updateParameterSet
|
|
|
+ } from "@/api/manage/parameterSet"
|
|
|
+ // import { listReservat,camera,cameraIndexCode, listReservatd, getReservat, delReservat, addReservat, updateReservat,setPass,delReservathx,openDz,closeDz } from "@/api/tonggi/houtai";
|
|
|
+ // import vueQr from "vue-qr";
|
|
|
+ // import videojs from 'video.js'
|
|
|
+ // import 'video.js/dist/video-js.css'
|
|
|
+ // import {videoPlayer} from 'vue-video-player'
|
|
|
+ // import 'videojs-flash'
|
|
|
+ // import flvjs from 'flv.js/dist/flv.min.js'
|
|
|
+ // import flvjs from "flv.js";
|
|
|
+ import Bscroll from "better-scroll";
|
|
|
+ import logoImg from '@/assets/images/ceshi.png'
|
|
|
+ const defaultSettings = require("@/settings.js");
|
|
|
+ export default {
|
|
|
+ name: "Post",
|
|
|
+ dicts: ['sys_normal_disable', 'sys_yes_no', 'youke', 'tjzh', 'youkes', 'lafafen', 'fange', 'jluly'],
|
|
|
+ // components: {
|
|
|
+ // vueQr,
|
|
|
+ // videoPlayer
|
|
|
+ // },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 遮罩层
|
|
|
+ loading: true,
|
|
|
+ opent: false,
|
|
|
+ bg: null,
|
|
|
+ titles: '',
|
|
|
+ editableTabsValue: '6',
|
|
|
+ opens: false,
|
|
|
+ // 通道管理表格数据
|
|
|
+ channelNumberList: [],
|
|
|
+ imageUrl: '@/assets/logo/logo.png',
|
|
|
+ printObj: {
|
|
|
+ id: "nhgrew", // 这里是要打印元素的ID
|
|
|
+ popTitle: "", // 打印的标题
|
|
|
+ },
|
|
|
+ pickerOptions: {
|
|
|
+ disabledDate(time) {
|
|
|
+ //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
|
|
|
+ // return time.getTime() > Date.now()//选当前时间之前的时间
|
|
|
+ return time.getTime() < Date.now() - 8.64e7; //选当前时间之后的时间
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 选中数组
|
|
|
+ ids: [],
|
|
|
+ // 非单个禁用
|
|
|
+ single: true,
|
|
|
+ checkedScoreDataDetails: [],
|
|
|
+ scoreDataDetailsList: [],
|
|
|
+ tabPosition: 'left',
|
|
|
+ // 非多个禁用
|
|
|
+ multiple: true,
|
|
|
+ defaultSettings:defaultSettings,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 岗位表格数据
|
|
|
+ postList: [],
|
|
|
+ // 弹出层标题
|
|
|
+ title: "",
|
|
|
+ // 是否显示弹出层
|
|
|
+ open: false,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 500,
|
|
|
+ name: null,
|
|
|
+ postCode: undefined,
|
|
|
+ postName: undefined,
|
|
|
+ status: undefined,
|
|
|
+ reservatType: undefined
|
|
|
+ },
|
|
|
+ // 表单参数
|
|
|
+ form: {},
|
|
|
+ // 表单校验
|
|
|
+ rules: {
|
|
|
+ receptionId: [{
|
|
|
+ required: true,
|
|
|
+ message: "不能为空",
|
|
|
+ trigger: "blur"
|
|
|
+ }],
|
|
|
+ },
|
|
|
+ ruless: {
|
|
|
+ visitName: [{
|
|
|
+ required: true,
|
|
|
+ message: "不能为空",
|
|
|
+ trigger: "blur"
|
|
|
+ }],
|
|
|
+ visitPhone: [{
|
|
|
+ required: true,
|
|
|
+ message: "不能为空",
|
|
|
+ trigger: "blur"
|
|
|
+ }],
|
|
|
+ visitNum: [{
|
|
|
+ required: true,
|
|
|
+ message: "不能为空",
|
|
|
+ trigger: "blur"
|
|
|
+ }],
|
|
|
+ visitDate: [{
|
|
|
+ required: true,
|
|
|
+ message: "不能为空",
|
|
|
+ trigger: "blur"
|
|
|
+ }],
|
|
|
+ visitTime: [{
|
|
|
+ required: true,
|
|
|
+ message: "不能为空",
|
|
|
+ trigger: "blur"
|
|
|
+ }],
|
|
|
|
|
|
- // 绘制canvas
|
|
|
- this.drawCanvas = document.getElementById("drawCanvas");
|
|
|
- this.drawCtx = this.drawCanvas.getContext("2d");
|
|
|
+ },
|
|
|
+ forms: {
|
|
|
+ parameterId: null,
|
|
|
+ channelId: null,
|
|
|
+ equipmentId: null,
|
|
|
+ equipmentNum: null,
|
|
|
+ equipmentName: null,
|
|
|
+ channelNum: null,
|
|
|
+ channelRange: null,
|
|
|
+ leaveTime: 10,
|
|
|
+ playTime: 10,
|
|
|
+ leaveRate: 0.5,
|
|
|
+ playRate: 0.5,
|
|
|
+ delFlag: null,
|
|
|
+ createBy: null,
|
|
|
+ createTime: null,
|
|
|
+ updateBy: null,
|
|
|
+ updateTime: null,
|
|
|
+ remark: null
|
|
|
+ },
|
|
|
+ tableMaxHeight: '200',
|
|
|
+ kje: 0,
|
|
|
+ ksjegsg: [],
|
|
|
+ Scroll: null,
|
|
|
+ videoShow: false,
|
|
|
+ flvPlayer: null,
|
|
|
+ player: null,
|
|
|
+ name: null,
|
|
|
+ isshiwa: false,
|
|
|
+ isjfwe: {},
|
|
|
+ isshoe: false,
|
|
|
+ webRtcServer: null,
|
|
|
+ camera_ip: '127.0.0.1:8000',
|
|
|
+ g_iWndIndex: 0,
|
|
|
+ iRtspPort: '', //预览中的ip
|
|
|
+ szDeviceIdentify: '', //ip_port,
|
|
|
+ isfse: false,
|
|
|
|
|
|
- // 保存绘制区域 saveCanvas
|
|
|
- this.saveCanvas = document.getElementById("saveCanvas");
|
|
|
- this.saveCtx = this.saveCanvas.getContext("2d");
|
|
|
- // this.initImgCanvas()
|
|
|
- },
|
|
|
- initImgCanvas() {
|
|
|
- // 计算宽高比
|
|
|
- let ww = this.wrapWidth; // 画布宽度
|
|
|
- let wh = this.wrapHeight; // 画布高度
|
|
|
- let iw = this.imgWidth; // 图片宽度
|
|
|
- let ih = this.imgHeight; // 图片高度
|
|
|
-
|
|
|
- if (iw / ih < ww / wh) {
|
|
|
- // 以高为主
|
|
|
- this.ratio = ih / wh;
|
|
|
- this.canvasHeight = wh;
|
|
|
- this.canvasWidth = (wh * iw) / ih;
|
|
|
- } else {
|
|
|
- // 以宽为主
|
|
|
- this.ratio = iw / ww;
|
|
|
- this.canvasWidth = ww;
|
|
|
- this.canvasHeight = (ww * ih) / iw;
|
|
|
- }
|
|
|
- // 初始化画布大小
|
|
|
- this.imgCanvas.width = this.canvasWidth;
|
|
|
- this.imgCanvas.height = this.canvasHeight;
|
|
|
- this.drawCanvas.width = this.canvasWidth;
|
|
|
- this.drawCanvas.height = this.canvasHeight;
|
|
|
- this.saveCanvas.width = this.canvasWidth;
|
|
|
- this.saveCanvas.height = this.canvasHeight;
|
|
|
-
|
|
|
- // 图片加载绘制
|
|
|
- let img = document.createElement("img");
|
|
|
- img.src = this.imgUrl;
|
|
|
- img.onload = () => {
|
|
|
- console.log("图片已加载");
|
|
|
- this.imgCtx.drawImage(img, 0, 0, this.canvasWidth, this.canvasHeight);
|
|
|
- this.renderDatas(); // 渲染原有数据
|
|
|
+ g_bEnableDraw: false,
|
|
|
+ // 所有绘制的图形
|
|
|
+ shapes: [],
|
|
|
+ // 禁用
|
|
|
+ isdisflag: false,
|
|
|
+ connectionStatus: '',
|
|
|
+ isConnected: false,
|
|
|
+ connecting: false,
|
|
|
+ messages: [{
|
|
|
+ type: 'sent',
|
|
|
+ content: '',
|
|
|
+ timestamp: ''
|
|
|
+ }],
|
|
|
+ messageToSend: [],
|
|
|
+ mqttConfig: {
|
|
|
+ url: 'ws://13.229.167.76:1884/mqtt',
|
|
|
+ topic: 'detection/rect'
|
|
|
+ },
|
|
|
+ mqttThemeName: {
|
|
|
+ url: 'ws://13.229.167.76:1884/mqtt',
|
|
|
+ topic: 'detection/rect'
|
|
|
+ },
|
|
|
+ ishge: 0,
|
|
|
+ ips: '',
|
|
|
+ isdesl: false,
|
|
|
+ imgUrl: "../../../assets/images/fengm.png",
|
|
|
+ isDrawing: false, // 是否正在绘制
|
|
|
+ ratio: 1,
|
|
|
+ imgWidth: 3020,
|
|
|
+ imgHeight: 1080,
|
|
|
+ wrapWidth: 600,
|
|
|
+ wrapHeight: 300,
|
|
|
+ canvasWidth: 600,
|
|
|
+ canvasHeight: 300,
|
|
|
+ drawingPoints: [],
|
|
|
+ drawedPoints: [],
|
|
|
+ imgCanvas: null,
|
|
|
+ imgCtx: null,
|
|
|
+ drawCanvas: null,
|
|
|
+ drawCtx: null,
|
|
|
+ saveCanvas: null,
|
|
|
+ saveCtx: null,
|
|
|
+ srt:logoImg,
|
|
|
+ submitData: [
|
|
|
+ ],
|
|
|
+ connectionStatus:'',
|
|
|
+ isConnected:false,
|
|
|
+ connecting:false,
|
|
|
+ messages:[{ type: 'sent' , content: '', timestamp: '' }],
|
|
|
+ messageToSend:[],
|
|
|
};
|
|
|
},
|
|
|
- startDraw() {
|
|
|
- // 绘制区域
|
|
|
- if (this.isDrawing) return;
|
|
|
- this.isDrawing = true;
|
|
|
- // 绘制逻辑
|
|
|
- this.drawCanvas.addEventListener("click", this.drawImageClickFn);
|
|
|
- this.drawCanvas.addEventListener("dblclick", this.drawImageDblClickFn);
|
|
|
- this.drawCanvas.addEventListener("mousemove", this.drawImageMoveFn);
|
|
|
+ created() {
|
|
|
+ this.isfse = false
|
|
|
+ // this.getList();
|
|
|
+ this.getListtd()
|
|
|
+ window.onresize = () => {
|
|
|
+ this.changeTableMaxHeight()
|
|
|
+ }
|
|
|
+ this.changeTableMaxHeight()
|
|
|
+
|
|
|
},
|
|
|
- clearAll() {
|
|
|
- // 清空所有绘制区域
|
|
|
- this.saveCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
|
|
- this.drawedPoints = [];
|
|
|
+ mounted() {
|
|
|
+ // this.toggleConnection()
|
|
|
+ // this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//' + this.camera_ip)
|
|
|
+ // //需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。注意：视频编码格式必须是H264的，否则无法正常显示，编码格式可在摄像头的后台更改
|
|
|
+ // this.webRtcServer.connect('rtsp://admin:zxy123456@192.168.101.64:554/h264/ch1/main/av_stream')
|
|
|
+ window.onresize = () => {
|
|
|
+ this.changeTableMaxHeight()
|
|
|
+ this.initCanvas();
|
|
|
+ this.getImage();
|
|
|
+ }
|
|
|
+ this.changeTableMaxHeight()
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initScroll()
|
|
|
+ })
|
|
|
+
|
|
|
},
|
|
|
- getImage() {
|
|
|
- // 这里请求接口 ...
|
|
|
-
|
|
|
- // this.imgUrl = "https://w.wallhaven.cc/full/6d/wallhaven-6d5k6x.jpg";
|
|
|
- // this.imgWidth = 1920;
|
|
|
- // this.imgHeight = 1080;
|
|
|
- this.imgUrl =JSON.parse(this.$route.query.src)
|
|
|
- this.imgWidth = 660;
|
|
|
- this.imgHeight = 380;
|
|
|
- this.imgUrl && this.initImgCanvas();
|
|
|
+
|
|
|
+ beforeDestroy() {
|
|
|
+
|
|
|
},
|
|
|
- drawImageClickFn(e) {
|
|
|
- let drawCtx = this.drawCtx;
|
|
|
- if (e.offsetX || e.layerX) {
|
|
|
- let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
|
|
|
- let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
|
|
|
- let lastPoint = this.drawingPoints[this.drawingPoints.length - 1] || [];
|
|
|
- if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {
|
|
|
- this.drawingPoints.push([pointX, pointY]);
|
|
|
+ methods: {
|
|
|
+ /** 查询通道管理列表 */
|
|
|
+ getListtd() {
|
|
|
+ this.loading = true
|
|
|
+ let queryParams = {}
|
|
|
+ listChannelNumbernopa().then(response => {
|
|
|
+ this.channelNumberList = response.rows
|
|
|
+ if (this.channelNumberList.length != 0) {
|
|
|
+ getChannelNumber(this.channelNumberList[0].channelId).then(response => {
|
|
|
+ if (response.data.isChannel != 'N') {
|
|
|
+ this.shapes = JSON.parse(response.data.parameterSet.channelRange)
|
|
|
+ this.form = response.data.parameterSet
|
|
|
+ let result = (this.form.leaveTime / 60).toFixed(1);
|
|
|
+ let resultl = (this.form.playTime / 60).toFixed(1);
|
|
|
+ this.form.channelId = response.data.channelId
|
|
|
+ this.form.isChannel = response.data.isChannel
|
|
|
+ this.form.equipmentNum = response.data.equipmentNum
|
|
|
+ this.form.equipmentId = response.data.equipmentId
|
|
|
+ this.form.equipmentName = response.data.equipmentName
|
|
|
+ this.form.channelNum = response.data.channelNum
|
|
|
+ this.ips = response.data.equipmentIp
|
|
|
+ this.form.leaveTime = result
|
|
|
+ this.form.playTime = resultl
|
|
|
+ this.nshgehuixw()
|
|
|
+ } else {
|
|
|
+ this.form = {
|
|
|
+ parameterId: null,
|
|
|
+ channelId: response.data.channelId,
|
|
|
+ equipmentId: response.data.equipmentId,
|
|
|
+ equipmentNum: response.data.equipmentNum,
|
|
|
+ equipmentName: response.data.equipmentName,
|
|
|
+ channelNum: response.data.channelNum,
|
|
|
+ channelRange: null,
|
|
|
+ isChannel: response.data.isChannel,
|
|
|
+ leaveTime: 10,
|
|
|
+ playTime: 10,
|
|
|
+ leaveRate: 0.5,
|
|
|
+ playRate: 0.5,
|
|
|
+ delFlag: null,
|
|
|
+ createBy: null,
|
|
|
+ createTime: null,
|
|
|
+ updateBy: null,
|
|
|
+ updateTime: null,
|
|
|
+ remark: null
|
|
|
+ }
|
|
|
+ this.ips = response.data.equipmentIp
|
|
|
+ }
|
|
|
+ this.form.photoAddress = response.data.photoAddress
|
|
|
+ this.initCanvas();
|
|
|
+ this.getImage(this.form.photoAddress);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.loading = false
|
|
|
+ // getWarnManage(this.$route.query.id).then(response => {
|
|
|
+ // this.form = response.data
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 回显
|
|
|
+ nshgehuixw(){
|
|
|
+ let sngseju = []
|
|
|
+ this.shapes.filter(rou=>{
|
|
|
+ let sngsejutoe = []
|
|
|
+ for(var i=0; i< rou.points.length;i++ ){
|
|
|
+ let sngsejq = []
|
|
|
+ sngsejq.push(rou.points[i].x,rou.points[i].y)
|
|
|
+ sngsejutoe.push(sngsejq)
|
|
|
+ }
|
|
|
+ console.log(sngsejutoe)
|
|
|
+ sngseju.push(sngsejutoe)
|
|
|
+ })
|
|
|
+
|
|
|
+ this.drawedPoints = sngseju
|
|
|
+ let objectPoints = [];
|
|
|
+ // "object": [{"polygon": {"x1":700,"y1":273,"x2":975,"y2":278,"x3":1107,"y3":368,"x4":718,"y4":354} }]
|
|
|
+ objectPoints = this.drawedPoints.map((area) => {
|
|
|
+ console.log(area)
|
|
|
+ let polygon = {};
|
|
|
+ area.forEach((point, i) => {
|
|
|
+ console.log(point)
|
|
|
+ polygon[`x${i + 1}`] = (point[0] * this.drawCanvas.width).toFixed(1);
|
|
|
+ polygon[`y${i + 1}`] = (point[1] * this.drawCanvas.height).toFixed(1);
|
|
|
+ });
|
|
|
+ // console.log(polygon)
|
|
|
+ return {
|
|
|
+ polygon: polygon,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ this.submitData = objectPoints;
|
|
|
+ // console.log("最终提交数据", objectPoints);
|
|
|
+ this.messageToSend = this.submitData
|
|
|
+ console.log(this.drawedPoints,this.submitData)
|
|
|
+ this.renderDatas()
|
|
|
+ },
|
|
|
+ // 画图
|
|
|
+ initCanvas() {
|
|
|
+ // 初始化canvas画布
|
|
|
+
|
|
|
+ let canvasWrap = document.getElementsByClassName("canvas-wrap");
|
|
|
+ this.wrapWidth = canvasWrap[0].clientWidth;
|
|
|
+ this.wrapHeight = canvasWrap[0].clientHeight;
|
|
|
+
|
|
|
+ this.imgCanvas = document.getElementById("imgCanvas");
|
|
|
+ this.imgCtx = this.imgCanvas.getContext("2d");
|
|
|
+
|
|
|
+ // 绘制canvas
|
|
|
+ this.drawCanvas = document.getElementById("drawCanvas");
|
|
|
+ this.drawCtx = this.drawCanvas.getContext("2d");
|
|
|
+
|
|
|
+ // 保存绘制区域 saveCanvas
|
|
|
+ this.saveCanvas = document.getElementById("saveCanvas");
|
|
|
+ this.saveCtx = this.saveCanvas.getContext("2d");
|
|
|
+ // this.initImgCanvas()
|
|
|
+ },
|
|
|
+ initImgCanvas() {
|
|
|
+ // 计算宽高比
|
|
|
+ let ww = this.wrapWidth; // 画布宽度
|
|
|
+ let wh = this.wrapHeight; // 画布高度
|
|
|
+ let iw = this.imgWidth; // 图片宽度
|
|
|
+ let ih = this.imgHeight; // 图片高度
|
|
|
+
|
|
|
+ if (iw / ih < ww / wh) {
|
|
|
+ // 以高为主
|
|
|
+ this.ratio = ih / wh;
|
|
|
+ this.canvasHeight = wh;
|
|
|
+ this.canvasWidth = (wh * iw) / ih;
|
|
|
+ } else {
|
|
|
+ // 以宽为主
|
|
|
+ this.ratio = iw / ww;
|
|
|
+ this.canvasWidth = ww;
|
|
|
+ this.canvasHeight = (ww * ih) / iw;
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- drawImageMoveFn(e) {
|
|
|
- let drawCtx = this.drawCtx;
|
|
|
- if (e.offsetX || e.layerX) {
|
|
|
- let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
|
|
|
- let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
|
|
|
- // 绘制
|
|
|
- drawCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
|
|
+ // 初始化画布大小
|
|
|
+ this.imgCanvas.width = this.canvasWidth;
|
|
|
+ this.imgCanvas.height = this.canvasHeight;
|
|
|
+ this.drawCanvas.width = this.canvasWidth;
|
|
|
+ this.drawCanvas.height = this.canvasHeight;
|
|
|
+ this.saveCanvas.width = this.canvasWidth;
|
|
|
+ this.saveCanvas.height = this.canvasHeight;
|
|
|
+
|
|
|
+ // 图片加载绘制
|
|
|
+ let img = document.createElement("img");
|
|
|
+ img.src = this.imgUrl;
|
|
|
+ console.log(this.imgUrl)
|
|
|
+ img.onload = () => {
|
|
|
+ console.log("图片已加载");
|
|
|
+ this.imgCtx.drawImage(img, 0, 0, this.canvasWidth, this.canvasHeight);
|
|
|
+ this.renderDatas(); // 渲染原有数据
|
|
|
+ };
|
|
|
+ },
|
|
|
+ startDraw() {
|
|
|
+ // 绘制区域
|
|
|
+ if (this.isDrawing) return;
|
|
|
+ this.isDrawing = true;
|
|
|
+ // 绘制逻辑
|
|
|
+ this.drawCanvas.addEventListener("click", this.drawImageClickFn);
|
|
|
+ this.drawCanvas.addEventListener("dblclick", this.drawImageDblClickFn);
|
|
|
+ this.drawCanvas.addEventListener("mousemove", this.drawImageMoveFn);
|
|
|
+ },
|
|
|
+ clearAll() {
|
|
|
+ // 清空所有绘制区域
|
|
|
+ this.saveCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
|
|
+ this.drawedPoints = [];
|
|
|
+ this.shapes = []
|
|
|
+ },
|
|
|
+ getImage(row) {
|
|
|
+ // 这里请求接口 ...
|
|
|
+ // this.srt = row
|
|
|
+ this.imgUrl = this.defaultSettings.urls + process.env.VUE_APP_BASE_API + row ;
|
|
|
+ // this.imgUrl = this.srt
|
|
|
+ // this.imgWidth = 1920;
|
|
|
+ // this.imgHeight = 1080;
|
|
|
+ // this.imgUrl =JSON.parse(this.$route.query.src)
|
|
|
+ this.imgWidth = 660;
|
|
|
+ this.imgHeight = 380;
|
|
|
+ console.log(this.imgUrl,98)
|
|
|
+ this.imgUrl && this.initImgCanvas();
|
|
|
+ },
|
|
|
+ drawImageClickFn(e) {
|
|
|
+ let drawCtx = this.drawCtx;
|
|
|
+ if (e.offsetX || e.layerX) {
|
|
|
+ let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
|
|
|
+ let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
|
|
|
+ let lastPoint = this.drawingPoints[this.drawingPoints.length - 1] || [];
|
|
|
+ if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {
|
|
|
+ this.drawingPoints.push([pointX, pointY]);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ drawImageMoveFn(e) {
|
|
|
+ let drawCtx = this.drawCtx;
|
|
|
+ if (e.offsetX || e.layerX) {
|
|
|
+ let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
|
|
|
+ let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
|
|
|
+ // 绘制
|
|
|
+ drawCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
|
|
+ // 绘制点
|
|
|
+ drawCtx.fillStyle = "blue";
|
|
|
+ this.drawingPoints.forEach((item, i) => {
|
|
|
+ drawCtx.beginPath();
|
|
|
+ drawCtx.arc(...item, 6, 0, 180);
|
|
|
+ drawCtx.fill(); //填充
|
|
|
+ // console.log(item)
|
|
|
+ });
|
|
|
|
|
|
- // 绘制点
|
|
|
- drawCtx.fillStyle = "blue";
|
|
|
- this.drawingPoints.forEach((item, i) => {
|
|
|
+ // 绘制动态区域
|
|
|
+ drawCtx.save();
|
|
|
drawCtx.beginPath();
|
|
|
- drawCtx.arc(...item, 6, 0, 180);
|
|
|
+ this.drawingPoints.forEach((item, i) => {
|
|
|
+ drawCtx.lineTo(...item);
|
|
|
+ });
|
|
|
+ drawCtx.lineTo(pointX, pointY);
|
|
|
+ drawCtx.lineWidth = "3";
|
|
|
+ drawCtx.strokeStyle = "blue";
|
|
|
+ drawCtx.fillStyle = "rgba(255, 0, 0, 0.3)";
|
|
|
+ drawCtx.stroke();
|
|
|
drawCtx.fill(); //填充
|
|
|
+ drawCtx.restore();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ drawImageDblClickFn(e) {
|
|
|
+ let drawCtx = this.drawCtx;
|
|
|
+ let saveCtx = this.saveCtx;
|
|
|
+ if (e.offsetX || e.layerX) {
|
|
|
+ let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
|
|
|
+ let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
|
|
|
+ let lastPoint = this.drawingPoints[this.drawingPoints.length - 1] || [];
|
|
|
+ if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {
|
|
|
+ this.drawingPoints.push([pointX, pointY]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 清空绘制图层
|
|
|
+ drawCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
|
|
+ // 绘制区域至保存图层
|
|
|
+ this.drawSaveArea(this.drawingPoints);
|
|
|
+ this.drawedPoints.push(this.drawingPoints);
|
|
|
+ this.drawingPoints = [];
|
|
|
+ this.isDrawing = false;
|
|
|
+ // 绘制结束逻辑
|
|
|
+ this.drawCanvas.removeEventListener("click", this.drawImageClickFn);
|
|
|
+ this.drawCanvas.removeEventListener("dblclick", this.drawImageDblClickFn);
|
|
|
+ this.drawCanvas.removeEventListener("mousemove", this.drawImageMoveFn);
|
|
|
+ },
|
|
|
+ drawSaveArea(points) {
|
|
|
+ console.log(points, "points");
|
|
|
+ if (points.length === 0) return;
|
|
|
+ this.saveCtx.save();
|
|
|
+ this.saveCtx.beginPath();
|
|
|
+ points.forEach((item, i) => {
|
|
|
+ this.saveCtx.lineTo(...item);
|
|
|
});
|
|
|
+ this.saveCtx.closePath();
|
|
|
+ this.saveCtx.lineWidth = "2";
|
|
|
+ this.saveCtx.fillStyle = "rgba(255,0, 255, 0.3)";
|
|
|
+ this.saveCtx.strokeStyle = "red";
|
|
|
+ this.saveCtx.stroke();
|
|
|
+ this.saveCtx.fill(); //填充
|
|
|
+ this.saveCtx.restore();
|
|
|
+ },
|
|
|
+
|
|
|
+ savePoints() {
|
|
|
+ // 将画布坐标数据转换成提交数据
|
|
|
+ let objectPoints = [];
|
|
|
+ // "object": [{"polygon": {"x1":700,"y1":273,"x2":975,"y2":278,"x3":1107,"y3":368,"x4":718,"y4":354} }]
|
|
|
+ console.log(this.drawedPoints,)
|
|
|
+ objectPoints = this.drawedPoints.map((area,t) => {
|
|
|
+ console.log(t)
|
|
|
+ let polygon = [];
|
|
|
+ let name = '绘制区域' + (t+1)
|
|
|
+ area.forEach((point, i) => {
|
|
|
+ let nsdfs = {x:null,y:null}
|
|
|
+ console.log(point,93)
|
|
|
+ nsdfs.x = point[0] ;
|
|
|
+ nsdfs.y = point[1] ;
|
|
|
+ nsdfs.x = ( nsdfs.x / this.drawCanvas.width ).toFixed(6)
|
|
|
+ nsdfs.y = ( nsdfs.y / this.drawCanvas.height).toFixed(6)
|
|
|
+ polygon.push(nsdfs)
|
|
|
+ this.shapes.filter(rou=>{
|
|
|
+ if(rou.points[0].x == nsdfs.x ){
|
|
|
+ if(rou.points[0].y == nsdfs.y ){
|
|
|
+ name = rou.name
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- // 绘制动态区域
|
|
|
- drawCtx.save();
|
|
|
- drawCtx.beginPath();
|
|
|
- this.drawingPoints.forEach((item, i) => {
|
|
|
- drawCtx.lineTo(...item);
|
|
|
+ })
|
|
|
+ });
|
|
|
+ console.log(polygon,this.shapes,9123)
|
|
|
+ return {
|
|
|
+ points: polygon,
|
|
|
+ id:t+1,
|
|
|
+ name:name,
|
|
|
+ ip:this.ips
|
|
|
+ };
|
|
|
});
|
|
|
- drawCtx.lineTo(pointX, pointY);
|
|
|
- drawCtx.lineWidth = "3";
|
|
|
- drawCtx.strokeStyle = "blue";
|
|
|
- drawCtx.fillStyle = "rgba(255, 0, 0, 0.3)";
|
|
|
- drawCtx.stroke();
|
|
|
- drawCtx.fill(); //填充
|
|
|
- drawCtx.restore();
|
|
|
- }
|
|
|
- },
|
|
|
- drawImageDblClickFn(e) {
|
|
|
- let drawCtx = this.drawCtx;
|
|
|
- let saveCtx = this.saveCtx;
|
|
|
- if (e.offsetX || e.layerX) {
|
|
|
- let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
|
|
|
- let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
|
|
|
- let lastPoint = this.drawingPoints[this.drawingPoints.length - 1] || [];
|
|
|
- if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {
|
|
|
- this.drawingPoints.push([pointX, pointY]);
|
|
|
+ this.submitData = objectPoints;
|
|
|
+ this.shapes = objectPoints
|
|
|
+ console.log("最终提交数据", objectPoints,this.shapes);
|
|
|
+ this.messageToSend = this.submitData
|
|
|
+ // this.sendMessage()
|
|
|
+ // this.$router.go(-1)
|
|
|
+ },
|
|
|
+ renderDatas() {
|
|
|
+ // 将提交数据数据转换成画布坐标
|
|
|
+ this.drawedPoints = this.submitData.map((item) => {
|
|
|
+ // console.log(item.polygon,item,19)
|
|
|
+ let polygon = item.polygon;
|
|
|
+ let points = [];
|
|
|
+ for (let i = 1; i < Object.keys(polygon).length / 2 + 1; i++) {
|
|
|
+ if (!isNaN(polygon[`x${i}`]) && !isNaN(polygon[`y${i}`])) {
|
|
|
+ points.push([
|
|
|
+ polygon[`x${i}`] ,
|
|
|
+ polygon[`y${i}`] ,
|
|
|
+ ]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log(points)
|
|
|
+ this.drawSaveArea(points);
|
|
|
+ return points;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //删除图形
|
|
|
+ clickDelSnapPolygon(szId, idx) {
|
|
|
+ console.log(3)
|
|
|
+ this.shapes.splice(idx, 1)
|
|
|
+ // this.shapes.splice(idx,1)
|
|
|
+ let shzou = []
|
|
|
+ // "object": [{"polygon": {"x1":700,"y1":273,"x2":975,"y2":278,"x3":1107,"y3":368,"x4":718,"y4":354} }]
|
|
|
+ for(var i = 0 ; i <this.shapes.length; i++){
|
|
|
+ this.shapes[i].id= i+ 1
|
|
|
}
|
|
|
- }
|
|
|
- // 清空绘制图层
|
|
|
- drawCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
|
|
- // 绘制区域至保存图层
|
|
|
- this.drawSaveArea(this.drawingPoints);
|
|
|
-
|
|
|
- this.drawedPoints.push(this.drawingPoints);
|
|
|
- this.drawingPoints = [];
|
|
|
- this.isDrawing = false;
|
|
|
-
|
|
|
- // 绘制结束逻辑
|
|
|
- this.drawCanvas.removeEventListener("click", this.drawImageClickFn);
|
|
|
- this.drawCanvas.removeEventListener("dblclick", this.drawImageDblClickFn);
|
|
|
- this.drawCanvas.removeEventListener("mousemove", this.drawImageMoveFn);
|
|
|
- },
|
|
|
- drawSaveArea(points) {
|
|
|
- // console.log(points, "points");
|
|
|
- if (points.length === 0) return;
|
|
|
- this.saveCtx.save();
|
|
|
- this.saveCtx.beginPath();
|
|
|
- points.forEach((item, i) => {
|
|
|
- this.saveCtx.lineTo(...item);
|
|
|
- });
|
|
|
- this.saveCtx.closePath();
|
|
|
- this.saveCtx.lineWidth = "2";
|
|
|
- this.saveCtx.fillStyle = "rgba(255,0, 255, 0.3)";
|
|
|
- this.saveCtx.strokeStyle = "red";
|
|
|
- this.saveCtx.stroke();
|
|
|
- this.saveCtx.fill(); //填充
|
|
|
- this.saveCtx.restore();
|
|
|
- },
|
|
|
+ this.saveCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
|
|
+ this.nshgehuixw()
|
|
|
+ // this.submitData = this.shapes
|
|
|
+ // this.drawedPoints = this.shapes
|
|
|
|
|
|
- savePoints() {
|
|
|
- // 将画布坐标数据转换成提交数据
|
|
|
- let objectPoints = [];
|
|
|
- // "object": [{"polygon": {"x1":700,"y1":273,"x2":975,"y2":278,"x3":1107,"y3":368,"x4":718,"y4":354} }]
|
|
|
- objectPoints = this.drawedPoints.map((area) => {
|
|
|
- let polygon = {};
|
|
|
- area.forEach((point, i) => {
|
|
|
- polygon[`x${i + 1}`] = Math.round(point[0] * this.ratio);
|
|
|
- polygon[`y${i + 1}`] = Math.round(point[1] * this.ratio);
|
|
|
- });
|
|
|
- // console.log(polygon)
|
|
|
- return {
|
|
|
- polygon: polygon,
|
|
|
- };
|
|
|
- });
|
|
|
- this.submitData = objectPoints;
|
|
|
- console.log("最终提交数据", objectPoints);
|
|
|
- this.messageToSend = this.submitData
|
|
|
- // this.sendMessage()
|
|
|
- // this.$router.go(-1)
|
|
|
- },
|
|
|
- toggleConnection(){
|
|
|
- if (this.isConnected) {
|
|
|
- // 断开连接
|
|
|
- client.end()
|
|
|
- this.isConnected= false
|
|
|
- this.connectionStatus = 'Disconnected'
|
|
|
- return
|
|
|
- }
|
|
|
+ // this.renderDatas()
|
|
|
+ console.log(this.shapes,shzou)
|
|
|
|
|
|
- // 建立连接
|
|
|
- this.connecting = true
|
|
|
- try {
|
|
|
- client= mqtt.connect(this.mqttConfig.url, {
|
|
|
- clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
|
|
|
- keepalive: 60,
|
|
|
- clean: true,
|
|
|
- connectTimeout: 4000,
|
|
|
- reconnectPeriod: 1000
|
|
|
- })
|
|
|
- client.on('connect', () => {
|
|
|
- this.isConnected = true
|
|
|
- this.connectionStatus= 'Connected'
|
|
|
- this.connecting = false
|
|
|
- console.log(3)
|
|
|
- // 订阅主题
|
|
|
- client.subscribe(this.mqttConfig.topic, (err) => {
|
|
|
- if (err) {
|
|
|
- console.error('Subscribe error:', err)
|
|
|
- }else{
|
|
|
- console.log('成功订阅 detection/rect 主题！')
|
|
|
+ },
|
|
|
+
|
|
|
+ // 通道点击
|
|
|
+ ishg(val, row) {
|
|
|
+ this.isfse = false
|
|
|
+ this.ishge = row
|
|
|
+ getChannelNumber(val.channelId).then(response => {
|
|
|
+ if (response.data.isChannel == 'Y') {
|
|
|
+ this.form = response.data.parameterSet
|
|
|
+ let result = (this.form.leaveTime / 60).toFixed(1);
|
|
|
+ let resultl = (this.form.playTime / 60).toFixed(1);
|
|
|
+ this.shapes = JSON.parse(this.form.channelRange)
|
|
|
+ this.form.channelId = response.data.channelId
|
|
|
+ this.form.isChannel = response.data.isChannel
|
|
|
+ this.form.equipmentNum = response.data.equipmentNum
|
|
|
+ this.form.equipmentId = response.data.equipmentId
|
|
|
+ this.form.equipmentName = response.data.equipmentName
|
|
|
+ this.form.channelNum = response.data.channelNum
|
|
|
+ this.ips = response.data.equipmentIp
|
|
|
+ this.form.leaveTime = result
|
|
|
+ this.form.playTime = resultl
|
|
|
+ this.form.photoAddress = response.data.photoAddress
|
|
|
+ this.initCanvas();
|
|
|
+ this.getImage(this.form.photoAddress);
|
|
|
+ this.saveCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
|
|
+ this.nshgehuixw()
|
|
|
+ } else {
|
|
|
+ this.form = {
|
|
|
+ parameterId: null,
|
|
|
+ channelId: response.data.channelId,
|
|
|
+ equipmentId: response.data.equipmentId,
|
|
|
+ equipmentNum: response.data.equipmentNum,
|
|
|
+ equipmentName: response.data.equipmentName,
|
|
|
+ channelNum: response.data.channelNum,
|
|
|
+ channelRange: null,
|
|
|
+ isChannel: response.data.isChannel,
|
|
|
+ leaveTime: 10,
|
|
|
+ playTime: 10,
|
|
|
+ leaveRate: 0.5,
|
|
|
+ playRate: 0.5,
|
|
|
+ delFlag: null,
|
|
|
+ createBy: null,
|
|
|
+ createTime: null,
|
|
|
+ updateBy: null,
|
|
|
+ updateTime: null,
|
|
|
+ remark: null
|
|
|
}
|
|
|
+ this.shapes = []
|
|
|
+ // this.drawSaveArea = []
|
|
|
+ this.submitData = []
|
|
|
+ this.ips = response.data.equipmentIp
|
|
|
+ this.form.photoAddress = response.data.photoAddress
|
|
|
+ this.initCanvas();
|
|
|
+ this.getImage(this.form.photoAddress);
|
|
|
+ this.saveCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
|
|
+ // this.ips = snghst[0]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // this.clickStartRealPlay('192.168.101.64', '80',1, 0, 1);
|
|
|
|
|
|
- })
|
|
|
+ },
|
|
|
+ initScroll() {
|
|
|
+ // 给内层盒子设置宽度，不设置宽度的话无法滚动
|
|
|
+ // let width = this.goods.length * 60
|
|
|
+ // // 如果有外边距，可以这样写。需要去掉最后一个元素的外边距，在后面减一下
|
|
|
+ // let width = this.goodslength * (60 + 10) - 10
|
|
|
+ let width = 6 * (200 + 10) - 10
|
|
|
+ // this.$refs.content.style.width = width + 'px'
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (!this.Scroll) {
|
|
|
+ this.Scroll = new Bscroll(this.$refs.wrapper, {
|
|
|
+ click: true, // 配置允许点击事件
|
|
|
+ scrollX: true, // 开启横向滚动
|
|
|
+ eventPassthrough: 'vertical', // 当设置 eventPassthrough 为 'vertical' 的时候，scrollY 无效
|
|
|
+ mouseWheel: true,
|
|
|
+ scrollbar: { // 滚动条, 要加相对位置
|
|
|
+ fade: true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.Scroll.refresh() // 重新计算 better-scroll，当 DOM 结构发生变化的时确保滚动效果正常
|
|
|
+ }
|
|
|
})
|
|
|
- client.on('message', (topic, message) => {
|
|
|
- // 接受信息
|
|
|
- console.log(topic,message)
|
|
|
- this.messages.unshift({
|
|
|
- type: 'received',
|
|
|
- content: message.toString(),
|
|
|
- timestamp: new Date().toLocaleTimeString()
|
|
|
- })
|
|
|
+ },
|
|
|
+ // 取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.open = false;
|
|
|
+ this.opens = false;
|
|
|
+ this.reset();
|
|
|
+ },
|
|
|
+ // 表单重置
|
|
|
+ reset() {
|
|
|
+ this.form = {
|
|
|
+ receptionId: undefined,
|
|
|
+ receptionPhone: undefined,
|
|
|
+ // postSort: 0,
|
|
|
+ // status: "0",
|
|
|
+ receptionName: undefined
|
|
|
+ };
|
|
|
+ this.resetForm("form");
|
|
|
+ },
|
|
|
+
|
|
|
+ iszheg(event) {
|
|
|
+ console.log(event);
|
|
|
+
|
|
|
+
|
|
|
+ // 校验身份证：
|
|
|
+ console.log(reg.test(this.form.idCard), 23741)
|
|
|
+ if (reg.test(this.form.idCard) || _IDre15.test(this.form.idCard)) {
|
|
|
+ // this.idea();
|
|
|
+ this.go(this.form.idCard);
|
|
|
+ // callback()
|
|
|
+ } else {
|
|
|
+ if (ncjsle.test(this.form.idCard) || nhyeli.test(this.form.idCard)) {
|
|
|
+ console.log(3)
|
|
|
+ } else {
|
|
|
+ if (gnse.test(this.form.idCard)) {
|
|
|
+ console.log(4)
|
|
|
+ } else {
|
|
|
+ if (tw.test(this.form.idCard) || twe.test(this.form.idCard)) {
|
|
|
+ console.log(5)
|
|
|
+ } else {
|
|
|
+ this.$message.error('证件格式不正确');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ erw(row) {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/reny/ewm',
|
|
|
+ query: {
|
|
|
+ 'tenantId': row.investigateTableId
|
|
|
+ }
|
|
|
})
|
|
|
- client.on('error', (err) => {
|
|
|
- console.error('MQTT Error:', err)
|
|
|
- this.connectionStatus= 'Error'
|
|
|
- this.connecting = false
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 成绩_子序号 */
|
|
|
+ rowScoreDataDetailsIndex({
|
|
|
+ row,
|
|
|
+ rowIndex
|
|
|
+ }) {
|
|
|
+ row.index = rowIndex + 1;
|
|
|
+ },
|
|
|
+ /** 删除按钮操作 */
|
|
|
+ handleDelete(row) {
|
|
|
+ const postIds = row.recordId || this.ids;
|
|
|
+ delReservat(postIds).then(response => {
|
|
|
+ this.$modal.msgSuccess("操作成功");
|
|
|
+ this.getList();
|
|
|
+ });
|
|
|
+
|
|
|
+ // this.$modal.confirm('是否确认删除数据项？').then(function() {
|
|
|
+ // return delPost(postIds);
|
|
|
+ // }).then(() => {
|
|
|
+ // this.getList();
|
|
|
+ // this.$modal.msgSuccess("删除成功");
|
|
|
+ // }).catch(() => {});
|
|
|
+ },
|
|
|
+ handleDeletehx(row) {
|
|
|
+ const postIds = row.reservatId || this.ids;
|
|
|
+ let nhg = {}
|
|
|
+ nhg.reservatId = postIds
|
|
|
+ delReservathx(nhg).then(response => {
|
|
|
+ this.$modal.msgSuccess("操作成功");
|
|
|
+ this.getList();
|
|
|
+ });
|
|
|
+
|
|
|
+ // this.$modal.confirm('是否确认删除数据项？').then(function() {
|
|
|
+ // return delPost(postIds);
|
|
|
+ // }).then(() => {
|
|
|
+ // this.getList();
|
|
|
+ // this.$modal.msgSuccess("删除成功");
|
|
|
+ // }).catch(() => {});
|
|
|
+ },
|
|
|
+ // 发送短信
|
|
|
+ handleUpdatefas(row) {
|
|
|
+ updateFs(row).then(response => {
|
|
|
+ this.$modal.msgSuccess("发送成功");
|
|
|
+ // this.getList();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleDeletegx(row) {
|
|
|
+ updateGx(row).then(response => {
|
|
|
+ this.$modal.msgSuccess("发送成功");
|
|
|
+ // this.getList();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 导出按钮操作 */
|
|
|
+ handleExport() {
|
|
|
+ this.download('system/reservat/export', {
|
|
|
+ ...this.queryParams
|
|
|
+ }, `预约人员.xlsx`)
|
|
|
+ },
|
|
|
+ // 获取屏幕高度
|
|
|
+ showFilterForm() {
|
|
|
+ this.filterActive = !this.filterActive
|
|
|
+ this.changeTableMaxHeight()
|
|
|
+ },
|
|
|
+ changeTableMaxHeight() {
|
|
|
+ let height = document.body.offsetHeight // 网页可视区域高度
|
|
|
+ // if (this.filterActive) {
|
|
|
+ // this.tableMaxHeight = height - 320
|
|
|
+ // } else {
|
|
|
+ this.tableMaxHeight = height - 350
|
|
|
+ // }
|
|
|
+ console.log(height)
|
|
|
+ },
|
|
|
+ /** 提交按钮 */
|
|
|
+ submitForm() {
|
|
|
+ this.$refs["form"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ // console.log(this.form)
|
|
|
+ // return
|
|
|
+ this.form.leaveTime = (this.form.leaveTime - 0) * 60
|
|
|
+ this.form.playTime = (this.form.playTime - 0) * 60
|
|
|
+ this.form.channelRange = JSON.stringify(this.shapes)
|
|
|
+ if (this.form.isChannel != 'N') {
|
|
|
+ updateParameterSet(this.form).then(response => {
|
|
|
+ this.$modal.msgSuccess("修改成功")
|
|
|
+ this.open = false
|
|
|
+ let result = (this.form.leaveTime / 60).toFixed(1);
|
|
|
+ let resultl = (this.form.playTime / 60).toFixed(1);
|
|
|
+ this.form.leaveTime = result
|
|
|
+ this.form.playTime = resultl
|
|
|
+ // this.$router.go(-1)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ addParameterSet(this.form).then(response => {
|
|
|
+ this.$modal.msgSuccess("新增成功")
|
|
|
+ this.open = false
|
|
|
+ // this.$router.go(-1)
|
|
|
+ let result = (this.form.leaveTime / 60).toFixed(1);
|
|
|
+ let resultl = (this.form.playTime / 60).toFixed(1);
|
|
|
+ this.form.leaveTime = result
|
|
|
+ this.form.playTime = resultl
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
})
|
|
|
- } catch (error) {
|
|
|
- console.error('Connection error:', error)
|
|
|
- this.connectionStatus= 'Error'
|
|
|
- this.connecting = false
|
|
|
+ },
|
|
|
+ xiazag() {
|
|
|
+ var loadUrl = 'http://172.28.195.154:15010/prod-api/profile/HCWebSDKPluginsUserSetup.exe'
|
|
|
+ window.open(loadUrl, );
|
|
|
+ // const x = new XMLHttpRequest()
|
|
|
+ // x.open('GET', 'http://192.168.9.240:5010/profile/HCWebSDKPluginsUserSetup.zip', true)
|
|
|
+ // x.responseType = 'blob'
|
|
|
+ // x.onload = function() {
|
|
|
+ // const url = window.URL.createObjectURL(x.response)
|
|
|
+ // const a = document.createElement('a')
|
|
|
+ // a.href = 'http://192.168.9.240:5010/profile/HCWebSDKPluginsUserSetup.zip'
|
|
|
+ // a.download = ''
|
|
|
+ // a.click()
|
|
|
+ // }
|
|
|
+ // x.send()
|
|
|
}
|
|
|
- },
|
|
|
- sendMessage(){
|
|
|
- if (!client || !this.messageToSend) return
|
|
|
- this.messageToSend = JSON.stringify(this.messageToSend)
|
|
|
- console.log(this.messageToSend)
|
|
|
- client.publish(this.mqttConfig.topic, this.messageToSend)
|
|
|
- this.messages.unshift({
|
|
|
- type: 'sent',
|
|
|
- content: this.messageToSend,
|
|
|
- timestamp: new Date().toLocaleTimeString()
|
|
|
- })
|
|
|
- this.messageToSend = []
|
|
|
- },
|
|
|
- renderDatas() {
|
|
|
-
|
|
|
- // 将提交数据数据转换成画布坐标
|
|
|
- this.drawedPoints = this.submitData.map((item) => {
|
|
|
- let polygon = item.polygon;
|
|
|
- let points = [];
|
|
|
- for (let i = 1; i < Object.keys(polygon).length / 2 + 1; i++) {
|
|
|
- if (!isNaN(polygon[`x${i}`]) && !isNaN(polygon[`y${i}`])) {
|
|
|
- points.push([
|
|
|
- polygon[`x${i}`] / this.ratio,
|
|
|
- polygon[`y${i}`] / this.ratio,
|
|
|
- ]);
|
|
|
- }
|
|
|
- }
|
|
|
- this.drawSaveArea(points);
|
|
|
- return points;
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
+ }
|
|
|
+ };
|
|
|
</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-.tool-box {
|
|
|
- width: 98%;
|
|
|
- height: 40px;
|
|
|
- padding: 5px 30px;
|
|
|
- margin: 20px auto 0;
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: right;
|
|
|
-}
|
|
|
-.canvas-wrap {
|
|
|
- // width: 80vw;
|
|
|
- // height: 45vw;
|
|
|
- width:88%;
|
|
|
- height: 33.75vw;
|
|
|
- margin: 0px auto;
|
|
|
- background-color: #000; //#fff;
|
|
|
- border: 3px;
|
|
|
- border-color: #333;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-#imgCanvas,
|
|
|
-#drawCanvas,
|
|
|
-#saveCanvas {
|
|
|
- background: rgba(255, 0, 255, 0);
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
-}
|
|
|
-#drawCanvas {
|
|
|
- z-index: 2;
|
|
|
-}
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .snhseinu {
|
|
|
+ .el-input--medium .el-input__inner {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .isjses {
|
|
|
+ .el-tabs--left .el-tabs__nav-wrap.is-left::after {
|
|
|
+ width: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tabs--left .el-tabs__active-bar.is-left,
|
|
|
+ {
|
|
|
+ width: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ingaqe {
|
|
|
+ .el-input--medium {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nhgrls {
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .hyr {
|
|
|
+ span {
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
|
|
+<style scoped lang="scss">
|
|
|
+ .tool-box {
|
|
|
+ width: 98%;
|
|
|
+ height: 40px;
|
|
|
+ padding: 5px 30px;
|
|
|
+ margin: 20px auto 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .canvas-wrap {
|
|
|
+ // width: 80vw;
|
|
|
+ // height: 45vw;
|
|
|
+ width:100%;
|
|
|
+ height: 69vh;
|
|
|
+ margin: 0px auto;
|
|
|
+ background-color: #fff; //#fff;
|
|
|
+ border: 3px;
|
|
|
+ border-color: #333;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ #imgCanvas,
|
|
|
+ #drawCanvas,
|
|
|
+ #saveCanvas {
|
|
|
+ background: rgba(255, 0, 255, 0);
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ #drawCanvas {
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ .nghwgq {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 90px;
|
|
|
+
|
|
|
+ div {
|
|
|
+ color: #aaa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ihgswq {
|
|
|
+ // width:100%;
|
|
|
+ // overflow-x: hidden;
|
|
|
+ // margin-top: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fijge {
|
|
|
+ // width: 110%;
|
|
|
+ display: flex;
|
|
|
+ display: -webkit-flex;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
+ .shotw {
|
|
|
+ position: relative;
|
|
|
+ // width:32%;
|
|
|
+ width: 238px;
|
|
|
+ height: 140px;
|
|
|
+ margin-left: 0;
|
|
|
+ margin-right: 20px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ height: 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ // bottom:-10px;
|
|
|
+ margin: 0;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iges {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nhgwesvq {
|
|
|
+ width: 1610px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shotw {
|
|
|
+ position: relative;
|
|
|
+ margin-left: -20px;
|
|
|
+ margin-right: -20px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 80vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ background-color: rgba(0, 0, 0, .5);
|
|
|
+ width: 100%;
|
|
|
+ padding: 13px 5px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .p {
|
|
|
+ top: 0px;
|
|
|
+ height: 60px;
|
|
|
+ margin: 0;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .ksfpo {
|
|
|
+ background-color: #3464EB;
|
|
|
+ padding: 6px 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ksfpok {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ padding: 5px 11px;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #3464EB;
|
|
|
+ border: 1px solid #3464EB;
|
|
|
+ margin-left: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ksfpofg {
|
|
|
+ background-color: #75DB75;
|
|
|
+ padding: 5px 11px;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border: 1px solid #75DB75;
|
|
|
+ margin-left: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iuer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .ite {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ p {
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 0;
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ padding: 4px 12px;
|
|
|
+ background: #Fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 20px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .actt {
|
|
|
+ background: #fff;
|
|
|
+ // border-bottom: 3px solid #5974E0;
|
|
|
+ // border-radius: 0;
|
|
|
+ // border-bottom-right-radius: 4px;
|
|
|
+ color: #5974E0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .actt {
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ width: 40%;
|
|
|
+ height: 5px;
|
|
|
+ border-radius: 3px;
|
|
|
+ transform: translate(-50%);
|
|
|
+ background-color: #5974E0;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: -3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .lqw {
|
|
|
+ padding: 0 10px;
|
|
|
+ margin: 0;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nhgel {
|
|
|
+ height: 170px;
|
|
|
+ background-color: #313b61;
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-container {
|
|
|
+ background-color: #f3f4f6;
|
|
|
+ padding-top: 10px;
|
|
|
+ height: 180vh;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .ntgs {
|
|
|
+ position: relative;
|
|
|
+ // background-color: #fff;
|
|
|
+ padding: 5px;
|
|
|
+ // border-radius: 5px;
|
|
|
+ padding-top: 10px;
|
|
|
+ padding: 10px 20px;
|
|
|
+
|
|
|
+ .pagination-container {
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nghfs {
|
|
|
+ position: relative;
|
|
|
+ background-color: #fff;
|
|
|
+ padding-top: 18px !important;
|
|
|
+ padding: 5px;
|
|
|
+ // border-radius: 5px;
|
|
|
+ // margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ksf {
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ingwfaq {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dflex {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dflext {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ .drawings-list {
|
|
|
+ width: 100%;
|
|
|
+ flex: 0 0 auto;
|
|
|
+ padding-left: 10px;
|
|
|
+ line-height: 36px;
|
|
|
+
|
|
|
+ .delimg {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .txt {
|
|
|
+ font-size: 12px;
|
|
|
+ padding-left: 5px;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tflex {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .disbtn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex: 0 0 auto;
|
|
|
+ min-height: 34px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #444444;
|
|
|
+ }
|
|
|
+
|
|
|
+ .anche {
|
|
|
+ background: #E7F1EE !important;
|
|
|
+ border-radius: 4px !important;
|
|
|
+ font-weight: 400;
|
|
|
+
|
|
|
+ div {
|
|
|
+ color: #03BF8A !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
wangmengwei