|
|
@@ -1,1333 +1,601 @@
|
|
|
-<template>
|
|
|
- <div class="app-container" style="padding-top: 20px;height: 120vh;" v-loading="loading"
|
|
|
- element-loading-text="拼命加载中"
|
|
|
- element-loading-spinner="el-icon-loading"
|
|
|
- element-loading-background="rgba(0, 0, 0, 0.8)">
|
|
|
- <div class="ntgs">
|
|
|
- <el-row :gutter="10" class="mb8">
|
|
|
- <div class="iuer" style="margin-bottom:10px;">
|
|
|
- <!-- <div style="display: flex;align-items: center; " class="ingaqe">
|
|
|
- <el-select v-model="queryParams.name" placeholder="请选监控名称" clearable>
|
|
|
- <el-option
|
|
|
- v-for="dict in postList"
|
|
|
- :key="dict.indexCode"
|
|
|
- :label="dict.name"
|
|
|
- :value="dict.name"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- <div class="ksfpofg" @click="handleQuery">
|
|
|
- 搜索
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
- <!-- <div class="ite">
|
|
|
- <div class="ksfpo" @click="osge" v-hasPermi="['system:camera:openDz']">
|
|
|
- <img src="../../../assets/images/icon_ssjk_kman_open.png" alt="" style="width:10px;height: 10px;">
|
|
|
- 开门</div>
|
|
|
- <div class="ksfpo ksfpok" @click="osgef" v-hasPermi="['system:camera:closeDz']">
|
|
|
- <img src="../../../assets/images/icon_ssjk_kman_close.png" alt="" style="width:10px;height: 10px;">
|
|
|
- 关门</div>
|
|
|
- </div> -->
|
|
|
-<!-- -->
|
|
|
- </div>
|
|
|
- <!-- <el-col :span="1.5">
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- plain
|
|
|
- icon="el-icon-plus"
|
|
|
- size="mini"
|
|
|
- @click="handleAdd"
|
|
|
- v-hasPermi="['investigate:table:add']"
|
|
|
- >新增</el-button>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button
|
|
|
- type="danger"
|
|
|
- plain
|
|
|
- icon="el-icon-delete"
|
|
|
- size="mini"
|
|
|
- :disabled="multiple"
|
|
|
- @click="handleDelete"
|
|
|
- v-hasPermi="['investigate:table:remove']"
|
|
|
- >删除</el-button>
|
|
|
- </el-col> -->
|
|
|
- <!-- <el-col :span="1.5">
|
|
|
- <el-button
|
|
|
- type="warning"
|
|
|
- plain
|
|
|
- icon="el-icon-download"
|
|
|
- size="mini"
|
|
|
- @click="handleExport"
|
|
|
- v-hasPermi="['investigate:table:export']"
|
|
|
- >导出</el-button>
|
|
|
- </el-col> -->
|
|
|
- <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
|
|
|
- </el-row>
|
|
|
|
|
|
- <div>
|
|
|
- <el-row :gutter="20">
|
|
|
- <!-- postList -->
|
|
|
- <el-col :span='5'>
|
|
|
- <div style="background-color: #fff;border-radius: 10px;padding: 20px 20px;height: 100vh;">
|
|
|
- <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">通道列表</p>
|
|
|
- <div style=" height: 36px;;line-height: 36px;margin-top: 10px;"v-for="(item,index) in 6">
|
|
|
- <div @click="ishg(item)" style="display: flex;align-items: center;justify-content: space-between;">
|
|
|
- <div style="font-size: 16px;
|
|
|
- color: #333333;"> 通道{{ index >8 ? index + 1 : '0' + (index + 1)}}</div>
|
|
|
- <img src="../../../assets/images/icon_htgl_zd.png" alt="" style="width: 10px;height: 12px;">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+<template>
|
|
|
+ <div class="cut-picture">
|
|
|
+ <div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <!-- postList -->
|
|
|
+ <el-col :span='5'>
|
|
|
+ <div style="background-color: #fff;border-radius: 10px;padding: 20px 20px;height: 90vh;overflow:auto" class="infinite-list">
|
|
|
+ <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">通道列表</p>
|
|
|
+ <div style=" height: 36px;;line-height: 36px;margin-top: 10px;"v-for="(item,index) in 20">
|
|
|
+ <div :class=" numg== index ? 'acti' : ''" @click="ishg(item,index)" style="display: flex;align-items: center;justify-content: space-between;">
|
|
|
+ <div style="font-size: 16px;
|
|
|
+ color: #333333;"> 通道{{ index >8 ? index + 1 : '0' + (index + 1)}}</div>
|
|
|
+ <img src="../../../assets/images/icon_htgl_zd.png" alt="" style="width: 10px;height: 12px;" v-if="numg!= index">
|
|
|
+ <img src="../../../assets/images/bianhuan.png" alt="" style="width: 10px;height: 12px;" v-if="numg== index">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <!-- v-if="isshoe" -->
|
|
|
+ <el-col :span='19' style="padding-left: 30px; background-color: #fff;border-radius: 10px;padding: 20px; height: 100vh;" >
|
|
|
+ <div style="display: flex;align-items: center;justify-content: space-between;">
|
|
|
+ <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">实时预览</p>
|
|
|
+ <div>
|
|
|
+ <!-- <el-button type="danger" plain>删除</el-button> -->
|
|
|
+ <el-button type="warning" @click="handlerCutPicture" plain>设置参数</el-button>
|
|
|
+ <!-- <el-button type="success" plain>关闭</el-button> -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- <!-- v-if="isshoe" -->
|
|
|
- <el-col :span='19' style="padding-left: 30px; background-color: #fff;border-radius: 10px;padding: 20px; height: 100vh;" >
|
|
|
- <div style="display: flex;align-items: center;justify-content: space-between;">
|
|
|
- <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">实时预览</p>
|
|
|
- <div>
|
|
|
- <el-button type="danger" plain>删除</el-button>
|
|
|
- <el-button type="warning" plain>置顶</el-button>
|
|
|
- <el-button type="success" plain>关闭</el-button>
|
|
|
+ <div class="source-content" style="width: 100%;">
|
|
|
+ <div class="cut-video-content" style="display: flex;justify-content: center;width:100%;">
|
|
|
+ <!-- <video-player ref="video" id="video"></video-player> -->
|
|
|
+ <video ref="video" id="video" controls autoplay muted width="920" height="380px"style="margin-top: 20px;"></video>
|
|
|
+ <!-- <div class="button-content"> -->
|
|
|
+ <!-- <el-button type="primary" size="small" @click="handlerCutPicture">截取当前画面</el-button> -->
|
|
|
+ <!-- <el-button size="small" @click="handlerVideo">视频录影</el-button> -->
|
|
|
+ <!-- </div> -->
|
|
|
+ </div>
|
|
|
+ <!-- <div class="image-list">
|
|
|
+ <el-scrollbar style="height:100%;" class="el-menuscrollbar">
|
|
|
+ <div v-for="(img, index) of imageList" :key="index" class="image-detail" :style="imgContentStyle">
|
|
|
+ <i class="el-icon-close icon-delete" @click="deleteImage(index)"></i>
|
|
|
+ <img title="点击查看原图" :ref="`img.${index}`" :src="img.src" @click="openOuter(img)" class="source-img" :width="img.width" :height="img.height"/>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div style="width: 100%; height: 480px;">
|
|
|
- <div v-if="isfse" id="divPlugin" style="width: 100%; height: 480px;" ></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="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>
|
|
|
|
|
|
- <!-- 添加或修改岗位对话框 -->
|
|
|
- <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>
|
|
|
+ <!-- <div style="width: 100%; height: 480px;">
|
|
|
+ <div v-if="isfse" id="divPlugin" style="width: 100%; height: 480px;" ></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="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 class="source-dialog" v-if="showImgDialog">
|
|
|
+ <div class="source-dialog__body">
|
|
|
+ <i class="el-icon-close icon-delete" @click="showImgDialog=false"></i>
|
|
|
+ <img :src="curSourceImg" :width="canvasWidth" :height="canvasHeight" alt="查看原图"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="source-dialog" v-show="showRecord">
|
|
|
+ <div class="source-dialog__body">
|
|
|
+ <canvas
|
|
|
+ id="vcanvas"
|
|
|
+ ref="recordCanvas"
|
|
|
+ :width="canvasWidth"
|
|
|
+ :height="canvasHeight"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <canvas
|
|
|
+ v-show="showRecordt"
|
|
|
+ ref="icanvas"
|
|
|
+ :width="canvasWidth"
|
|
|
+ :height="canvasHeight"
|
|
|
+ @mousedown="handlerMouseDown($event)"
|
|
|
+ @mousemove="handlerMouseMove($event)"/>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ title="截图"
|
|
|
+ v-dialogDrag
|
|
|
+ :visible.sync="showCutDialog"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ v-if="showCutDialog"
|
|
|
+ :width="dialogWidth"
|
|
|
+ class="dialog-content"
|
|
|
+ >
|
|
|
+ <transition name="fade">
|
|
|
+ <div class="icon-pen" v-if="showPenBtn">
|
|
|
+ <img :src="penBtnSrc" class="icon-pen-image" @click="showPenList" />
|
|
|
+ <transition name="fade">
|
|
|
+ <div class="icon-pen-content" v-if="showPen">
|
|
|
+ <div class="icon-pen-color" v-for="(item,index) in penList" :key="index" :style="{ backgroundColor: item.code }" :class="{ 'is-active': item.code === checkedPen }" @click="checkPen(item)">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+ <canvas
|
|
|
+ ref="icanvas"
|
|
|
+ :width="canvasWidth"
|
|
|
+ :height="canvasHeight"
|
|
|
+ @mousedown="handlerMouseDown($event)"
|
|
|
+ @mousemove="handlerMouseMove($event)"/>
|
|
|
+ <div class="cancel-content"
|
|
|
+ v-show="showCancelContent">
|
|
|
+ <div class="button" @click="handlerClear">
|
|
|
+ <img :src="clearIconSrc" class="icon-clear" height="22px"/>
|
|
|
+ <span>清除</span>
|
|
|
+ </div>
|
|
|
+ <div class="button" @click="handlerCancel">
|
|
|
+ <img :src="cancelIconSrc" class="icon-clear" height="22px"/>
|
|
|
+ <span>撤销</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button @click="cancelEdit" size="small">取 消</el-button>
|
|
|
+ <el-button @click="confirmEdit" size="small" type="primary">确 认</el-button>
|
|
|
+ </div>
|
|
|
</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 { listWarnManage, getWarnManage, delWarnManage, addWarnManage, updateWarnManage } from "@/api/manage/warnManage"
|
|
|
-// import { listPost, getPost, delPost, addPost, updatePost,updateFs,updateGx } from "@/api/kaoch/renyuan";
|
|
|
-// 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 RecordRTC from 'recordrtc';
|
|
|
+import html2canvas from 'html2canvas';
|
|
|
+// import videoSrc from '@/assets/video/oceans.mp4';
|
|
|
+// import videoPlayer from '@/components/videoPlayer';
|
|
|
+import penBtnSrc from '@/assets/images/pen_btn.png';
|
|
|
+import clearIconSrc from '@/assets/images/cancel_btn.png';
|
|
|
+import cancelIconSrc from '@/assets/images/clear_btn.png';
|
|
|
+
|
|
|
+// 定义初始坐标
|
|
|
export default {
|
|
|
- name: "Post",
|
|
|
- dicts: ['sys_normal_disable','sys_yes_no','youke','tjzh','youkes','lafafen','fange','jluly'],
|
|
|
- // components: {
|
|
|
- // vueQr,
|
|
|
- // videoPlayer
|
|
|
- // },
|
|
|
+ name: 'cutPicture',
|
|
|
+
|
|
|
data() {
|
|
|
return {
|
|
|
- // 遮罩层
|
|
|
- loading: true,
|
|
|
- opent:false,
|
|
|
- bg:null,
|
|
|
- titles:'',
|
|
|
- editableTabsValue:'6',
|
|
|
- opens:false,
|
|
|
- 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,
|
|
|
- // 显示搜索条件
|
|
|
- showSearch: true,
|
|
|
- // 总条数
|
|
|
- total: 0,
|
|
|
- // 岗位表格数据
|
|
|
- postList: [],
|
|
|
- // 弹出层标题
|
|
|
- title: "",
|
|
|
- // 是否显示弹出层
|
|
|
- open: false,
|
|
|
- // 查询参数
|
|
|
- queryParams: {
|
|
|
- pageNo: 1,
|
|
|
- pageSize:500,
|
|
|
- name:null,
|
|
|
- postCode: undefined,
|
|
|
- postName: undefined,
|
|
|
- status: undefined,
|
|
|
- reservatType:undefined
|
|
|
+ penBtnSrc,
|
|
|
+ clearIconSrc,
|
|
|
+ cancelIconSrc,
|
|
|
+ showCutDialog: false,
|
|
|
+ tempImageCanvasList: [], // 暂时存放之前编辑的画面
|
|
|
+ showPenBtn: false,
|
|
|
+ showPen: false,
|
|
|
+ penList: [
|
|
|
+ {
|
|
|
+ code: 'yellow',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ code: 'white',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ code: 'red',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ checkedPen: 'white',
|
|
|
+ canvasWidth: 800, // canvas 初始化大小
|
|
|
+ canvasHeight: 400,
|
|
|
+ showCancelContent: false,
|
|
|
+ dialogWidth: '1000px',
|
|
|
+ playerRef: null, // 播放器对象
|
|
|
+ imageCanvas: new Image(), // 缓存当前初始截图
|
|
|
+ isMouseDown: false, // 判断鼠标是否按下
|
|
|
+ coordinate: { // 鼠标移动点坐标
|
|
|
+ X: 0,
|
|
|
+ Y: 0,
|
|
|
+ X1: 0,
|
|
|
+ Y1: 0,
|
|
|
},
|
|
|
- // 表单参数
|
|
|
- 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" }
|
|
|
- ],
|
|
|
-
|
|
|
- },
|
|
|
- forms:{},
|
|
|
- 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
|
|
|
+ flag: 0,
|
|
|
+ imageList: [],
|
|
|
+ imgContentStyle: {},
|
|
|
+ recorder: null,
|
|
|
+ showImgDialog: false,
|
|
|
+ showRecord: false,
|
|
|
+ startTime: 0, // 开始录制的时间点
|
|
|
+ videoTimer: 0,
|
|
|
+ camera_ip: '192.168.101.86:8000',
|
|
|
+ showRecordt:false,
|
|
|
+ numg:0,
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
- this.isfse = false
|
|
|
- this.getList();
|
|
|
- window.onresize = () => {
|
|
|
- this.changeTableMaxHeight()
|
|
|
- }
|
|
|
- this.changeTableMaxHeight()
|
|
|
-
|
|
|
+ document.addEventListener('mouseup', this.handlerMouseUp);
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ document.removeEventListener('mouseup', this.handlerMouseUp);
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//' + this.camera_ip)
|
|
|
+ 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.changeTableMaxHeight()
|
|
|
-
|
|
|
- this.$nextTick(() => {
|
|
|
- this.initScroll()
|
|
|
- })
|
|
|
-
|
|
|
+ this.loading = false
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.playerRef = this.$refs.video;
|
|
|
+ });
|
|
|
},
|
|
|
-
|
|
|
- beforeDestroy() {
|
|
|
- // this.destoryVideo()
|
|
|
- if(WebVideoCtrl){
|
|
|
- console.log(this.szDeviceIdentify)
|
|
|
- WebVideoCtrl.I_Logout(this.szDeviceIdentify)
|
|
|
- WebVideoCtrl.I_StopAllPlay()
|
|
|
- WebVideoCtrl.I_DestroyPlugin()
|
|
|
- WebVideoCtrl.I_Resize()
|
|
|
- }
|
|
|
- },
|
|
|
methods: {
|
|
|
// 通道点击
|
|
|
- ishg(val){
|
|
|
+ ishg(val,row){
|
|
|
this.isfse = false
|
|
|
- this.clickStartRealPlay('192.168.101.64', '80',1, 0, 1);
|
|
|
+ this.numg = row
|
|
|
+ console.log(val,row)
|
|
|
+ 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')
|
|
|
// this.getVideo()
|
|
|
|
|
|
},
|
|
|
+ getCanvasImage() {
|
|
|
+ if (this.playerRef) {
|
|
|
+ const videoEl = this.$refs.video;
|
|
|
+ const videoWidth = videoEl.videoWidth /2 - 160;
|
|
|
+ const videoHeight = videoEl.videoHeight /2 -140;
|
|
|
+ this.canvasWidth = videoWidth;
|
|
|
+ this.canvasHeight = videoHeight;
|
|
|
+ const canvasEl = this.$refs.icanvas;
|
|
|
+ const ctx = canvasEl.getContext('2d');
|
|
|
+ ctx.drawImage(videoEl, 0, 0, videoWidth, videoHeight);
|
|
|
+ const tempImage = canvasEl.toDataURL('image/jpeg');
|
|
|
+ console.log(tempImage)
|
|
|
+ this.imageCanvas.src = tempImage;
|
|
|
+ const imgObj = new Image();
|
|
|
+ imgObj.src = tempImage;
|
|
|
+ this.tempImageCanvasList.push(imgObj);
|
|
|
+ this.showCutDialog = false;
|
|
|
+ this.showCutDialog = true;
|
|
|
+ this.playerRef.play();
|
|
|
+ this.$router.push({
|
|
|
+ path: '/shebecanshuhuabu',
|
|
|
+ query: {
|
|
|
+ 'src': JSON.stringify(tempImage) ,
|
|
|
+ }
|
|
|
+ })
|
|
|
|
|
|
|
|
|
- init(val) { //这个val 就是一个地址，例如： http://192.168.2.201:85/live/9311272c49b845baa2b2810ad9bf3f68.flv 这是个服务器返回给我的一个监控视频流地址
|
|
|
- setTimeout(() => { //使用定时器是因为，在mounted声明周期里调用，可能会出现DOM没加载出来的原因
|
|
|
- var videoElement = this.$refs.videosmallone; // 获取到html中的video标签
|
|
|
- this.isshiwa = true
|
|
|
- if (flvjs.isSupported()) {
|
|
|
- //因为我这个是复用组件，进来先判断 player是否存在，如果存在，销毁掉它，不然会占用TCP名额
|
|
|
- if (this.player !== null) {
|
|
|
- this.player.pause();
|
|
|
- this.player.unload();
|
|
|
- this.player.detachMediaElement();
|
|
|
- this.player.destroy();
|
|
|
- this.player = null;
|
|
|
- }
|
|
|
- this.player = flvjs.createPlayer( //创建直播流，加载到DOM中去
|
|
|
- {
|
|
|
- type: "flv",
|
|
|
- url: val, //你的url地址
|
|
|
- isLive: true, //数据源是否为直播流
|
|
|
- hasAudio: false, //数据源是否包含有音频
|
|
|
- hasVideo: true, //数据源是否包含有视频
|
|
|
- enableStashBuffer: true, //是否启用缓存区
|
|
|
- },
|
|
|
- {
|
|
|
- enableWorker: false, //不启用分离线程
|
|
|
- enableStashBuffer: false, //关闭IO隐藏缓冲区
|
|
|
- autoCleanupSourceBuffer: true, //自动清除缓存
|
|
|
- lazyLoad: false,
|
|
|
- }
|
|
|
- );
|
|
|
- this.isshoe = true
|
|
|
- this.player.attachMediaElement(videoElement); //放到dom中去
|
|
|
-
|
|
|
- //!!!!!!这里需要注意，有的时候load加载完成不一定可以播放，要是播放不成功，用settimeout 给下面的this.player.play() 延时几百毫秒再播放
|
|
|
- // setTimeout(this.player.play(), 48000);
|
|
|
- setTimeout(() =>{
|
|
|
- //到时间时只执行一次就停止
|
|
|
- this.player.load();//准备完成
|
|
|
- this.player.play()
|
|
|
- console.log('播放')
|
|
|
- },900)
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- }, 500);
|
|
|
- },
|
|
|
-
|
|
|
- createVideo() {
|
|
|
- if (flvjs.isSupported()) {
|
|
|
- console.log(1)
|
|
|
- var videoElement = document.getElementById('myFlvVideo')
|
|
|
- console.log(videoElement,flvjs)
|
|
|
- this.flvPlayer = flvjs.createPlayer(
|
|
|
- {
|
|
|
- type: 'application/x-mpegURL',
|
|
|
- isLive: true,
|
|
|
- hasAudio: false,
|
|
|
- url:'https://stream1.freetv.fun/86d463c0006da643e45e26b34875df87059dcba13e69d0a5471b185793c122a2.m3u8'
|
|
|
- },
|
|
|
- {
|
|
|
- cors: true, // 是否跨域
|
|
|
- enableWorker: false, // 是否多线程工作
|
|
|
- enableStashBuffer: false, // 是否启用缓存
|
|
|
- stashInitialSize: 400, // 缓存大小(kb) 默认384kb
|
|
|
- autoCleanupSourceBuffer: true // 是否自动清理缓存
|
|
|
- }
|
|
|
- )
|
|
|
- this.flvPlayer.attachMediaElement(videoElement)
|
|
|
- this.flvPlayer.load()
|
|
|
- this.flvPlayer.play()
|
|
|
- console.log(1244)
|
|
|
- // 报错重连
|
|
|
- this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
|
|
|
- console.log('errorType:', errType)
|
|
|
- console.log('errorDetail:', errDetail)
|
|
|
- if (this.flvPlayer) {
|
|
|
- this.destoryVideo()
|
|
|
- this.createVideo()
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- console.log(this.flvPlayer.play())
|
|
|
- },
|
|
|
- destoryVideo() {
|
|
|
- this.player.pause()
|
|
|
- this.player.unload()
|
|
|
- this.player.detachMediaElement()
|
|
|
- this.player.destroy()
|
|
|
- this.player = null
|
|
|
- },
|
|
|
-
|
|
|
- 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 结构发生变化的时确保滚动效果正常
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- /** 查询岗位列表 */
|
|
|
- getList() {
|
|
|
- // this.queryParams
|
|
|
- this.loading = true
|
|
|
- getWarnManage(this.$route.query.id).then(response => {
|
|
|
- this.form = response.data
|
|
|
-
|
|
|
- this.getVideo()
|
|
|
- WebVideoCtrl.I_ShowPlugin()
|
|
|
- this.loading = false
|
|
|
- // this.open = true
|
|
|
- // this.title = "修改告警管理"
|
|
|
- })
|
|
|
- // camera(this.queryParams).then(response => {
|
|
|
- // this.postList = response.data.data.list;
|
|
|
- // if(response.data.data != null){
|
|
|
- // if(response.data.data.list.length != 0){
|
|
|
- // let ne = response.data.data.list[0]
|
|
|
- // response.data.data.list.filter(rtu=>{
|
|
|
- // if(rtu.name == '后门道闸'){
|
|
|
- // console.log(3,rtu)
|
|
|
- // ne = rtu
|
|
|
- // return
|
|
|
- // }
|
|
|
- // })
|
|
|
- // this.isfgw(ne)
|
|
|
- // this.isjfwe =ne
|
|
|
-
|
|
|
- // }
|
|
|
- // }
|
|
|
- // // this.postList=[{'nsje':null,'visitPhone':null,'isReception':'Y'}]
|
|
|
- // this.total = response.data.data.total;
|
|
|
- // this.loading = false;
|
|
|
- // });
|
|
|
+ }
|
|
|
},
|
|
|
- getListh() {
|
|
|
- this.loading = true;
|
|
|
- listReservatd().then(response => {
|
|
|
- // this.postList = response.rows;
|
|
|
- this.ksjegsg= response.data
|
|
|
- // this.total = response.total;
|
|
|
- this.loading = false;
|
|
|
+ handlerCutPicture() {
|
|
|
+ // this.showCutDialog = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.playerRef.pause(); // 截图的时候暂停视频播放
|
|
|
+ this.tempImageCanvasList = [];
|
|
|
+ this.getCanvasImage();
|
|
|
+ this.showCancelContent = false;
|
|
|
});
|
|
|
- },
|
|
|
- isfgw(val){
|
|
|
- this.isjfwe = val
|
|
|
- let nhge={cameraIndexCode:val.indexCode}
|
|
|
- this.isshiwa = false
|
|
|
- this.isshoe= false
|
|
|
- cameraIndexCode(nhge.cameraIndexCode).then(response => {
|
|
|
- console.log(response.data.data.url)
|
|
|
- this.isshoe= true
|
|
|
- this.init(response.data.data.url)
|
|
|
- this.isshiwa = true
|
|
|
- // this.postList = response.rows;
|
|
|
- // this.total = response.total;
|
|
|
- });
|
|
|
- console.log(val,4)
|
|
|
- },
|
|
|
- osge(){
|
|
|
- console.log(this.isjfwe,45)
|
|
|
- if(this.isjfwe.name == '后门道闸'){
|
|
|
- this.isjfwe.name ='后门抓拍一体机1'
|
|
|
- }
|
|
|
- let nge={equipmentName:this.isjfwe.name}
|
|
|
- openDz(nge).then(response => {
|
|
|
|
|
|
- });
|
|
|
- },
|
|
|
- osgef(){
|
|
|
- if(this.isjfwe.name == '后门道闸'){
|
|
|
- this.isjfwe.name ='后门抓拍一体机1'
|
|
|
- }
|
|
|
- let nge={equipmentName:this.isjfwe.name}
|
|
|
- closeDz(nge).then(response => {
|
|
|
- // this.postList = response.rows;
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- ilw(row,val){
|
|
|
- this.kje = val
|
|
|
- // console.log(row)
|
|
|
- if(row.value == 0){
|
|
|
- this.queryParams.reservatType = undefined
|
|
|
- }else{
|
|
|
- this.queryParams.reservatType = row.value
|
|
|
- }
|
|
|
- console.log(this.kje)
|
|
|
- this.queryParams.pageNum = 1
|
|
|
- this.getList()
|
|
|
},
|
|
|
- nhgwel(item){
|
|
|
- this.form.receptionId = item.receptionId
|
|
|
- this.form.receptionName = item.receptionName
|
|
|
- this.form.receptionPhone = item.phonenumber
|
|
|
-
|
|
|
- },
|
|
|
- getPass(row) {
|
|
|
- const _this = this
|
|
|
- this.$confirm('是否审核通过', "提醒", {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning"
|
|
|
- }).then(function() {
|
|
|
- return setPass({
|
|
|
- visitType: 3,
|
|
|
- reservatId: row.reservatId,
|
|
|
- // xmStatus:row.xmStatus
|
|
|
- })
|
|
|
- }).then(() => {
|
|
|
- _this.getList();
|
|
|
- _this.msgSuccess("提交成功");
|
|
|
- })
|
|
|
+ showPenList() {
|
|
|
+ this.showPen = !this.showPen;
|
|
|
+ this.showCancelContent = false;
|
|
|
},
|
|
|
- infoBtn(row) {
|
|
|
- const _this = this
|
|
|
- this.$confirm('是否拒绝', "提醒", {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning"
|
|
|
- }).then(function() {
|
|
|
- return setPass({
|
|
|
- visitType: 2,
|
|
|
- reservatId: row.reservatId,
|
|
|
- // xmStatus:row.xmStatus
|
|
|
- })
|
|
|
- }).then(() => {
|
|
|
- _this.getList();
|
|
|
- _this.msgSuccess("提交成功");
|
|
|
- })
|
|
|
-
|
|
|
+ checkPen(pen) {
|
|
|
+ this.checkedPen = pen.code;
|
|
|
+ this.showCancelContent = false;
|
|
|
},
|
|
|
- // 取消按钮
|
|
|
- cancel() {
|
|
|
- this.open = false;
|
|
|
- this.opens = false;
|
|
|
- this.reset();
|
|
|
+ // 清除
|
|
|
+ handlerClear() {
|
|
|
+ this.showCancelContent = false;
|
|
|
+ const canvasEl = this.$refs.icanvas;
|
|
|
+ const ctx = canvasEl.getContext('2d');
|
|
|
+ ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
|
|
+ ctx.drawImage(this.imageCanvas, 0, 0, this.canvasWidth, this.canvasHeight);
|
|
|
+ this.tempImageCanvasList = [];
|
|
|
},
|
|
|
- // 表单重置
|
|
|
- reset() {
|
|
|
- this.form = {
|
|
|
- receptionId:undefined,
|
|
|
- receptionPhone:undefined,
|
|
|
- // postSort: 0,
|
|
|
- // status: "0",
|
|
|
- receptionName: undefined
|
|
|
- };
|
|
|
- this.resetForm("form");
|
|
|
+ // 撤销
|
|
|
+ handlerCancel() {
|
|
|
+ this.showCancelContent = false;
|
|
|
+ this.tempImageCanvasList.pop();
|
|
|
+ const canvasEl = this.$refs.icanvas;
|
|
|
+ const ctx = canvasEl.getContext('2d');
|
|
|
+ // 撤销操作为清空当前canvas，并把存储的image重新绘制到canvas上。
|
|
|
+ ctx.clearRect(0, 0, this.canvasWidth, this.canvasWidth);
|
|
|
+ if (this.tempImageCanvasList.length === 0) {
|
|
|
+ ctx.drawImage(this.imageCanvas, 0, 0, this.canvasWidth, this.canvasHeight);
|
|
|
+ } else {
|
|
|
+ ctx.drawImage(this.tempImageCanvasList[this.tempImageCanvasList.length - 1], 0, 0, this.canvasWidth, this.canvasHeight);
|
|
|
+ }
|
|
|
},
|
|
|
- /** 搜索按钮操作 */
|
|
|
- handleQuery() {
|
|
|
- this.queryParams.pageNum = 1;
|
|
|
- this.getList();
|
|
|
+ deleteImage(index) {
|
|
|
+ this.imageList.splice(index, 1);
|
|
|
},
|
|
|
- /** 重置按钮操作 */
|
|
|
- resetQuery() {
|
|
|
- this.resetForm("queryForm");
|
|
|
- this.handleQuery();
|
|
|
+ // 查看原图
|
|
|
+ openOuter(source) {
|
|
|
+ this.curSourceImg = source.src;
|
|
|
+ this.showImgDialog = true;
|
|
|
},
|
|
|
- // 多选框选中数据
|
|
|
- handleSelectionChange(selection) {
|
|
|
- this.ids = selection.map(item => item.reservatId)
|
|
|
- this.single = selection.length!=1
|
|
|
- this.multiple = !selection.length
|
|
|
+ confirmEdit() {
|
|
|
+ const canvasEl = this.$refs.icanvas;
|
|
|
+ const obj = {};
|
|
|
+ obj.src = canvasEl.toDataURL('image/jpeg');
|
|
|
+ obj.sourceType = 'image';
|
|
|
+ obj.width = `${this.canvasWidth / 4}px`;
|
|
|
+ obj.height = `${this.canvasHeight / 4}px`;
|
|
|
+ this.imgContentStyle = {
|
|
|
+ width: obj.width,
|
|
|
+ height: obj.height,
|
|
|
+ };
|
|
|
+ this.imageList.push(obj);
|
|
|
+ this.showCutDialog = false;
|
|
|
+ this.playerRef.play();
|
|
|
},
|
|
|
- nhgeo(row){
|
|
|
- this.reset();
|
|
|
- this.open = true;
|
|
|
- this.title = "分配接待人员";
|
|
|
- this.form.reservatId = row.reservatId;
|
|
|
- this.form.reservatConfigTimeId=row.reservatConfigTimeId;
|
|
|
- this.form.visitDate=row.visitDate
|
|
|
+ cancelEdit() {
|
|
|
+ this.showCutDialog = false;
|
|
|
+ this.playerRef.play();
|
|
|
},
|
|
|
- handleDeleteh(row){
|
|
|
- this.$router.push({
|
|
|
- path: '/bjqs',
|
|
|
- query: {
|
|
|
- 'id':row.reservatId,
|
|
|
- 'name':null,
|
|
|
- 'names':null,
|
|
|
- 'isxz':1
|
|
|
- }
|
|
|
- })
|
|
|
+ handlerMouseDown(e) {
|
|
|
+ this.isMouseDown = true;
|
|
|
+ // 记录鼠标点下的坐标
|
|
|
+ this.coordinate.X = e.offsetX;
|
|
|
+ this.coordinate.Y = e.offsetY;
|
|
|
+ this.showPenBtn = false;
|
|
|
+ this.showCancelContent = false;
|
|
|
},
|
|
|
- /** 新增按钮操作 */
|
|
|
- handleAdd() {
|
|
|
- this.forms = {
|
|
|
- reservatType:'1'
|
|
|
+ handlerMouseMove(e) {
|
|
|
+ if (this.isMouseDown) {
|
|
|
+ this.coordinate.X1 = e.offsetX;
|
|
|
+ this.coordinate.Y1 = e.offsetY;
|
|
|
+ this.showPenBtn = false;
|
|
|
+ this.drawLine();
|
|
|
+ this.flag++;
|
|
|
}
|
|
|
- this.opens = true;
|
|
|
- this.titles = "添加预约人员";
|
|
|
- // this.scoreDataDetailsList = []
|
|
|
- // this.$router.push({
|
|
|
- // path: '/system/bjq',
|
|
|
- // })
|
|
|
- // this.$router.push({
|
|
|
- // path: '/bjqs',
|
|
|
- // query: {
|
|
|
- // 'id':null,
|
|
|
- // 'name':null,
|
|
|
- // 'names':null,
|
|
|
- // 'isxz':1
|
|
|
- // }
|
|
|
- // })
|
|
|
- },
|
|
|
- /** 修改按钮操作 */
|
|
|
- handleUpdate(row) {
|
|
|
- this.reset();
|
|
|
- const recordId = row.recordId || this.ids
|
|
|
- getReservat(recordId).then(response => {
|
|
|
- this.forms = response.data;
|
|
|
- this.opens = true;
|
|
|
- this.title = "修改访问记录";
|
|
|
- });
|
|
|
},
|
|
|
- /** 提交按钮 */
|
|
|
- submitForm: function() {
|
|
|
- this.$refs["form"].validate(valid => {
|
|
|
- if (valid) {
|
|
|
- // if (this.form.reservatId != null) {
|
|
|
- updateReservat(this.form).then(response => {
|
|
|
- this.$modal.msgSuccess("操作成功");
|
|
|
- this.open = false;
|
|
|
- this.getList();
|
|
|
- });
|
|
|
- // } else {
|
|
|
- // addReservat(this.form).then(response => {
|
|
|
- // this.$modal.msgSuccess("新增成功");
|
|
|
- // this.open = false;
|
|
|
- // this.getList();
|
|
|
- // });
|
|
|
- // }
|
|
|
- }
|
|
|
- });
|
|
|
+ handlerMouseUp() {
|
|
|
+ this.isMouseDown = false;
|
|
|
+ this.showPenBtn = true;
|
|
|
+ this.showCancelContent = true;
|
|
|
+ const canvasEl = this.$refs.icanvas;
|
|
|
+ if (this.flag !== 0 && canvasEl) {
|
|
|
+ const imgObj = new Image();
|
|
|
+ imgObj.src = canvasEl.toDataURL('image/jpeg');
|
|
|
+ this.tempImageCanvasList.push(imgObj);
|
|
|
+ this.flag = 0;
|
|
|
+ }
|
|
|
},
|
|
|
- submitForms: function() {
|
|
|
- this.$refs["forms"].validate(valid => {
|
|
|
- if (valid) {
|
|
|
- // if (this.form.reservatId != null) {
|
|
|
- // updateReservat(this.forms).then(response => {
|
|
|
- // this.$modal.msgSuccess("操作成功");
|
|
|
- // this.open = false;
|
|
|
- // this.getList();
|
|
|
- // });
|
|
|
- // } else {
|
|
|
- this.forms.visitTime = this.forms.visitTime + '-' + this.forms.visitTime
|
|
|
- addReservat(this.forms).then(response => {
|
|
|
- this.$modal.msgSuccess("新增成功");
|
|
|
- this.opens = false;
|
|
|
- this.getList();
|
|
|
- });
|
|
|
- // }
|
|
|
- }
|
|
|
- });
|
|
|
+ drawLine() {
|
|
|
+ const {
|
|
|
+ X, Y, X1, Y1,
|
|
|
+ } = this.coordinate;
|
|
|
+ const canvasEl = this.$refs.icanvas;
|
|
|
+ const ctx = canvasEl.getContext('2d');
|
|
|
+ if (this.flag > 0) {
|
|
|
+ ctx.beginPath();
|
|
|
+ }
|
|
|
+ ctx.moveTo(X, Y); // 起点
|
|
|
+ ctx.lineWidth = 4; // 定义画笔宽度
|
|
|
+ ctx.strokeStyle = this.checkedPen || 'white';
|
|
|
+ ctx.lineTo(X1, Y1);
|
|
|
+ ctx.stroke();
|
|
|
+ this.coordinate.X = X1;
|
|
|
+ this.coordinate.Y = Y1;
|
|
|
},
|
|
|
-
|
|
|
- nglqw(val){
|
|
|
- this.opent = true
|
|
|
- this.bg = val.investigateTableId
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- 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
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- hussar_17Click(val) {
|
|
|
- const _this = this
|
|
|
- var url =process.env.VUE_APP_BASE_API + 'pages/index/index?id=' + val.investigateTableId;
|
|
|
- console.log(url,this.$refs.canvas,6)
|
|
|
- this.opent = true
|
|
|
- QRCode.toCanvas(
|
|
|
- canvas,
|
|
|
- url,//生成二维码的数据
|
|
|
- {width: 100, height:100, margin: 1.5},//margin调整二维码的白边大小
|
|
|
- function (error) {
|
|
|
- if (error) {
|
|
|
- console.log(error);
|
|
|
- }
|
|
|
- }
|
|
|
- );
|
|
|
-
|
|
|
- // console.log(qrcode,987)
|
|
|
- },
|
|
|
- /** 成绩_子添加按钮操作 */
|
|
|
- handleAddScoreDataDetails() {
|
|
|
-
|
|
|
- let obj = {};
|
|
|
- obj.duty = "";
|
|
|
- obj.idCard = "";
|
|
|
- obj.phonenumber = "";
|
|
|
- obj.userName = "";
|
|
|
- this.scoreDataDetailsList.push(obj);
|
|
|
- console.log(this.scoreDataDetailsList)
|
|
|
- },
|
|
|
- /** 成绩_子删除按钮操作 */
|
|
|
- handleDeleteScoreDataDetails() {
|
|
|
- if (this.checkedScoreDataDetails.length == 0) {
|
|
|
- this.$modal.msgError("请先选择要删除的数据");
|
|
|
- } else {
|
|
|
- const scoreDataDetailsList = this.scoreDataDetailsList;
|
|
|
- const checkedScoreDataDetails = this.checkedScoreDataDetails;
|
|
|
- this.scoreDataDetailsList = scoreDataDetailsList.filter(function(item) {
|
|
|
- return checkedScoreDataDetails.indexOf(item.index) == -1
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- /** 复选框选中数据 */
|
|
|
- handleScoreDataDetailsSelectionChange(selection) {
|
|
|
- this.checkedScoreDataDetails = selection.map(item => item.index)
|
|
|
- },
|
|
|
- /** 成绩_子序号 */
|
|
|
- rowScoreDataDetailsIndex({ row, rowIndex }) {
|
|
|
- row.index = rowIndex + 1;
|
|
|
- },
|
|
|
- /** 删除按钮操作 */
|
|
|
- handleDelete(row) {
|
|
|
- const postIds = row.recordId || this.ids;
|
|
|
- delReservat(postIds).then(response => {
|
|
|
- this.$modal.msgSuccess("操作成功");
|
|
|
- this.getList();
|
|
|
+ handlerVideo() {
|
|
|
+ this.showRecord = true;
|
|
|
+ this.startTime = new Date().getTime();
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.drawRecord();
|
|
|
+ this.looper();
|
|
|
});
|
|
|
-
|
|
|
- // 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();
|
|
|
+ drawRecord() {
|
|
|
+ const recordCanvasEl = document.getElementById('vcanvas');
|
|
|
+ this.recorder = RecordRTC(recordCanvasEl, {
|
|
|
+ type: 'cancas',
|
|
|
});
|
|
|
-
|
|
|
- // this.$modal.confirm('是否确认删除数据项？').then(function() {
|
|
|
- // return delPost(postIds);
|
|
|
- // }).then(() => {
|
|
|
- // this.getList();
|
|
|
- // this.$modal.msgSuccess("删除成功");
|
|
|
- // }).catch(() => {});
|
|
|
+ this.recorder.startRecording();
|
|
|
},
|
|
|
- // 发送短信
|
|
|
- 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)
|
|
|
- },
|
|
|
- // 播放摄像头
|
|
|
- getVideo() {
|
|
|
- var that=this;
|
|
|
- this.isfse = true
|
|
|
- this.initVideoPlay('192.168.101.64', '80', 'admin', 'zxy123456','divPlugin')
|
|
|
+ getVideoFile() {
|
|
|
+ this.recorder.stopRecording(() => {
|
|
|
+ const blob = this.recorder.getBlob();
|
|
|
+ const url = URL.createObjectURL(blob);
|
|
|
+ const obj = {
|
|
|
+ sourceType: 'video',
|
|
|
+ src: url,
|
|
|
+ file: blob,
|
|
|
+ };
|
|
|
+ console.log(obj);
|
|
|
+ this.imageList.push(obj);
|
|
|
+ });
|
|
|
},
|
|
|
- // 有插件
|
|
|
- initVideoPlay(ip, port, username, password,id) {
|
|
|
- var that = this;
|
|
|
- var g_iWndIndex = 0; //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
|
|
|
- var g_oLocalConfig = null; //本地配置
|
|
|
- // let ip = this.szIP //硬盘录像机ip
|
|
|
- // let port = this.szPort //默认为80端口
|
|
|
- // let username = this.szUsername //账号：
|
|
|
- // let password = this.szPassword // 密码
|
|
|
- var iRtspPort = ''
|
|
|
- // 1.初始化插件参数及插入插件
|
|
|
- WebVideoCtrl.I_InitPlugin({
|
|
|
- bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
|
|
|
- iWndowType: 1,
|
|
|
- bDebugMode: true,
|
|
|
- cbSelWnd: function(xmlDoc) {
|
|
|
- g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
|
|
|
- const szInfo = "当前选择的窗口编号：" + g_iWndIndex;
|
|
|
- this.g_iWndIndex = g_iWndIndex;
|
|
|
- console.log(szInfo, "szInfo");
|
|
|
- },
|
|
|
- cbDoubleClickWnd: function(iWndIndex, bFullScreen) {
|
|
|
- let szInfo = "当前放大的窗口编号：" + iWndIndex;
|
|
|
- if (!bFullScreen) {
|
|
|
- szInfo = "当前还原的窗口编号：" + iWndIndex;
|
|
|
- }
|
|
|
- // console.log(szInfo, "szInfo");
|
|
|
- },
|
|
|
- cbEvent: function(iEventType, iParam1, iParam2) {
|
|
|
- if (2 == iEventType) {
|
|
|
- // 回放正常结束
|
|
|
- console.log("窗口" + iParam1 + "回放结束！");
|
|
|
- } else if (-1 == iEventType) {
|
|
|
- console.log("设备" + iParam1 + "网络错误！");
|
|
|
- } else if (3001 == iEventType) {
|
|
|
- clickStopRecord(g_szRecordType, iParam1);
|
|
|
- }
|
|
|
- },
|
|
|
- //2.登录摄像头
|
|
|
- cbInitPluginComplete: function() {
|
|
|
- const oLiveView = {
|
|
|
- iProtocol: 1, // protocol 1：http, 2:https
|
|
|
- szIP: ip, // protocol ip
|
|
|
- szPort: port, // protocol port
|
|
|
- szUsername: username, // device username
|
|
|
- szPassword: password, // device password
|
|
|
- iStreamType: 1, // stream 1：main stream 2：sub-stream 3：third stream 4：transcode stream
|
|
|
- iChannelID: 1, // channel no
|
|
|
- bZeroChannel: false, // zero channel
|
|
|
- };
|
|
|
- // var swidth=Number((that.width*Number(that.scale))).toFixed(2)
|
|
|
- // var sheight=Number((that.height*Number(that.scale))).toFixed(2)
|
|
|
- // that.swidth=swidth
|
|
|
- // that.sheight=sheight
|
|
|
- WebVideoCtrl.I_InsertOBJECTPlugin(id).then(
|
|
|
- () => {
|
|
|
- // setTimeout(function(){
|
|
|
- // WebVideoCtrl.I_Resize(swidth,sheight)
|
|
|
- // },300)
|
|
|
- WebVideoCtrl.I_Login(
|
|
|
- oLiveView.szIP,
|
|
|
- oLiveView.iProtocol,
|
|
|
- oLiveView.szPort,
|
|
|
- oLiveView.szUsername,
|
|
|
- oLiveView.szPassword, {
|
|
|
- timeout: 3000,
|
|
|
- async: false,
|
|
|
- success: function(xmlDoc) {
|
|
|
- console.log(" 登录成功！");
|
|
|
- let a = ip
|
|
|
- let b = port
|
|
|
- setTimeout(function() {
|
|
|
- //延迟方法
|
|
|
- setTimeout(function() {
|
|
|
- //调用预览摄像头这里可以循环创建
|
|
|
- that.clickStartRealPlay(a, b,1, 0, 1);
|
|
|
- // that.clickStartRealPlay(a, b, 1, 1,2);
|
|
|
- // that.clickStartRealPlay(a, b, 1, 2,3);
|
|
|
- // clickStartRealPlay(a,b, 1, 3, 4);
|
|
|
- // clickStartRealPlay(a,b, 1, 4, 5);
|
|
|
- // clickStartRealPlay(a,b, 1, 5, 6);
|
|
|
- // clickStartRealPlay(a,b, 1, 6, 7);
|
|
|
- // clickStartRealPlay(a,b, 1, 7, 8);
|
|
|
- }, 1000);
|
|
|
-
|
|
|
-
|
|
|
- setTimeout(function() {
|
|
|
- // 获取通道 (如果多个摄像头需要获取多个通道需要调用)
|
|
|
- // getChannelInfo(a);
|
|
|
- //获取端口 （在这里获取RTSP 端口号 预览时传入）
|
|
|
- getDevicePort(a);
|
|
|
- }, 10)
|
|
|
-
|
|
|
- }, 10);
|
|
|
- },
|
|
|
- error: function(oError) {
|
|
|
- console.log(" 登录失败！", oError);
|
|
|
- },
|
|
|
- }
|
|
|
- );
|
|
|
- // 检查插件是否最新
|
|
|
- WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
|
|
|
- if (bFlag) {
|
|
|
- alert(
|
|
|
- "检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！"
|
|
|
- );
|
|
|
-
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- () => {
|
|
|
- alert(
|
|
|
- "插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！"
|
|
|
- );
|
|
|
-
|
|
|
- }
|
|
|
- );
|
|
|
-
|
|
|
- },
|
|
|
- });
|
|
|
- // 3.获取通道
|
|
|
- function getChannelInfo(a) {
|
|
|
- var szDeviceIdentify = a,
|
|
|
- oSel = null; //通道列表
|
|
|
- if (null == szDeviceIdentify) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 模拟通道 有
|
|
|
- WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
|
|
|
- success: function(xmlDoc) {
|
|
|
- var oChannels = $(xmlDoc).find("VideoInputChannel");
|
|
|
-
|
|
|
- $.each(oChannels, function(i) {
|
|
|
- var id = $(this).find("id").eq(0).text(),
|
|
|
- name = $(this).find("name").eq(0).text();
|
|
|
- if ("" == name) {
|
|
|
- name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
|
|
|
- }
|
|
|
-
|
|
|
- // console.log(id + "通道id是")
|
|
|
- // console.log(name + "通道name是")
|
|
|
- });
|
|
|
- console.log(szDeviceIdentify + " 获取模拟通道成功！");
|
|
|
- },
|
|
|
- error: function(oError) {
|
|
|
- console.log(szDeviceIdentify + " 获取模拟通道失败！", oError.errorCode, oError.errorMsg);
|
|
|
- }
|
|
|
- });
|
|
|
- // 数字通道
|
|
|
- WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
|
|
|
- success: function(xmlDoc) {
|
|
|
- var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
|
|
|
-
|
|
|
- $.each(oChannels, function(i) {
|
|
|
- var id = $(this).find("id").eq(0).text(),
|
|
|
- name = $(this).find("name").eq(0).text(),
|
|
|
- online = $(this).find("online").eq(0).text();
|
|
|
- if ("false" == online) { // 过滤禁用的数字通道
|
|
|
- return true;
|
|
|
- }
|
|
|
- if ("" == name) {
|
|
|
- name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
|
|
|
- }
|
|
|
- });
|
|
|
- console.log(szDeviceIdentify + " 获取数字通道成功！");
|
|
|
- },
|
|
|
- error: function(oError) {
|
|
|
- console.log(szDeviceIdentify + " 获取数字通道失败！", oError.errorCode, oError.errorMsg);
|
|
|
- }
|
|
|
- });
|
|
|
- // 零通道
|
|
|
- WebVideoCtrl.I_GetZeroChannelInfo(szDeviceIdentify, {
|
|
|
- success: function(xmlDoc) {
|
|
|
- var oChannels = $(xmlDoc).find("ZeroVideoChannel");
|
|
|
-
|
|
|
- $.each(oChannels, function(i) {
|
|
|
- var id = $(this).find("id").eq(0).text(),
|
|
|
- name = $(this).find("name").eq(0).text();
|
|
|
- if ("" == name) {
|
|
|
- name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1));
|
|
|
- }
|
|
|
- if ("true" == $(this).find("enabled").eq(0).text()) { // 过滤禁用的零通道
|
|
|
-
|
|
|
- }
|
|
|
- });
|
|
|
- console.log(szDeviceIdentify + " 获取零通道成功！");
|
|
|
- },
|
|
|
- error: function(oError) {
|
|
|
- console.log(szDeviceIdentify + " 获取零通道失败！", oError.errorCode, oError.errorMsg);
|
|
|
- }
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- //4.获取端口
|
|
|
- function getDevicePort(a) {
|
|
|
- var szDeviceIdentify = a;
|
|
|
-
|
|
|
- if (null == szDeviceIdentify) {
|
|
|
- return;
|
|
|
- }
|
|
|
- WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then((oPort) => {
|
|
|
- // console.log(oPort.iDevicePort + "iDevicePort的值是")
|
|
|
- // console.log(oPort.iRtspPort + "iRtspPort的值是")
|
|
|
- console.log(szDeviceIdentify + " 获取端口成功！");
|
|
|
- iRtspPort = oPort.iRtspPort
|
|
|
- that.iRtspPort = iRtspPort
|
|
|
- }, (oError) => {
|
|
|
- var szInfo = "获取端口失败！";
|
|
|
- console.log(szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
|
|
|
- });
|
|
|
- };
|
|
|
+ looper() {
|
|
|
+ const nowTime = new Date().getTime();
|
|
|
+ if ((nowTime - this.startTime) / 1000 < 11) {
|
|
|
+ this.videoTimer = window.setTimeout(this.looper, 0);
|
|
|
+ } else {
|
|
|
+ clearTimeout(this.videoTimer);
|
|
|
+ this.showRecord = false;
|
|
|
+ this.getVideoFile();
|
|
|
+ }
|
|
|
+ const videoEl = this.playerRef.$refs.video;
|
|
|
+ const recordCanvasEl = this.$refs.recordCanvas;
|
|
|
+ html2canvas(videoEl).then(() => {
|
|
|
+ const ctx = recordCanvasEl.getContext('2d');
|
|
|
+ ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
|
|
+ ctx.drawImage(videoEl, 0, 0, this.canvasWidth, this.canvasHeight);
|
|
|
+ });
|
|
|
},
|
|
|
- // 5.开始预览
|
|
|
- clickStartRealPlay(szIP, szPort, iStreamType, iWndIndex, iChannelID) {
|
|
|
- var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex),
|
|
|
- szDeviceIdentify = szIP + "_" + szPort, //ip
|
|
|
- iChannelID = iChannelID,
|
|
|
- bZeroChannel = false,
|
|
|
- iPort = this.iRtspPort,
|
|
|
- szInfo = "";
|
|
|
- iStreamType = iStreamType;
|
|
|
- if (null == szDeviceIdentify) {
|
|
|
- return null;
|
|
|
- }
|
|
|
- this.szDeviceIdentify = szDeviceIdentify;
|
|
|
- var startRealPlay = function() {
|
|
|
- WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
|
|
|
- iStreamType: iStreamType,
|
|
|
- iChannelID: iChannelID,
|
|
|
- bZeroChannel: bZeroChannel,
|
|
|
- iWndIndex: iWndIndex, //要播放的窗口
|
|
|
- iPort: iPort, //如果多个摄像头需要必填 （RTSP 端口号）
|
|
|
- success: function() {
|
|
|
- szInfo = "开始预览窗口" + iWndIndex + "成功！";
|
|
|
- console.log(szDeviceIdentify + " " + szInfo);
|
|
|
- },
|
|
|
- error: function(oError) {
|
|
|
- console.log(szDeviceIdentify + " 开始预览窗口" + iWndIndex + "失败！", oError
|
|
|
- .errorCode, oError.errorMsg);
|
|
|
- }
|
|
|
- });
|
|
|
- };
|
|
|
+ handlerUpLoad() {
|
|
|
|
|
|
- if (oWndInfo != null) { // 已经在播放了，先停止
|
|
|
- WebVideoCtrl.I_Stop({
|
|
|
- success: function() {
|
|
|
- startRealPlay();
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- startRealPlay();
|
|
|
- }
|
|
|
},
|
|
|
- }
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
-
|
|
|
<style lang="scss">
|
|
|
- .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;
|
|
|
- }
|
|
|
+.fade-enter-active, .fade-leave-active {
|
|
|
+ transition: opacity .5s
|
|
|
+}
|
|
|
+.fade-enter, .fade-leave-to{
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+@keyframes showImage {
|
|
|
+ from {
|
|
|
+ opacity: 0;
|
|
|
+ transform: scale(0.2);
|
|
|
}
|
|
|
-</style>
|
|
|
-<style scoped lang="scss">
|
|
|
- .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{
|
|
|
+ to{
|
|
|
+ opacity: 1;
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+}
|
|
|
+.cut-picture {
|
|
|
+ padding: 15px;
|
|
|
+ .source-content {
|
|
|
+ width: 100%;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ .cut-video-content {
|
|
|
+ width: 800px;
|
|
|
+ height: 450px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .image-list {
|
|
|
+ width: calc(100% - 800px);
|
|
|
+ height: 450px;
|
|
|
+ overflow: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
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;
|
|
|
+ .image-detail {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ margin-right: 20px;
|
|
|
+ .icon-delete {
|
|
|
+ position: absolute;
|
|
|
+ font-size: 14px;
|
|
|
+ right: 5px;
|
|
|
+ margin-top: 8px;
|
|
|
+ z-index: 2;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: rgba($color: #182752, $alpha: 0.8);
|
|
|
+ border-radius: 50%;
|
|
|
}
|
|
|
- .actt{
|
|
|
- background: #fff;
|
|
|
- // border-bottom: 3px solid #5974E0;
|
|
|
- // border-radius: 0;
|
|
|
- // border-bottom-right-radius: 4px;
|
|
|
- color: #5974E0;
|
|
|
+ .source-img {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .button-content {
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 15px;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .dialog-content {
|
|
|
+ .el-dialog__body {
|
|
|
+ position: relative;
|
|
|
+ padding: 20px;
|
|
|
+ .icon-pen {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 30px;
|
|
|
+ &-image {
|
|
|
+ height: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &-content {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ &-color {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: auto;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ &.is-active {
|
|
|
+ border: 4px solid #ddd;
|
|
|
+ box-sizing: content-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cancel-content {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+ // left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ .button {
|
|
|
+ margin-right: 15px;
|
|
|
+ padding: 8px 15px;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: rgba($color: #000000, $alpha: 0.3);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ span {
|
|
|
+ color: #fff;
|
|
|
+ height: 22px;
|
|
|
+ line-height: 26px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .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;
|
|
|
+ .source-dialog {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background-color: rgba($color: #000000, $alpha: 0.5);
|
|
|
+ z-index: 2005;
|
|
|
+ &__body {
|
|
|
+ position: absolute;
|
|
|
+ top: 20%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ .icon-delete {
|
|
|
+ position: absolute;
|
|
|
+ right: -6px;
|
|
|
+ top: -6px;
|
|
|
+ z-index: 2006;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
+ background-color: rgba($color: #182752, $alpha: 0.8);
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ animation: showImage 1s 1;
|
|
|
+ animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);
|
|
|
+ }
|
|
|
}
|
|
|
-.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;
|
|
|
- }
|
|
|
+.acti{
|
|
|
+// background: #E7F1EE;
|
|
|
+ font-weight: 700;
|
|
|
+ div{
|
|
|
+ color: #03BF8A !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.el-menuscrollbar .el-scrollbar__wrap {
|
|
|
+ overflow-x: hidden;
|
|
|
+}
|
|
|
+.el-scrollbar__thumb {
|
|
|
+ background-color: #3e97f6;
|
|
|
+}
|
|
|
</style>
|
wangmengwei
