jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo.vue

<template>
   <el-dialog :title="mode=='add'?'新增':'编辑'" :visible.sync="dialogVisible" width="43%" append-to-body :close-on-click-modal="false">
        <div class="dialogStyleBox">
          <div class="dialogLine"></div>
          <div class="dialogCloseButton"></div>
        </div>
        <el-card class="box-card">
          <BoardPreview :tpl="node"></BoardPreview>
        </el-card>
        <el-card>
          <el-form :model="dataForm" :rules="dataRule" label-width="90px" ref="dataForm" size="mini">
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="所属类别" v-if="type == 'template'">
                  <el-select v-model="dataForm.category" placeholder="请选择所属类别" size="mini">
                    <el-option v-for="item in templateCategoryList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="infoBoardButton" :span="16">
                <el-radio-group v-model="dataForm.textAlign">
                  <el-radio-button label="left">左对齐</el-radio-button>
                  <el-radio-button label="center">中间对齐</el-radio-button>
                  <el-radio-button label="right">右对齐</el-radio-button>
                </el-radio-group>
              </el-col>
            </el-row>

            <el-row :gutter="24" style="display: flex; flex-wrap: wrap;width:100%">
              <el-col :span="24">
                <el-form-item label="详细内容" prop="content">
                  <el-input type="textarea"  placeholder="详细内容" v-model="dataForm.content"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字体颜色">
                  <el-select v-model="dataForm.color" filterable placeholder="请选择">
                    <el-option v-for="item in colorList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字体大小">
                  <el-select v-model="dataForm.fontSize" style="width: 100%">
                    <el-option v-for="item in fontSizeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字体类型">
                  <el-select v-model="dataForm.fontFamily" placeholder="请选择">
                    <el-option v-for="item in fontTypeList" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="停留时间(秒)">
                  <el-input-number :min="0" v-model="dataForm.stay" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入屏方式">
                  <el-select v-model="dataForm.inScreenMode" placeholder="请选择">
                    <el-option v-for="item in inScreenModeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="屏幕尺寸">
                  <el-select v-model="screenSize" placeholder="请选择" disabled>
                    <el-option v-for="item in screenSizeOptions" :key="item.device_pixel" :label="item.device_pixel" :value="item.device_pixel">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dataFormSubmitHandle" v-loading="loading" style="background-color: #10aac2;color:#fff;">确认</el-button>
          <el-button class="closeButton" style="background-color:#b5b5b6;color:#fff" @click="onClose">取消</el-button>
        </div>
      </el-dialog>
</template>
<script>
import { getTemplateInfo, addTemplate, addTemplateContent, editTemplateContent, editTemplate, deleteTemplate, getTemplateContent, getGalleryList, getFontSizeByDevicePixel, uploadBoardEditInfo } from '@/api/board/template'
import { devicessize } from '@/api/information/api.js'
import { checkIotBoardContent } from '@/api/board/vocabulary'
import BoardPreview from "./BoardPreview.vue"
export default {
  data() {
    return {
      alignmentNum: 2,
      content: '',
      boardWidth: '',
      boardHeight: '',
      checkList: [], //复选框一组
      obj: '',
      imgUrl: [],
      imgUrlOther: [],
      dialogVisible: false,
      fileList: [
        {
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },
        {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ],
      listquery: [], //拖拽图片
      curDragImgItem: '',
      startTxt_x: '000',
      startTxt_y: '000',
      width: '400',
      height: '40',
      // content: "",
      fontColor: 'FFFF00',
      fontSize: '24',
      fontType: 'KaiTi',
      fontSpacing: 0,
      coordinate: '000000',
      url: '',
      previewContent: '', //预览内容
      ispreviewContent: -1,
      dataForm: {
        category:"",
        textAlign:"center",
        content:"",
        color:"",
        fontSize:"",
        fontFamily:"",
        stay:5,
        inScreenMode:"",
        screenSize:""
      },
      templateContent: [],
      templateDelContent: [],
      dataRule: {
        content: [
          {
            required: true,
            message: '请输入详细内容',
            trigger: 'blur'
          }
        ]
      },
      fontTypeList: [],
      screenSizeOptions: [],
      colorList: [],
      isCurrencyOptions: [
        {
          code: '0',
          content: '通用'
        },
        {
          code: '1',
          content: '仅为智能推荐模板'
        }
      ],
      inScreenModeList: [],
      imgSize: [
        {
          type: '1024*128',
          name: '全屏'
        },
        {
          type: '',
          name: '正常'
        }
      ],
      fontSizeList: [],
      title: '选择图片',
      loading: false,
      isAdd: false,
      templateCategoryList: [],
      infoType: '',
      devicePixelBoolean: false,
      categoryRules: false,
      node:null
    }
  },
  props:{
    mode:{
      type:String,
      default:""
    },
    type: {
      type: String,
      default: ""
    },
    visible:{
      type:Boolean,
      default:false
    },
    screenSize:{
      type:String,
      default:""
    },
    tpl:{
      type:Object,
      default:()=>{}
    }
  },
  components:{
    BoardPreview
  },
  computed: {
    divStyle: function () {
      return {
        width: this.width + 'px',
        height: this.height + 'px'
      }
    }
  },
  watch: {
    visible:{
      handler(newV){
        this.dialogVisible = newV;
      },
      immediate:true
    },
    dialogVisible(newV){
      this.$emit("update:visible", newV);
    },
    "tpl.id":{
      handler(newV){
        // { "id": 3, "category": "0", "content": "保持车距，控制车速", "screenSize": "768*64", "fontColor": "FFFF00", "fontSize": "64", "fontType": "2", "fontSpacing": "0", "rollingSpeed": null, "stopTime": "50", "inScreenMode": "1", "formatStyle": "2", "remark": null, "createTime": "2024-01-06 10:40:19", "updateTime": "2024-01-06 11:04:53" }
        if(this.mode == "edit"){
          this.____convertData();
        }
      }
    }
  },
  mounted() {
    this.node = this.tpl;
  },
  created() {
    this.getDicts('iot_device_font_type').then(res => {
      this.fontTypeList = res.data
      this.dataForm.fontFamily = res.data[0].dictValue;
      // console.log(this.fontTypeList, "字体类型");
    })
    this.getDicts('iot_devices_font_color').then(res => {
      this.colorList = res.data;
      this.dataForm.color = res.data[0].dictValue;
      // console.log(this.colorList, "字体颜色");
    })
    this.getDicts('iot_device_font_inScreen_mode').then(res => {
      this.inScreenModeList = res.data
      this.dataForm.inScreenMode = res.data[0].dictValue;
      // console.log(this.inScreenModeList, "入屏方式");
    })
    this.getDicts('iot_template_category').then(res => {
      this.templateCategoryList = res.data;
      this.dataForm.category = res.data[0].dictValue;
    })
    this.getDicts('iot_device_font_size').then(res => {
      this.fontSizeList = res.data;
      this.dataForm.fontSize = res.data[0].dictValue;
      // this.dataForm.FONT_SIZE = res.data[1].dictValue
    })
    this.getdevicessize()
  },
  methods: {
    ____convertData(){

    },
    onClose(){
        this.dialogVisible = false;
    },
    getFontSizeList(type) {
      

      //TODO 测试数据 后期需转接口
      /*getFontSizeByDevicePixel(this.dataForm.screenSize).then((res) => {
        console.log(res, "根据分辨率筛字体大小");
        this.fontSizeList = res.data.fontSizeList;
        this.dataForm.FONT_SIZE = res.data.defaultFont;
        if(type){
          this.alignment(2)
        }
      });*/
    },
    // 表单提交
    async dataFormSubmitHandle() {
      if (!this.dataForm.content.trim()) {
        return this.$modal.msgError('当前输入内容为空')
      }
      if (this.dataForm.content.indexOf('\\')>=0) {
        return this.$modal.msgError("内容不能含有特殊字符'\\\\'")
      }
      this.$emit("submit");
      //走接口检验内容是否包含敏感字段
      /*checkIotBoardContent(this.dataForm.CONTENT).then(response => {
        if (response.data == 0) {
          return this.$modal.msgError('当前发布内容包含敏感字段，请修改')
        } else if (response.data == 2) {
          return this.$modal.msgError('当前输入内容为空')
        } else {
          this.loading = true
          // let templateId = "";
          let method = 'put'
          if (this.isAdd) {
            if (this.infoType == 1) {
              // 不走接口 存到待下发信息里
              this.dataForm.STAY = Number(this.dataForm.STAY) * 10
              this.$emit('addInfo', this.dataForm)
            } else {
              // 走接口 存到信息模板里
              const params1 = {
                applyType: '',
                category: this.dataForm.category,
                coordinate: '',
                height: '',
                id: '',
                imageUrl: '',
                imgSizeFrom: '',
                inScreenMode: this.dataForm.ACTION,
                remark: '',
                screenSize: this.dataForm.screenSize,
                stopTime: Number(this.dataForm.STAY) * 10,
                vmsType: '',
                width: ''
              }
              const templateContent = []
              templateContent.push({
                content: this.dataForm.CONTENT,
                coordinate: this.dataForm.COORDINATE,
                fontColor: this.getColorStyle(this.dataForm.COLOR),
                fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
                fontSpacing: this.dataForm.SPEED,
                fontType: this.getFontStyle(this.dataForm.FONT)
              })
              // this.$emit("addInfoMode", this.dataForm);
              addTemplate(params1, method).then(data => {
                console.log(data, '新增口')
                let params2 = {
                  templateContent: templateContent,
                  templateId: data
                }
                addTemplateContent(params2)
                  .then(res => {
                    if (res.code == 200) {
                      this.$emit('getActiveNames')
                      this.$message.success('添加成功')
                    }
                  })
                  .catch(err => {
                    throw err
                  })
              })
            }
          } else {
            // // 修改
            // editTemplate(this.dataForm).then((data) => {});
            // this.templateContent.forEach((e) => {
            //   e.img = e.imageName;
            // });
            // var params = {
            //   templateContent: this.templateContent,
            //   templateId: this.dataForm.id,
            //   templateDelContent: this.templateDelContent,
            // };
            // editTemplateContent(params).then((response) => {
            //   // console.log(response, "返回结果");
            // });
          }
          this.loading = false
          this.dialogVisible = false
          this.isAdd = false
          this.$emit('refreshDataList', this.dataForm)
          var textBoard2 = document.getElementsByClassName('textBoard2')
          textBoard2[0].style.position = 'absolute'
        }
      })*/

      this.loading = true
      // let templateId = "";
      let method = 'put'
      if (this.isAdd) {
        if (this.infoType == 1) {
          // 不走接口 存到待下发信息里
          this.dataForm.STAY = Number(this.dataForm.STAY) * 10
          this.$emit('addInfo', this.dataForm)
        } else {
          // 走接口 存到信息模板里
          const params1 = {
            applyType: '',
            category: this.dataForm.category,
            coordinate: '',
            height: '',
            id: '',
            imageUrl: '',
            imgSizeFrom: '',
            inScreenMode: this.dataForm.ACTION,
            remark: '',
            screenSize: this.dataForm.screenSize,
            stopTime: Number(this.dataForm.STAY) * 10,
            vmsType: '',
            width: ''
          }
          const templateContent = []
          templateContent.push({
            content: this.dataForm.CONTENT,
            coordinate: this.dataForm.COORDINATE,
            fontColor: this.dataForm.COLOR,
            fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
            fontSpacing: this.dataForm.SPEED,
            fontType: this.getFontStyle(this.dataForm.FONT),
            formatStyle: this.dataForm.formatStyle
          })
          // this.$emit("addInfoMode", this.dataForm);
          addTemplate(params1, method).then(data => {
            console.log(data, '新增口')
            let params2 = {
              templateContent: templateContent,
              templateId: data
            }
            addTemplateContent(params2)
              .then(res => {
                if (res.code == 200) {
                  this.$emit('getActiveNames')
                  this.$message.success('添加成功')
                }
              })
              .catch(err => {
                throw err
              })
          })
        }
      } else {
        // // 修改
        // editTemplate(this.dataForm).then((data) => {});
        // this.templateContent.forEach((e) => {
        //   e.img = e.imageName;
        // });
        // var params = {
        //   templateContent: this.templateContent,
        //   templateId: this.dataForm.id,
        //   templateDelContent: this.templateDelContent,
        // };
        // editTemplateContent(params).then((response) => {
        //   // console.log(response, "返回结果");
        // });
      }
      this.loading = false
      this.dialogVisible = false
      this.isAdd = false
      this.$emit('refreshDataList', this.dataForm)
      var textBoard2 = document.getElementsByClassName('textBoard2')
      textBoard2[0].style.position = 'absolute'
    },
  }
}
</script>
<style lang="scss" scoped>
.infoBoardButton {
  ::v-deep .el-radio-button--medium .el-radio-button__inner {
    height: 3vh;
    line-height: 3vh;
    padding: 0 0.6vw;
    font-size: 0.7vw;
  }
}
.previewContentCSS {
  border: yellow 1px dashed;
}
/* 页脚 */
.dialog-footer {
  padding-left: 450px;
}
.photoOther img,
.photo img {
  max-width: 300px;
  width: 100%;
  // height: 80px;
}
.infoBoardButton {
  display: flex;
  justify-content: left;
}
.boardTextStyle {
  line-height: 1;
  caret-color: rgba(0, 0, 0, 0);
  user-select: none;
  position: absolute;
  // max-height: 128px;
  overflow: hidden;
}
.blackBoard2 {
  background: #000000;
  display: flex;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  // justify-content: center;
  align-items: center;
}
::v-deep .el-card__body {
  padding: 10px 0;
}

//
::v-deep .el-dialog__header {
  background-color: #145977;
}
::v-deep .el-dialog__body {
  padding: 5px 20px;
  background-color: #145977;
}
::v-deep .el-dialog__footer {
  background-color: #145977;
}
::v-deep .el-card {
  margin-top: 1vh;
  background-color: #145977;
  border: 2px solid #1d7890;
}
::v-deep .el-form-item__label {
  color: #3de8ff;
}
::v-deep .el-input--mini .el-input__inner {
  color: #fff;
  background-color: #096d8c;
}
::v-deep .el-input-number.is-controls-right .el-input-number__decrease {
  color: #fff;
  background-color: #096d8c;
}
::v-deep .el-dialog__title {
  color: #fff;
}
::v-deep .el-textarea__inner {
  color: #fff;
  background-color: #096d8c;
  border-color: #096d8c;
}
::v-deep .el-input-number.is-controls-right .el-input-number__decrease {
  border-color: transparent;
}
::v-deep .el-input-number.is-controls-right .el-input-number__increase {
  border-color: transparent;
  color: #fff;
  background-color: #096d8c;
}
::v-deep .el-button--medium {
  padding: 5px 25px;
  font-size: 14px;
  border-radius: 20px;
  border: transparent;
}
::v-deep .el-radio-button__inner {
  color: #ffffff;
  background-color: pink;
  border-color: #1d58a9;
  -webkit-box-shadow: -1px 0 0 0 #1d58a9;
  box-shadow: -1px 0 0 0 #1d58a9;
  background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
  border-radius: 3px 3px 3px 3px;
  opacity: 1;
  border: none !important;
}
::v-deep .infoBoardButton .el-radio-button--medium .el-radio-button__inner {
  margin: 0 3px;
}
</style>