|
|
@@ -1,167 +1,193 @@
|
|
|
<template>
|
|
|
- <div class="myDiaList">
|
|
|
- <div class="title">已接入项目数量</div>
|
|
|
- <div class="closeBtn" @click="close"></div>
|
|
|
- <div class="flex-container">
|
|
|
- <div class="header">
|
|
|
- <div class="flex-column">项目名称</div>
|
|
|
- <div class="flex-column">摄像头数量</div>
|
|
|
- </div>
|
|
|
- <div class="dataList">
|
|
|
- <div class="flex-row" v-for="(item,index) in dataList" :key="index" @click="choose(item.id)">
|
|
|
- <div class="flex-column">{{item.projectName}}</div>
|
|
|
- <div class="flex-column">{{item.cameraNum}}</div>
|
|
|
- </div>
|
|
|
+ <div class="myDiaList">
|
|
|
+ <div class="title">已接入项目数量</div>
|
|
|
+ <div class="closeBtn" @click="close"></div>
|
|
|
+ <div class="flex-container">
|
|
|
+ <div class="header">
|
|
|
+ <div class="firX">项目名称</div>
|
|
|
+ <div class="firY">摄像头数量</div>
|
|
|
+ </div>
|
|
|
+ <div class="dataList">
|
|
|
+ <div class="flex-row" v-for="(item,index) in dataList" :key="index" @click="choose(item.id)">
|
|
|
+ <div class="groX">{{item.projectName}}</div>
|
|
|
+ <div class="groY">{{item.cameraNum}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <script>
|
|
|
- import {getFoodsList, planCheckList} from "@/api/screen/service";
|
|
|
- import pinyin from "../data/pinyin.js";
|
|
|
- import { etCameraNumList } from "@/api/screen/service"
|
|
|
- export default {
|
|
|
- name: "UnitCamera",
|
|
|
- props: {
|
|
|
- week: {
|
|
|
- type: String,
|
|
|
- default: "",
|
|
|
- },
|
|
|
- appOrg: {
|
|
|
- type: String,
|
|
|
- default: "10001",
|
|
|
- },
|
|
|
- curCompanyear:{
|
|
|
- type: String,
|
|
|
- default: "",
|
|
|
- }
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {getFoodsList, planCheckList} from "@/api/screen/service";
|
|
|
+import pinyin from "../data/pinyin.js";
|
|
|
+import { etCameraNumList } from "@/api/screen/service"
|
|
|
+export default {
|
|
|
+ name: "UnitCamera",
|
|
|
+ props: {
|
|
|
+ week: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- dataList: [],
|
|
|
- };
|
|
|
+ appOrg: {
|
|
|
+ type: String,
|
|
|
+ default: "10001",
|
|
|
},
|
|
|
- created () {
|
|
|
- this.etCameraNumList()
|
|
|
+ curCompanyear:{
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dataList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.etCameraNumList()
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ choose(appOrg){
|
|
|
+ this.$emit("choose",appOrg);
|
|
|
},
|
|
|
- mounted() {},
|
|
|
- methods: {
|
|
|
- choose(appOrg){
|
|
|
- this.$emit("choose",appOrg);
|
|
|
- },
|
|
|
- etCameraNumList(){
|
|
|
- etCameraNumList(this.$props.curCompanyear).then((res) => {
|
|
|
- if (Number(res.code) === 200) {
|
|
|
- this.dataList = res.data;
|
|
|
- this.dataList.forEach((item, index) => {
|
|
|
- item.id = item.id;
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- close() {
|
|
|
- this.$emit("close");
|
|
|
- },
|
|
|
+ etCameraNumList(){
|
|
|
+ etCameraNumList(this.$props.curCompanyear).then((res) => {
|
|
|
+ if (Number(res.code) === 200) {
|
|
|
+ this.dataList = res.data;
|
|
|
+ this.dataList.forEach((item, index) => {
|
|
|
+ item.id = item.id;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- };
|
|
|
- </script>
|
|
|
-
|
|
|
- <style lang="scss" scoped>
|
|
|
- .myDiaList {
|
|
|
- position: relative;
|
|
|
- width: 668px;
|
|
|
- height: 432px;
|
|
|
- background: url("../../../assets/images/main/dialog-bg.png") no-repeat;
|
|
|
- background-size: cover;
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- color: #00FFFF;
|
|
|
- height: 40px;
|
|
|
- padding: 8px 0 8px 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .closeBtn{
|
|
|
- position: absolute;
|
|
|
- right: 10px;
|
|
|
- top: 5px;
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
- cursor: pointer;
|
|
|
+ close() {
|
|
|
+ this.$emit("close");
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.myDiaList {
|
|
|
+ position: relative;
|
|
|
+ width: 668px;
|
|
|
+ height: 432px;
|
|
|
+ background: url("../../../assets/images/main/dialog-bg.png") no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ color: #00FFFF;
|
|
|
+ height: 40px;
|
|
|
+ padding: 8px 0 8px 25px;
|
|
|
+}
|
|
|
+
|
|
|
+.closeBtn{
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 5px;
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.flex-container {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.header{
|
|
|
+ display: flex; /* 每行使用 flexbox 布局 */
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ background-color: rgba(21, 105, 107, 0.5);
|
|
|
+ .firX{
|
|
|
+ width: 70%;
|
|
|
+ padding: 8px 12px;
|
|
|
+ text-align: left; /* 左对齐文本 */
|
|
|
+ color: white;
|
|
|
}
|
|
|
-
|
|
|
- .flex-container {
|
|
|
- width: 100%;
|
|
|
- padding: 0 10px 0;
|
|
|
+ .firY{
|
|
|
+ padding: 8px 12px;
|
|
|
+ text-align: left; /* 左对齐文本 */
|
|
|
+ color: white;
|
|
|
+ width: 30%;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .header{
|
|
|
- display: flex; /* 每行使用 flexbox 布局 */
|
|
|
- position: relative;
|
|
|
- background-color: rgba(21, 105, 107, 0.5);
|
|
|
- }
|
|
|
-
|
|
|
- .dataList{
|
|
|
- height: 400px;
|
|
|
- overflow: auto;
|
|
|
- background: radial-gradient(
|
|
|
+.dataList{
|
|
|
+ height: 400px;
|
|
|
+ overflow: auto;
|
|
|
+ background: radial-gradient(
|
|
|
190% 71% at 50% 49%,
|
|
|
rgba(21, 105, 107, 0.54) 0%,
|
|
|
rgba(27, 95, 97, 0) 100%
|
|
|
)
|
|
|
- }
|
|
|
-
|
|
|
- .dataList::-webkit-scrollbar {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- .flex-row {
|
|
|
- display: flex; /* 每行使用 flexbox 布局 */
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .flex-row::before{
|
|
|
- content: "";
|
|
|
- height: 15px;
|
|
|
- border-left: 2px #00FFFF solid;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 10px
|
|
|
- }
|
|
|
-
|
|
|
- .flex-column {
|
|
|
- flex: 1; /* 每列均分可用空间 */
|
|
|
+}
|
|
|
+
|
|
|
+.dataList::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.flex-row {
|
|
|
+ display: flex; /* 每行使用 flexbox 布局 */
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ .groX{
|
|
|
+ width: 70%;
|
|
|
padding: 8px 12px;
|
|
|
- text-align: left; /* 左对齐文本 */
|
|
|
- color: white;
|
|
|
+ text-align: left; /* 左对齐文本 */
|
|
|
+ color: white;
|
|
|
}
|
|
|
-
|
|
|
- .header .flex-column {
|
|
|
- color: #00ffff;
|
|
|
+ .groY{
|
|
|
+ padding: 8px 12px;
|
|
|
+ text-align: left; /* 左对齐文本 */
|
|
|
+ color: white;
|
|
|
+ width: 30%;
|
|
|
}
|
|
|
-
|
|
|
- .el-scrollbar {
|
|
|
- background: #15696b;
|
|
|
- border: 1px solid #00ffff;
|
|
|
- ul {
|
|
|
- li {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+}
|
|
|
+
|
|
|
+.flex-row::before{
|
|
|
+ content: "";
|
|
|
+ height: 15px;
|
|
|
+ border-left: 2px #00FFFF solid;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 10px
|
|
|
+}
|
|
|
+
|
|
|
+.flex-column {
|
|
|
+ flex: 1; /* 每列均分可用空间 */
|
|
|
+ padding: 8px 12px;
|
|
|
+ text-align: left; /* 左对齐文本 */
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.header .flex-column {
|
|
|
+ color: #00ffff;
|
|
|
+}
|
|
|
+
|
|
|
+.el-scrollbar {
|
|
|
+ background: #15696b;
|
|
|
+ border: 1px solid #00ffff;
|
|
|
+ ul {
|
|
|
+ li {
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
}
|
|
|
- .el-select-dropdown__item.hover,
|
|
|
- .el-select-dropdown__item:hover {
|
|
|
- background: #15696b;
|
|
|
- color: #00ffff;
|
|
|
- }
|
|
|
- .el-select-dropdown__item.selected {
|
|
|
- color: #00ffff;
|
|
|
- }
|
|
|
- .el-select .el-input .el-select__caret {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- </style>
|
|
|
+}
|
|
|
+.el-select-dropdown__item.hover,
|
|
|
+.el-select-dropdown__item:hover {
|
|
|
+ background: #15696b;
|
|
|
+ color: #00ffff;
|
|
|
+}
|
|
|
+.el-select-dropdown__item.selected {
|
|
|
+ color: #00ffff;
|
|
|
+}
|
|
|
+.el-select .el-input .el-select__caret {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
|
|
|
