From feaf0a9778879ef211c5587a513ba4cbdabb52d0 Mon Sep 17 00:00:00 2001 From: ZZJ <10913410+zzj2100@user.noreply.gitee.com> Date: 星期四, 23 六月 2022 17:42:58 +0800 Subject: [PATCH] bug修复 --- src/pages/cameraAccess/components/SeparateRules.vue | 689 ++++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 432 insertions(+), 257 deletions(-) diff --git a/src/pages/cameraAccess/components/SeparateRules.vue b/src/pages/cameraAccess/components/SeparateRules.vue index b9580df..19fb894 100644 --- a/src/pages/cameraAccess/components/SeparateRules.vue +++ b/src/pages/cameraAccess/components/SeparateRules.vue @@ -7,7 +7,7 @@ <span> <span class="label">瑙嗛鍒嗘瀽澶勭悊</span> <el-switch - style="margin-left: 10px;" + style="margin-left: 10px" v-model="Camera.analytics" @change="pollEnable" :disabled="!Camera.cameraId" @@ -15,74 +15,63 @@ </span> </div> - <div - v-if="Camera.analytics" - class="flex-box" - v-show="cameraType === 'camera'" - > - <span class="label" >澶勭悊鏂瑰紡</span> + <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'"> + <span class="label">澶勭悊鏂瑰紡</span> <toggle-button :value="Camera.dealWay" :width="60" - :labels="{checked: '瀹炴椂', unchecked: '杞'}" - :color="{checked: '#3D68E1', unchecked: '#FF7733', disabled: '#CCCCCC'}" + :labels="{ checked: '瀹炴椂', unchecked: '杞' }" + :color="{ + checked: '#3D68E1', + unchecked: '#FF7733', + disabled: '#CCCCCC' + }" :sync="true" @change="changePoll" /> </div> - - <div - v-if="Camera.analytics" - class="flex-box" - v-show="cameraType === 'camera'" - > - <span class="label" >鍒嗚鲸鐜�</span> - <el-select - v-model="Camera.selectResolution" - placeholder="璇烽�夋嫨" - size="mini" - style="width: 134px; - margin-left:10px;" + <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'"> + <span class="label">澶勭悊鐘舵��: {{ camStatus }}</span> + </div> + <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'"> + <span class="label" + >鍒嗚鲸鐜�: + {{ + Camera.camearInfo.resolution_width == 0 || Camera.camearInfo.resolution_height == 0 + ? "鏈満鍒嗚鲸鐜�" + : `${Camera.camearInfo.resolution_width} * ${Camera.camearInfo.resolution_height}` + }}</span > - <el-option - v-for="item in Camera.resolutionOption" - :key="item.value" - :label="item.label" - :value="item.value" - ></el-option> - </el-select> </div> <div v-if="Camera.analytics" class="flex-box"> - <span class="label" >鏅鸿兘璁$畻鑺傜偣: {{ Camera.runServerName}}</span> + <span class="label">SmartAI鑺傜偣: {{ Camera.runServerName }}</span> </div> - <div - v-if="Camera.analytics" - class="flex-box" - > + <div v-if="Camera.analytics" class="flex-box"> <span class="label">绠楁硶蹇�熼�氶亾</span> - <div class="channel flex-box" > - <el-tooltip - effect="dark" - content="澶嶅埗姝ゆ憚鍍忔満绠楁硶瑙勫垯" - placement="bottom" - popper-class="atooltip" - > + <div class="channel flex-box"> + <el-tooltip effect="dark" content="澶嶅埗姝ゆ憚鍍忔満绠楁硶瑙勫垯" placement="bottom" popper-class="atooltip"> <span - style="color:#3D68E1;cursor: pointer;font-size:23px;" + style="color: #3d68e1; cursor: pointer; font-size: 23px" @click="ctrlC" class="iconfont iconfuzhiguize" ></span> </el-tooltip> <el-tooltip effect="dark" - :content="!TreeDataPool.ctrlCameraId?'绮樿创绠楁硶瑙勫垯':`绮樿创绠楁硶瑙勫垯锛屾潵婧愶細${TreeDataPool.ctrlCameraName}`" + :content=" + !TreeDataPool.ctrlCameraId ? '绮樿创绠楁硶瑙勫垯' : `绮樿创绠楁硶瑙勫垯锛屾潵婧愶細${TreeDataPool.ctrlCameraName}` + " placement="bottom" popper-class="atooltip" > <span - :style="!TreeDataPool.ctrlCameraId?'cursor: not-allowed;font-size:23px;':'color:#3D68E1;font-size:23px;cursor: pointer;'" + :style=" + !TreeDataPool.ctrlCameraId + ? 'cursor: not-allowed;font-size:23px;' + : 'color:#3D68E1;font-size:23px;cursor: pointer;' + " @click="ctrlV" class="iconfont iconniantie ml5" ></span> @@ -95,9 +84,9 @@ <div class="devide"></div> - <div class="top" > + <div class="top"> <p class="task-css"> - <b style="font-size: 14px; line-height: 18px;">鍦烘櫙</b> + <b style="font-size: 14px; line-height: 18px">鍦烘櫙</b> </p> <div class="clearfix"> <slide-scene :sceneData="Camera.rules"></slide-scene> @@ -106,60 +95,111 @@ :showRealPoll="cameraType === 'camera'" :ShowLocalVedio="cameraType === 'dataStack'" v-if="showSysInfo" - style="margin-left: 10px;margin-top:-10px" + style="margin-top: -10px" /> </div> </div> </div> - <div class="bottom" > + <div class="bottom"> <div class="devide"></div> <div class="bottom-right"> <div class="draw-and-time-box"> <div class="draw-box"> <div class="draw-box-title"> <b style="font-size: 14px">缁樺埗鍖哄煙</b> - <span - class="el-dropdown-link" - @click="drawBaseImg" - style="position: relative;top: 5px; cursor:pointer" - > - <i class="iconfont iconbianji1" style="font-size: 28px; "></i> + <span class="el-dropdown-link" @click="drawBaseImg" style="position: relative; top: 5px; cursor: pointer"> + <i class="iconfont iconbianji1" style="font-size: 28px"></i> </span> </div> - <div style="width:590px;height:16px;"> - <b - style="font-size:14px" - >{{ Camera.camearInfo.alias ? Camera.camearInfo.alias: Camera.camearInfo.name }}</b> + <div style="width: 590px; height: 16px"> + <b style="font-size: 14px">{{ + Camera.camearInfo.alias ? Camera.camearInfo.alias : Camera.camearInfo.name + }}</b> </div> <div class="img-box"> - <polygon-canvas - class="cavas" - ref="canvas" - v-if="showCanvas" - v-loading="loading" - element-loading-text="鍒锋柊涓紝璇风◢绛�..." - element-loading-background="rgba(0, 0, 0, 0.8)" - :isShowDrawArrow="false" - :disabled="false" - :snapshot_url="Camera.baseImg" - :canvasDataShow="Camera.canvasData" - :currentCameraId="Camera.cameraId" - :loading="Camera.loading" - :canvasWidth="canvasWidth" - :canvasHeight="canvasHeight" - @fromCanvas="getCanvasData" - @changeLoading="changeLoading" - @refresh="refresh" - ></polygon-canvas> + <template v-if="TreeDataPool.treeActiveName == 'camera'"> + <polygon-canvas + class="cavas" + ref="canvas" + v-if="showCanvas" + v-loading="loading" + element-loading-text="鍒锋柊涓紝璇风◢绛�..." + element-loading-background="rgba(0, 0, 0, 0.8)" + :isShowDrawArrow="false" + :disabled="false" + :snapshot_url="Camera.baseImg" + :canvasDataShow="Camera.canvasData" + :currentCameraId="Camera.cameraId" + :loading="Camera.loading" + :canvasWidth="canvasWidth" + :canvasHeight="canvasHeight" + :isGB28181="Camera.gb28181" + @fromCanvas="getCanvasData" + @changeLoading="changeLoading" + @refresh="refresh" + ></polygon-canvas> + </template> + <template v-else> + <div style="width: 100%" v-loading="getStackFileLoading"> + <swiper + ref="swiper" + :auto-update="true" + :options="canvasSwiperOption" + @slideChange="swiperSlideChange" + class="swiper-box-container2" + style="width: 100%" + > + <swiper-slide v-for="(data, index) in swipercanvasData" :key="index"> + <div> + <b class="video-title" style="font-size: 14px; margin-top: -10px">{{ data.name }}</b> + <polygon-canvas + class="cavas" + ref="canvas" + v-if="showCanvas" + v-loading="loading" + element-loading-text="鍒锋柊涓紝璇风◢绛�..." + element-loading-background="rgba(0, 0, 0, 0.8)" + :isShowDrawArrow="false" + :isShowRefresh="false" + :sourceType="data.type" + :disabled="false" + :snapshot_url="data.baseImg" + :canvasDataShow="Camera.canvasData" + :currentCameraId="data.stackId" + :loading="data.loading" + :canvasWidth="canvasWidth" + :canvasHeight="canvasHeight" + @fromCanvas="getCanvasData" + @changeLoading="changeLoading" + ></polygon-canvas> + </div> + </swiper-slide> + </swiper> + <div class="swiper-local-prev" v-show="swipercanvasData.length > 1" @click="prevClick"> + <div class="icon-btn" slot="button-prev"> + <i class="iconfont iconzuo"></i> + </div> + </div> + <div class="swiper-local-next" v-show="swipercanvasData.length > 1" @click="nextClick"> + <div class="icon-btn" slot="button-next"> + <i class="iconfont iconyou1"></i> + </div> + </div> + </div> + </template> </div> </div> - <div style="float:left;width:calc(10% - 90px);height:100%;"></div> + <div style="float: left; width: calc(10% - 90px); height: 100%"></div> <div class="time-box" - style="width:calc(90% + 90px - 576px);overflow-x:auto;overflow-y:hidden" + style=" + width: calc(90% + 90px - 576px); + overflow-x: auto; + overflow-y: hidden; + " > - <p style="text-align:left;padding: 10px;box-sizing: border-box"> + <p style="text-align: left; padding: 10px; box-sizing: border-box"> <b style="font-size: 14px">鏃堕棿娈�</b> </p> <time-slider ref="timeSlider" :type="'sep'" /> @@ -179,28 +219,21 @@ </template> <script> -//import { timeSilderData } from "@/mockData/timeSilder"; -import { savePolygon } from "@/api/polygon"; +import { savePolygon } from "@/api/polygon" -import { - pasteRules -} from '@/api/task'; +import { pasteRules } from "@/api/task" +import { getCameraInfo } from "@/api/camera" +import { saveCameraScene } from "@/api/scene" -import { - saveCameraScene, - getCameraSceneRule, -} from '@/api/scene' +import { changeRunType } from "@/api/pollConfig" +import { findAllFileByStackId } from "@/api/localVedio" +import VideoRuleData from "@/Pool/VideoRuleData" -import { changeRunType } from "@/api/pollConfig"; - -import VideoRuleData from "@/Pool/VideoRuleData"; - -import TimeSlider from "./TimeSlider"; -import polygonCanvas from "@/components/canvas"; -//import Sysinfo from "./SystemInfo"; -import Sysinfo from "@/components/subComponents/SystemInfo"; -import SceneRule from "./SceneRule"; -import SlideScene from "./scene/SlideScene"; +import TimeSlider from "./TimeSlider" +import polygonCanvas from "@/components/canvas" +import Sysinfo from "@/components/subComponents/SystemInfo" +import SceneRule from "./SceneRule" +import SlideScene from "./scene/SlideScene" export default { components: { @@ -212,14 +245,14 @@ }, directives: { focus: { - inserted: function (el) { - el.querySelector('input').focus() + inserted: function(el) { + el.querySelector("input").focus() } } }, computed: { cameraType() { - return this.TreeDataPool.treeActiveName === 'camera' ? "camera" : "dataStack" + return this.TreeDataPool.treeActiveName === "camera" ? "camera" : "dataStack" } }, data() { @@ -228,114 +261,212 @@ loading: false, Camera: new VideoRuleData(), runType: -1, - swiperOption: { - slidesPerView: 5, - spaceBetween: 8, + getStackFileLoading: false, + canvasSwiperOption: { + grabCursor: true, pagination: { el: ".swiper-pagination", - clickable: true + type: "fraction" }, navigation: { - nextEl: ".swiper-next-border", - prevEl: ".swiper-pre-border" + nextEl: ".swiper-local-next", + prevEl: ".swiper-local-prev" } }, tableRuleList: [], - + camStatus: "", cameraId: "", - activeTaskIndex: 0, - activeTaskId: "", - booleanValue: false, showSysInfo: false, showCanvas: true, canvasWidth: 576, - canvasHeight: 324 - }; + canvasHeight: 324, + stackId: "", + swiperIndex: 0, + swipercanvasData: [], + stackFilesPage: 1, + stackFilesSize: 5 + } }, mounted() { - this.mockAsync() + this.PollData.statistics() }, - + watch: { + "Camera.cameraId": { + handler(n, o) { + if (n) { + if (this.TreeDataPool.treeActiveName == "dataStack") { + this.stackFilesPage = 1 + this.stackFilesSize = 5 + this.stackId = n + if (this.stackId) { + this.swipercanvasData = [] + this.getStackFiles() + } + } + } + } + } + }, methods: { - mockAsync() { - setTimeout(() => { - this.mockSceneData = [ - { scenename: "name1", id: 1, icon: ["iconrenlianjiance", "icongetijingzhi"] }, - { scenename: "name2", id: 2, icon: ["iconchouyan-copy"] }, - { - scenename: "name3", - id: 3, - icon: [ - "iconrenshukouzhao", - "iconchouyan-copy", - "iconrenlianjiance", - "icongetijingzhi" - ] - }, - { - scenename: "name4", - id: 4, - icon: ["iconchouyan-copy", "iconrenlianjiance", "icongetijingzhi"] - }, - { scenename: "name5", id: 5, icon: ["icongetijingzhi"] }, - { scenename: "name6", id: 6, icon: ["iconrenshukouzhao", "icongetijingzhi"] }, - { scenename: "name7", id: 7, icon: ["iconrenlianjiance"] } - ]; - }, 3000) + getStatus() { + getCameraInfo(this.Camera.cameraId).then((res) => { + if (res.success) { + switch (res.data.status) { + case 0: + this.camStatus = "鏈厤瑙勫垯" + return + case 1: + this.camStatus = "绛夊緟杞澶勭悊" + return + case 2: + this.camStatus = "姝e湪鎵ц鍒嗘瀽澶勭悊" + return + case -1: + this.camStatus = "鍏朵粬鎯呭喌瀵艰嚧鏈鐞�" + return + case -2: + this.camStatus = "鏁呴殰瀵艰嚧鏈鐞�" + return + } + } + }) + }, + prevClick() { + if (this.swiperIndex == 0) { + if (this.stackFilesPage > 1) { + this.stackFilesPage-- + this.getStackFiles(true) + } else { + this.$message({ + type: "info", + message: "褰撳墠宸叉槸绗竴椤�" + }) + } + } + }, + nextClick() { + if (this.swiperIndex == this.swipercanvasData.length - 1) { + this.stackFilesPage++ + this.getStackFiles(true) + } + }, + getStackFiles(onClick = false) { + this.getStackFileLoading = true + let _this = this + findAllFileByStackId({ + name: "", + stackId: this.stackId, + page: this.stackFilesPage, + size: this.stackFilesSize, + type: 0 + }) + .then((res) => { + if (res && res.success) { + if (res.data.dataList.length > 0) { + this.swipercanvasData = [] + this.swipercanvasData = res.data.dataList.map((item) => { + return { + name: item.name, + stackId: item.stack_id, + baseImg: + item.type == 2 ? `/files/${item.path.substr(item.path.lastIndexOf("/") + 1)}` : item.snapshot_url, + type: item.type, + id: item.id, + loading: false + } + }) + this.swiperIndex = 0 + this.$refs.swiper.swiper.activeIndex = 0 + } else { + if (onClick) { + this.$message({ + type: "warning", + message: "宸叉棤鏇村鏁版嵁!" + }) + } + } + } else { + this.$message({ + type: "error", + message: "鏁版嵁璇锋眰澶辫触,璇风◢鍚庨噸璇�!" + }) + } + this.getStackFileLoading = false + }) + .catch((e) => { + this.getStackFileLoading = false + }) + }, + swiperSlideChange() { + this.swiperIndex = this.$refs.swiper.swiper.activeIndex }, drawBaseImg() { - this.$refs.canvas.showModal(); + if (Array.isArray(this.$refs.canvas)) { + if (this.$refs.canvas.length > 0) { + this.$refs.canvas[0].showModal() + } + } else { + this.$refs.canvas.showModal() + } }, getCanvasData(data) { - let polyon = { ...data }; - polyon.camera_id = this.Camera.cameraId; - savePolygon(polyon).then(rsp => { - this.Camera.getPolygon(); - this.Camera.getCameraTask(); - }); + let polyon = { ...data } + polyon.camera_id = this.Camera.cameraId + savePolygon(polyon).then((rsp) => { + this.Camera.getPolygon() + //this.Camera.getCameraTask(); + }) }, refresh(url) { this.Camera.baseImg = url }, // 鍒濆鍖栨憚鍍忔満淇℃伅锛岀埗缁勪欢璋冪敤 - async initCameraData(id) { - this.Camera = new VideoRuleData(); + async initCameraData(id, type) { + this.Camera = new VideoRuleData() if (id && id !== "") { - this.loading = false; - this.Camera.cameraId = id; - await this.Camera.update(); + this.loading = false + this.Camera.cameraId = id + this.Camera.gb28181 = type === 1 + if (type === 1) { + await this.Camera.update(true) + } else { + await this.Camera.update() + } } - this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id; + this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id this.showSysInfo = true // 鍒ゆ柇姝e湪鎵ц瀹炴椂鎴栬�呰疆璇换鍔� - this.PollData.CameraList.forEach(element => { + this.PollData.CameraList.forEach((element) => { if (element.id === this.Camera.cameraId) { - this.runType = element.run_type; + this.runType = element.run_type } }) - }, + saveSceneRule(groupRule) { const payload = { ...groupRule } - payload.cameraIds = [this.Camera.cameraId]; - saveCameraScene(payload).then(rsp => { + payload.cameraIds = [this.Camera.cameraId] + let _this = this + saveCameraScene(payload).then((rsp) => { if (rsp && rsp.success) { - this.Camera.update(); + this.Camera.update() this.$notify({ type: "success", message: "绛栫暐淇濆瓨鎴愬姛锛�" - }); + }) + //鍒锋柊宸︿晶鏍� + + _this.$root.$children[0].$children[0].querySearchAsync("camera") } - }); + }) }, delScenRule() { - this.Camera.update(); + this.Camera.update() }, changeLoading(params) { this.loading = params - // console.log(this.loading,'changeLoading',params) }, //鏄惁杩涜瑙嗛鍒嗘瀽澶勭悊 pollEnable(row) { @@ -353,29 +484,31 @@ val = -1 } if (this.Camera.cameraId && this.Camera.cameraId !== undefined) { - changeRunType({ camera_ids: [this.Camera.cameraId], run_type: val }).then( - rsp => { - if (rsp && rsp.success) { - this.$notify({ - type: "success", - message: "閰嶇疆鎴愬姛" - }); - } else { - this.$notify({ - type: "error", - message: "閰嶇疆澶辫触" - }); - } - // this.selectCamera(this.TreeDataPool.selectedNode) + changeRunType({ + camera_ids: [this.Camera.cameraId], + run_type: val + }).then((rsp) => { + this.getStatus() + if (rsp && rsp.success) { + this.$notify({ + type: "success", + message: "閰嶇疆鎴愬姛" + }) + } else { + this.$notify({ + type: "error", + message: "閰嶇疆澶辫触" + }) } - ); + this.TreeDataPool.fetchTreeData() + }) } - this.TreeDataPool.fetchTreeData(); - this.PollData.statisticTaskInfo(); + this.PollData.statisticTaskInfo() }, //瀹炴椂銆佽疆璇㈠垏鎹� changePoll(row) { //鍒ゆ柇鏄柊澧炶繕鏄洿鏂� + debugger if (this.Camera.cameraId && this.Camera.cameraId !== undefined) { if (this.PollData.RealTimeSum < this.PollData.channelTotal) { if (row.value) { @@ -383,49 +516,53 @@ } else { this.Camera.dealWay = false } - changeRunType({ camera_ids: [this.Camera.cameraId], run_type: this.Camera.dealWay ? 1 : 0 }).then( - rsp => { + debugger + changeRunType({ + camera_ids: [this.Camera.cameraId], + run_type: this.Camera.dealWay ? 1 : 0 + }).then((rsp) => { + if (rsp && rsp.success) { + this.$notify({ + type: "success", + message: "閰嶇疆鎴愬姛" + }) + } else { + this.$notify({ + type: "error", + message: "閰嶇疆澶辫触" + }) + } + }) + } else { + if (this.Camera.dealWay) { + this.Camera.dealWay = false + debugger + changeRunType({ + camera_ids: [this.Camera.cameraId], + run_type: this.Camera.dealWay ? 1 : 0 + }).then((rsp) => { if (rsp && rsp.success) { this.$notify({ type: "success", message: "閰嶇疆鎴愬姛" - }); + }) } else { this.$notify({ type: "error", message: "閰嶇疆澶辫触" - }); + }) } - } - ); - } else { - if (this.Camera.dealWay) { - this.Camera.dealWay = false - changeRunType({ camera_ids: [this.Camera.cameraId], run_type: this.Camera.dealWay ? 1 : 0 }).then( - rsp => { - if (rsp && rsp.success) { - this.$notify({ - type: "success", - message: "閰嶇疆鎴愬姛" - }); - } else { - this.$notify({ - type: "error", - message: "閰嶇疆澶辫触" - }); - } - } - ); + }) } } - this.TreeDataPool.fetchTreeData(); - this.PollData.statisticTaskInfo(); + this.TreeDataPool.fetchTreeData() + this.PollData.statisticTaskInfo() } }, //澶嶅埗 ctrlC() { - this.TreeDataPool.ctrlCameraId = this.Camera.cameraId; - this.TreeDataPool.ctrlCameraName = this.Camera.cameraName; + this.TreeDataPool.ctrlCameraId = this.Camera.cameraId + this.TreeDataPool.ctrlCameraName = this.Camera.cameraName this.$notify({ type: "success", message: "澶嶅埗绠楁硶鎴愬姛锛�" @@ -437,81 +574,122 @@ type: "warning", message: "涓嶈兘绮樿创鏈憚鍍忔満鐨勭畻娉曞埌鏈憚鍍忔満锛�" }) - return false; + return false } pasteRules({ sourceId: this.TreeDataPool.ctrlCameraId, targetIds: [this.Camera.cameraId] - }).then((res) => { - // console.log(res,'澶嶅埗绠楁硶') - if (res && res.success) { - this.$notify({ - type: "success", - message: "绮樿创绠楁硶鎴愬姛锛�" - }) - this.initCameraData(this.Camera.cameraId) - } else { + }) + .then((res) => { + if (res && res.success) { + this.$notify({ + type: "success", + message: "绮樿创绠楁硶鎴愬姛锛�" + }) + this.initCameraData(this.Camera.cameraId) + } else { + this.$notify({ + type: "error", + message: "绮樿创绠楁硶澶辫触锛�" + }) + } + }) + .catch((err) => { this.$notify({ type: "error", message: "绮樿创绠楁硶澶辫触锛�" }) - } - }).catch(err => { - // console.log(err,'澶嶅埗绠楁硶鎶ラ敊锛�') - this.$notify({ - type: "error", - message: "绮樿创绠楁硶澶辫触锛�" }) - }) - }, + } } -}; +} </script> <style lang="scss"> +.el-message--info .el-message__content { + color: #999 !important; +} +.swiper-container { + margin-left: auto; + margin-right: auto; + position: relative; + overflow: hidden; + list-style: none; + padding: 0; + z-index: 1; +} +.swiper-local-prev, +.swiper-local-next { + width: 40px; + height: 40px; + position: absolute; + background: #8888; + top: 40%; + z-index: 99; + border-radius: 4em; + outline: none; + .icon-btn { + color: rgb(255, 255, 255); + text-align: center; + line-height: 38px; + cursor: pointer; + } +} +.swiper-local-prev { + left: 10px; +} +.swiper-local-prev:hover { + background: #666; +} +.swiper-local-next { + left: 90%; +} +.swiper-local-next:hover { + background: #666; +} .s-separate-rules { width: 100%; - + padding: 13px 0 20px; .ai { //width: calc(100% + 76px); // height: 38px; // position: absolute; // left: -38px; - height:40px; + height: 40px; .check-area { width: 100%; height: 100%; padding: 0 20px; -webkit-box-sizing: border-box; box-sizing: border-box; - .ai-select{ + .ai-select { text-align: left; line-height: 30px; height: 30px; - .flex-box{ - .label{ - &+label,&+div{ + .flex-box { + .label { + & + label, + & + div { margin-left: 10px; line-height: 1; } - } } } - .ai-select>div{ + .ai-select > div { display: inline-block; vertical-align: middle; margin-right: 30px; - - .channel{ + + .channel { display: inline-block; vertical-align: middle; } } } } - .devide{ + .devide { height: 10px; - background: #E9EBF2; + background: #e9ebf2; } .top { width: 100%; @@ -520,16 +698,14 @@ .swiper-box { height: 100%; float: left; - width: 48%; + width: 46%; margin-top: -10px; position: relative; } .swiper-container { position: initial; min-width: 472px; - width: 80%; - - // height: 124px; + width: 86%; } .swiper-slide { position: relative; @@ -568,10 +744,6 @@ backdrop-filter: blur(1px) brightness(100%); display: none; } - - // @media screen and(max-width: 1280px) { - // max-width: 110px; - // } @media screen and(max-width: 1440px) { max-width: 110px; } @@ -611,10 +783,20 @@ .swiper-next-border:hover { background: #666; } + .top-right { float: right; - width: 52%; + width: 54%; height: 144px; + .card-box { + width: 54% !important; + } + .eCharts-box { + width: 45%; + canvas { + width: 98% !important; + } + } } .task-css { text-align: left; @@ -623,7 +805,7 @@ } .bottom { width: 100%; - + margin-bottom: 15px; .bottom-side { height: 100%; width: 250px; @@ -783,13 +965,6 @@ color: #3d68e1; margin-left: 10px; font-size: 14px; - } - .task-tip { - font-family: PingFangSC-Regular; - font-size: 12px; - color: #cccccc; - margin-top: 10%; - margin-left: 38%; } .marker { -- Gitblit v1.8.0