监控调阅任务

src/views/core/weather/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <el-row :gutter="20">
       <!--机构数据-->
-      <el-col :span="20" :xs="24">
+      <el-col :span="24" :xs="24">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
 
 
@@ -29,7 +29,7 @@
       </el-form-item>
 
       <el-form-item label="预警区域" prop="roleId">
-        <el-select v-model="queryParams.code" placeholder="请选择">
+        <el-select v-model="queryParams.code" placeholder="请选择"   clearable>
           <el-option v-for="item in areaList" :key="item.key" :label="item.value" :value="item.key"></el-option>
         </el-select>
       </el-form-item>
@@ -45,18 +45,16 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="weatherList">
-
-      <el-table-column label="预警标题" align="center" prop="alarmTitle" />
-      <el-table-column label="预警城市" align="center" prop="city" />
-      <el-table-column label="预警区域" align="center" prop="area"/>
-      <el-table-column label="预警等级" align="center"  prop="alarmLevel"></el-table-column>
-      <el-table-column label="预警类型" align="center"  prop="alarmType"></el-table-column>
-      <el-table-column label="预警内容" align="center"  prop="alarmContent"></el-table-column>
-      <el-table-column label="预警发布时间" align="center"  prop="alarmTime">
-        <template slot-scope="r">{{ $moment(r.row.alarmTime).format(
-          "YYYY-MM-DD HH:mm:ss"
-        ) }}</template>
+    <el-table v-loading="loading" :data="weatherList" >
+      <el-table-column label="预警标题" align="center"  prop="alarmTitle" />
+      <el-table-column label="预警城市" align="center" width="140" prop="city" />
+      <el-table-column label="预警区域" align="center" width="100" prop="area"/>
+      <el-table-column label="预警等级" align="center" width="100" prop="alarmLevel"></el-table-column>
+      <el-table-column label="预警类型" align="center" width="100" prop="alarmType"></el-table-column>
+      <el-table-column label="预警内容" align="center"   prop="alarmContent">
+        <template slot-scope="r"><p :title="r.row.alarmContent" class="line-style">{{r.row.alarmContent}}</p></template>
+      </el-table-column>
+      <el-table-column label="预警发布时间" align="center"   prop="alarmTime">
       </el-table-column>
     </el-table>
 
@@ -124,6 +122,7 @@ export default {
       this.loading = true;
       findWeatherList(this.queryParams).then(response => {
         this.weatherList = response.rows;
+        console.log(this.weatherList);
         this.total = response.total;
         this.loading = false;
       });
@@ -143,9 +142,19 @@ export default {
     resetQuery() {
       this.resetForm("queryForm");
       this.queryParams.alarmDates = [];
+      this.queryParams.code = null;
       this.handleQuery();
     },
 
   }
 };
 </script>
+<style lang="scss" scoped>
+.line-style{
+  display : -webkit-box;
+  -webkit-line-clamp: 3 ; //限定显示行数
+  -webkit-box-orient: vertical;
+  overflow : hidden ;
+  text-overflow: ellipsis;
+}
+</style>