🌷 UI(项目、报警): 项目列表、我的项目添加卡片式页面，报警记录（平台）添加项目查询和展示，git过滤dist压缩包

.env.drgy

@@ -29,7 +29,7 @@ VUE_APP_LOGIN_PAGE = 'login-blue-white'
 # 系统配色 theme-green、theme-blue-black、theme-blue-white
 #VUE_APP_THEME_CLASS = 'theme-green'
 #VUE_APP_THEME_CLASS = 'theme-blue-black'
-VUE_APP_THEME_CLASS = 'theme-blue-white'
+VUE_APP_THEME_CLASS = 'theme-green'
 
 # 智慧用电管理系统/开发环境
 VUE_APP_BASE_API = '/dev-api'

.gitignore

@@ -21,5 +21,5 @@ selenium-debug.log
 
 package-lock.json
 yarn.lock
-/dist.zip
+/dist*.zip
 /src/assets/download.zip

src/views/iot/alarm/record/index.vue

@@ -2,39 +2,49 @@
   <!-- 告警记录功能 -->
   <div class="app-container alarm-record">
     <el-form
-      :model="queryParams"
+      v-show="showSearch"
       ref="queryForm"
       :inline="true"
-      v-show="showSearch"
+      :model="queryParams"
       label-width="68px"
     >
+      <el-form-item label="所属项目" prop="inProject">
+        <el-select v-model="queryParams.inProject" clearable placeholder="请选择所属项目" size="small">
+          <el-option
+            v-for="(item, index) in inProjectList"
+            :key="item.projectId"
+            :label="item.projectName"
+            :value="item.projectId"
+          />
+        </el-select>
+      </el-form-item>
       <el-form-item label="报警时间" prop="alarmTime">
         <el-date-picker
           v-model="time"
-          size="small"
-          @change="queryTimeChange"
-          clearable
-          type="datetimerange"
           :default-time="['00:00:00', '23:59:59']"
-          range-separator="至"
+          clearable
-          start-placeholder="开始日期"
           end-placeholder="结束日期"
+          range-separator="至"
+          size="small"
+          start-placeholder="开始日期"
+          type="datetimerange"
+          @change="queryTimeChange"
         ></el-date-picker>
       </el-form-item>
       <el-form-item label="告警类型" prop="typeName">
         <el-input
           v-model="queryParams.typeName"
-          placeholder="请输入告警类型"
           clearable
+          placeholder="请输入告警类型"
           size="small"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
       <el-form-item>
         <el-button
-          type="primary"
           icon="el-icon-search"
           size="mini"
+          type="primary"
           @click="handleQuery"
           >搜索</el-button
         >
@@ -42,10 +52,10 @@
           >重置</el-button
         >
         <el-button
-          type="warning"
-          plain
           icon="el-icon-download"
+          plain
           size="mini"
+          type="warning"
           @click="handleExport"
           >导出</el-button
         >
@@ -59,29 +69,30 @@
       @sort-change="sortChange"
     >
       <el-table-column
-        type="index"
-        label="序号"
-        align="center"
         :index="indexFormatter"
+        align="center"
+        label="序号"
+        type="index"
         width="80px"
       ></el-table-column>
       <el-table-column
-        label="设备名称"
         align="left"
-        width="200px"
+        label="设备名称"
         prop="deviceName"
+        width="200px"
       />
       <!-- <el-table-column label="设备当前值" align="left" prop="currentValue" >
         <template slot-scope="scope">
           <span style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{{scope.row.currentValue}}</span>
         </template>
       </el-table-column>-->
-      <el-table-column label="推送内容" align="left" prop="alarmContent" />
+      <el-table-column align="center" label="所属项目" prop="inProjectName" />
+      <el-table-column align="left" label="推送内容" prop="alarmContent" />
       <el-table-column
-        label="报警时间"
         align="center"
-        sortable="custom"
+        label="报警时间"
         prop="alarmTime"
+        sortable="custom"
         width="150"
       >
         <template slot-scope="scope">
@@ -91,21 +102,21 @@
         </template>
       </el-table-column>
       <el-table-column
-        label="处理状态"
-        width="100px"
-        align="center"
-        prop="processState"
         :formatter="stateFormatter"
-      />
-      <el-table-column
-        label="处理结果"
-        align="left"
-        width="150px"
-        prop="processResult"
-      />
-      <el-table-column
-        label="处理时间"
         align="center"
+        label="处理状态"
+        prop="processState"
+        width="100px"
+      />
+      <el-table-column
+        align="left"
+        label="处理结果"
+        prop="processResult"
+        width="150px"
+      />
+      <el-table-column
+        align="center"
+        label="处理时间"
         prop="processTime"
         sortable="custom"
         width="150"
@@ -117,30 +128,30 @@
         </template>
       </el-table-column>
       <el-table-column
-        label="告警类型"
         align="left"
-        width="150px"
+        label="告警类型"
         prop="typeName"
+        width="150px"
       />
       <!-- <el-table-column label="类型编码" align="left" width="150px" prop="typeCode" /> -->
       <el-table-column
-        label="操作"
-        width="150"
         align="center"
         class-name="small-padding fixed-width"
+        label="操作"
+        width="150"
       >
         <template slot-scope="scope">
           <el-button
+            v-show="scope.row.processStatus === '0'"
+            icon="el-icon-edit"
             size="mini"
             type="text"
-            icon="el-icon-edit"
-            v-show="scope.row.processStatus === '0'"
             @click="handleUpdate(scope.row)"
           >处理</el-button>
           <el-button
+            icon="el-icon-document-add"
             size="mini"
             type="text"
-            icon="el-icon-document-add"
             @click="handleWork(scope.row)"
             >创建工单</el-button
           >
@@ -150,28 +161,28 @@
 
     <pagination
       v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
+      :page.sync="queryParams.pageNum"
+      :total="total"
       @pagination="getList"
     />
-     <dialog-template :title="title" :visible="open" @close="open = false"
+     <dialog-template :title="title" :visible="open" class="eldialog-wrap"
-      class="eldialog-wrap"
       width="600px"
+      @close="open = false"
     >
       <el-form
         ref="dialogForm"
-        :model="form"
         slot="dialog-center"
+        :model="form"
         :rules="rules"
         label-width="100px"
       >
         <el-form-item label="处理结果:" prop="processResult">
           <el-input
-            type="textarea"
-            :rows="2"
             v-model="form.processResult"
+            :rows="2"
             placeholder="请输入处理结果"
+            type="textarea"
           />
         </el-form-item>
       </el-form>
@@ -189,6 +200,7 @@
 import { listRecord, getRecord, exportRecord, addAlarmRecord, updateRecord, handlerRecord } from "@/api/alarm/record";
 import DialogTemplate from "@/components/DialogTemplate";
 import Editor from "@/components/Editor";
+import { listProject } from "@/api/tenant/project";
 
 export default {
   name: "Record",
@@ -222,6 +234,7 @@ export default {
         pageSize: 10,
         typeName: null,
         typeCode: null,
+        inProject: null,
         beginTime: null,
         endTime: null,
         alarmDivide: "ALARM",
@@ -233,12 +246,25 @@ export default {
       // 表单校验
       rules: {},
       time: [],
+      inProjectList:[],
     };
   },
   created() {
     this.getList();
+    this.getInProjectList();
   },
   methods: {
+    // 查询所属项目列表
+    getInProjectList() {
+      listProject({
+        pageNum: 1,
+        pageSize: 100,
+        orderByColumn: 'createTime',
+        isAsc: 'desc'
+      }).then(response => {
+        this.inProjectList = response.rows;
+      });
+    },
     submitForm() {
       this.$refs["dialogForm"].validate((v) => {
         if (v) {

src/views/iot/project/index.vue

@@ -8,17 +8,17 @@
 
     <div v-show="componectVal === ''">
       <el-form
-        :model="queryParams"
+        v-show="showSearch"
         ref="queryForm"
         :inline="true"
-        v-show="showSearch"
+        :model="queryParams"
         label-width="68px"
       >
         <el-form-item label="项目名称" prop="projectName">
           <el-input
             v-model="queryParams.projectName"
-            placeholder="请输入项目名称"
             clearable
+            placeholder="请输入项目名称"
             size="small"
             @keyup.enter.native="handleQuery"
           />
@@ -26,8 +26,8 @@
         <el-form-item label="项目类型" prop="industry">
           <el-select
             v-model="queryParams.industry"
-            placeholder="请选择项目类型"
             clearable
+            placeholder="请选择项目类型"
             size="small"
           >
             <el-option
@@ -40,9 +40,9 @@
         </el-form-item>
         <el-form-item>
           <el-button
-            type="primary"
             icon="el-icon-search"
             size="mini"
+            type="primary"
             @click="handleQuery"
             >搜索</el-button
           >
@@ -55,106 +55,150 @@
       <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
           <el-button
-            type="primary"
-            plain
-            icon="el-icon-plus"
-            size="mini"
-            @click="handleAdd"
             v-hasPermi="['iot:project:add']"
+            icon="el-icon-plus"
+            plain
+            size="mini"
+            type="primary"
+            @click="handleAdd"
             >新增</el-button
           >
         </el-col>
         <right-toolbar
           :showSearch.sync="showSearch"
+          :view-type="viewType"
+          @changeViewType="changeViewType"
           @queryTable="getList"
         ></right-toolbar>
       </el-row>
 
       <el-table
+        v-if="viewType!='card'"
         v-loading="loading"
         :data="projectList"
         :default-sort="{ prop: 'createTime', order: 'descending' }"
         @sort-change="sortChange"
       >
         <el-table-column
-          type="index"
-          label="序号"
-          align="center"
           :index="indexFormatter"
-          width="80px"
+          align="center"
+          label="序号"
+          type="index"
+          width="60px"
         ></el-table-column>
         <el-table-column
+          align="center"
           label="项目名称"
-          width="200px"
-          align="left"
           prop="projectName"
         />
         <el-table-column
-          label="项目类型"
-          align="center"
-          width="150"
           :formatter="statusFormat"
+          align="center"
+          label="项目类型"
           prop="industry"
+          width="80"
         />
         <el-table-column
+          align="center"
           label="行政区划"
-          align="left"
-          width="250"
           prop="regionalismFullName"
+          width="160"
         />
-        <el-table-column label="项目地址" align="left" prop="projectAddress">
+        <el-table-column align="center" label="项目地址" prop="projectAddress">
           <template slot-scope="scope">
-            <span class="lay-table-textarea" :title="scope.row.projectAddress">
+            <el-tooltip :content="scope.row.projectAddress" effect="dark" placement="top">
-              {{ scope.row.projectAddress }}
+              <span class="lay-table-textarea">{{ scope.row.projectAddress }}</span>
-            </span>
+            </el-tooltip>
           </template>
         </el-table-column>
         <el-table-column
-          label="创建时间"
-          sortable="custom"
           align="center"
-          width="160"
+          label="创建时间"
           prop="createTime"
+          sortable="custom"
+          width="160"
         />
         <el-table-column
-          label="操作"
           align="center"
-          width="200"
           class-name="small-padding fixed-width"
+          label="操作"
+          width="200"
         >
           <template slot-scope="scope">
             <el-button
+              icon="el-icon-search"
               size="mini"
               type="text"
-              icon="el-icon-search"
               @click="handleDetails(scope.row)"
               >详情</el-button
             >
             <el-button
+              v-hasPermi="['iot:project:edit']"
+              icon="el-icon-edit"
               size="mini"
               type="text"
-              icon="el-icon-edit"
               @click="handleUpdate(scope.row)"
-              v-hasPermi="['iot:project:edit']"
               >修改</el-button
             >
             <el-button
+              v-hasPermi="['iot:project:remove']"
+              icon="el-icon-delete"
               size="mini"
               type="text"
-              icon="el-icon-delete"
               @click="handleDelete(scope.row)"
-              v-hasPermi="['iot:project:remove']"
               >删除</el-button
             >
           </template>
         </el-table-column>
       </el-table>
 
+      <div v-else class="card-list-box">
+        <el-row :gutter="20">
+          <el-col v-for="(item, index) in projectList" :key="index" :lg="8" :md="12" :sm="12" :xs="24" class="card-item-col">
+            <div class="card-item">
+              <div class="card-header">
+                <div class="card-header-top">
+                  <div class="device-img-box">
+                    <el-image
+                      :preview-src-list="['http://static.drgyen.com/pc/smart-power-ui/device/device-number.png']"
+                      :src="'http://static.drgyen.com/pc/smart-power-ui/device/device-number.png'"
+                      style="width: 100%; height: 100%">
+                    </el-image>
+                  </div>
+                  <div class="card-item-name">{{ item.projectName }}</div>
+                </div>
+                <div class="card-item-address">项目地址:{{ item.projectAddress }}</div>
+              </div>
+              <div class="card-content">
+                <div class="info-item">
+                  <span class="label">类型：</span>
+                  <span class="value">{{ statusFormat(item) }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="label">创建时间：</span>
+                  <el-tooltip :content="item.createTime" effect="dark" placement="top">
+                    <span class="value">{{ item.createTime }}</span>
+                  </el-tooltip>
+                </div>
+              </div>
+              <div class="card-footer">
+                <el-button icon="el-icon-search" type="text" @click="handleDetails(item)">查看详情</el-button>
+                <el-divider direction="vertical"></el-divider>
+                <el-button v-hasPermi="['iot:project:edit']" icon="el-icon-edit" type="text" @click="handleUpdate(item)">修改</el-button>
+                <el-divider direction="vertical"></el-divider>
+                <el-button v-hasPermi="['iot:project:remove']" icon="el-icon-delete" type="text" @click="handleDelete(item)">删除</el-button>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+
       <pagination
         v-show="total > 0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
         :limit.sync="queryParams.pageSize"
+        :page-sizes="[12, 24, 36, 60]"
+        :page.sync="queryParams.pageNum"
+        :total="total"
         @pagination="getList"
       />
 
@@ -162,16 +206,16 @@
       <dialog-template
         :title="title"
         :visible="open"
-        @close="open = false"
         class="eldialog-wrap"
         width="720px"
+        @close="open = false"
       >
         <el-form
           ref="form"
+          slot="dialog-center"
           :model="form"
           :rules="rules"
           label-width="100px"
-          slot="dialog-center"
         >
           <el-row :gutter="20">
             <el-col :span="12">
@@ -187,8 +231,8 @@
               <el-form-item label="项目类型:" prop="industry">
                 <el-select
                   v-model="form.industry"
-                  style="width: 100%"
                   placeholder="请选择项目类型"
+                  style="width: 100%"
                 >
                   <el-option
                     v-for="dict in projectTypeOptions"
@@ -203,13 +247,13 @@
 
           <el-form-item label="电价合同:">
             <e-dialog-table-input
-              :table="selectPriceTable"
-              :refurbishFun="listContract"
-              showFileName="contractName"
-              fileName="contractId,contractName"
               v-model="form.contractName"
-              title="合同"
+              :refurbishFun="listContract"
+              :table="selectPriceTable"
+              fileName="contractId,contractName"
               psize="small"
+              showFileName="contractName"
+              title="合同"
               @change="handleProiceDialogEvent"
             />
           </el-form-item>
@@ -217,12 +261,12 @@
           <el-form-item label="行政区划" prop="regionalismId">
             <!-- <el-input v-model="form.regionalismId" placeholder="请输入行政区划代码" /> -->
             <treeselect
-              @select="regionalismChange"
-              :disable-branch-nodes="true"
               v-model="form.regionalismId"
-              :options="regionalismOption"
+              :disable-branch-nodes="true"
               :normalizer="normalizer"
+              :options="regionalismOption"
               placeholder="请选择上级行政区划"
+              @select="regionalismChange"
             />
           </el-form-item>
 
@@ -253,16 +297,16 @@
               <el-form-item label="项目地址" prop="projectAddress">
                 <el-input
                   v-model="form.projectAddress"
-                  @blur="mapAddressFromPoint"
                   placeholder="请输入项目地址"
+                  @blur="mapAddressFromPoint"
                 >
                   <el-popover
                     slot="suffix"
+                    v-model="visible"
                     placement="left-start"
                     title="地图选择坐标"
-                    width="730"
                     trigger="manual"
-                    v-model="visible"
+                    width="730"
                   >
                     <i
                       slot="reference"
@@ -285,11 +329,11 @@
 
                       <shop-location
                         v-if="visible === true"
-                        style="height: 300px"
-                        :mapCenter="mapCenter"
                         :draggable="true"
-                        @mapEvent="mapEvent"
+                        :mapCenter="mapCenter"
                         :zoom="zoom"
+                        style="height: 300px"
+                        @mapEvent="mapEvent"
                       />
 
                       <div
@@ -345,13 +389,13 @@
 
           <el-form-item label="总路设备:">
             <e-dialog-table-input
-              :table="selectDeviceTable"
-              :refurbishFun="listDevice"
-              showFileName="deviceName"
-              fileName="deviceId,deviceName"
               v-model="form.projectDeviceName"
-              title="设备"
+              :refurbishFun="listDevice"
+              :table="selectDeviceTable"
+              fileName="deviceId,deviceName"
               psize="small"
+              showFileName="deviceName"
+              title="设备"
               @change="handleDeviceDialogEvent"
             />
           </el-form-item>
@@ -557,6 +601,8 @@ export default {
   },
   data() {
     return {
+      //列表显示视图
+      viewType: "card",
       selectPriceTable,
       selectDeviceTable,
       selectTableShow: false,
@@ -583,7 +629,7 @@ export default {
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 12,
         projectName: null,
         industry: null,
         regionalismId: null,
@@ -656,6 +702,9 @@ export default {
       this.form.projectDeviceName = e.deviceName;
       this.$forceUpdate();
     },
+    changeViewType(type) {
+      this.viewType=type;
+    },
     sortChange(column) {
       const sort = {
         isAsc: column.order === "descending" ? "desc" : "asc",
@@ -946,4 +995,109 @@ export default {
     font-size: 30px;
   }
 }
+// 卡片视图样式
+.card-list-box {
+  .card-item-col {
+    margin-top: 15px;
+  }
+
+  .card-item {
+    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 {
+      padding: 10px 20px 0px 20px;
+      .card-header-top{
+        display: flex;
+        align-items: center;
+        .device-img-box{
+          width: 60px;
+          height: 60px;
+          img{
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .card-item-name {
+          margin-left: 10px;
+          font-size: 18px;
+          line-height: 18px;
+          font-weight: bold;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: calc(100% - 110px);
+        }
+      }
+
+      .card-item-address{
+        height: 32px;
+        margin-top: 6px;
+        font-size: 12px;
+        color: #999;
+        line-height: 16px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;  /* 限制显示的行数 */
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+    .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;
+        }
+      }
+    }
+  }
+}
 </style>

src/views/tenant/project/index.vue

@@ -4,23 +4,23 @@
 
     <div v-show="componectVal === ''">
       <el-form
-        :model="queryParams"
+        v-show="showSearch"
         ref="queryForm"
         :inline="true"
-        v-show="showSearch"
+        :model="queryParams"
         label-width="68px"
       >
         <el-form-item label="项目名称" prop="projectName">
           <el-input
             v-model="queryParams.projectName"
-            placeholder="请输入项目名称"
             clearable
+            placeholder="请输入项目名称"
             size="small"
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>
         <el-form-item label="项目类型" prop="industry">
-          <el-select v-model="queryParams.industry" placeholder="请选择项目类型" clearable size="small">
+          <el-select v-model="queryParams.industry" clearable placeholder="请选择项目类型" size="small">
             <el-option
               v-for="dict in projectTypeOptions"
               :key="dict.dictValue"
@@ -30,63 +30,131 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
           <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         </el-form-item>
       </el-form>
 
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button
+            v-hasPermi="['iot:project:add']"
+            icon="el-icon-plus"
+            plain
+            size="mini"
+            type="primary"
+            @click="handleAdd"
+          >新增</el-button
+          >
+        </el-col>
+        <right-toolbar
+          :showSearch.sync="showSearch"
+          :view-type="viewType"
+          @changeViewType="changeViewType"
+          @queryTable="getList"
+        ></right-toolbar>
+      </el-row>
+
       <el-table
+        v-if="viewType!='card'"
         v-loading="loading"
         :data="projectList"
         :default-sort="{prop: 'createTime', order: 'descending'}"
         @sort-change="sortChange"
       >
         <el-table-column
-          type="index"
-          label="序号"
-          align="center"
           :index="indexFormatter"
-          width="80px"
+          align="center"
+          label="序号"
+          type="index"
+          width="60px"
         ></el-table-column>
-        <el-table-column label="项目名称" width="200px" align="left" prop="projectName" />
+        <el-table-column align="center" label="项目名称" prop="projectName"  />
         <el-table-column
-          label="项目类型"
-          align="center"
-          width="150"
           :formatter="statusFormat"
+          align="center"
+          label="项目类型"
           prop="industry"
+          width="80"
         />
-        <el-table-column label="行政区划" align="left" width="250" prop="regionalismFullName" />
+        <el-table-column align="center" label="行政区划" prop="regionalismFullName" width="160" />
-        <el-table-column label="项目地址" align="left" prop="projectAddress" />
+        <el-table-column align="center" label="项目地址" prop="projectAddress">
+          <template slot-scope="scope">
+            <el-tooltip :content="scope.row.projectAddress" effect="dark" placement="top">
+              <span class="lay-table-textarea">{{ scope.row.projectAddress }}</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
         <el-table-column
+          align="center"
           label="创建时间"
-          sortable="custom"
-          align="center"
-          width="160"
           prop="createTime"
+          sortable="custom"
+          width="160"
         />
         <el-table-column
-          label="操作"
           align="center"
-          width="200"
           class-name="small-padding fixed-width"
+          label="操作"
+          width="200"
         >
           <template slot-scope="scope">
             <el-button
+              icon="el-icon-search"
               size="mini"
               type="text"
-              icon="el-icon-search"
               @click="handleDetails(scope.row)"
             >详情</el-button>
           </template>
         </el-table-column>
       </el-table>
 
+      <div v-else class="card-list-box">
+        <el-row :gutter="20">
+          <el-col v-for="(item, index) in projectList" :key="index" :lg="8" :md="12" :sm="12" :xs="24" class="card-item-col">
+            <div class="card-item">
+              <div class="card-header">
+                <div class="card-header-top">
+                  <div class="device-img-box">
+                    <el-image
+                      :src="'http://static.drgyen.com/pc/smart-power-ui/device/device-number.png'"
+                      style="width: 100%; height: 100%">
+                    </el-image>
+                  </div>
+                  <div class="card-item-name">{{ item.projectName }}</div>
+                </div>
+                <div class="card-item-address">项目地址:{{ item.projectAddress }}</div>
+              </div>
+              <div class="card-content">
+                <div class="info-item">
+                  <span class="label">类型：</span>
+                  <span class="value">{{ statusFormat(item) }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="label">创建时间：</span>
+                  <el-tooltip :content="item.createTime" effect="dark" placement="top">
+                    <span class="value">{{ item.createTime }}</span>
+                  </el-tooltip>
+                </div>
+              </div>
+              <div class="card-footer">
+                <el-button icon="el-icon-search" type="text" @click="handleDetails(item)">查看详情</el-button>
+                <el-divider direction="vertical"></el-divider>
+                <el-button v-hasPermi="['iot:project:edit']" icon="el-icon-edit" type="text" @click="handleUpdate(item)">修改</el-button>
+                <el-divider direction="vertical"></el-divider>
+                <el-button v-hasPermi="['iot:project:remove']" icon="el-icon-delete" type="text" @click="handleDelete(item)">删除</el-button>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+
       <pagination
         v-show="total > 0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
         :limit.sync="queryParams.pageSize"
+        :page-sizes="[12, 24, 36, 60]"
+        :page.sync="queryParams.pageNum"
+        :total="total"
         @pagination="getList"
       />
 
@@ -116,6 +184,8 @@ export default {
   },
   data() {
     return {
+      //列表显示视图
+      viewType: "card",
       // 遮罩层
       loading: true,
       // 选中数组
@@ -137,7 +207,7 @@ export default {
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 12,
         projectName: null,
         industry: null,
         regionalismId: null,
@@ -171,6 +241,9 @@ export default {
       this.queryParams = Object.assign(this.queryParams, sort);
       this.handleQuery();
     },
+    changeViewType(type) {
+      this.viewType=type;
+    },
     indexFormatter(val) {
       return (
         val + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
@@ -293,4 +366,109 @@ export default {
     font-size: 30px;
   }
 }
+// 卡片视图样式
+.card-list-box {
+  .card-item-col {
+    margin-top: 15px;
+  }
+
+  .card-item {
+    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 {
+      padding: 10px 20px 0px 20px;
+      .card-header-top{
+        display: flex;
+        align-items: center;
+        .device-img-box{
+          width: 60px;
+          height: 60px;
+          img{
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .card-item-name {
+          margin-left: 10px;
+          font-size: 18px;
+          line-height: 18px;
+          font-weight: bold;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: calc(100% - 110px);
+        }
+      }
+
+      .card-item-address{
+        height: 32px;
+        margin-top: 6px;
+        font-size: 12px;
+        color: #999;
+        line-height: 16px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;  /* 限制显示的行数 */
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+    .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;
+        }
+      }
+    }
+  }
+}
 </style>