代码提交

whyczyk

2021-10-08 4e0647e3660ba657bc805fd2cce21c4de007caf3

代码提交

 src/assets/js/charts/persons/huodongwei.js

@@ -189,11 +189,11 @@
                value: 380,
                color: '#00DFFC',
            },
            {
                name: '告警占比',
                value: 180,
                color: '#FF8B34',
            },
            // {
            //     name: '告警占比',
            //     value: 180,
            //     color: '#FF8B34',
            // },
            {
                name: '告警总数',
                value: 180,
@@ -204,11 +204,11 @@
                value: 280,
                color: '#2EEA9D',
            },
            {
                name: '告警机房占比',
                value: 70,
                color: '#F3E501',
            }
                // {
                //     name: '告警机房占比',
                //     value: 70,
                //     color: '#F3E501',
                // }
            ]
        }
    }

 src/components/charts/MonCap.vue

@@ -101,11 +101,6 @@
                            color: '#00DFFC',
                        },
                        {
                            name: '告警占比',
                            value: 10,
                            color: '#FF8B34',
                        },
                        {
                            name: '告警总数',
                            value: 10,
                            color: '#ED4882',
@@ -115,11 +110,6 @@
                            value: 10,
                            color: '#2EEA9D',
                        },
                        {
                            name: '告警机房占比',
                            value: 10,
                            color: '#F3E501',
                        }
                        ]
                    }
                    let resData = res.data.data;

 src/pages/index.vue

@@ -1,11 +1,11 @@
<template>
  <div class="indexWarp" ref="indexWarp">
    <div class="datav-header" :style="{backgroundColor:isBgColor?'#031d67':''}">
      <div class="logo">
    <div class="indexWarp" ref="indexWarp">
        <div class="datav-header" :style="{backgroundColor:isBgColor?'#031d67':''}">
            <div class="logo">

      </div>
      <div class="user">
        <!-- <el-dropdown :hide-on-click="false" size="mini">
            </div>
            <div class="user">
                <!-- <el-dropdown :hide-on-click="false" size="mini">
          <span class="el-dropdown-link">
            刘德华<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
@@ -13,543 +13,541 @@
            <el-dropdown-item>退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
      </div>
    </div>
    <div class="nav-banner" ref="navBanner">
      <div class="img"></div>
      <div class="bigText">大屏驾驶舱数据可视化</div>
      <div class="subText">数据管理界面</div>
    </div>
            </div>
        </div>
        <div class="nav-banner" ref="navBanner">
            <div class="img"></div>
            <div class="bigText">大屏驾驶舱数据可视化</div>
            <div class="subText">数据管理界面</div>
        </div>

    <streamer-nav class="streamer-nav" :style="{backgroundColor:isBgColor?'#031d67':''}"></streamer-nav>
    <!-- <div class="nav-shadow"></div> -->
    <div class="projectList">
      <div class="project-header">
        <div class="text">全部应用</div>
      </div>
      <div class="template-list">
        <div class="template-item --blank">
          <div class="template-image imageFirst">
            <el-button type="primary" @click="dialogFormVisible = true"> + 创建项目</el-button>
          </div>
          <!-- <div class="template-info">
        <streamer-nav class="streamer-nav" :style="{backgroundColor:isBgColor?'#031d67':''}"></streamer-nav>
        <!-- <div class="nav-shadow"></div> -->
        <div class="projectList">
            <div class="project-header">
                <div class="text">全部应用</div>
            </div>
            <div class="template-list">
                <div class="template-item --blank">
                    <div class="template-image imageFirst">
                        <el-button type="primary" @click="dialogFormVisible = true"> + 创建项目</el-button>
                    </div>
                    <!-- <div class="template-info">
            <div class="emptyCon">空白画板</div>
          </div> -->
        </div>
        <div class="template-item" v-for="(item,i) in listData" :key="i">
          <div class="template-image"
            :style="{backgroundImage:item.screenshot?'url(' + item.screenshot + '}':'url(' + require('../assets/images/notbg.png') + ')',backgroundSize:'cover'}">
            <div class="screen-edit">
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <i class="preview el-icon-delete" @click="skip(3,item)"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="查看" placement="top">
                <i class="preview el-icon-view lookView" @click="skip(1,item)"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <i class="preview el-icon-edit editview" @click="skip(2,item)"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="激活" placement="top" v-if="item.activeStatus!=1">
                <i class="preview el-icon-bangzhu activation" @click="toActivation(item)"></i>
              </el-tooltip>
            </div>
            <div class="activationText">{{item.activeStatus==1?'已激活':'未激活'}}</div>
          </div>
          <input type="text" class="template-info input-text" :ref="item.ref" v-model="item.name"
            @focus="alterName(item)" @blur="overEvent(item)">
        </div>
      </div>
    </div>
    <el-dialog title="创建数据大屏" width="30%" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="panelForm" label-width="85px">
        <el-form-item label="数据大屏名称">
          <el-input v-model="panelForm.name" autocomplete="off" class="input-text-alert"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMode(panelForm.name)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
                </div>
                <div class="template-item" v-for="(item,i) in listData" :key="i">
                    <div class="template-image" :style="{backgroundImage:item.screenshot?'url(' + item.screenshot + '}':'url(' + require('../assets/images/notbg.png') + ')',backgroundSize:'cover'}">
                        <div class="screen-edit">
                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                <i class="preview el-icon-delete" @click="skip(3,item)"></i>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="查看" placement="top">
                                <i class="preview el-icon-view lookView" @click="skip(1,item)"></i>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                <i class="preview el-icon-edit editview" @click="skip(2,item)"></i>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="激活" placement="top" v-if="item.activeStatus!=1">
                                <i class="preview el-icon-bangzhu activation" @click="toActivation(item)"></i>
                            </el-tooltip>
                        </div>
                        <div class="activationText">{{item.activeStatus==1?'已激活':'未激活'}}</div>
                    </div>
                    <input type="text" class="template-info input-text" :ref="item.ref" v-model="item.name" @focus="alterName(item)" @blur="overEvent(item)">
                </div>
            </div>
        </div>
        <el-dialog title="创建数据大屏" width="30%" :visible.sync="dialogFormVisible">
            <el-form ref="form" :model="panelForm" label-width="85px">
                <el-form-item label="数据大屏名称">
                    <el-input v-model="panelForm.name" autocomplete="off" class="input-text-alert"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addMode(panelForm.name)">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  import streamerNav from '../components/streamerNav.vue'
  import {
    screenActiveConfig
  } from '@/assets/js/api'
  export default {
    components: {
      streamerNav,
    },
    data() {
      return {
        scrollTop: null,
        isBgColor: false,
        dialogFormVisible: false,
        oldName: '',
        img: "../assets/images/notbg.png",
        listData: [],
        panelForm: {
          name: ''
        },
        opt: ""
      }
    },
    mounted() {
      let self = this;
      window.addEventListener('scroll', self.setHeadPosition, true)
      // debugger
      self.opt = self.$route.query;
      self.getData();
    },
    methods: {
      // 适应
      setHeadPosition() {
        let self = this;
        this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let thisHeight = self.$refs.navBanner.offsetHeight;
        if (this.scrollTop > thisHeight) {
          this.isBgColor = true
        } else {
          this.isBgColor = false
        }
      },
      // 获取列表数据
      getData() {
        let self = this;
        // let opt = self.$route.query;
        localStorage.setItem('userId', self.opt.userId);
        self.$axios({
          method: "get",
          url: "/application/all",
          params: {
            userId: self.opt.userId
          }
        }).then(res => {
          if (res.data.code == 1) {
            self.listData = res.data.data.map(item => {
              return item
            });
            console.log(self.listData)
          }
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '网络错误!'
          });
        })
      },
      // 创建
      addMode(name) {
        let self = this;
        self.$axios({
          method: "post",
          url: "/application",
          data: {
            name: name,
            userId: self.opt.userId
          }
        }).then(res => {
          if (res.data.code == 1) {
            self.dialogFormVisible = false;
            self.$message({
              message: res.data.msg,
              type: 'success'
            });
          }
          // 跳转
          setTimeout(() => {
            self.$router.push({
              path: '/design',
              query: {
                id: res.data.data.id,
                name: name
              }
            });
          }, 1000);
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '网络错误!'
          });
        })
      },
      // 点击编辑项目名称
      alterName(item) {
        let self = this;
        self.oldName = function () {
          return item.name;
        }();
      },
      // 失去焦点时修改项目名
      overEvent(item) {
        let self = this;
        if (item.name != this.oldName) {
          self.$axios({
            method: "put",
            url: "/application",
            data: {
              id: item.id,
              name: item.name
            }
          }).then(res => {
            if (res.data.code == 1) {
              self.$message({
                message: res.data.msg,
                type: 'success'
              });
              self.getData();
            }
          }).catch(() => {
            this.$message({
              type: 'error',
              message: '网络错误!'
            });
          })
        }
      },
      // 编辑和浏览 1查看2编辑3删除
      skip(status, item) {
        let self = this;
        switch (status) {
          case 1:
            // 查看
            self.$router.push({
              path: '/exhibition',
              query: {
                id: item.id,
                name: item.name
              }
            });
            break;
          case 2:
            // 编辑
            self.$router.push({
              path: '/design',
              query: {
                id: item.id,
                name: item.name
              }
            });
            break;
          case 3:
            // 删除
            self.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              self.$axios({
                method: "delete",
                url: "/application",
                params: {
                  appId: item.id
                }
              }).then(res => {
                if (res.data.code == 1) {
                  self.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  self.getData();
                }
              }).catch(() => {
                this.$message({
                  type: 'error',
                  message: '网络错误!'
                });
              })
import streamerNav from '../components/streamerNav.vue'
import {
    screenActiveConfig
} from '@/assets/js/api'
export default {
    components: {
        streamerNav,
    },
    data() {
        return {
            scrollTop: null,
            isBgColor: false,
            dialogFormVisible: false,
            oldName: '',
            img: "../assets/images/notbg.png",
            listData: [],
            panelForm: {
                name: ''
            },
            opt: ""
        }
    },
    mounted() {
        let self = this;
        window.addEventListener('scroll', self.setHeadPosition, true)
        // debugger
        self.opt = self.$route.query;
        self.getData();
    },
    methods: {
        // 适应
        setHeadPosition() {
            let self = this;
            this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            let thisHeight = self.$refs.navBanner.offsetHeight;
            if (this.scrollTop > thisHeight) {
                this.isBgColor = true
            } else {
                this.isBgColor = false
            }
        },
        // 获取列表数据
        getData() {
            let self = this;
            // let opt = self.$route.query;
            localStorage.setItem('userId', self.opt.userId);
            self.$axios({
                method: "get",
                url: "/application/all",
                params: {
                    userId: self.opt.userId
                }
            }).then(res => {
                if (res.data.code == 1) {
                    self.listData = res.data.data.map(item => {
                        return item
                    });
                    console.log(self.listData)
                }
            }).catch(() => {
                this.$message({
                    type: 'error',
                    message: '网络错误!'
                });
            })
        },
        // 创建
        addMode(name) {
            let self = this;
            self.$axios({
                method: "post",
                url: "/application",
                data: {
                    name: name,
                    userId: self.opt.userId
                }
            }).then(res => {
                if (res.data.code == 1) {
                    self.dialogFormVisible = false;
                    self.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                }
                // 跳转
                setTimeout(() => {
                    self.$router.push({
                        path: '/design',
                        query: {
                            id: res.data.data.id,
                            name: name
                        }
                    });
                }, 1000);
            }).catch(() => {
                this.$message({
                    type: 'error',
                    message: '网络错误!'
                });
            })
        },
        // 点击编辑项目名称
        alterName(item) {
            let self = this;
            self.oldName = function () {
                return item.name;
            }();
        },
        // 失去焦点时修改项目名
        overEvent(item) {
            let self = this;
            if (item.name != this.oldName) {
                self.$axios({
                    method: "put",
                    url: "/application",
                    data: {
                        id: item.id,
                        name: item.name,
                        userId: self.opt.userId
                    }
                }).then(res => {
                    if (res.data.code == 1) {
                        self.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        self.getData();
                    }
                }).catch(() => {
                    this.$message({
                        type: 'error',
                        message: '网络错误!'
                    });
                })
            }
        },
        // 编辑和浏览 1查看2编辑3删除
        skip(status, item) {
            let self = this;
            switch (status) {
                case 1:
                    // 查看
                    self.$router.push({
                        path: '/exhibition',
                        query: {
                            id: item.id,
                            name: item.name
                        }
                    });
                    break;
                case 2:
                    // 编辑
                    self.$router.push({
                        path: '/design',
                        query: {
                            id: item.id,
                            name: item.name
                        }
                    });
                    break;
                case 3:
                    // 删除
                    self.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        self.$axios({
                            method: "delete",
                            url: "/application",
                            params: {
                                appId: item.id
                            }
                        }).then(res => {
                            if (res.data.code == 1) {
                                self.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                self.getData();
                            }
                        }).catch(() => {
                            this.$message({
                                type: 'error',
                                message: '网络错误!'
                            });
                        })

            }).catch(() => {
                    }).catch(() => {

            })
            break;
                    })
                    break;

          default:
            break;
        }
      },
      toActivation(item) {
        let postData = {
          id: item.id,
          userId: this.opt.userId
        }
        screenActiveConfig(postData).then((res) => {
          if (res.data.code == 1) {
            this.$message({
              type: 'success',
              message: '激活成功!'
            });
            this.getData();
          }
        }).catch((err) => {
          console.log(err)
        });
      },
    },
    destroyed() {
      window.removeEventListener("scroll", this.setHeadPosition, true);
    },
  }
                default:
                    break;
            }
        },
        toActivation(item) {
            let postData = {
                id: item.id,
                userId: this.opt.userId
            }
            screenActiveConfig(postData).then((res) => {
                if (res.data.code == 1) {
                    this.$message({
                        type: 'success',
                        message: '激活成功!'
                    });
                    this.getData();
                }
            }).catch((err) => {
                console.log(err)
            });
        },
    },
    destroyed() {
        window.removeEventListener("scroll", this.setHeadPosition, true);
    },
}
</script>

<style scoped>
  .indexWarp {
    width: 100%;
    min-height: 100%;
    background: #031d67 !important;
    -webkit-font-smoothing: antialiased;
  }
.indexWarp {
    width: 100%;
    min-height: 100%;
    background: #031d67 !important;
    -webkit-font-smoothing: antialiased;
}

  .datav-header {
    display: flex;
    position: fixed;
    top: 0;
    justify-content: space-between;
    z-index: 999;
    width: 100%;
    height: 38px;
    padding: 0 10px;
    text-align: right;
    /* background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 19%, #171717 100%); */
  }
.datav-header {
    display: flex;
    position: fixed;
    top: 0;
    justify-content: space-between;
    z-index: 999;
    width: 100%;
    height: 38px;
    padding: 0 10px;
    text-align: right;
    /* background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 19%, #171717 100%); */
}

  .nav-banner {
    display: flex;
    position: absolute;
    top: 0;
    justify-content: center;
    flex-direction: column;
    background: #031d67;
    height: 360px;
    transition: .5s height cubic-bezier(.65, .05, .36, 1);
    width: 100%;
  }
.nav-banner {
    display: flex;
    position: absolute;
    top: 0;
    justify-content: center;
    flex-direction: column;
    background: #031d67;
    height: 360px;
    transition: 0.5s height cubic-bezier(0.65, 0.05, 0.36, 1);
    width: 100%;
}

  .nav-banner .img {
    position: absolute;
    width: 100%;
    height: 360px;
    background-image: url('../assets/images/banner.png');
    background-size: cover;
    background-position: center;
    transition: .5s opacity cubic-bezier(.4, 0, 1, 1);
    z-index: 1;
  }
.nav-banner .img {
    position: absolute;
    width: 100%;
    height: 360px;
    background-image: url("../assets/images/banner.png");
    background-size: cover;
    background-position: center;
    transition: 0.5s opacity cubic-bezier(0.4, 0, 1, 1);
    z-index: 1;
}

  .nav-banner .bigText {
    margin-top: -80px;
    width: 700px;
    font-size: 52px;
    letter-spacing: 8px;
    /* background-image: -webkit-linear-gradient(left, #a0e5ff, #1bc5f7); */
    background: #43f9fd;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    z-index: 2;
    padding-left: 60px;
  }
.nav-banner .bigText {
    margin-top: -80px;
    width: 700px;
    font-size: 52px;
    letter-spacing: 8px;
    /* background-image: -webkit-linear-gradient(left, #a0e5ff, #1bc5f7); */
    background: #43f9fd;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    z-index: 2;
    padding-left: 60px;
}

  .nav-banner .subText {
    font-size: 26px;
    color: #43f9fd;
    letter-spacing: 5px;
    margin-top: 6px;
    z-index: 2;
    padding-left: 60px;
  }
.nav-banner .subText {
    font-size: 26px;
    color: #43f9fd;
    letter-spacing: 5px;
    margin-top: 6px;
    z-index: 2;
    padding-left: 60px;
}

  .nav-shadow {
    /* background: linear-gradient(180deg, transparent, #171b22); */
    height: 50px;
    position: relative;
    width: 100%;
    z-index: 1;
  }
.nav-shadow {
    /* background: linear-gradient(180deg, transparent, #171b22); */
    height: 50px;
    position: relative;
    width: 100%;
    z-index: 1;
}

  .streamer-nav {
    top: 38px;
    left: 0;
    position: sticky;
  }
.streamer-nav {
    top: 38px;
    left: 0;
    position: sticky;
}

  .projectList {
    padding: 0 30px;
    background: #031d67;
    /* background-image: url('../assets/images/bg-box.png'); */
    z-index: 1;
  }
.projectList {
    padding: 0 30px;
    background: #031d67;
    /* background-image: url('../assets/images/bg-box.png'); */
    z-index: 1;
}

  .projectList .project-header {
    position: sticky;
    top: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #007ed3;
    padding-bottom: 5px;
    padding-top: 10px;
    height: 56px;
    background: #031d67;
    z-index: 1;
    min-width: 1024px;
  }
.projectList .project-header {
    position: sticky;
    top: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #007ed3;
    padding-bottom: 5px;
    padding-top: 10px;
    height: 56px;
    background: #031d67;
    z-index: 1;
    min-width: 1024px;
}

  .projectList .project-header .text {
    max-width: 200px;
    font-size: 14px;
    color: #fff;
    padding: 0 10px;
    border-left: 6px solid #007ed3;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
.projectList .project-header .text {
    max-width: 200px;
    font-size: 14px;
    color: #fff;
    padding: 0 10px;
    border-left: 6px solid #007ed3;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

  .template-list {
    display: flex;
    flex-wrap: wrap;
    color: #fff;
    font-size: 12px;
    margin: 0 -16px;
  }
.template-list {
    display: flex;
    flex-wrap: wrap;
    color: #fff;
    font-size: 12px;
    margin: 0 -16px;
}

  .template-item {
    width: 345px;
    height: 230px;
    box-shadow: 0 0 10px -6px #000;
    border: 1px solid #007ed3;
    margin: 16px;
    transition: .2s;
    outline: 1px solid transparent;
    cursor: default;
    position: relative;
  }
.template-item {
    width: 345px;
    height: 230px;
    box-shadow: 0 0 10px -6px #000;
    border: 1px solid #007ed3;
    margin: 16px;
    transition: 0.2s;
    outline: 1px solid transparent;
    cursor: default;
    position: relative;
}

  .template-list .template-item.--blank,
  .template-list .template-item:hover {
    outline: 1px solid #43f9fd;
  }
.template-list .template-item.--blank,
.template-list .template-item:hover {
    outline: 1px solid #43f9fd;
}

  .template-list .template-image {
    width: 100%;
    height: 184px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
    position: relative;
    background: #021651;
  }
.template-list .template-image {
    width: 100%;
    height: 184px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    position: relative;
    background: #021651;
}

  .template-list .template-image .activationText {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
  }
.template-list .template-image .activationText {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
}

  .template-list .imageFirst {
    height: 100%;
  }
.template-list .imageFirst {
    height: 100%;
}

  .template-list .template-image .el-button--primary {
    background-color: #43f9fd;
    color: #011751;
    border-color: #43f9fd;
.template-list .template-image .el-button--primary {
    background-color: #43f9fd;
    color: #011751;
    border-color: #43f9fd;
}

  }
.template-list .template-item.--blank .template-image {
    box-shadow: inset 0 0 46px 0 rgba(136, 215, 255, 0.29);
}

  .template-list .template-item.--blank .template-image {
    box-shadow: inset 0 0 46px 0 rgba(136, 215, 255, .29);
  }
.template-list .template-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    height: 44px;
    background: #007ed3;
    transition: 0.2s;
}

  .template-list .template-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    height: 44px;
    background: #007ed3;
    transition: .2s;
  }
.template-item.--blank .template-info {
    justify-content: center;
    font-size: 14px;
}

  .template-item.--blank .template-info {
    justify-content: center;
    font-size: 14px;
  }
.input-text {
    width: 100%;
    color: #fff;
    border: 0;
    outline: none;
    background-color: rgba(0, 0, 0, 0);
}

  .input-text {
    width: 100%;
    color: #fff;
    border: 0;
    outline: none;
    background-color: rgba(0, 0, 0, 0);
  }
.template-item .template-info .emptyCon {
    width: 100%;
    text-align: center;
}

  .template-item .template-info .emptyCon {
    width: 100%;
    text-align: center;
  }
.template-list .template-item.--blank .template-info {
    border-top: 1px solid var(--datav-main-color);
}

  .template-list .template-item.--blank .template-info {
    border-top: 1px solid var(--datav-main-color);
  }
.template-item .screen-edit {
    position: absolute;
    opacity: 0;
    display: flex;
    width: 100%;
    height: 100%;
    pointer-events: none;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    background: rgba(0, 0, 0, 0.81);
}

  .template-item .screen-edit {
    position: absolute;
    opacity: 0;
    display: flex;
    width: 100%;
    height: 100%;
    pointer-events: none;
    align-items: center;
    justify-content: center;
    transition: opacity .2s;
    background: rgba(0, 0, 0, .81);
  }
.template-item .screen-edit .preview {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #fff;
    cursor: pointer;
    transition: color 0.2s;
    padding: 5px;
    font-size: 24px;
    background: #007ed3;
    border-radius: 50%;
}

  .template-item .screen-edit .preview {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #fff;
    cursor: pointer;
    transition: color .2s;
    padding: 5px;
    font-size: 24px;
    background: #007ed3;
    border-radius: 50%;
  }
.template-item .screen-edit .preview:hover {
    color: #2681ff;
}

  .template-item .screen-edit .preview:hover {
    color: #2681ff;
  }
.template-item .screen-edit .activation {
    right: 150px;
}

  .template-item .screen-edit .activation {
    right: 150px;
  }
.template-item .screen-edit .editview {
    right: 105px;
}

  .template-item .screen-edit .editview {
    right: 105px;
  }
.template-item .screen-edit .lookView {
    right: 60px;
}

  .template-item .screen-edit .lookView {
    right: 60px;
  }
.template-item:hover .screen-edit {
    opacity: 1;
    pointer-events: all;
}

  .template-item:hover .screen-edit {
    opacity: 1;
    pointer-events: all;
  }
.input-text-alert {
    width: 90%;
}

  .input-text-alert {
    width: 90%;
  }

  .el-dropdown-link {
    color: #fff;
  }
.el-dropdown-link {
    color: #fff;
}
</style>