scmy/psdc-ui/src/views/system/cl/index.vue

<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="88px">
          <el-form-item label="策略名称:" prop="name">
            <el-select v-model="data.sceneCode" placeholder="请选择" style="width: 240px" @change="changeSl">
              <el-option label='所有' :value='0'  />
              <el-option :label='item.label' :value='item.sceneCode'  :key="item.sceneCode" v-for="item in queryParams"/>
            </el-select>
          </el-form-item>
          <el-form-item>

            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
          </el-col>
        </el-row>
        <div class="dev_control_table">
          <el-table :data="data.timingList" height="500px">
            <el-table-column label="序号" align="center" prop="sceneId" width="50"/>
            <el-table-column label="策略名称" align="center" prop="sceneName" width="200"/>
            <el-table-column label="设备名称" align="center" prop="deviceName"/>
            <el-table-column label="监测位置" align="center" prop="sceneContext"/>
            <el-table-column label="温度" align="center" prop="sceneValue"/>
            <el-table-column label="操作" align="center" prop="handle">
              <template v-slot="scope">
                <el-button type="primary" size="small" icon="Edit" v-hasPermi="['system:cl:edit']" @click="handleXg(scope.row.sceneId,scope.row.sceneName,
                scope.row.deviceId,scope.row.sceneValue,scope.row.sceneContext)">修改</el-button>
                <el-button type="danger" size="small" :icon="Delete" @click="handleDel(scope.row.sceneId)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[5, 10, 20, 50]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="data.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"/>
        </div>
      </el-col>
    </el-row>



    <!-- 新增对话框 -->
    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
      <el-form :model="timingForm"  ref="userRef" label-width="88px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="新建策略:" prop="sceneName" >
              <el-input v-model="timingForm.sceneName" placeholder="请输入策略名称"  />
            </el-form-item>
          </el-col>
          <el-checkbox :indeterminate="data.isIndeterminate" v-model="data.checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="data.checkedSblb" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="item in data.sblb" :label="item.deviceId" :key="item.deviceId" style="margin-bottom: 10px">{{item.deviceName}}
              <el-input placeholder="进水温度" style="width: 120px ;margin: 10px"/>
              <el-input placeholder="出水温度" style="width: 120px ;margin: 10px"/>
              <el-input placeholder="温度" style="width: 120px ;margin: 10px"/>
            </el-checkbox>
          </el-checkbox-group>
<!--          <el-col :span="12">-->
<!--            <el-form-item label="策略列表:"  >-->
<!--              <el-select v-model="timingForm.sceneCode" placeholder="策略列表">-->
<!--                <el-option v-for="item in data.queryParams" :key="item.sceneCode" :label="item.label" :value="item.sceneCode">-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="设备列表:"  >-->
<!--              <el-select v-model="timingForm.deviceId" placeholder="设备列表">-->
<!--                <el-option v-for="item in data.sblb" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId">-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="进水温度:" prop="intemp" >-->
<!--              <el-input v-model="timingForm.intemp" placeholder="进水温度" />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="出水温度:" prop="outtemp" >-->
<!--              <el-input v-model="timingForm.outtemp" placeholder="出水温度" />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="24">-->
<!--            <el-form-item label="温度:" prop="temp">-->
<!--              <el-input v-model="timingForm.temp" placeholder="温度" maxlength="11" />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog :title="title1" v-model="open1" width="600px" append-to-body>
      <el-form :model="timingForm1"  ref="userRef" label-width="88px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="策略名称:" prop="sceneName">
              <el-input v-model="timingForm1.sceneName" placeholder="请输入策略名称" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="设备列表:"  >
              <el-select v-model="timingForm1.deviceId" placeholder="设备列表">
                <el-option v-for="item in data.sblb" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">-->
<!--            <el-form-item label="进水温度:" prop="intemp" >-->
<!--              <el-input v-model="timingForm1.intemp" placeholder="进水温度" />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="出水温度:" prop="outtemp" >-->
<!--              <el-input v-model="timingForm1.outtemp" placeholder="出水温度" />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="13">
            <el-form-item label="温度值:" prop="temp">
              <el-input v-model="timingForm1.temp" placeholder="温度" maxlength="11" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm1">确 定</el-button>
          <el-button @click="cancel1">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Index">
import {ElMessage,ElMessageBox} from 'element-plus'
import {Delete} from '@element-plus/icons-vue'
import {ref,reactive,watch,onMounted} from "vue";
import {getXl,getTb,postNew,getSb,postXg,postDel} from '../../../api/emonitor/api'
onMounted(()=>{
  getSb().then((res)=>{
    var arr = []
    for(var i in res.data){
      arr=arr.concat(res.data[i].children)
    }
    console.log('sblb',arr)
    data.sblb=arr
    var brr = []
    for(let a in arr){
      brr.push(arr[a].deviceId)
    }
    data.AllName=brr
   console.log(brr)
  })
  getXl().then((res)=>{
    console.log(res)
    data.queryParams=res.data
  })
  getTb({
    "sceneCode": data.sceneCode,

    "pageNum": currentPage.value,

    "pageSize": pageSize.value
  }).then((res)=>{
    console.log(res)
    data.timingList=res.rows
    data.total=res.total
  })
  // postNew().then((res)=>{
  //   console.log(res)
  // })
})
/** 筛选处理 */
const data = reactive({
  checkAll: false,
  checkedSblb: [],
  sblb: [],
  AllName:[],
  isIndeterminate: false,
  total:'',
  timingList:[],
  queryParams: '',
  sceneCode:0,
  dateRange:[],
});
//改变
function changeSl(){
  console.log(data.sceneCode)
}
//搜索按钮
function handleQuery(){
  getTb({
    "sceneCode": data.sceneCode,

    "pageNum": currentPage.value,

    "pageSize": pageSize.value
  }).then((res)=>{
    console.log(res)
    data.timingList=res.rows
    data.total=res.total
  })
}
//重置按钮
function resetQuery(){
  data.sceneCode=0
  currentPage.value=1
  pageSize.value=10
  getTb({
    "sceneCode": data.sceneCode,

    "pageNum": currentPage.value,

    "pageSize": pageSize.value
  }).then((res)=>{
    console.log(res)
    data.timingList=res.rows
    data.total=res.total
  })
}
function handleCheckAllChange(val) {
  data.checkedSblb = val ? data.AllName : [];
  data.isIndeterminate = false;
  console.log(data.checkedSblb)
}

function  handleCheckedCitiesChange(value) {
  let checkedCount = value.length;
  data.checkAll = checkedCount === data.sblb.length;
  data.isIndeterminate = checkedCount > 0 && checkedCount < data.sblb.length;
  console.log(data.checkedSblb)
}
/** 数据表格处理 */

const currentPage = ref(1)
const pageSize = ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val) => {
  console.log(`${val}`)
  getTb({
    "sceneCode": data.sceneCode,

    "pageNum": currentPage.value,

    "pageSize": pageSize.value
  }).then((res)=>{
    console.log(res)
    data.timingList=res.rows
    data.total=res.total
  })
}
const handleCurrentChange = (val) => {
  console.log(`${val}`)
  getTb({
    "sceneCode": data.sceneCode,

    "pageNum": currentPage.value,

    "pageSize": pageSize.value
  }).then((res)=>{
    console.log(res)
    data.timingList=res.rows
    data.total=res.total
  })
}


/** 新增策略处理 */
const open = ref(false);
const title = ref();
const open1 = ref(false);
const title1= ref();
const activeName = ref('1')
const timingForm = reactive({
  sceneName:'',
  sceneCode:'',
  deviceId:'',
  temp:'',
  intemp:'',
  outtemp:''
})
const timingForm1 = reactive({
  sceneName:'',
  sceneCode:'',
  deviceId:'',
  temp:'',
  intemp:'',
  outtemp:''
})

// const watchTime = watch(()=> timingForm.executeTime, (val) => {
//   // console.log(val.toLocaleString())
//   let date = new Date(val)
//   let hours = date.getHours()
//   let minutes = date.getMinutes()
//   let seconds = date.getSeconds()
//   console.log(`${hours}:${minutes}:${seconds}`)
// })



function handleAdd() {
  open.value = true;
  title.value = "新增策略";
};
function submitForm() {
  open.value = false;
  console.log(timingForm)
  postNew(timingForm).then((res)=>{
    console.log(res)
    ElMessage({type:"success",message:'新增成功！'})
    handleQuery()
    getXl().then((res)=>{
      console.log(res)
      data.queryParams=res.data
    })
    timingForm.sceneCode='',
        timingForm.sceneName='',
        timingForm.deviceId='',
        timingForm.temp='',
        timingForm.intemp='',
        timingForm.outtemp=''
  })

};
function cancel() {
  open.value = false;
  timingForm.sceneCode='',
      timingForm.sceneName='',
      timingForm.deviceId='',
      timingForm.temp='',
      timingForm.intemp='',
      timingForm.outtemp=''
};
function handleXg(sceneId,sceneName,deviceId,sceneValue,sceneContext) {
  open1.value = true;
  title1.value = "修改策略";
  console.log(sceneId)
  timingForm1.sceneId=sceneId
  timingForm1.sceneName=sceneName
  timingForm1.deviceId=deviceId
  timingForm1.temp=sceneValue
  // if(sceneContext=='出水温度'){
  //   timingForm1.outtemp=sceneValue
  // }else if (sceneContext=='进水温度'){
  //   timingForm1.intemp=sceneValue
  // }else{
  //   timingForm1.temp=sceneValue
  // }
};
function submitForm1() {
  open1.value = false;
  console.log(timingForm1)
  postXg({
    'sceneId':timingForm1.sceneId,
    'sceneValue':timingForm1.temp
  }).then((res)=>{
    console.log(res)
    ElMessage({type:"success",message:'修改成功！'})
    handleQuery()
  })
};
function cancel1() {
  open1.value = false;
  timingForm1.sceneId=''
  timingForm1.sceneName=''
  timingForm1.deviceId=''
  timingForm1.outtemp=''
  timingForm1.intemp=''
  timingForm1.temp=''
};
function handleDel(sceneId) {
  ElMessageBox.confirm("是否确认删除此策略？", "提示",{
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    console.log(sceneId)
    postDel({
      "sceneId":sceneId,
      "sceneCode":null
    }).then((res) => {
      console.log(res)
      ElMessage({type:"success",message:'删除成功！'})
      handleQuery()
    });
  })
}




const { queryParams } = toRefs(data);
</script>

<style scoped lang="scss">
.dev_control_table{
  position: relative;
  width: 100%;
  min-height: 745px;
  background-color: #2F3D8A;
}

::v-deep .el-button{
  border-radius: 2px;
}
::v-deep .el-pagination{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
::v-deep .el-pagination__total{
  color: #f3ffff;
}
::v-deep .el-pagination__jump{
  color: #f3ffff;
}
::v-deep .el-pager{
  margin: 0 5px;
}
::v-deep .el-table .el-table__body-wrapper{
  background-color: #2F3D8A;
}
::v-deep .el-form-item__content{
  //display: flex;
}
</style>