123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- <!-- 设备列表 -->
- <template>
- <div class="equip-list">
- <Input
- class="baseItemInput"
- :width="188"
- iconType="search"
- v-model="baseItemVal"
- @pressEnter="pressEnter"
- />
- <ul>
- <li @click="getEquipItem('lengganji.svg')">
- <div class="left">
- <div class="icon">
- <!-- <svg class="xxx">
- <use
- xlink:href="@/assets/images/equip/lengganji.svg#notification"
- ></use>
- </svg> -->
- </div>
- </div>
- <div class="right">
- <div class="t">冷干机</div>
- <div class="b">W3456112345093</div>
- </div>
- </li>
- <li @click="getEquipItem('shuibeng.svg')">
- <div class="left">
- <div class="icon"></div>
- </div>
- <div class="right">
- <div class="t">水泵</div>
- <div class="b">A245234345287</div>
- </div>
- </li>
- <li @click="getEquipItem('shuixiang.svg')">
- <div class="left">
- <div class="icon"></div>
- </div>
- <div class="right">
- <div class="t">水箱</div>
- <div class="b">Y2344560096</div>
- </div>
- </li>
- </ul>
- <!-- 添加设备 -->
- <div class="addbtn" @click="openAddEqupModle">
- <i class="el-icon-plus"></i>
- 添加设备示例
- </div>
- </div>
- </template>
- <script>
- import { mapMutations, mapState } from "vuex";
- export default {
- data() {
- return {};
- },
- methods: {
- ...mapMutations(["SETCHOICELEHEND", "SETLEGENDOBJ"]),
- // 打开添加弹窗
- openAddEqupModle() {
- this.$emit("openAddEqupModle");
- },
- // 获取设备图例
- getEquipItem(id) {
- const obj = {
- url: id,
- };
- this.SETLEGENDOBJ(obj);
- const cmd = "EditEuqipment";
- this.SETCHOICELEHEND(cmd);
- },
- },
- computed: {
- ...mapState(["editCmd"]),
- },
- };
- </script>
- <style lang="less" scoped>
- ul,
- li {
- margin: 0;
- padding: 0;
- list-style-type: none;
- }
- .equip-list {
- width: 100%;
- height: 100%;
- position: relative;
- ul {
- li {
- width: 100%;
- height: 48px;
- display: flex;
- cursor: pointer;
- .left {
- width: 28px;
- display: flex;
- height: 100%;
- align-items: center;
- .icon {
- width: 100%;
- height: 28px;
- border-radius: 50% 50%;
- }
- }
- .right {
- padding: 4px;
- box-sizing: border-box;
- .t {
- font-size: 14px;
- color: #1f2429;
- }
- .b {
- font-size: 10px;
- color: #8d9399;
- }
- }
- }
- }
- .addbtn {
- width: 100%;
- height: 40px;
- position: absolute;
- bottom: 0;
- left: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.11);
- cursor: pointer;
- &:hover {
- color: #0091ff;
- }
- }
- }
- </style>
|