-
+
-
+
-
-
+
+
-
+
-
+
- 搜索
- 重置
+ 搜索
+ 重置
@@ -73,15 +111,22 @@
size="mini"
type="warning"
@click="handleExport"
- >导出
+ >导出
-
+
-
+
- {{ scope.row.deviceName }}
+ {{ scope.row.deviceName }}
@@ -107,30 +157,63 @@
width="60"
>
-
-
-
-
-
-
-
- 在线
- 离线
- 脱线
- 未激活
+
-
+
- {{ val }}
+ 在线
+ 离线
+ 脱线
+ 未激活
-
+
+
+
+ {{ val }}
+
+
+
详情
+ >详情
+
+
+
+
+
+
+
+ Key:
+ {{ item.deviceKey }}
+
+
+ 设备组:
+
+ {{ item.groupName }}
+
+
+
+
+ 型号:
+
+ {{ item.modelName }}
+
+
+
+ 所属项目:
+
+ {{ item.inProjectName || '-' }}
+
+ {{ item.inProjectName || '-' }}
+
+
+ 类型:
+ {{ item.deviceTypeName }}
+
+
+ 创建时间:
+
+ {{ item.createTime }}
+
+
+
+
+
+
+
+
+
-
-
返回列表
+
+ 返回列表
-
+
@@ -173,8 +355,8 @@ import {
exportDevice,
listDeviceTypeList
} from "@/api/tenant/device";
-import DetailsWrap from './profile/details'
-import GatewayDetail from '@/views/profile/DeviceDetailsView/index'
+import DetailsWrap from "./profile/details";
+import GatewayDetail from "@/views/profile/DeviceDetailsView/index";
import JsBarcode from "jsbarcode";
import { getProjectGroupList, listProject } from "@/api/tenant/project";
const deviceStatusOpt = {
@@ -196,10 +378,12 @@ export default {
},
data() {
return {
+ //列表显示视图
+ viewType: "card",
deviceStatusOpt,
lineTypeOpt,
- imgModelShow:false,
- qrCodeUrl:'',
+ imgModelShow: false,
+ qrCodeUrl: "",
sourceId: "",
componectVal: "",
selectTableShow: false,
@@ -221,13 +405,13 @@ export default {
// 设备表格数据
deviceList: [],
// 弹出层标题
- inProjectList:[],
+ inProjectList: [],
// 设备组列表
- projectGroupList:[],
+ projectGroupList: [],
// 查询参数
queryParams: {
pageNum: 1,
- pageSize: 10,
+ pageSize: 12,
modelId: null,
parentId: null,
deviceName: null,
@@ -239,37 +423,51 @@ export default {
isAsc: "desc"
},
// 表单校验
- deviceTypeList: {}
+ deviceTypeList: {},
+ imgPath: "",
};
},
created() {
- if (this.$route.query['deviceId']) {
- this.handleDetails(this.$route.query)
+ this.imgPath = (process.env.NODE_ENV === "production") ? `${window.dasConfig.protocol}${window.dasConfig.ip}${window.dasConfig.port ? ':'+window.dasConfig.port : ''}${window.dasConfig.prodApi ? window.dasConfig.prodApi : ''}` : process.env.VUE_APP_BASE_API;''
+ if (this.$route.query["deviceId"]) {
+ this.handleDetails(this.$route.query);
}
this.getDeviceTypeList();
this.getInProjectList();
this.getList();
},
methods: {
- changeProject(e){
- console.log("changeProject",e)
+ changeProject(e) {
+ console.log("changeProject", e);
this.queryParams.groupId = null;
this.projectGroupList = [];
- if(e){
+ if (e) {
this.getInProjectGroupList();
}
},
+ changeViewType(type) {
+ this.viewType=type;
+ },
// 查询所属项目列表
getInProjectGroupList() {
getProjectGroupList({
- projectId: this.queryParams.inProject,
+ projectId: this.queryParams.inProject
}).then(response => {
- this.projectGroupList = response.rows||[];
+ this.projectGroupList = response.rows || [];
});
},
- lookQrCode(url){
- this.qrCodeUrl = url;
+ lookQrCode(item) {
this.imgModelShow = true;
+ this.$nextTick(() => {
+ JsBarcode(this.$refs.qrCode, item.deviceKey, {
+ format: "CODE128", //条形码的格式
+ width: 2, //线宽
+ height: 65, //条码高度
+ lineColor: "#000", //线条颜色
+ displayValue: true, //是否显示文字
+ margin: 3 //设置条形码周围的空白区域
+ });
+ });
},
sortChange(column) {
const sort = {
@@ -287,12 +485,15 @@ export default {
handleDetails(row) {
this.sourceId = row.deviceId;
// this.componectVal = "DetailsWrap";
- this.componectVal = row.deviceType === 'GATEWAY_CONTROLLER'? 'GatewayDetail' : "DetailsWrap";
+ this.componectVal =
+ row.deviceType === "GATEWAY_CONTROLLER"
+ ? "GatewayDetail"
+ : "DetailsWrap";
},
// 跳转详情页
toTableClick() {
- if (this.$route.query['deviceId']) {
- this.$router.push('/device_tenant/device_tenant')
+ if (this.$route.query["deviceId"]) {
+ this.$router.push("/device_tenant/device_tenant");
}
this.componectVal = "";
},
@@ -310,11 +511,11 @@ export default {
listProject({
pageNum: 1,
pageSize: 100,
- orderByColumn: 'createTime',
- isAsc: 'desc'
+ orderByColumn: "createTime",
+ isAsc: "desc"
}).then(response => {
this.inProjectList = response.rows;
- if(this.$route.query.projectId){
+ if (this.$route.query.projectId) {
this.queryParams.inProject = parseInt(this.$route.query.projectId);
this.getList();
}
@@ -330,29 +531,13 @@ export default {
getList() {
this.loading = true;
listDevice(this.queryParams).then(response => {
- let list = response.rows.map(item=>{
- // if(item.deviceLabel && item.deviceLabel[0] == '空间'){
- // item.deviceLabel.shift();
- // return item;
- // }
+ let list = response.rows.map(item => {
+ item.deviceImage = item.deviceImage || "";
return item;
- })
+ });
this.deviceList = list;
this.total = response.total;
this.loading = false;
- this.$nextTick(() => {
- this.deviceList.forEach((item,index) => {
- JsBarcode(this.$refs["qrCodeDiv" + item.deviceKey], item.deviceKey, {
- format: "CODE128", //条形码的格式
- width: 2, //线宽
- height: 65, //条码高度
- lineColor: "#000", //线条颜色
- displayValue: true, //是否显示文字
- margin: 3 //设置条形码周围的空白区域
- });
- this.deviceList[index].qrCodeUrl=this.$refs["qrCodeDiv" + item.deviceKey].src;
- })
- })
});
},
/** 搜索按钮操作 */
@@ -476,4 +661,119 @@ export default {
border-radius: 10px;
background: #ffffff;
}
+// 卡片视图样式
+.card-list-box {
+ .card-item-col {
+ margin-top: 15px;
+ }
+
+ .device-card {
+ height: 100%;
+ border-radius: 10px;
+ border: 1px solid #ebeef5;
+ background-color: #fff;
+ overflow: hidden;
+ color: #303133;
+ transition: 0.3s;
+ cursor: pointer;
+ &:hover {
+ box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
+ //border: 1px solid #409EFF;
+ }
+
+ .card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 20px;
+ .device-img-box{
+ width: 60px;
+ height: 60px;
+ img{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .card-header-right{
+ width: calc(100% - 110px);
+ flex: 1;
+ padding-left: 10px;
+ .card-header-right-top{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 5px;
+ .device-name {
+ font-size: 16px;
+ line-height: 16px;
+ font-weight: bold;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: calc(100% - 30px);
+ }
+ }
+ .card-header-right-content{
+ .status-tag {
+ margin-right: 5px;
+ }
+ }
+ }
+ .device-title {
+ display: flex;
+ flex-direction: column;
+ .device-id {
+ font-size: 12px;
+ color: #909399;
+ cursor: pointer;
+ }
+ }
+ }
+ .card-content {
+ padding: 10px 20px;
+ display: flex;
+ flex-wrap: wrap;
+ .info-item {
+ display: flex;
+ align-items: center;
+ margin-bottom: 5px;
+ font-size: 11px;
+ width: 50%;
+ .label {
+ color: #909399;
+ width: 35px;
+ }
+ .value {
+ width: calc(100% - 35px);
+ color: #606266;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ &:nth-child(2n){
+ width: 50%;
+ .label {
+ width: 70px;
+ }
+ }
+ }
+ }
+
+ .card-footer {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ padding: 10px 15px;
+ border-top: 1px solid #ebeef5;
+
+ .el-button {
+ padding: 5px 8px;
+
+ &:hover {
+ color: #409EFF;
+ }
+ }
+ }
+ }
+}