数采配置

gaoluyang

2024-07-12 c626e8199d7af7c439685498305aa440b3f819b4

数采配置

 src/components/do/b6-device-management/b6-data-acquisition-config.vue

@@ -3,11 +3,88 @@
    <div>
      <el-row class="title">
        <el-col :span="6" style="padding-left: 20px;text-align: left;">数采配置</el-col>
        <el-col :span="18" style="text-align: right;">
          <el-button size="medium" @click="$parent.closeDataVue()">
            <span style="color: #3A7BFA;">返回</span>
          </el-button>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-table></el-table>
    <div class="table">
      <el-table :data="tableList.slice((page.current - 1) * page.size, page.current * page.size)"
                border tooltip-effect="dark" style="width: 100%;" height="100%">
        <el-table-column type="index" label="序号" align="center" width="65"></el-table-column>
        <el-table-column prop="insProductItem" align="center" label="检验项目"></el-table-column>
        <el-table-column prop="section" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="dataConfig(scope.row)">数采配置</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page" v-if="tableList.length > 0">
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="page.current"
                     :page-sizes="[10, 20, 30, 50, 100]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
                     :total="tableList.length">
      </el-pagination>
    </div>
    <el-dialog title="数采配置" :visible.sync="dialogVisible3" width="920px" :before-close="submitForm3">
      <el-form :model="configForm" :rules="rules" label-position="top" size="small"
               ref="configForm" label-width="100px" class="demo-ruleForm">
        <div class="fomItem1">
          <el-form-item class="fomItemInput" label="检测的文件类型:" prop="fileType">
            <el-select v-model="configForm.fileType" placeholder="请选择文件类型">
              <el-option v-for="item in fileTypeOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="fomItemInput" label="采集地址:" prop="collectUrl">
            <el-input v-model="configForm.collectUrl"></el-input>
          </el-form-item>
          <el-form-item class="fomItemInput" label="储存地址:" prop="storageUrl">
            <el-input v-model="configForm.storageUrl"></el-input>
          </el-form-item>
        </div>
        <div class="fomItem1"
             v-for="(domain, index) in domains"
             :key="domain.refer1">
          <el-form-item class="fomItemInput" label="参照1:" :rules="[{required: true, message: '请填写', trigger: 'blur'}]">
            <el-input v-model="domain.refer1"></el-input>
          </el-form-item>
          <el-form-item class="fomItemInput" label="参照2:" :rules="[{required: true, message: '请填写', trigger: 'blur'}]">
            <el-input v-model="domain.refer2"></el-input>
          </el-form-item>
          <el-form-item class="fomItemInput" label="X:" :rules="[{required: true, message: '请填写', trigger: 'blur'}]">
            <el-input v-model="domain.x"></el-input>
          </el-form-item>
          <el-form-item class="fomItemInput" label="Y:" :rules="[{required: true, message: '请填写', trigger: 'blur'}]">
            <el-input v-model="domain.y"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="position: absolute; bottom: -65px" @click.prevent="removeDomain(domain)" size="small">删除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="addDomain" size="small" type="primary" style="position: absolute; bottom: -65px;left: 62px" v-if="index === domains.length-1">新增域名</el-button>
          </el-form-item>
        </div>
        <div class="fomItem1">
          <el-form-item class="fomItemInput" label="公式:" prop="formula">
            <el-input v-model="configForm.formula"></el-input>
          </el-form-item>
          <el-form-item class="fomItemInput" label="结果:" prop="result">
            <el-input v-model="configForm.result" disabled></el-input>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-row>
                    <el-button @click="dialogVisible3=false">取 消</el-button>
                    <el-button type="primary" @click="submitForm3" :loading="upLoad3">确 定</el-button>
                </el-row>
            </span>
    </el-dialog>
  </div>
</template>

@@ -16,12 +93,89 @@
  name: "dataAcquisitionConfig",
  // import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    tableList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    // 这里存放数据
    return {}
    return {
      page: {
        current: 1,
        size: 20,
      },
      rules: {
        fileType: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
        collectUrl: [{ required: true, message: '请填写采集地址', trigger: 'blur' }],
        storageUrl: [{ required: true, message: '请填写储存地址', trigger: 'blur' }],
        formula: [{ required: true, message: '请填写公式', trigger: 'blur' }],
      },
      dialogVisible3:false,
      configForm:{
        fileType: '',
      },
      domains: [
        {
          refer1: '',
          refer2: '',
          x: '',
          y: ''
        }
      ],
      upLoad3:false,
      fileTypeOptions: [
        {label: 'csv', value: 'csv'},
        {label: 'db', value: 'db'},
        {label: 'mdb', value: 'mdb'},
        {label: 'word', value: 'word'},
        {label: 'excel', value: 'excel'},
        {label: 'txt', value: 'txt'},
        {label: 'pdf', value: 'pdf'},
      ]
    }
  },
  // 方法集合
  methods: {},
  methods: {
    dataConfig (row) {
      this.configForm = {}
      this.dialogVisible3 = true
      // this.$axios.post(this.$api.deviceScope.getNumberCollect+'?id='+row.id).then(res => {
      //   this.configForm = res.data
      // })
    },
    submitForm3() {
      this.$refs.configForm.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    removeDomain(item) {
      const index = this.domains.indexOf(item)
      if (index !== -1 && this.domains.length > 1) {
        this.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.domains.push({
        refer1: '',
        refer2: '',
        x: '',
        y: ''
      });
    },
    sizeChange(val) {
      this.page.size = val
    },
    currentChange(val) {
      this.page.current = val
    },
  },
}
</script>

@@ -30,10 +184,33 @@
  width: 100%;
  height: 100%;
  overflow-y: auto;
  //overflow-x: hidden;
  .title {
    height: 60px;
    line-height: 60px;
  }
}
.page {
  width: 100%;
  height: 30px;
  text-align: right;
  margin-top: 10px;
}
.table {
  margin-top: 10px;
  background-color: #fff;
  width: calc(100% - 40px);
  height: calc(100% - 60px - 80px - 10px - 40px);
  padding: 20px;
}
.fomItem1 {
  display: flex;
  height: 74px;
}
.fomItemInput {
  width: 180px;
  margin-right: 6px;
}
>>>.el-form-item__label {
  padding-bottom: 0 !important;
}
</style>

 src/components/view/a6-device-management.vue

@@ -421,17 +421,17 @@
                </el-row>
            </span>
    </el-dialog>
<!--    <dataAcquisitionConfig v-if="showData"/>-->
    <dataAcquisitionConfig v-if="showData" :tableList="tableList"/>
    </div>
</template>

<script>
    import ValueTable from '../tool/value-table.vue'
  // import dataAcquisitionConfig from '../do/b6-device-management/b6-data-acquisition-config.vue'
  import dataAcquisitionConfig from '../do/b6-device-management/b6-data-acquisition-config.vue'
    export default {
        components: {
            ValueTable,
      // dataAcquisitionConfig
      dataAcquisitionConfig
        },
        data() {
            return {
@@ -451,6 +451,7 @@
                dialogVisible2: false,
                addPower: false,
        showData: false, // 数采配置页面
        tableList: [],
                componentData: {
                    entity: {
                        deviceStatus: null,
@@ -840,17 +841,25 @@
                })
            },
      handleConfig(row){
        this.configForm = {}
        this.dialogVisible3 = true
        this.$axios.post(this.$api.deviceScope.getNumberCollect+'?id='+row.id).then(res => {
          this.configForm = res.data
        // this.configForm = {}
        // this.dialogVisible3 = true
        // this.$axios.post(this.$api.deviceScope.getNumberCollect+'?id='+row.id).then(res => {
        //   this.configForm = res.data
        // })
        this.showData = true
        const list = row.insProductItem.split(';')
        let list2 = []
        list.map((item) => {
          const obj = Object.assign({
            insProductItem: item,
        })
        // this.showData = true
        // console.log('?????', this.showData)
          list2.push(obj)
        })
        this.tableList = list2
      },
      // closeDataVue () {
      //   this.showData = false
      // },
      closeDataVue () {
        this.showData = false
      },
      submitForm3(){
        if(!this.configForm.ip){
          this.$message.error('请填写IP');