更新202110271649

src/api/planOutage/index.js

@@ -0,0 +1,29 @@
+import request from '@/utils/request'
+
+//停电计划-查询
+export function plannedOutageList(params) {
+    return request({
+        url: '/wcBlackoutPlan/plannedOutageList',
+        method: 'POST',
+        data: params,
+    })
+}
+
+//停电计划-注销
+export function plannedOutageDel(params) {
+    return request({
+        url: '/wcBlackoutPlan/plannedOutageDel',
+        method: 'GET',
+        params,
+    })
+}
+
+//停电计划-新增
+export function plannedOutageAdd(params) {
+    return request({
+        url: '/wcBlackoutPlan/plannedOutageAdd',
+        method: 'POST',
+        data: params,
+    })
+}
+

src/store/index.js

@@ -23,7 +23,7 @@ export default createStore({
     siteList: [],//公共api站点下拉列表存储->siteId
     deviceList: [],//公共站点下拉列表
 
-
+    timeProcessing: '',
 
     Time_Data: [], //公共api请求参数->Time_Data
     timearr: [], //公共处理开始时间和结束时间中的时间段天数 值存储
@@ -247,5 +247,19 @@ export default createStore({
       state.th_defaultTime = [new Date(Y, M, D, 0, 0, 0), new Date()] //设备监控--->数据报表时间选择器v-model  //home运维管理
       state.fh_defaultTime = [new Date(Y, M, 1, 0, 0, 0), new Date()] //设备监控--->运行状态统计时间选择器v-model  //概览 -> 告警统计折线图
     },
+    /**
+     * @处理公共时间搓 返回数组 -> 年月日时分秒 时间戳
+     */
+    getTimestampAll(state, timestamp) {
+      function add0(m) { return m < 10 ? '0' + m : m }
+      const time = new Date(timestamp);
+      const Y = time.getFullYear(); //年
+      const M = time.getMonth(); //月
+      const D = time.getDate(); //日
+      const HH = time.getHours(); //时，
+      const MM = time.getMinutes(); //分
+      const SS = time.getSeconds(); //秒
+      state.timeProcessing = Y + '-' + add0(M+1) + '-' + add0(D) + ' ' + add0(HH) + ':' + add0(MM) + ':' + add0(SS);
+    },
   }
 })

src/views/dataManage/sameAnalysis/index.vue

@@ -7,6 +7,7 @@
           @change="siteChange"
           placeholder="选择站点"
         >
+        {{store.state.siteList}}
           <el-option
             v-for="item in store.state.siteList"
             :key="item.id"

src/views/deviceManage/powerEquip/deviceDetails.vue

@@ -87,7 +87,7 @@
           icon="el-icon-info"
           icon-color="red"
           title="确定删除?"
-          @confirm="confirmEvent(scope.row)"
+          @confirm="handleDelete(scope.row)"
           @cancel="cancelEvent"
         >
           <template #reference>
@@ -170,14 +170,6 @@ export default defineComponent({
       listDialogBool.value = value
     }
 
-    //是否删除  ---- 是
-    const confirmEvent = (row) => {
-      handleDelete(row)
-    }
-    //是否删除  ---- 否
-    const cancelEvent = () => {
-      console.log('cancel!')
-    }
     //查询
     function listSelect() {
       api
@@ -195,7 +187,8 @@ export default defineComponent({
           }
         })
     }
-    //删除
+    
+    //删除 是否删除  ---- 是
     const handleDelete = (row) => {
       api.deviceNewsDel({ id: row.id }).then((requset) => {
         if (requset.status === 'SUCCESS') {
@@ -209,6 +202,10 @@ export default defineComponent({
         }
       })
     }
+    //是否删除  ---- 否
+    const cancelEvent = () => {
+      console.log('cancel!')
+    }
     //编辑
     const editRow = (row) => {
       emit('updateRow', row)
@@ -244,7 +241,6 @@ export default defineComponent({
       editRow, //编辑按钮事件
       handleDelete, //删除按钮事件
       deviceNumData, //列表查询值存储
-      confirmEvent, //确定是否删除事件
       cancelEvent,
 
       DialogArray,

src/views/planOutage/dialogComponent.vue

@@ -1,105 +1,84 @@
 <template>
-  <transition name="dialog-fade">
-    <el-dialog
-      v-if="showDialog"
-      :title="dialogTitle"
-      class="dialog-component"
-      v-model="showDialog"
-      width="640px"
-      @close="closeDialog(0)"
+  <el-dialog
+    :title="dialogTitle"
+    v-model="showDialog"
+    width="640px"
+    @open="open()"
+    @close="closeDialog(0)"
+  >
+    <el-form
+      ref="formInfo"
+      :model="form"
+      class="demo-form-inline"
+      label-width="150px"
+      :rules="rules"
     >
-      <el-form
-        ref="formInfo"
-        :model="formInfo"
-        class="demo-form-inline"
-        label-width="100px"
-        :rules="rules"
-      >
-        <el-form-item label="站点名称：" prop="watchName" label-width="150px">
-          <el-input v-model="formInfo.watchName"></el-input>
-        </el-form-item>
-
-        <el-form-item
-          label="开始停电时间："
-          prop="watchCode"
-          label-width="150px"
-        >
-          <!-- <el-date-picker
-            v-model="startTime"
-            type="datetime"
-            placeholder="选择日期时间"
-            :picker-options="pickerBeginDate"
-            clearable
-            style="width:240px"
-          ></el-date-picker> -->
-
-          <el-date-picker
-            v-model="startTime"
-            type="datetime"
-            placeholder="Select date and time"
-          ></el-date-picker>
-        </el-form-item>
-
-        <el-form-item
-          label="结束停电时间:"
-          prop="routeAddress"
-          label-width="150px"
+      <el-form-item label="站点:" prop="siteId">
+        <el-select
+          v-model="form.siteId"
+          placeholder="请选择"
+          style="width: 240px"
+          :disabled="dialogTitle === '编辑'"
         >
-          <!-- <el-date-picker
-            v-model="endTime"
-          
-            type="datetime"
-            placeholder="选择日期时间"
-            :picker-options="pickerEndDate"
-            clearable
-            style="width:240px"
-          ></el-date-picker>
- -->
+          <el-option
+            v-for="item in store.state.siteList"
+            :key="item.id"
+            :label="item.siteName"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
 
-          <el-date-picker
-            v-model="endTime"
-            :start-placeholder="pickerEndDate"
-            type="datetime"
-            placeholder="Select date and time"
-          ></el-date-picker>
-        </el-form-item>
+      <el-form-item label="开始/结束停电时间:" prop="time">
+        <el-date-picker
+          style="width: 330px"
+          v-model="form.time"
+          type="datetimerange"
+          :disabledDate="pickerEndDate"
+          start-placeholder="Start Date"
+          end-placeholder="End Date"
+          :disabled="form.type === 2 || form.type === 3"
+        ></el-date-picker>
+      </el-form-item>
 
-        <el-form-item
-          label="提交时间："
-          prop="ratedVoltage"
-          label-width="150px"
+      <el-form-item label="联系方式:" prop="phone">
+        <el-input v-model="form.phone"></el-input>
+      </el-form-item>
+      <el-form-item label="联系人:" prop="contacts">
+        <el-input v-model="form.contacts"></el-input>
+      </el-form-item>
+      <el-form-item label="状态:" prop="planType">
+        <el-select
+          v-model="form.planType"
+          placeholder="请选择"
+          style="width: 240px"
         >
-          <el-input v-model="formInfo.ratedVoltage"></el-input>
-        </el-form-item>
-        <el-form-item
-          label="提交人："
-          prop="stationAddress"
-          label-width="150px"
-        >
-          <el-input v-model="formInfo.ratedCurrent"></el-input>
-        </el-form-item>
-        <el-form-item label="状态：" prop="fzlMx" label-width="150px">
-          <el-input v-model="formInfo.fzlMx"></el-input>
-        </el-form-item>
+          <el-option label="计划检修停电" :value="1"></el-option>
+          <el-option label="计划施工停电" :value="2"></el-option>
+          <el-option label="客户申请停电" :value="3"></el-option>
+        </el-select>
+      </el-form-item>
 
-        <br />
-        <br />
-        <br />
-        <div style="text-align: right">
-          <el-button @click="closeDialog(0)">取消</el-button>
-          <el-button type="primary" @click="submitForm('formInfo')">
-            保存
-          </el-button>
-        </div>
-      </el-form>
-    </el-dialog>
-  </transition>
+      <br />
+      <br />
+      <br />
+      <div style="text-align: right">
+        <el-button @click="closeDialog(0)">取消</el-button>
+        <el-button type="primary" @click="submitForm()">保存</el-button>
+      </div>
+    </el-form>
+  </el-dialog>
 </template>
-
 <script>
-export default {
+import { useStore } from 'vuex'
+import { defineComponent, ref, watchEffect } from 'vue'
+import * as api from '@/api/planOutage/index'
+import { ElMessage } from 'element-plus'
+export default defineComponent({
   name: 'DialogComponent',
+  emits: ['closeDialog'],
   props: {
+    show_Dialog: Boolean,
     dialogTitle: {
       type: String,
       default: '新增',
@@ -111,34 +90,103 @@ export default {
       },
     },
   },
-  data() {
-    //限制不能选之后的日期
-    this.pickerBeginDate = {
-      disabledDate: (time) => {
-        alert(2)
-        let endTime = this.endTime
-        if (endTime) {
-          return time.getTime() > new Date(endTime).getTime()
-        }
-      },
+  setup(props, { emit }) {
+    const store = useStore()
+    const beginTime = ref('')
+    const showDialog = ref(false)
+    const form = ref([])
+    const formInfo = ref(null)
+
+    //禁止选择以前的时间
+    const pickerEndDate = (time) => {
+      const timeRange = 1 * 24 * 60 * 60 * 1000
+
+      return time.getTime() <= Date.now() - timeRange * 1
     }
-    // /限制不能选之前的时间
-    this.pickerEndDate = {
-      disabledDate: (time) => {
-        let beginTime = this.beginTime
-        if (beginTime) {
-          return time.getTime() < new Date(beginTime).getTime()
+
+    const roleValid = (rule, value, callback) => {
+      rule
+      if (value.length === 0) {
+        callback(new Error('角色不能为空'))
+      } else {
+        callback()
+      }
+    }
+
+    // 保存操作
+    const submitForm = () => {
+      formInfo.value.validate((valid) => {
+        if (valid) {
+          store.commit('TimeAll_function', form.value.time)
+          const time = store.state.Time_Data
+          form.value.startTime = time[0]
+          form.value.endTime = time[1]
+          api.plannedOutageAdd(form.value).then((requset) => {
+            if (requset.status === 'SUCCESS') {
+              if (props.dialogTitle === '新增') {
+                ElMessage.success({
+                  message: '新增成功',
+                  type: 'success',
+                })
+              } else {
+                ElMessage.success({
+                  message: '修改成功',
+                  type: 'success',
+                })
+              }
+              closeDialog()
+            } else {
+              ElMessage.error(requset.msg)
+            }
+          })
+        } else {
+          console.log('error submit!!')
+          return false
         }
-      },
+      })
+    }
+
+    const open = () => {
+      form.value = props.itemInfo
     }
 
+    // 关闭弹框
+    const closeDialog = (flag) => {
+      showDialog.value = false
+      emit('closeDialog', flag)
+    }
+
+    watchEffect((fn, options) => {
+      fn, options
+      showDialog.value = props.show_Dialog
+    })
+
+    /**
+     * 手机号校验
+     */
+    var validatorPhone = function (rule, value, callback) {
+      if (value === '') {
+        callback(new Error('手机号不能为空'))
+      } else if (!/^1\d{10}$/.test(value)) {
+        callback(new Error('手机号格式错误'))
+      } else {
+        callback()
+      }
+    }
     return {
-      startTime: '',
-      endTime: '',
+      pickerEndDate,
+      roleValid,
+      submitForm,
+      closeDialog,
+      open,
+
+      store,
+      beginTime,
+      showDialog,
 
       checked: true,
-      showDialog: false,
-      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
+      form,
+      formInfo,
       options: [
         {
           value: '选项1',
@@ -163,85 +211,40 @@ export default {
       ],
 
       rules: {
-        watchName: [
+        siteId: [
           // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
-          { required: true, message: '请输入站点名称', trigger: 'blur' },
+          { required: true, message: '请选择站点', trigger: 'blur' },
+        ],
+        time: [
+          { required: true, message: '请选择开始停电时间', trigger: 'blur' },
+        ],
+        // startTime: [
+        //   { required: true, message: '请选择开始停电时间', trigger: 'blur' },
+        // ],
+        // endTime: [
+        //   { required: true, message: '请选择结束停电时间', trigger: 'change' },
+        // ],
+        phone: [
           {
-            min: 3,
-            max: 6,
-            message: '用户名长度在 3 到 6 个字符',
-            trigger: 'blur',
+            required: true,
+            message: '请输入电话号码',
+            trigger: 'change',
           },
-        ],
-        beginTime: [
-          { required: true, message: '请输入开始停电时间', trigger: 'blur' },
           {
-            min: 3,
-            max: 6,
-            message: '用户名长度在 3 到 6 个字符',
-            trigger: 'blur',
+            validator: validatorPhone,
+            message: '输入的电话号码不正确',
           },
         ],
-        endTime: [
-          { required: true, message: '请选则结束停电时间', trigger: 'change' },
+        contacts: [
+          { required: true, message: '请输入联系人', trigger: 'blur' },
         ],
-        ratedVoltage: [
-          { required: true, message: '请选择站点列表', trigger: 'change' },
-        ],
-        ratedCurrent: [
-          { required: true, message: '请输入已选站点个数', trigger: 'blur' },
-          { trigger: 'blur' },
-        ],
-        fzlMx: [
-          { required: true, message: '请输入挂载设备个数', trigger: 'blur' },
-          { trigger: 'blur' },
+        planType: [
+          { required: true, message: '请选择计划类型', trigger: 'blur' },
         ],
       },
     }
   },
-  methods: {
-    disabledDate(time) {
-      time
-      return time.getTime() < Date.now() //禁止选择以前的时间
-      // return time.getTime() > Date.now();//禁止选择以后的时间
-    },
-    roleValid(rule, value, callback) {
-      if (value.length === 0) {
-        callback(new Error('角色不能为空'))
-      } else {
-        callback()
-      }
-    },
-
-    // onSelectedDrug(event) {
-    //   this.routeAddress = event;
-    //   console.log(this.routeAddress);
-    // },
-    // 保存操作
-    submitForm(formName) {
-      const params = Object.assign(this.formInfo, {})
-      params
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          // 走保存请求
-          this.$message({
-            message: '操作成功！',
-            type: 'success',
-          })
-          this.closeDialog(1)
-        } else {
-          return false
-        }
-      })
-    },
-    // 关闭弹框
-    closeDialog(flag) {
-      this.$refs['formInfo'].resetFields()
-      this.showDialog = false
-      this.$emit('closeDialog', flag)
-    },
-  },
-}
+})
 </script>
  
 <style scoped lang="scss">
@@ -257,6 +260,11 @@ export default {
   width: 150px;
 }
 .el-form-item__content {
-  margin-left: 150px;
+  margin-left: 100px;
+}
+</style>
+<style>
+.demo-form-inline .el-form-item:not(.user-layout .el-form-item) {
+  margin: 0 auto 20px 55px;
 }
 </style>

src/views/planOutage/index.vue

@@ -14,7 +14,7 @@
           <div class="filter-item planOutage">
             选择时间范围：
             <el-date-picker
-              v-model="value1"
+              v-model="dateTime"
               type="datetimerange"
               range-separator="至"
               start-placeholder="开始日期"
@@ -28,12 +28,19 @@
               v-model="region"
               placeholder="请选择"
               style="width: 200px"
+              clearable
             >
-              <el-option label="已执行" value="1"></el-option>
-              <el-option label="未执行" value="2"></el-option>
+              <el-option label="未执行" :value="1"></el-option>
+              <el-option label="执行中" :value="2"></el-option>
+              <el-option label="已执行" :value="3"></el-option>
             </el-select>
           </div>
-          <el-button type="primary" icon="el-icon-search" class="search-button">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            @click="Select()"
+            class="search-button"
+          >
             搜索
           </el-button>
         </div>
@@ -53,7 +60,7 @@
       :header-cell-style="headClass"
       :cell-style="cellStyle"
     >
-      <el-table-column prop="xh" label="序号" width=""></el-table-column>
+      <el-table-column type="index" label="序号" width=""></el-table-column>
       <el-table-column
         prop="siteName"
         label="站点名称"
@@ -70,28 +77,30 @@
         width=""
       ></el-table-column>
       <el-table-column
-        prop="subTime"
+        prop="createTime"
         label="提交时间"
         width=""
       ></el-table-column>
-      <el-table-column
-        prop="submitter"
-        label="提交人"
-        width=""
-      ></el-table-column>
-      <el-table-column prop="status" label="状态" width="">
+      <el-table-column prop="creator" label="提交人" width=""></el-table-column>
+      <el-table-column prop="type" label="状态" width="">
         <template #default="scope">
           <span
             :style="{
               color:
-                scope.row.status == '已执行'
+                scope.row.type == 3
                   ? '#8DCF6E'
-                  : scope.row.status == '未执行'
+                  : scope.row.type === 1
                   ? '#FF747B'
                   : '#5c88fa',
             }"
           >
-            {{ scope.row.status }}
+            {{
+              scope.row.type === 1
+                ? '未执行'
+                : scope.row.type === 2
+                ? '执行中'
+                : '已执行'
+            }}
           </span>
         </template>
       </el-table-column>
@@ -104,14 +113,21 @@
           >
             编辑
           </el-button>
-          <el-button
-            @click="handleDelete(scope.$index, scope.row)"
-            type="text"
-            size="small"
-            class="delete-text"
+          <el-popconfirm
+            confirm-button-text="是"
+            cancel-button-text="否"
+            icon="el-icon-info"
+            icon-color="red"
+            title="确定删除?"
+            @confirm="handleDelete(scope.row)"
+            @cancel="cancelEvent"
           >
-            删除
-          </el-button>
+            <template #reference>
+              <el-button type="text" size="small" class="delete-text">
+                删除
+              </el-button>
+            </template>
+          </el-popconfirm>
         </template>
       </el-table-column>
     </el-table>
@@ -122,11 +138,11 @@
       <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
-        :current-page="currentPage4"
-        :page-sizes="[100, 200, 300, 400]"
-        :page-size="100"
+        :current-page="currentPage"
+        :page-sizes="[15, 20, 25, 30]"
+        :page-size="pageSize"
         layout="total, sizes, prev, pager, next, jumper"
-        :total="400"
+        :total="total"
       ></el-pagination>
     </div>
 
@@ -134,160 +150,202 @@
 
     <!--弹框组件开始-----------------------start-->
     <dialog-component
-      v-if="showDialog"
-      ref="dialogComponent"
       :dialog-title="dialogTitle"
       :item-info="tableItem"
       @closeDialog="closeDialog"
+      :show_Dialog="showDialog"
     ></dialog-component>
     <!--弹框组件开始-----------------------end-->
   </div>
 </template>
 
 <script>
+import { useStore } from 'vuex'
+import { defineComponent, ref } from 'vue'
 import DialogComponent from './dialogComponent'
+import * as api from '@/api/planOutage/index'
+import { ElMessage } from 'element-plus'
 
-export default {
+export default defineComponent({
   name: 'VariableList',
 
   components: { DialogComponent },
+  setup() {
+    const store = useStore()
 
-  data() {
-    return {
-      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
-      select: 1,
-      currentPage4: 4,
+    const tableItem = ref()
+    const dialogTitle = ref('')
+    const showDialog = ref(false)
+
+    const tableData = ref()
+    const currentPage = ref(1)
+    const pageSize = ref(15)
+    const total = ref(0)
+
+    const dateTime = ref([
+      new Date(2021, 8, 10, 10, 10),
+      new Date(2021, 10, 11, 10, 10),
+    ])
+    const select = ref(1)
 
-      showDialog: false,
-      tabPosition: 'one',
+    const tabPosition = ref('one')
+    const input = ref('')
+    const region = ref()
 
-      input: '',
-      region: '',
-      tableData: [
-        {
-          xh: '1',
-          siteName: '测试站点1',
-          startTime: '2020-02-02 12:00:00',
-          endTime: '2020-02-02 12:00:00',
-          subTime: '2020-02-02 12:00:00',
-          submitter: '张三',
-          status: '未执行',
-        },
-        {
-          xh: '1',
-          siteName: '测试站点1',
-          startTime: '2020-02-02 12:00:00',
-          endTime: '2020-02-02 12:00:00',
-          subTime: '2020-02-02 12:00:00',
-          submitter: '张三',
-          status: '未执行',
-        },
-        {
-          xh: '1',
-          siteName: '测试站点1',
-          startTime: '2020-02-02 12:00:00',
-          endTime: '2020-02-02 12:00:00',
-          subTime: '2020-02-02 12:00:00',
-          submitter: '张三',
-          status: '未执行',
-        },
-        {
-          xh: '1',
-          siteName: '测试站点1',
-          startTime: '2020-02-02 12:00:00',
-          endTime: '2020-02-02 12:00:00',
-          subTime: '2020-02-02 12:00:00',
-          submitter: '张三',
-          status: '执行中',
-        },
-        {
-          xh: '1',
-          siteName: '测试站点1',
-          startTime: '2020-02-02 12:00:00',
-          endTime: '2020-02-02 12:00:00',
-          subTime: '2020-02-02 12:00:00',
-          submitter: '张三',
-          status: '已执行',
-        },
-      ],
+    // 添加操作
+    const addItem = () => {
+      tableItem.value = {
+        siteId: '',
+        time: ['', ''],
+        startTime: '',
+        endTime: '',
+        phone: '',
+        contacts: '',
+        planType: '',
+        type: '',
+      }
+      dialogTitle.value = '新增'
+      showDialog.value = true
     }
-  },
-  methods: {
-    //处理状态状态值变色
-    cellStyle(row, column, rowIndex, columnIndex) {
-      console.log('rowIndex', row, column, rowIndex, columnIndex)
-      console.log(row.row.status)
+    // 编辑操作
+    const editRow = (row) => {
       console.log(row)
-      if (row.column.status == '未执行') {
-        return 'color:#FF747B'
+      tableItem.value = {
+        id: row.id,
+        siteId: row.siteId,
+        time: [row.startTime, row.endTime],
+        startTime: row.startTime,
+        endTime: row.endTime,
+        phone: row.phone,
+        contacts: row.contacts,
+        planType: row.planType,
+        type: row.type,
       }
-      if (row.column.label == '已执行') {
-        return 'color:#8DCF6E'
+      dialogTitle.value = '编辑'
+      showDialog.value = true
+    }
+
+    // 关闭操作
+    const closeDialog = (flag) => {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData()
       }
-    },
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`)
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`)
-    },
+      showDialog.value = false
+      Select()
+    }
 
+    //删除 是否删除  ---- 是
+    const handleDelete = (row) => {
+      api.plannedOutageDel({ id: row.id }).then((requset) => {
+        if (requset.status === 'SUCCESS') {
+          ElMessage.success({
+            message: '删除成功',
+            type: 'success',
+          })
+          Select()
+        } else {
+          ElMessage.error(requset.msg)
+        }
+      })
+    }
+    //是否删除  ---- 否
+    const cancelEvent = () => {
+      console.log('cancel!')
+    }
+    //查询设备列表
+    function Select() {
+      store.commit('TimeAll_function', dateTime.value)
+      const time = store.state.Time_Data
+      api
+        .plannedOutageList({
+          size: pageSize.value,
+          current: currentPage.value,
+          type: region.value,
+          startTime: time[0],
+          endTime: time[1],
+        })
+        .then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            tableData.value = requset.data.records.map((val) => {
+              store.commit('getTimestampAll', val.startTime)
+              val.startTime = store.state.timeProcessing
+              store.commit('getTimestampAll', val.endTime)
+              val.endTime = store.state.timeProcessing
+              store.commit('getTimestampAll', val.createTime)
+              val.createTime = store.state.timeProcessing
+            })
+            tableData.value = requset.data.records
+            total.value = requset.data.total
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
+    }
+
+    const handleSizeChange = (val) => {
+      pageSize.value = val
+      Select()
+    }
+    const handleCurrentChange = (val) => {
+      currentPage.value = val
+      Select()
+    }
     // 表头样式设置
-    goVariableList() {
+    const goVariableList = () => {
       // 跳转至订单列表页面传参
       this.$router.push({
         path: '../siteManage/variableList/index.vue',
       })
       // this.$router.push({ name:'variableList'})
-    },
-    headClass() {
+    }
+    const headClass = () => {
       return 'background:#FAFAFA;'
-    },
-
-    // 添加操作
-    addItem() {
-      this.tableItem = {
-        id: '',
-        stationName: '',
-        xh: '',
-        siteName: '',
-        siteList: [],
-        done: '',
-        guaZai: '',
-        checked: true,
+    }
+    //处理状态状态值变色
+    const cellStyle = (row, column, rowIndex, columnIndex) => {
+      column, rowIndex, columnIndex
+      // console.log('rowIndex', row, column, rowIndex, columnIndex)
+      // console.log(row.row.status)
+      // console.log(row)
+      if (row.column.status == '未执行') {
+        return 'color:#FF747B'
       }
-      this.dialogTitle = '新增'
-      this.showDialog = true
-      this.$nextTick(() => {
-        this.$refs['dialogComponent'].showDialog = true
-      })
-    },
-    // 编辑操作
-    editRow(row) {
-      console.log(row)
-      this.tableItem = row
-      this.dialogTitle = '编辑'
-      this.showDialog = true
-      this.$nextTick(() => {
-        this.$refs['dialogComponent'].showDialog = true
-      })
-    },
-    // 关闭操作
-    closeDialog(flag) {
-      if (flag) {
-        // 重新刷新表格内容
-        this.fetchData()
+      if (row.column.label == '已执行') {
+        return 'color:#8DCF6E'
       }
-      this.showDialog = false
-    },
+    }
+    return {
+      cellStyle,
+      headClass,
+      goVariableList,
+      handleSizeChange,
+      handleCurrentChange,
+      handleDelete,
+      cancelEvent,
+      closeDialog,
+      editRow,
+      addItem,
+      Select,
 
-    //删除操作
-    handleDelete(index, row) {
-      console.log(index, row)
-      alert(index)
-    },
+      store,
+
+      total,
+      pageSize,
+      currentPage,
+      tableData,
+
+      showDialog,
+      tabPosition,
+      select,
+      dateTime,
+      tableItem,
+      dialogTitle,
+      input,
+      region,
+    }
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>