From b94eae282d4014c9e861797168e61f270f04c821 Mon Sep 17 00:00:00 2001 From: luobisheng <727299681@qq.com> Date: 星期二, 29 十一月 2022 18:33:50 +0800 Subject: [PATCH] 审核修改 --- src/views/systemSetting/device/point/index.vue | 246 ++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 231 insertions(+), 15 deletions(-) diff --git a/src/views/systemSetting/device/point/index.vue b/src/views/systemSetting/device/point/index.vue index a0df916..0faebc1 100644 --- a/src/views/systemSetting/device/point/index.vue +++ b/src/views/systemSetting/device/point/index.vue @@ -1,19 +1,235 @@ <template> - <div class="point"> - <MyUpload></MyUpload> - </div> -</template> -<script> -// 寮曞叆涓婁紶缁勪欢 -import MyUpload from '@/components/myUpload' -export default { - components:{ - MyUpload - }, - data() { - return { + <el-container style="height: 100%"> + <el-aside heigth="100%" width="200px "> + <department-aside @selectedDepartment="selectedDepartment" /> + </el-aside> - } - } + <el-container> + <el-header style="display: flex; flex-direction: column; height: 120px"> + <div + style="display: flex; justify-content: space-between; height: 80px" + > + <span + style=" + color: rgb(75, 155, 183); + font-weight: 450; + text-align: left; + font-size: 16px; + " + >褰撳墠鍏�8涓洃鎺х偣浣嶏紝鏈�澶氶厤缃�100璺棰戠洃鎺э紝鐩墠宸茬粡閰嶇疆200璺棰戠偣</span + > + </div> + <div + style="height: 60px; display: flex; justify-content: flex-start" + ></div> + </el-header> + + <el-main style="display: flex; flex-wrap: wrap; overflow-y: scroll"> + <div + v-for="item in videoData" + style=" + height: 240px; + width: 210px; + position: relative; + margin-left: 20px; + " + > + <div + style=" + color: rgb(75, 155, 183); + font-size: 11px; + line-height: 18px; + position: absolute; + z-index: 1; + left: 50px; + " + > + {{ item.name }}{{ item.community }} + </div> + <video + id="my-video" + :src="item.urlAddress" + class="video-js" + controls + preload="auto" + width="210px" + height="150px" + ></video> + <div class="bottonOne" @click="">鏌ョ湅瑙嗛</div> + <div class="bottonTwo">瑙嗛涓婃姤</div> + <div class="bottonThird">瀵硅</div> + </div> + </el-main> + <el-footer> + <div style="margin-bottom: 0"> + <el-pagination + :current-page="currentPage" + @current-change="current_change" + layout="prev, pager, next" + :total="totalNum" + :page-size="pageSize" + > + </el-pagination> + </div> + </el-footer> + </el-container> + </el-container> +</template> +<style lang="scss" scoped> +.button-one { + height: 40px; + width: 80px; + margin-left: 20px; + padding: 0; + background-color: #09152f; + color: rgb(75, 155, 183); + border: 1px solid rgb(75, 155, 183); } + +.button-two { + height: 40px; + width: 80px; + padding: 0; + background-color: #09152f; + color: rgb(75, 155, 183); + border: 1px solid rgb(75, 155, 183); +} +.el-button + .el-button { + margin: 0; +} +.button-third { + height: 40px; + width: 80px; + padding: 0; + background-color: #09152f; + color: rgb(75, 155, 183); + border: 1px solid rgb(75, 155, 183); +} + +.video-js { + border: 1px solid rgb(75, 155, 183); + margin-left: 20px; +} + +.bottonOne { + color: rgb(75, 155, 183); + font-size: 11px; + position: absolute; + height: 30px; + line-height: 30px; + margin-left: 20px; + width: 70px; + border: 1px solid rgb(75, 155, 183); + cursor: pointer; +} + +.bottonTwo { + color: rgb(75, 155, 183); + font-size: 11px; + position: absolute; + height: 30px; + line-height: 30px; + width: 70px; + border: 1px solid rgb(75, 155, 183); + margin-left: 90px; + cursor: pointer; +} +.el-pagination { + line-height: 40px; +} +.bottonThird { + color: rgb(75, 155, 183); + font-size: 11px; + position: absolute; + height: 30px; + line-height: 30px; + width: 70px; + border: 1px solid rgb(75, 155, 183); + margin-left: 160px; + cursor: pointer; +} + +::v-deep .el-header { + background-color: #09152f; + color: #000; + line-height: 60px; +} + +::v-deep .el-aside { + background-color: #09152f; +} + +::v-deep .el-menu { + background-color: #09152f; +} + +::v-deep .el-main, +::v-deep .el-footer { + background-color: #09152f; +} + +::v-deep .el-tree-node__label { + line-height: 30px; + font-size: 14px; + // color: rgb(75, 155, 183); +} +</style> +<script> +import departmentAside from "@/views/operate/fivepack/threepack/components/aside"; +import videoPoint from "@/api/system/videoPoint"; + +export default { + components: { departmentAside }, + created() { + this.getVideoPointList(); + }, + data() { + return { + currentPage: 1, + totalNum: 10, + pageSize: 10, + videoData: [], + value: "", + searchData: null, + }; + }, + methods: { + getVideoPointList(data) { + let communityId, streetId; + if (data) { + communityId = data.id; + streetId = data.parentId; + } + videoPoint + .getVideoPointList({ + current: this.currentPage, + size: this.pageSize, + communityId, + streetId, + }) + .then(({ records, total }) => { + this.videoData = records; + this.totalNum = total; + }) + .catch((err) => this.$message.error(err)); + }, + selectedDepartment(data) { + + if (!data.children) { + this.searchData = data; + this.getVideoPointList(data); + } else { + data.parentId = data.id; + data.id = null; + this.searchData = data; + this.getVideoPointList(data); + } + this.currentPage = 1; + }, + current_change(e) { + this.currentPage = e; + this.getVideoPointList(this.searchData); + }, + }, +}; </script> \ No newline at end of file -- Gitblit v1.8.0