1、添加动态图片组件线性添加是否从0开始功能

qianbao
1 parent cb49f9fc
Showing 9 changed files with 506 additions and 2 deletions
src/views/bigscreenDesigner/designer/components/dynamicAddPicAdress.vue
src/views/bigscreenDesigner/designer/components/dynamicForm.vue
src/views/bigscreenDesigner/designer/tools/configure/div/widget-dt-image.js
src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-stack.js
src/views/bigscreenDesigner/designer/tools/main.js
src/views/bigscreenDesigner/designer/widget/div/widgetDtImage.vue
src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue
src/views/bigscreenDesigner/designer/widget/temp.vue
src/views/bigscreenDesigner/designer/widget/widget.vue
+<template>
+  <div>
+    <el-button
+      type="primary"
+      size="small"
+      icon="el-icon-plus"
+      plain
+      @click="handleAddClick"
+    >新增</el-button
+    >
+    <el-table :data="formData" style="width: 100%">
+      <el-table-column prop="name" label="名称" width="130" />
+      <el-table-column prop="key" label="判断值" width="70" />
+      <el-table-column label="操作" width="100">
+        <template slot-scope="scope">
+          <div class="button-group">
+            <el-button
+              @click="handleEditorClick(scope.$index, scope.row)"
+              type="text"
+              size="small"
+            >编辑</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="handleDeleteClick(scope.$index, scope.row)"
+            >删除</el-button
+            >
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog
+      title="新增"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <el-form :model="rowFormData" label-width="70px">
+        <el-form-item label="名称:">
+          <el-input
+            v-model.trim="rowFormData['name']"
+            placeholder="请输入名称"
+            size="mini"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item label="判断值:" label-width="70px">
+          <el-input
+            v-model.trim="rowFormData['key']"
+            placeholder="请输入判断值"
+            size="mini"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item label="图片地址:">
+          <el-input
+            v-model.trim="rowFormData['value']"
+            placeholder="请输入已上传的图片地址"
+            size="mini"
+          >
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="handleSaveClick"
+        >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  model: {
+    prop: "formData",
+    event: "input"
+  },
+  props: {
+    formData: Array
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      rowFormData: {
+        name: "",
+        key: "",
+        value:""
+      },
+      flag: true, // true 新增， false 编辑
+      indexEditor: -1, // 编辑第几个数据
+      tableData: []
+    };
+  },
+  methods: {
+    // 新增
+    handleAddClick() {
+      this.rowFormData = {};
+      this.flag = true;
+      this.dialogVisible = true;
+    },
+    // 编辑
+    handleEditorClick(index, row) {
+      this.flag = false;
+      this.rowFormData = this.deepClone(row);
+      this.indexEditor = index;
+      this.dialogVisible = true;
+    },
+    // 关闭
+    handleClose() {
+      this.dialogVisible = false;
+    },
+    // 保存
+    handleSaveClick() {
+      if (this.flag) {
+        // 新增
+        this.formData.push(this.rowFormData);
+        this.dialogVisible = false;
+      } else {
+        // 编辑
+        this.formData[this.indexEditor] = this.rowFormData;
+        this.$set(this.formData, this.indexEditor, this.rowFormData);
+        this.dialogVisible = false;
+      }
+      this.$emit("input", this.formData);
+      this.$emit("change", this.formData);
+    },
+    // 删除
+    handleDeleteClick(index) {
+      this.formData.splice(index, 1);
+      this.$emit("input", this.formData);
+      this.$emit("change", this.formData);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+/deep/::-webkit-scrollbar-track-piece {
+  background-color: transparent;
+}
+/deep/ .el-table__body-wrapper::-webkit-scrollbar {
+  width: 0; // 横向滚动条
+  height: 8px; // 纵向滚动条 必写
+}
+// 滚动条的滑块
+/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: rgba(144, 146, 152, 0.3);
+}
+/deep/.el-table,
+/deep/.el-table__expanded-cell,
+/deep/.el-table th,
+/deep/.el-table tr {
+  background-color: transparent !important;
+  color: #859094 !important;
+  font-size: 12px !important;
+}
+/deep/.el-table td,
+/deep/.el-table th.is-leaf {
+  border-bottom: none;
+  line-height: 26px;
+}
+/deep/.el-table tbody tr:hover {
+  background-color: #263445 !important;
+}
+/deep/.el-table tbody tr:hover > td {
+  background-color: #263445 !important;
+}
+/deep/.el-table::before {
+  height: 0;
+}
+.button-group .el-button {
+  padding: 0;
+}
+</style>
@@ -183,6 +183,12 @@
             :chart-type="item.chartType"
             @change="changed($event, item.name)"
           />
+          <dynamic-add-pic-adress
+            v-if="item.type == 'dynamic-add-pic-adress' && inputShow[item.name]"
+            v-model="formData[item.name]"
+            :chart-type="item.chartType"
+            @change="changed($event, item.name)"
+          />
           <dynamic-add-radar
             v-if="item.type == 'dynamic-add-radar' && inputShow[item.name]"
             v-model="formData[item.name]"
@@ -324,6 +330,7 @@ import CustomUploadNew from &quot;./customUploadNew&quot;;
 import DatasourceSelect from "./datasourceSelect";
 import CustomUploadMulti from "./customUploadMulti";
 import dynamicAddSvg from "./dynamicAddSvg.vue";
+import dynamicAddPicAdress from "./dynamicAddPicAdress";
 import { mapState } from 'vuex';
 export default {
   name: "DynamicForm",
@@ -338,7 +345,8 @@ export default {
     CustomUploadNew,
     CustomUploadMulti,
     DatasourceSelect,
-    dynamicAddSvg
+    dynamicAddSvg,
+    dynamicAddPicAdress
   },
   model: {
     prop: "value",
+/*
+ * @Descripttion: 图片json
+ */
+export const widgetDtImage = {
+  code: 'widget-dt-image',
+  type: 'html',
+  tabName: '图层',
+  label: '动态图片',
+  icon: 'icontupian',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '动态图片',
+      },
+      {
+        type: 'el-switch',
+        label: '开启旋转',
+        name: 'startRotate',
+        required: false,
+        placeholder: '',
+        value: false,
+      },
+      {
+        type: 'el-slider',
+        label: '旋转速度',
+        name: 'rotationSpeed',
+        required: false,
+        placeholder: '',
+        value: 70
+      },
+      {
+        type: 'el-slider',
+        label: '透明度',
+        name: 'transparency',
+        required: false,
+        placeholder: '',
+        value: 100
+      },
+      {
+        type: 'el-input-number',
+        label: '圆角',
+        name: 'borderRadius',
+        required: false,
+        placeholder: '',
+        value: '0'
+      },
+      {
+        type: 'custom-upload-new',
+        label: '参考地址',
+        name: 'imageAdress',
+        required: false,
+        placeholder: '',
+        value: '',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+      },
+      {
+        type: 'el-input-text',
+        label: '判断值',
+        name: 'textPic',
+        required: false,
+        placeholder: '',
+        value: 'block',
+      },
+      {
+        type: 'el-select-static',
+        label: '主数据源数据',
+        name: 'slectedDataType',
+        require: false,
+        placeholder: '',
+        selectOptions: [],
+        value: '',
+      },
+      {
+        type: 'dynamic-add-pic-adress',
+        label: '',
+        name: 'dynamicAddPicAdress',
+        required: false,
+        placeholder: '',
+        value: [
+          {name: '图片1', key: 'block', value: ''}
+        ]
+      },
+
+    ],
+    // 数据
+    data: [],
+    // 坐标
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 300,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 200,
+      },
+    ],
+  }
+}
@@ -47,6 +47,14 @@ export const widgetLineStack = {
               value: true,
             },
             {
+              type: 'el-switch',
+              label: '0开始',
+              name: 'zeroStart',
+              required: false,
+              placeholder: '',
+              value: false,
+            },
+            {
               type: 'el-slider',
               label: '点大小',
               name: 'pointSize',
@@ -3,6 +3,7 @@ import { widgetBorderBox } from &quot;./configure/div/widget-border-box&quot;;
 import { widgetDecoration } from "./configure/div/widget-decoration";
 import { widgetCapsuleChart} from "./configure/barCharts/widget-capsule-chart";
 import { widgetImage } from "./configure/div/widget-image"
+import { widgetDtImage } from "./configure/div/widget-dt-image"
 import { widgetSliders } from "./configure/div/widget-slider"
 import { widgetText } from "./configure/texts/widget-text"
 import { widgetMarquee } from "./configure/texts/widget-marquee"
@@ -52,6 +53,7 @@ export const widgetTool = [
   widgetDecoration,
   // widgetDiv,
   widgetImage,
+  widgetDtImage,
   widgetSliders,
   // type=html类型的组件
   widgetText,
+<template>
+  <div class="imagebox" :style="styleColor" v-if="isRouterAlive">
+<!--    <div class="bg" v-if="!imgStyle.imageAdress"></div>-->
+    <div v-if="imageAdressShow">
+      <img :class="transStyle.startRotate ? 'startImg' : ''" :style="imgStyle" :src="imageAdress" alt="" />
+    </div>
+  </div>
+</template>
+<script>
+import {mapState} from "vuex";
+export default {
+  name: "WidgetDtImage",
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {},
+      optionsData: {},
+      optionsSetUp: {},
+      picData:[],
+      imageAdress:'',
+      imageAdressShow:true,
+      isRouterAlive:false,
+      flagInter: null,
+    };
+  },
+  computed: {
+    ...mapState('dataSource', ['staticData','staticRefreshTime']),
+    transStyle() {
+      return this.objToOne(this.options);
+    },
+    styleColor() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        background: this.transStyle.background,
+        "text-align": this.transStyle.textAlign,
+        width: this.transStyle.width + "px",
+        height: this.transStyle.height + "px",
+        left: this.transStyle.left + "px",
+        top: this.transStyle.top + "px",
+        right: this.transStyle.right + "px",
+        "border-radius": this.transStyle.borderRadius + 'px'
+      };
+    },
+    imgStyle() {
+      return {
+        width: this.transStyle.width + "px",
+        height: this.transStyle.height + "px",
+        "border-radius": this.transStyle.borderRadius + "px",
+        opacity: this.transStyle.transparency / 100,
+        animation: this.transStyle.startRotate ? "turn " + (101 - this.transStyle.rotationSpeed) / 10 + "s linear infinite" : "none"
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.options = val;
+        this.optionsData = val.data;
+        this.optionsSetUp = val.setup;
+        this.initData();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.options = this.value;
+  },
+  mounted() {
+    this.options = this.value;
+    this.optionsData = this.value.data;
+    this.setPicValue();
+  },
+  methods: {
+    // vue hack 之强制刷新组件
+    reload(){
+      this.isRouterAlive=false;
+      this.$nextTick(function(){
+        this.isRouterAlive=true;
+      })
+    },
+    initData() {
+      this.handlerPicData();
+    },
+    handlerPicData(){
+      this.setPicValue();
+    },
+    //初始化设置pic值
+    setPicValue(){
+      const {slectedDataType} = this.transStyle;
+      if(this.isNotBlank(slectedDataType)){
+        const refreshTime = this.staticRefreshTime || 300000;
+        this.dynamicDataFn(refreshTime);
+      }else{
+        this.getEchartData();
+      }
+    },
+    dynamicDataFn(refreshTime) {
+      if (this.ispreview) {
+        this.flagInter = setInterval(() => {
+          this.getEchartData();
+        }, refreshTime);
+      } else {
+        this.getEchartData();
+      }
+    },
+    getEchartData() {
+      this.imageAdress=this.getShowPic();
+      this.imageAdressShow = this.isNotBlank(this.imageAdress);
+      // console.log("this.imageAdress",this.imageAdress, this.imageAdressShow)
+      this.reload();
+    },
+    getShowPic() {
+      const {textPic, slectedDataType} = this.transStyle;
+      const key = this.staticData[slectedDataType] || textPic;
+      const dataPic = this.value.setup.dynamicAddPicAdress;
+      // if(this.isBlank(key) || this.isBlankArray(dataPic)){
+      //   return this.transStyle.imageAdress;
+      // }
+      for (let i = 0; i < dataPic.length; i++) {
+        if(dataPic[i].key==key){
+          /** 控制svg图片拖动，原理在于设置svg的viewbox属性，viewbox的第一个参数控制左右位置，第二个参数设置上下位置  */
+          /** 控制svg图片放大缩小，原理在于设置svg的viewbox属性，viewbox的第三个参数控制左右大小，第四个参数设置上下大小 */
+            //设置svg 自适应  添加属性 viewBox="0,0,640,480"
+          const pic = dataPic[i].value;
+          return pic;
+        }
+      }
+      return null;
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.imagebox {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+
+  .bg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: url(data:image/png;base64,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) no-repeat;
+    background-size: 100% 100%;
+  }
+}
+
+
+.imagebox img {
+  width: 100%;
+  height: 100%;
+}
+
+.startImg {
+  animation: turn 1s linear infinite;
+}
+</style>
@@ -135,6 +135,7 @@ export default {
         show: optionsSetup.hideX,
         // 坐标轴名称
         name: optionsSetup.nameX,
+        boundaryGap:false,
         nameTextStyle: {
           color: optionsSetup.nameColorX,
           fontSize: optionsSetup.nameFontSizeX
@@ -369,7 +370,10 @@ export default {
       xAxisList = this.setUnique(xAxisList);
       yAxisList = this.setUnique(yAxisList);
       for (const i in yAxisList) {
-        const data = new Array(xAxisList.length).fill(0);
+        let data = [];
+        if(optionsSetup.zeroStart){
+          data = new Array(xAxisList.length).fill(0);
+        }
         for (const j in xAxisList) {
           for (const k in val) {
             if (val[k].name == yAxisList[i]) {
@@ -379,6 +383,7 @@ export default {
             }
           }
         }
+        // console.log(data);
         series.push({
           name: yAxisList[i],
           type: "line",
@@ -10,6 +10,7 @@ import widgetText from &quot;./text/widgetText.vue&quot;;
 import WidgetMarquee from "./text/widgetMarquee.vue";
 import widgetTime from "./text/widgetTime.vue";
 import widgetImage from "./div/widgetImage.vue";
+import widgetDtImage from "./div/widgetDtImage";
 import widgetSlider from "./div/widgetSlider.vue";
 import widgetVideo from "./video/widgetVideo.vue";
 import WidgetIframe from "./text/widgetIframe.vue";
@@ -58,6 +59,7 @@ export default {
     WidgetMarquee,
     widgetTime,
     widgetImage,
+    widgetDtImage,
     widgetSlider,
     widgetVideo,
     WidgetIframe,
@@ -47,6 +47,7 @@ import widgetHeatmap from &quot;./heatmap/widgetHeatmap&quot;;
 import widgetRadar from "./radar/widgetRadar";
 import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
 import widgetImage from "./div/widgetImage.vue";
+import widgetDtImage from "./div/widgetDtImage";
 import widgetSlider from "./div/widgetSlider.vue";
 import widgetBorderBox from "./div/widgetBorderBox.vue";
 import widgetDecoration from "./div/widgetDecoration.vue";
@@ -72,6 +73,7 @@ export default {
     WidgetMarquee,
     widgetTime,
     widgetImage,
+    widgetDtImage,
     widgetSlider,
     widgetVideo,
     WidgetIframe,