颜色别表更新

Surpriseplus

2023-09-15 cd6722665d20ed6a9221a44d381b5e0901fc918d

 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>

          </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
          slot="header"
          class="clearfix"
              v-show="fromDetial.type == 0"
              class="contentBackground"
              :style="{background: item.start}"
        >
          <span>{{ $t('dataManage.styleObj.deInformation') }}</span>
            </div>
          <div
            style="float: right; cursor: pointer"
            @click="closeDetial"
              v-show="fromDetial.type == 1"
              class="contentBackground"
              :style="{   background: `linear-gradient(to right,${ item.start},${item.end}`,}"
          >
            <i class="el-icon-close"></i>
            </div>
            <div v-show="fromDetial.type == 1">
              <el-color-picker
                size="small"
                v-model="item.end"
                show-alpha
                disabled
              ></el-color-picker>
          </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 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是整数，否则要parseInt转换
      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 {