123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274 |
- <template>
- <div class="wind-site-warning">
- <div class="search pd-16">
- <el-row class="mg-b-16">
- <div class="query">
- <input class="search-input" name="query" v-model="query" />
- </div>
- <button class="btn search" @click="search">搜索</button>
- <div class="empty"></div>
- <button class="btn empty-btn" @click="reset">重置</button>
- </el-row>
- <el-row class="options">
- <el-col class="option-item" :span="8" v-for="(option, index) in options" :key="option" @click="onOptionClick(option, index)" :class="{ active: option.isActive, 'has-value': option.count != '' }">
- <div class="count">{{ option.count }}</div>
- <div class="text">{{ option.text }}</div>
- </el-col>
- </el-row>
- </div>
- <div class="warning-list">
- <Table :data="warning" />
- </div>
- </div>
- </template>
- <script>
- import Table from "../../../../components/coms/table/table.vue";
- export default {
- components: {
- Table,
- },
- data() {
- return {
- query: "",
- options: [],
- ackupData: {},
- warning: {
- column: [
- // {
- // name: "报警编号",
- // field: "Code",
- // is_num: true, // 是否为数字
- // },
- {
- name: "PLC变量名",
- field: "name",
- },
- {
- name: "报警信息",
- field: "value",
- },
- {
- name: "报警状态",
- field: "data1",
- template: function(data) {
- if (data === 1) return "<div class='error-state'></div>";
- else return "正常";
- },
- },
- ],
- data: [],
- },
- activeArray: [],
- isSearch: false,
- };
- },
- props: {
- data: {
- type: Object,
- default: () => {},
- },
- },
- mounted() {
- this.backupData = this.BASE.deepCopy(this.data);
- this.riseData(this.data);
- },
- methods: {
- onOptionClick(option, index) {
- option.isActive = !option.isActive;
- this.activeArray[index] = !this.activeArray[index];
- let warningData = [];
- this.activeArray.forEach((bool, index) => {
- if (bool) {
- this.options[index].vos.forEach((ele) => {
- warningData.push(ele);
- });
- }
- });
- this.warning.data = warningData;
- this.isSearch = false;
- this.query = "";
- },
- // 格式化数据
- riseData(data) {
- let options = [];
- let warningData = [];
- let index = 0;
- for (let key in data) {
- data.index = index;
- if (this.activeArray.length < index + 1) {
- this.activeArray.push(false);
- }
- options.push({
- id: data[key].id,
- text: data[key].name,
- vos: data[key].vos,
- count: data[key].vos.length,
- isActive: this.activeArray[index],
- });
- if (this.activeArray[index]) {
- data[key].vos.forEach((ele) => {
- warningData.push(ele);
- });
- }
- index++;
- }
- this.options = options;
- this.warning.data = warningData;
- if (this.isSearch) {
- this.search();
- }
- },
- search() {
- // 压器类总
- this.isSearch = true;
- if (this.query) {
- let warningData = [];
- this.BASE.deepCopy(this.warning.data).forEach((ele) => {
- if (ele.name.indexOf(this.query) !== -1) {
- warningData.push(ele);
- }
- });
- this.warning.data = warningData;
- } else {
- this.riseData(this.data);
- }
- },
- reset() {
- for (let i = 0; i < this.activeArray.length; i++) {
- this.activeArray[i] = false;
- }
- this.isSearch = false;
- this.query = "";
- let sourceMap = this.BASE.deepCopy(this.backupData);
- this.riseData(sourceMap, true);
- },
- },
- watch: {
- data(res) {
- this.backupData = this.BASE.deepCopy(res);
- this.riseData(res);
- },
- },
- };
- </script>
- <style lang="less">
- .wind-site-warning {
- border: 1px solid @darkgray;
- .search {
- .query {
- height: 100%;
- flex: 0 0 auto;
- .search-input {
- background: transparent;
- border: 1px solid @darkgray;
- padding: 0.741vh;
- color: @gray;
- outline: unset;
- border-radius: 0%;
- margin-right: 0.741vh;
- }
- }
- button {
- height: 100%;
- flex: 0 0 auto;
- background: transparent;
- border: 1px solid @darkgray;
- padding: 0.741vh 1.481vh;
- color: @gray;
- font-size: @fontsize-s;
- cursor: pointer;
- }
- .empty {
- flex: auto;
- }
- .options {
- .option-item {
- display: flex;
- padding-bottom: 0.741vh;
- color: @gray;
- cursor: pointer;
- font-size: @fontsize-s;
- .count {
- flex: 0 0 3.704vh;
- padding: 0.37vh;
- text-align: center;
- border: 1px solid @darkgray;
- margin-right: 0.37vh;
- line-height: 2.222vh;
- }
- .text {
- flex: 1 0 auto;
- padding: 0.741vh;
- text-align: center;
- border: 1px solid @darkgray;
- }
- & + .option-item {
- padding-left: 0.741vh;
- }
- &:nth-child(3n + 1) {
- padding-left: 0px;
- }
- &.has-value {
- .text,
- .count {
- border-color: @purple;
- color: @purple;
- }
- }
- &.active,
- &:hover {
- .text,
- .count {
- border-color: @green;
- color: @green;
- }
- }
- }
- }
- }
- .warning-list {
- .error-state {
- width: 0.741vh;
- height: 0.741vh;
- border-radius: 50%;
- background-color: @red;
- margin: auto;
- }
- tbody {
- height: 571px;
- }
- }
- }
- </style>
|