|
@@ -1,182 +1,219 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <!-- 数据项表达式配置 -->
|
|
|
- <el-dialog :title="title" width="80%" top="5vh" center :before-close="dialogClose" :visible.sync="visible"
|
|
|
- @open="handleOpen" @close="handleClose">
|
|
|
- <el-form label-width="100px">
|
|
|
- <el-row>
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="数据源:" style="margin-bottom: 5px; width: 100%">
|
|
|
- <el-select v-model="dataSourceId" disabled>
|
|
|
- <el-option v-for="dict in dataSourceList" :key="dict.id" :label="dict.dataSourceName"
|
|
|
- :value="dict.id"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-form-item label="点位:" style="margin-bottom: 5px; width: 100%">
|
|
|
- <el-input placeholder="请输入点位进行过滤" style="" @input="chooseItemChangeEvent"
|
|
|
- v-model="filterChooseItemText"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- <el-button type="primary" size="small" @click="multipleModel"
|
|
|
- style="position: absolute; right: 30px; top: 80px">批量设置表达式</el-button>
|
|
|
- <CommonTable ref="itemConfigTable" :tableHeaderTitle="tableHeaderTitle" :tableData="tableData"
|
|
|
- :isShowCheckbox="isShowCheckbox" :isShowIndex="isShowIndex" :tableHight="tableHight"
|
|
|
- :tableOperate="tableOperate" @receiveCheckedData="receiveCheckedData" @chooseModel="chooseModel">
|
|
|
- </CommonTable>
|
|
|
- <span slot="footer">
|
|
|
+ <div>
|
|
|
+ <!-- 数据项表达式配置 -->
|
|
|
+ <el-dialog :title="title" width="80%" top="5vh" center :before-close="dialogClose" :visible.sync="visible"
|
|
|
+ @open="handleOpen" @close="handleClose">
|
|
|
+ <el-form label-width="100px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="数据源:" style="margin-bottom: 5px; width: 100%">
|
|
|
+ <el-select v-model="dataSourceId" disabled>
|
|
|
+ <el-option v-for="dict in dataSourceList" :key="dict.id" :label="dict.dataSourceName"
|
|
|
+ :value="dict.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="点位:" style="margin-bottom: 5px; width: 100%">
|
|
|
+ <el-input placeholder="请输入点位进行过滤" style="" @input="chooseItemChangeEvent"
|
|
|
+ v-model="filterChooseItemText"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <el-button type="primary" size="small" @click="multipleModel"
|
|
|
+ style="position: absolute; right: 30px; top: 80px" title="未勾选点位则设置所有点位的表达式">批量设置表达式
|
|
|
+ </el-button>
|
|
|
+ <CommonTable ref="itemConfigTable" :tableHeaderTitle="tableHeaderTitle" :tableData="tablePageData"
|
|
|
+ :isShowCheckbox="isShowCheckbox" :isShowIndex="isShowIndex" :tableHight="tableHight"
|
|
|
+ :tableOperate="tableOperate" @receiveCheckedData="receiveCheckedData" @chooseModel="chooseModel">
|
|
|
+ </CommonTable>
|
|
|
+ <!-- 分页信息 -->
|
|
|
+ <pagination v-show="tableTotal > 0" small :total="tableTotal" :page.sync="queryParams.page"
|
|
|
+ :limit.sync="queryParams.limit" align="right" @pagination="pageChangeEvent"/>
|
|
|
+ <span slot="footer">
|
|
|
<el-button type="primary" @click="saveItemChoose" size="small">确定</el-button>
|
|
|
<el-button @click="dialogClose" size="small">取消</el-button>
|
|
|
</span>
|
|
|
- </el-dialog>
|
|
|
+ </el-dialog>
|
|
|
|
|
|
- <!-- 选择表达式 -->
|
|
|
- <ChooseModel ref="chooseModel" @saveDataModelEvent="saveDataModelEvent"></ChooseModel>
|
|
|
- </div>
|
|
|
+ <!-- 选择表达式 -->
|
|
|
+ <ChooseModel ref="chooseModel" @saveDataModelEvent="saveDataModelEvent"></ChooseModel>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import CommonTable from '@/components/CommonTable/index.vue'
|
|
|
import ChooseModel from './chooseModel.vue'
|
|
|
+import {showConfirmWin} from "@/utils/cqcy";
|
|
|
|
|
|
export default {
|
|
|
- components: {
|
|
|
- CommonTable,
|
|
|
- ChooseModel
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- visible: false,
|
|
|
- title: '点位表达式设置',
|
|
|
- dataSourceId: null,
|
|
|
- filterChooseItemText: null,
|
|
|
- dataSourceList: [],
|
|
|
- dataModelList: [],
|
|
|
- leavesChooseList: [],
|
|
|
- checkItemList: [],
|
|
|
- // 是否展示复选框列
|
|
|
- isShowCheckbox: true,
|
|
|
- // 是否展示序号索引列
|
|
|
- isShowIndex: true,
|
|
|
- tableHight: '68vh',
|
|
|
- tableHeaderTitle: [
|
|
|
- {
|
|
|
- propName: "itemName",
|
|
|
- labelName: "点位名称",
|
|
|
- },
|
|
|
- {
|
|
|
- propName: "remark",
|
|
|
- labelName: "四则运算表达式",
|
|
|
- }
|
|
|
- ],
|
|
|
- tableDataF: [],
|
|
|
- tableData: [],
|
|
|
- tableOperate: [
|
|
|
- {
|
|
|
- btnName: '选择表达式',
|
|
|
- size: "mini",
|
|
|
- style: '',
|
|
|
- icon: 'el-icon-edit',
|
|
|
- methodName: "chooseModel",
|
|
|
- }
|
|
|
- ],
|
|
|
- queryParams: {
|
|
|
- page: 1,
|
|
|
- limit: 10
|
|
|
- },
|
|
|
- tableTotal: 0
|
|
|
+ components: {
|
|
|
+ CommonTable,
|
|
|
+ ChooseModel
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ title: '点位表达式设置',
|
|
|
+ dataSourceId: null,
|
|
|
+ filterChooseItemText: null,
|
|
|
+ dataSourceList: [],
|
|
|
+ dataModelList: [],
|
|
|
+ leavesChooseList: [],
|
|
|
+ checkItemList: [],
|
|
|
+ // 是否展示复选框列
|
|
|
+ isShowCheckbox: true,
|
|
|
+ // 是否展示序号索引列
|
|
|
+ isShowIndex: true,
|
|
|
+ tableHight: '68vh',
|
|
|
+ tableHeaderTitle: [
|
|
|
+ {
|
|
|
+ propName: "itemName",
|
|
|
+ labelName: "点位名称",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ propName: "remark",
|
|
|
+ labelName: "数据计算模型",
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tableDataF: [],
|
|
|
+ tableData: [],
|
|
|
+ tablePageData: [],
|
|
|
+ tableOperate: [
|
|
|
+ {
|
|
|
+ btnName: '选择表达式',
|
|
|
+ size: "mini",
|
|
|
+ style: '',
|
|
|
+ icon: 'el-icon-edit',
|
|
|
+ methodName: "chooseModel",
|
|
|
}
|
|
|
+ ],
|
|
|
+ queryParams: {
|
|
|
+ page: 1,
|
|
|
+ limit: 10
|
|
|
+ },
|
|
|
+ tableTotal: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 弹窗打开事件 */
|
|
|
+ handleOpen() {
|
|
|
+ this.tableDataF = this.tableData
|
|
|
+ this.initTablePage(this.tableData)
|
|
|
},
|
|
|
- methods: {
|
|
|
- /** 弹窗打开事件 */
|
|
|
- handleOpen() {
|
|
|
- this.tableDataF = this.tableData
|
|
|
- },
|
|
|
- /** 弹窗关闭事件 */
|
|
|
- handleClose() {
|
|
|
- this.dataSourceId = null
|
|
|
- this.filterChooseItemText = null
|
|
|
- this.tableData = []
|
|
|
- },
|
|
|
- /** 关闭弹出层 */
|
|
|
- dialogClose() {
|
|
|
- this.visible = false
|
|
|
- },
|
|
|
- // 接收子组件勾选的行的数据
|
|
|
- receiveCheckedData(checked) {
|
|
|
- this.checkItemList = checked
|
|
|
- },
|
|
|
- /** 确定数据项的设置 */
|
|
|
- saveItemChoose() {
|
|
|
- this.$emit('saveItemChoose', this.tableDataF)
|
|
|
- this.dialogClose()
|
|
|
- this.$emit('dialogClose')
|
|
|
- },
|
|
|
- /** 选择数据项表达式 */
|
|
|
- chooseModel(row) {
|
|
|
- this.$refs.chooseModel.title = '选择表达式'
|
|
|
- this.$refs.chooseModel.visible = true
|
|
|
- this.$refs.chooseModel.dataModelList = this.dataModelList
|
|
|
- this.$refs.chooseModel.chooseDataModelId = row.dataModelId
|
|
|
- let arr = [];
|
|
|
- arr.push(row.itemName)
|
|
|
- this.$refs.chooseModel.itemNameList = arr
|
|
|
- },
|
|
|
- /** 批量设置表达式 */
|
|
|
- multipleModel() {
|
|
|
- if (this.checkItemList.length == 0) {
|
|
|
- this.$message({
|
|
|
- message: '请至少选择一个点位!',
|
|
|
- type: 'warning'
|
|
|
- })
|
|
|
- return;
|
|
|
- }
|
|
|
- this.$refs.chooseModel.title = '选择表达式'
|
|
|
- this.$refs.chooseModel.visible = true
|
|
|
- this.$refs.chooseModel.dataModelList = this.dataModelList
|
|
|
- let arr = [];
|
|
|
- for (let i = 0; i < this.checkItemList.length; i++) {
|
|
|
- arr.push(this.checkItemList[i].itemName)
|
|
|
- }
|
|
|
- this.$refs.chooseModel.itemNameList = arr
|
|
|
- },
|
|
|
- /** 过滤数据项事件 */
|
|
|
- chooseItemChangeEvent(val) {
|
|
|
- let arr = JSON.parse(JSON.stringify(this.tableDataF));
|
|
|
- if (!val || !val.trim()) {
|
|
|
- this.tableData = arr;
|
|
|
- return;
|
|
|
- }
|
|
|
- this.tableData = arr.filter((v) => v.itemName.indexOf(val) !== -1)
|
|
|
- },
|
|
|
- /** 保存数据模型事件 */
|
|
|
- saveDataModelEvent(itemNameList, dataModelId) {
|
|
|
- let remark = '';
|
|
|
- for (let i = 0; i < this.dataModelList.length; i++) {
|
|
|
- if (this.dataModelList[i].id == dataModelId) {
|
|
|
- remark = this.dataModelList[i].remark
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
+ /** 弹窗关闭事件 */
|
|
|
+ handleClose() {
|
|
|
+ this.dataSourceId = null
|
|
|
+ this.filterChooseItemText = null
|
|
|
+ this.tableData = []
|
|
|
+ this.tablePageData = []
|
|
|
+ this.tableTotal = 0
|
|
|
+ },
|
|
|
+ /** 关闭弹出层 */
|
|
|
+ dialogClose() {
|
|
|
+ this.visible = false
|
|
|
+ },
|
|
|
+ // 接收子组件勾选的行的数据
|
|
|
+ receiveCheckedData(checked) {
|
|
|
+ this.checkItemList = checked
|
|
|
+ },
|
|
|
+ initTablePage(array) {
|
|
|
+ if(array == null){
|
|
|
+ array = this.tableData
|
|
|
+ }
|
|
|
+ this.queryParams = {
|
|
|
+ page: 1,
|
|
|
+ limit: 10
|
|
|
+ }
|
|
|
+ this.tableTotal = array.length
|
|
|
+ this.tablePageData = this.paginate(array, this.queryParams.limit, this.queryParams.page)
|
|
|
+ },
|
|
|
+ pageChangeEvent(){
|
|
|
+ this.tablePageData = this.paginate(this.tableData, this.queryParams.limit, this.queryParams.page)
|
|
|
+ },
|
|
|
+ paginate(array, page_size, page_number) {
|
|
|
+ // 计算分页开始的索引
|
|
|
+ const start = (page_number - 1) * page_size;
|
|
|
+ // 使用slice方法获取当前页的数据
|
|
|
+ return array.slice(start, start + page_size);
|
|
|
+ },
|
|
|
+ /** 确定数据项的设置 */
|
|
|
+ saveItemChoose() {
|
|
|
+ this.$emit('saveItemChoose', this.tableDataF)
|
|
|
+ this.dialogClose()
|
|
|
+ this.$emit('dialogClose')
|
|
|
+ },
|
|
|
+ /** 选择数据项表达式 */
|
|
|
+ chooseModel(row) {
|
|
|
+ this.$refs.chooseModel.title = '选择表达式'
|
|
|
+ this.$refs.chooseModel.visible = true
|
|
|
+ this.$refs.chooseModel.dataModelList = this.dataModelList
|
|
|
+ this.$refs.chooseModel.chooseDataModelId = row.dataModelId
|
|
|
+ let arr = [];
|
|
|
+ arr.push(row.itemName)
|
|
|
+ this.$refs.chooseModel.itemNameList = arr
|
|
|
+ },
|
|
|
+ /** 批量设置表达式 */
|
|
|
+ multipleModel() {
|
|
|
+ if (this.checkItemList.length == 0) {
|
|
|
+ showConfirmWin(this, null, '您确定要对所有点位设置表达式吗?', () => {
|
|
|
+ this.$refs.chooseModel.title = '选择表达式'
|
|
|
+ this.$refs.chooseModel.visible = true
|
|
|
+ this.$refs.chooseModel.dataModelList = this.dataModelList
|
|
|
+ let arr = [];
|
|
|
+ for (let i = 0; i < this.tableDataF.length; i++) {
|
|
|
+ arr.push(this.tableDataF[i].itemName)
|
|
|
+ }
|
|
|
+ this.$refs.chooseModel.itemNameList = arr
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$refs.chooseModel.title = '选择表达式'
|
|
|
+ this.$refs.chooseModel.visible = true
|
|
|
+ this.$refs.chooseModel.dataModelList = this.dataModelList
|
|
|
+ let arr = [];
|
|
|
+ for (let i = 0; i < this.checkItemList.length; i++) {
|
|
|
+ arr.push(this.checkItemList[i].itemName)
|
|
|
+ }
|
|
|
+ this.$refs.chooseModel.itemNameList = arr
|
|
|
+ },
|
|
|
+ /** 过滤数据项事件 */
|
|
|
+ chooseItemChangeEvent(val) {
|
|
|
+ let arr = JSON.parse(JSON.stringify(this.tableDataF));
|
|
|
+ if (!val || !val.trim()) {
|
|
|
+ this.tableData = arr;
|
|
|
+ this.initTablePage(this.tableData)
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.tableData = arr.filter((v) => v.itemName.indexOf(val) !== -1)
|
|
|
+ this.initTablePage(this.tableData)
|
|
|
+ },
|
|
|
+ /** 保存数据模型事件 */
|
|
|
+ saveDataModelEvent(itemNameList, dataModelId) {
|
|
|
+ let remark = '';
|
|
|
+ for (let i = 0; i < this.dataModelList.length; i++) {
|
|
|
+ if (this.dataModelList[i].id == dataModelId) {
|
|
|
+ remark = this.dataModelList[i].remark
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- let arr = []
|
|
|
- for (let i = 0; i < this.tableDataF.length; i++) {
|
|
|
- let temp = this.tableDataF[i]
|
|
|
- for (let j = 0; j < itemNameList.length; j++) {
|
|
|
- if (itemNameList[j] == temp.itemName) {
|
|
|
- temp.dataModelId = dataModelId
|
|
|
- temp.remark = remark
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
- arr.push(temp)
|
|
|
- }
|
|
|
- this.tableDataF = arr
|
|
|
- this.chooseItemChangeEvent(this.filterChooseItemText)
|
|
|
+ let arr = []
|
|
|
+ for (let i = 0; i < this.tableDataF.length; i++) {
|
|
|
+ let temp = this.tableDataF[i]
|
|
|
+ for (let j = 0; j < itemNameList.length; j++) {
|
|
|
+ if (itemNameList[j] == temp.itemName) {
|
|
|
+ temp.dataModelId = dataModelId
|
|
|
+ temp.remark = remark
|
|
|
+ break
|
|
|
+ }
|
|
|
}
|
|
|
+ arr.push(temp)
|
|
|
+ }
|
|
|
+ this.tableDataF = arr
|
|
|
+ this.chooseItemChangeEvent(this.filterChooseItemText)
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|