From cd6722665d20ed6a9221a44d381b5e0901fc918d Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期五, 15 九月 2023 17:12:09 +0800
Subject: [PATCH] 颜色别表更新
---
src/views/maintenance/colorTableManage.vue | 636 +++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 546 insertions(+), 90 deletions(-)
diff --git a/src/views/maintenance/colorTableManage.vue b/src/views/maintenance/colorTableManage.vue
index 135568e..55ddbef 100644
--- a/src/views/maintenance/colorTableManage.vue
+++ b/src/views/maintenance/colorTableManage.vue
@@ -20,7 +20,7 @@
<el-input
style="width:200px"
size="small"
- v-model="ruleForm.name"
+ v-model="listData.name"
:placeholder="$t('userManage.authorityM.nameHolder')"
>
<i
@@ -74,6 +74,7 @@
style="width: 100%"
border
height="calc(100% - 55px)"
+ @selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
@@ -86,6 +87,44 @@
width="70px"
/>
<el-table-column
+ align="center"
+ prop="name"
+ :label="$t('dataManage.styleObj.name')"
+ />
+ <el-table-column
+ align="center"
+ prop="type"
+ :label="$t('common.type')"
+ :formatter="formatType"
+ />
+ <el-table-column
+ align="center"
+ prop="bak"
+ :label="$t('common.bak')"
+ />
+ <el-table-column
+ align="center"
+ prop="createUser"
+ :label="$t('operatManage.BWL.creator')"
+ />
+ <el-table-column
+ align="center"
+ prop="createTime"
+ :label="$t('operatManage.BWL.creationTime')"
+ :formatter="formatData"
+ />
+ <el-table-column
+ align="center"
+ prop="updateUser"
+ :label="$t('operatManage.BWL.update')"
+ />
+ <el-table-column
+ align="center"
+ prop="updateTime"
+ :label="$t('operatManage.BWL.UpdateTime')"
+ :formatter="formatData"
+ />
+ <el-table-column
min-width="100"
:label="$t('dataManage.dictionaryManageObj.operation')"
>
@@ -95,12 +134,14 @@
type="primary"
plain
size="small"
+ @click="handleShowDetial(scope.$index, scope.row)"
>{{ $t('dataManage.dictionaryManageObj.lookOver') }}</el-button>
<el-button
v-if="btnStatus.update"
type="warning"
plain
size="small"
+ @click="handleEdit(scope.$index, scope.row)"
>{{ $t('dataManage.dictionaryManageObj.revamp') }}</el-button>
</template>
@@ -129,11 +170,15 @@
:visible.sync="dialogVisible"
>
<el-form
- ref="form"
+ ref="formInline"
:model="formInline"
label-width="100px"
+ :rules="rules"
>
- <el-form-item :label="$t('dataManage.colorTableObj.labe11')">
+ <el-form-item
+ :label="$t('dataManage.colorTableObj.labe11')"
+ prop="name"
+ >
<el-input
style="width: 100%;"
size="small"
@@ -214,7 +259,13 @@
</el-col>
</el-row>
-
+ <el-form-item :label="$t('common.bak')">
+ <el-input
+ style="width: 100%;"
+ size="small"
+ v-model="formInline.bak"
+ ></el-input>
+ </el-form-item>
</el-form>
<div class="dialogContent">
<div v-for="(item,index) in listOption">
@@ -256,18 +307,18 @@
></el-color-picker>
</div>
<div
- v-show="formInline.type == 1"
+ v-show="formInline.type == 0"
class="contentBackground"
:style="{background: item.start}"
>
</div>
<div
- v-show="formInline.type == 2"
+ v-show="formInline.type == 1"
class="contentBackground"
:style="{ background: `linear-gradient(to right,${ item.start},${item.end}`,}"
>
</div>
- <div v-show="formInline.type == 2">
+ <div v-show="formInline.type == 1">
<el-color-picker
size="small"
v-model="item.end"
@@ -280,84 +331,183 @@
</div>
<div style="padding-top: 10px;width: 100%; display: flex; justify-content: end;">
- <el-button size="mini">{{ $t('common.cancel') }}</el-button>
+ <el-button
+ size="mini"
+ @click="resetForm('formInline')"
+ >{{ $t('common.cancel') }}</el-button>
<el-button
size="mini"
type="primary"
+ @click="submitForm('formInline')"
>{{ $t('common.confirm') }}</el-button>
</div>
</el-dialog>
- <div
- class="infoBox_box"
- v-show="showinfoBox"
+ <!-- 鏌ョ湅 -->
+ <el-dialog
+ :title=" `${$t('dataManage.colorTableObj.label6')}` "
+ :visible.sync="showDialogVisible"
>
- <div class="infoBox subpage_Div box_div">
+ <el-form
+ ref="formInline"
+ :model="fromDetial"
+ label-width="100px"
+ :rules="rules"
+ >
+ <el-form-item :label="$t('dataManage.colorTableObj.labe11')">
+ <el-input
+ style="width: 100%;"
+ size="small"
+ v-model="fromDetial.name"
+ disabled
+ ></el-input>
+ </el-form-item>
+ <el-form-item :label="$t('dataManage.colorTableObj.labe12')">
+ <el-row>
+ <el-col :span="10">
+ <div>
+ <el-input-number
+ style="width: 100%;"
+ :step="1"
+ controls-position="right"
+ size="small"
+ v-model="fromDetial.low"
+ disabled
+ ></el-input-number>
+ </div>
+ </el-col>
+ <el-col :span="2">
+ <div style="display: flex; align-items: center;justify-content: center;color: white;">鈥斺��</div>
+ </el-col>
+ <el-col :span="12">
+ <div><el-input-number
+ size="small"
+ controls-position="right"
+ :step="1"
+ style="width: 100%;"
+ v-model="fromDetial.height"
+ disabled
+ ></el-input-number></div>
+ </el-col>
+ </el-row>
+ </el-form-item>
+ <el-row>
+ <el-col :span="11">
+ <el-form-item :label="$t('dataManage.colorTableObj.labe13')">
+ <el-select
+ style="width: 100%;"
+ v-model="fromDetial.level"
+ placeholder="璇烽�夋嫨"
+ size="small"
+ disabled
+ >
+ <el-option
+ v-for="item in leveloptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="2">
+ <div style="width: 100%;"> </div>
+ </el-col>
+ <el-col :span="13">
+ <el-form-item :label="$t('dataManage.colorTableObj.labe14')">
+ <el-select
+ style="width: 100%;"
+ v-model="fromDetial.type"
+ placeholder="璇烽�夋嫨"
+ size="small"
+ disabled
+ >
+ <el-option
+ v-for="item in typeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </el-form-item>
- <div
- slot="header"
- class="clearfix"
- >
- <span>{{ $t('dataManage.styleObj.deInformation') }}</span>
- <div
- style="float: right; cursor: pointer"
- @click="closeDetial"
- >
- <i class="el-icon-close"></i>
+ </el-col>
+ </el-row>
+ <el-form-item :label="$t('common.bak')">
+ <el-input
+ style="width: 100%;"
+ size="small"
+ disabled
+ v-model="fromDetial.bak"
+ ></el-input>
+ </el-form-item>
+ </el-form>
+ <div class="dialogContent">
+ <div v-for="(item,index) in listOption">
+ <div class="content">
+ <div>
+ <label>{{ $t('dataManage.colorTableObj.labe15')}} : </label>
+ </div>
+ <div>
+ <el-input-number
+ :disabled="index ==0"
+ style="width: 100%;"
+ :step="0.001"
+ controls-position="right"
+ size="small"
+ v-model="item.low"
+ disabled
+ ></el-input-number>
+ </div>
+ <div>-</div>
+ <div>
+ <el-input-number
+ :disabled="index ==listOption.length-1"
+ style="width: 100%;"
+ :step="0.001"
+ controls-position="right"
+ size="small"
+ v-model="item.height"
+ disabled
+ ></el-input-number>
+ </div>
+ <div>
+ <el-color-picker
+ size="small"
+ v-model="item.start"
+ show-alpha
+ disabled
+ ></el-color-picker>
+ </div>
+ <div
+ v-show="fromDetial.type == 0"
+ class="contentBackground"
+ :style="{background: item.start}"
+ >
+ </div>
+ <div
+ v-show="fromDetial.type == 1"
+ class="contentBackground"
+ :style="{ background: `linear-gradient(to right,${ item.start},${item.end}`,}"
+ >
+ </div>
+ <div v-show="fromDetial.type == 1">
+ <el-color-picker
+ size="small"
+ v-model="item.end"
+ show-alpha
+ disabled
+ ></el-color-picker>
+ </div>
</div>
- </div>
- <el-divider></el-divider>
- <div class="contentBox">
- <p>
- <label> {{ $t('dataManage.styleObj.name') }}:</label>
- <label class="boxlabel">{{ itemdetail.name }}</label>
- </p>
- <el-divider></el-divider>
- <p>
- <p>
- <label> {{ $t('common.fileType') }}:</label>
- <label class="boxlabel">{{ itemdetail.fileType }}</label>
- </p>
- </p>
- <el-divider></el-divider>
- <p>
- <label> {{ $t('common.templateType') }}:</label>
- <label class="boxlabel">{{ itemdetail.code }}</label>
- </p>
- <el-divider></el-divider>
- <p>
- <label> {{ $t('common.filePath') }}:</label>
- <label class="boxlabel">{{ itemdetail.fname }}</label>
- </p>
- <el-divider></el-divider>
- <p>
- <label> {{ $t('common.bak') }}:</label>
- <label class="boxlabel">{{ itemdetail.bak }}</label>
- </p>
- <el-divider></el-divider>
- <p>
- <label> {{ $t('dataManage.vmobj.createonuser') }}:</label>
- <label class="boxlabel">{{ itemdetail.createName }}</label>
- </p>
- <el-divider></el-divider>
- <p>
- <label> {{ $t('dataManage.vmobj.createontime') }}:</label>
- <label class="boxlabel">{{ itemdetail.cTime }}</label>
- </p>
- <el-divider></el-divider>
- <p>
- <label> {{ $t('dataManage.vmobj.updateonuser') }}:</label>
- <label class="boxlabel">{{ itemdetail.updateName }}</label>
- </p>
- <el-divider></el-divider>
- <p>
- <label> {{ $t('dataManage.vmobj.updateontime') }}:</label>
- <label class="boxlabel">{{ itemdetail.uTime }}</label>
- </p>
- <el-divider></el-divider>
</div>
</div>
- </div>
+ <div style="padding-top: 10px;width: 100%; display: flex; justify-content: end;">
+
+ </div>
+ </el-dialog>
</div>
</template>
@@ -365,10 +515,14 @@
<script>
import MyBread from "../../components/MyBread.vue";
import {
-
+ colortab_selectByPageAndCount,
+ colortab_insert,
+ colortab_update,
+ colortab_deletes
} from "../../api/api.js";
import { getToken } from "@/utils/auth";
import { helper } from 'echarts';
+import { sector } from '@turf/turf';
export default {
name: "templateManage",
components: { MyBread },
@@ -391,7 +545,14 @@
low: 0,
height: 2000,
level: 1,
- type: 1
+ type: 0,
+ bak: ''
+ },
+ rules: {
+ name: [
+ { required: true, message: '璇疯緭鍏ユ椿鍔ㄥ悕绉�', trigger: 'blur' },
+ ],
+
},
listData: {
pageIndex: 1,
@@ -418,12 +579,15 @@
leveloptions: [],
typeOptions: [],
listOption: [],
+ showDialogVisible: false,
+ fromDetial: {},
+ multipleSelection: []
};
},
created() {
this.showPermsBtn();
this.setDataStart();
-
+ this.setSearchTable();
},
beforeDestroy() {
this.timer && clearTimeout(this.timer);
@@ -434,6 +598,264 @@
this.calHeight();
},
methods: {
+ handleSelectionChange(val) {
+ this.multipleSelection = val;
+ },
+ //璇︽儏鍏抽棴
+ handleShowDetial(index, row) {
+
+ var val = JSON.parse(JSON.stringify(row))
+ var json = JSON.parse(val.json)
+ var length = json.levels.length;
+ var level = json.levels;
+ this.fromDetial = {
+ name: val.name,
+ low: level[0].low,
+ height: level[length - 1].height,
+ level: length,
+ type: val.type,
+ id: val.id,
+ bak: val.bak
+ }
+ this.listOption = [];
+ var color = "rgba(255,0,0,1)"
+ for (var i = 0; i < length; i++) {
+ var color1, color2
+ if (val.type == 0) {
+ var start = [level[i].r, level[i].g, level[i].b, 1]
+ color1 = 'rgba(' + start.toString() + ')'
+ color2 = color;
+ } else if (val.type == 1) {
+ var start = [level[i].r_start, level[i].g_start, level[i].b_start, 1]
+ var end = [level[i].r_end, level[i].g_end, level[i].b_end, 1]
+ color1 = 'rgba(' + start.toString() + ')';
+ color2 = 'rgba(' + end.toString() + ')';
+ }
+ this.listOption.push({
+ low: level[i].low,
+ height: level[i].height,
+ start: color1,
+ end: color2,
+ id: i + 1,
+ })
+ }
+ this.showDialogVisible = true;
+ },
+ handleEdit(index, row) {
+ var val = JSON.parse(JSON.stringify(row))
+ var json = JSON.parse(val.json)
+ var length = json.levels.length;
+ var level = json.levels;
+ this.formInline = {
+ name: val.name,
+ low: level[0].low,
+ height: level[length - 1].height,
+ level: length,
+ type: val.type,
+ id: val.id,
+ bak: val.bak
+ }
+ this.listOption = [];
+ var color = "rgba(255,0,0,1)"
+ for (var i = 0; i < length; i++) {
+ var color1, color2
+ if (val.type == 0) {
+ var start = [level[i].r, level[i].g, level[i].b, 1]
+ color1 = 'rgba(' + start.toString() + ')'
+ color2 = color;
+ } else if (val.type == 1) {
+ var start = [level[i].r_start, level[i].g_start, level[i].b_start, 1]
+ var end = [level[i].r_end, level[i].g_end, level[i].b_end, 1]
+ color1 = 'rgba(' + start.toString() + ')';
+ color2 = 'rgba(' + end.toString() + ')';
+ }
+ this.listOption.push({
+ low: level[i].low,
+ height: level[i].height,
+ start: color1,
+ end: color2,
+ id: i + 1,
+ })
+ }
+ this.behavior = '淇敼';
+ this.dialogVisible = true;
+ },
+ submitForm(formName) {
+ this.$refs[formName].validate((valid) => {
+ if (valid) {
+ if (this.behavior == '鏂板') {
+ this.setInsertColorTable();
+ } else if (this.behavior == '淇敼') {
+ this.setEditColorTable();
+ }
+
+ } else {
+ console.log('error submit!!');
+ return false;
+ }
+ });
+ },
+ resetForm(formName) {
+ this.dialogVisible = false;
+ },
+ async setEditColorTable() {
+ this.dialogVisible = false;
+ var obj = this.getColorLevels();
+ var updateObj = {
+ name: this.formInline.name,
+ type: this.formInline.type,
+ json: JSON.stringify(obj),
+ id: this.formInline.id,
+ bak: this.formInline.bak
+ }
+
+ colortab_update(updateObj).then((res) => {
+ if (res.code != 200) {
+ this.$message({
+ message: "棰滆壊琛ㄤ慨鏀瑰け璐� 锛�",
+ type: "warning",
+ });
+ return
+ }
+ this.$message({
+ message: "棰滆壊琛ㄤ慨鏀规垚鍔燂紒",
+ type: "success",
+ });
+ this.setSearchTable();
+ })
+
+
+ },
+ setInsertColorTable() {
+ this.dialogVisible = false;
+ var obj = this.getColorLevels();
+ var insertObj = {
+ name: this.formInline.name,
+ type: this.formInline.type,
+ json: JSON.stringify(obj),
+ bak: this.formInline.bak
+ }
+ colortab_insert(insertObj).then((res) => {
+ if (res.code != 200) {
+ this.$message({
+ message: "棰滆壊琛ㄦ坊鍔犲け璐� 锛�",
+ type: "warning",
+ });
+ return
+ }
+ this.$message({
+ message: "棰滆壊琛ㄦ坊鍔犳垚鍔燂紒",
+ type: "success",
+ });
+ this.setSearchTable();
+ })
+
+
+ },
+
+ getColorLevels() {
+ var levels = [];
+ for (var i in this.listOption) {
+ levels.push(this.getRgbaColor(this.listOption[i]))
+ }
+ var obj = {}
+ if (this.formInline.type == 0) {//鏅��
+ obj = {
+ default: {
+ r: -1,
+ g: -1,
+ b: -1
+ },
+ levels: levels,
+ type: this.formInline.type
+ }
+ } else if (this.formInline.type == 1) {//娓愬彉
+ obj = {
+ gradation: 'visibility',
+ default: {
+ r: -1,
+ g: -1,
+ b: -1
+ },
+ levels: levels,
+ type: this.formInline.type
+ }
+ }
+ return obj
+ },
+
+ getRgbaColor(res) {
+
+ var start = this.setColorToString(res.start)
+ var end = this.setColorToString(res.end)
+ if (this.formInline.type == 0) {
+ return {
+ r: start.r,
+ g: start.g,
+ b: start.b,
+ height: res.height,
+ low: res.low,
+ }
+ } else if (this.formInline.type == 1) {
+ return {
+ r_start: start.r,
+ g_start: start.g,
+ b_start: start.b,
+ r_end: end.r,
+ g_end: end.g,
+ b_end: end.b,
+ height: res.height,
+ low: res.low,
+ }
+ }
+ },
+ setColorToString(res) {
+ var val = res.slice(5).slice(0, -1).split(',')
+ return {
+ r: val[0],
+ g: val[1],
+ b: val[2],
+ }
+ },
+ //鏍煎紡鍖栨椂闂�
+ add0(m) {
+ return m < 10 ? "0" + m : m;
+ },
+ //鏍煎紡鍖栨椂闂�
+ format(shijianchuo) {
+ //shijianchuo鏄暣鏁帮紝鍚﹀垯瑕乸arseInt杞崲
+ var time = new Date(shijianchuo);
+ var y = time.getFullYear();
+ var m = time.getMonth() + 1;
+ var d = time.getDate();
+ var h = time.getHours();
+ var mm = time.getMinutes();
+ var s = time.getSeconds();
+ return (
+ y + "-" + this.add0(m) + "-" + this.add0(d)
+
+ );
+ },
+ formatType(row, column) {
+
+ let data = row[column.property];
+ if (data == null) {
+ return data;
+ }
+ if (data == 0) {
+ return '鏅��'
+ } else if (data == 1) {
+ return '娓愬彉'
+ }
+ },
+ //鏍煎紡鍖栧垪琛�
+ formatData(row, column) {
+ let data = row[column.property];
+ if (!data) {
+ return data;
+ }
+ return this.format(data);
+ },
setColorEndChange(res) {
if (res.id == this.listOption.length) return;
for (var i = 0; i < this.listOption.length; i++) {
@@ -443,7 +865,7 @@
}
},
setColorStartChange(res) {
- if (this.formInline.type == 1) return
+ if (this.formInline.type == 0) return
if (res.id == 1) return;
for (var i = 0; i < this.listOption.length; i++) {
if (this.listOption[i].id == res.id) {
@@ -477,7 +899,8 @@
this.listOption[i].height = (parseFloat(val.height) + parseFloat(step)).toFixed(3);
}
}
- this.listOption[res - 1].height = this.formInline.height
+
+ this.listOption[this.listOption.length - 1].height = this.formInline.height
},
//绾у埆鍒囨崲
@@ -517,10 +940,10 @@
})
}
this.typeOptions = [{
- value: 1,
+ value: 0,
label: '鏅��'
}, {
- value: 2,
+ value: 1,
label: '娓愬彉'
}]
},
@@ -542,7 +965,8 @@
low: 0,
height: 2000,
level: 1,
- type: 1
+ type: 0,
+ bak: ''
}
this.setLevelChange(this.formInline.level);
this.behavior = '鏂板';
@@ -550,22 +974,54 @@
},
- //鍒犻櫎
- setTableDelete() {
+
+ //鍒犻櫎
+ async setTableDelete() {
+ if (this.multipleSelection.length <= 0) {
+ this.$message({
+ message: '璇烽�夋嫨瑕佸垹闄ょ殑棰滆壊琛�',
+ type: 'warning'
+ });
+ return
+ }
+ var std = [];
+ for (var i in this.multipleSelection) {
+ std.push(this.multipleSelection[i].id)
+ }
+ colortab_deletes({ ids: std.toString() }).then((res) => {
+ if (res.code != 200) {
+ this.$message({
+ message: "棰滆壊琛ㄥ垹闄ゅけ璐� 锛�",
+ type: "warning",
+ });
+ return
+ }
+ this.$message({
+ message: "棰滆壊琛ㄥ垹闄ゆ垚鍔燂紒",
+ type: "success",
+ });
+ this.setSearchTable();
+ })
},
//閲嶇疆
setTableRefresh() {
-
+ this.listData = {
+ pageIndex: 1,
+ pageSize: 10,
+ name: "",
+ count: 0,
+ }
+ this.setSearchTable();
},
//鏌ヨ
- setSearchTable() {
-
+ async setSearchTable() {
+ const data = await colortab_selectByPageAndCount(this.listData)
+ if (data.code != 200) return;
+ this.tableData = data.result;
+ this.listData.count = data.count;
},
- //璇︽儏鍏抽棴
- closeDetial() {
- },
onResize() {
this.timer && clearTimeout(this.timer);
this.timer = setTimeout(() => {
@@ -650,7 +1106,7 @@
}
}
.dialogContent {
- width: 100%;
+ width: calc(100% - 20px);
height: 40vh;
background: rgba(104, 156, 255, 0.1);
.content {
--
Gitblit v1.9.3