修改事件卡片布局

ruoyi-ui/src/views/JiHeExpressway/components/RoadStateCard/index.vue

@@ -1,18 +1,11 @@
 <template>
-  <BorderRadiusImage
-    class="RoadStateCard"
-    borderRadius="2px"
-    borderColor="linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0))"
-    borderWidth="2px"
-  >
-    <div class="left">
+  <BorderRadiusImage class="RoadStateCard" borderRadius="2px"
+    borderColor="linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0))" borderWidth="2px">
+    <div class="left" v-if="isShowLeft">
       <!-- <img :src="(cardData.pictures ? cardData.pictures[0] : null) || require(`./test.png`)"> -->
       <!-- <img :src="require(`./test.png`)"> -->
-      <ElImage
-        style="width: 212px; height: 159px"
-        :src="cardData.pictures ? cardData.pictures[0] : null"
-        :preview-src-list="cardData.pictures || []"
-      >
+      <ElImage style="width: 212px; height: 159px" :src="cardData.pictures ? cardData.pictures[0] : null"
+        :preview-src-list="cardData.pictures || []">
         <div slot="error">
           <i class="el-icon-picture-outline icon"></i>
         </div>
@@ -26,25 +19,14 @@
         </p>
       </div>
       <div class="controls">
-        <Button
-          :style="{ background: firstBtnColor, width: '50%' }"
-          @click.native="$emit('firstBtnClick', cardData.id)"
-          >{{ getFirstBtnText(cardData.state) }}</Button
-        >
-        <Button
-          v-if="cardData.state == 4"
-          :style="{ background: lastBtnColor, width: '50%' }"
-          @click.native="$emit('lastBtnClick', cardData.id)"
-          >{{ getLastBtnText(cardData.state) }}</Button
-        >
+        <Button :style="{ background: firstBtnColor, width: isShowLeft ? '50%' : '25%' }"
+          @click.native="$emit('firstBtnClick', cardData.id)">{{ getFirstBtnText(cardData.state) }}</Button>
+        <Button v-if="cardData.state == 4" :style="{ background: lastBtnColor, width: isShowLeft ? '50%' : '25%' }"
+          @click.native="$emit('lastBtnClick', cardData.id)">{{ getLastBtnText(cardData.state) }}</Button>
       </div>
     </div>
 
-    <img
-      v-if="cardData.state"
-      class="status"
-      :src="require(`./images/${statusMap[cardData.state]}.svg`)"
-    />
+    <img v-if="cardData.state" class="status" :src="require(`./images/${statusMap[cardData.state]}.svg`)" />
   </BorderRadiusImage>
 </template>
 
@@ -106,6 +88,10 @@ export default {
         },
       ],
     },
+    isShowLeft: {
+      type: Boolean,
+      default: true
+    }
   },
   data() {
     return {
@@ -180,7 +166,7 @@ export default {
       display: flex;
       flex-direction: column;
 
-      > p {
+      >p {
         font-size: 12px;
         color: #f4f4f4;
         line-height: 24px;
@@ -212,7 +198,7 @@ export default {
       display: flex;
       gap: 9px;
 
-      > div {
+      >div {
         // flex: 1;
       }
     }

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/dispatch/index.vue

@@ -9,51 +9,27 @@
         刷新
       </ButtonGradient>
 
-      <InputSearch
-        ref="searchComp"
-        style="width: 402px"
-        :formList="searchFormList"
-        :formConfigOptions="{ dFormData: { eventState: '0' } }"
-        @handleSearch="handleSearch"
-      />
+      <InputSearch ref="searchComp" style="width: 402px" :formList="searchFormList"
+        :formConfigOptions="{ dFormData: { eventState: '0' } }" @handleSearch="handleSearch" />
     </div>
 
     <!-- 内容 -->
     <div class="body">
-      <RoadStateCard
-        v-for="(item, index) in data"
-        :key="index"
-        :cardData="item"
-        @firstBtnClick="firstBtnClick"
-        @lastBtnClick="lastBtnClick"
-      />
+      <RoadStateCard v-for="(item, index) in data" :key="index" :cardData="item" :isShowLeft="false" @firstBtnClick="firstBtnClick"
+        @lastBtnClick="lastBtnClick" />
     </div>
 
     <!-- 分页 -->
     <div class="footer">
-      <Pagination
-        @current-change="initData"
-        @size-change="onSizeChange"
-        width="'100%'"
-        :page-sizes="[12, 16, 20, 30, 50]"
-        :page-size="searchData.pageSize"
-        :current-page.sync="searchData.pageNum"
-        layout="total, sizes, prev, pager, next"
-        :total="total"
-      >
+      <Pagination @current-change="initData" @size-change="onSizeChange" width="'100%'"
+        :page-sizes="[12, 16, 20, 30, 50]" :page-size="searchData.pageSize" :current-page.sync="searchData.pageNum"
+        layout="total, sizes, prev, pager, next" :total="total">
       </Pagination>
     </div>
 
-    <EventDetailDialog
-      :visible="eventDetailDialogVisible"
-      :formData="detailDialogFormData"
-      @update:value="handleClose"
-    />
-    <EventDispatchDialog
-      :visible="eventDispatchDialogVisible"
-      @update:value="handleClose"
-      :eventId="eventId"
-    />
+    <EventDetailDialog :visible="eventDetailDialogVisible" :formData="detailDialogFormData"
+      @update:value="handleClose" />
+    <EventDispatchDialog :visible="eventDispatchDialogVisible" @update:value="handleClose" :eventId="eventId" />
   </div>
 </template>
 
@@ -104,7 +80,7 @@ export default {
     this.initData();
   },
   methods: {
-    onRefreshForm(){
+    onRefreshForm() {
       this.searchData.pageNum = 1;
       this.$refs.searchComp.handleResetForm();
     },
@@ -205,8 +181,8 @@ export default {
     display: flex;
     // justify-content: flex-end;
     justify-content: space-between;
-    .refresh-btn {
-    }
+
+    .refresh-btn {}
   }
 
   .body {

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue

@@ -153,6 +153,7 @@ export default {
         cardData: { ...item, state },
         lastBtnColor: textColor,
         lastBtnText: text,
+        isShowLeft: this.activeName == '-1'
       };
     },
     queryData(flag) {