src/optionSystem/throttleManage/detail/modules/attrite/index.vue

@@ -1,165 +1,217 @@
 <template>
   <div class="attrite">
     <ImportFile
-        ref="importFile"
-        class="inline-16"
-        :bindData="{ownertable:'plm_item',ownerid:$route.query.id,usetype:'default'}"
-        :errorUrl="errorUrl"
-        @clearUrl="errorUrl = null"
-        @onSuccess="bindImportOrder"
-        v-if="tool.checkAuth($route.name,'import')"
+      ref="importFile"
+      class="inline-16"
+      :bindData="{
+        ownertable: 'plm_item',
+        ownerid: $route.query.id,
+        usetype: 'default',
+      }"
+      :errorUrl="errorUrl"
+      @clearUrl="errorUrl = null"
+      @onSuccess="bindImportOrder"
+      v-if="tool.checkAuth($route.name, 'import')"
     />
     <div class="line-box">
-        <div class="item" v-show="source.dc.length">
-            <div class="title">
-                    {{$t('Dc值')}}
-                    <div v-if="tool.checkAuth($route.name,'excel')" style="cursor: pointer;margin-left: 20px;margin-top:-3px"><el-button type="text" size="small" @click="excel('dc')">{{$t('导出')}}</el-button></div>
-            </div>
-            <div class="line" ref="dc"></div>
+      <div class="item" v-show="source.dc.length">
+        <div class="title">
+          {{ $t("Dc值") }}
+          <div
+            v-if="tool.checkAuth($route.name, 'excel')"
+            style="cursor: pointer; margin-left: 20px; margin-top: -3px"
+          >
+            <el-button type="text" size="small" @click="excel('dc')">{{
+              $t("导出")
+            }}</el-button>
+          </div>
         </div>
-        <div class="item" v-show="source.fl.length">
-            <div class="title">
-                    {{$t('Fl值')}}
-                    <div v-if="tool.checkAuth($route.name,'excel')" style="cursor: pointer;margin-left: 20px;margin-top:-3px"><el-button type="text" size="small" @click="excel('fl')">{{$t('导出')}}</el-button></div>
-            </div>
-            <div class="line" ref="fl"></div>
+        <div class="line" ref="dc"></div>
+      </div>
+      <div class="item" v-show="source.fl.length">
+        <div class="title">
+          {{ $t("Fl值") }}
+          <div
+            v-if="tool.checkAuth($route.name, 'excel')"
+            style="cursor: pointer; margin-left: 20px; margin-top: -3px"
+          >
+            <el-button type="text" size="small" @click="excel('fl')">{{
+              $t("导出")
+            }}</el-button>
+          </div>
         </div>
-        <div class="item" v-show="source.kv.length">
-            <div class="title">
-                    {{$t('Kv值')}}
-                    <div v-if="tool.checkAuth($route.name,'excel')" style="cursor: pointer;margin-left: 20px;margin-top:-3px"><el-button type="text" size="small" @click="excel('kv')">{{$t('导出')}}</el-button></div>
-            </div>
-            <div class="line" ref="kv"></div>
+        <div class="line" ref="fl"></div>
+      </div>
+      <div class="item" v-show="source.kv.length">
+        <div class="title">
+          {{ $t("Kv值") }}
+          <div
+            v-if="tool.checkAuth($route.name, 'excel')"
+            style="cursor: pointer; margin-left: 20px; margin-top: -3px"
+          >
+            <el-button type="text" size="small" @click="excel('kv')">{{
+              $t("导出")
+            }}</el-button>
+          </div>
         </div>
-        <div class="item" v-show="source.xt.length">
-            <div class="title">
-                    {{$t('Xt值')}}
-                    <div v-if="tool.checkAuth($route.name,'excel')" style="cursor: pointer;margin-left: 20px;margin-top:-3px"><el-button type="text" size="small" @click="excel('xt')">{{$t('导出')}}</el-button></div>
-            </div>
-            <div class="line" ref="xt"></div>
+        <div class="line" ref="kv"></div>
+      </div>
+      <div class="item" v-show="source.xt.length">
+        <div class="title">
+          {{ $t("Xt值") }}
+          <div
+            v-if="tool.checkAuth($route.name, 'excel')"
+            style="cursor: pointer; margin-left: 20px; margin-top: -3px"
+          >
+            <el-button type="text" size="small" @click="excel('xt')">{{
+              $t("导出")
+            }}</el-button>
+          </div>
         </div>
-        <div class="item" v-show="source.zeta.length">
-            <div class="title">
-                    {{$t('Zeta值')}}
-                    <div v-if="tool.checkAuth($route.name,'import')" style="cursor: pointer;margin-left: 20px;margin-top:-3px"><el-button type="text" size="small" @click="excel('zeta')">{{$t('导出')}}</el-button></div>
-            </div>
-            <div class="line" ref="zeta"></div>
+        <div class="line" ref="xt"></div>
+      </div>
+      <div class="item" v-show="source.zeta.length">
+        <div class="title">
+          {{ $t("Zeta值") }}
+          <div
+            v-if="tool.checkAuth($route.name, 'import')"
+            style="cursor: pointer; margin-left: 20px; margin-top: -3px"
+          >
+            <el-button type="text" size="small" @click="excel('zeta')">{{
+              $t("导出")
+            }}</el-button>
+          </div>
         </div>
+        <div class="line" ref="zeta"></div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import { Line } from '@antv/g2plot'
-import ImportFile from './importFile.vue'
+import { Line } from "@antv/g2plot";
+import ImportFile from "./importFile.vue";
 export default {
-    components:{ImportFile},
-    props:['plm_item_throttleparamid'],
-    data () {
-        return {
-            errorUrl:'',
-            source:{dc:[],fl:[],kv:[],xt:[],zeta:[]},
-            items:{'dc':null,'fl':null,'kv':null,'xt':null,'zeta':null}
-
-        }
-    },
-    methods: {
-        async bindImportOrder (id) {
-            const res = await this.$api.requested({
-                "id": 2024060413385702,
-                "content": {
-                    "plm_item_throttleparamid":this.plm_item_throttleparamid,
-                    "itemid":this.$route.query.id,
-                    "attachmentid":id[0]
-                }
-            })
-            if (res.data !== '成功') {
-                this.errorUrl = res.data
-            }
-            this.tool.showMessage(res,() => {
-                this.$refs.importFile.clearFiles()
-                this.getData()
-            })
-        },
-        async getData (init=false) {
-            let res = await this.$api.requested({
-                "id": 2024060511244902,
-                "content": {
-                    "plm_item_throttleparamid": this.plm_item_throttleparamid
-                },
-            })
-            this.source = res.data
-            init ? this.init() : this.changeData(this.source)
-            console.log(this.source,'参数');
-        },
-        init () {
-            let that = this
-            Object.keys(this.items).forEach(v => _render(v))
-            function _render (el) {
-                that.items[el] = new Line(that.$refs[el], {
-                    data:that.source[el],
-                    padding: 'auto',
-                    xField: 'li',
-                    yField: 'value',
-                    seriesField: 'name',
-                    xAxis: {
-                        tickCount: 5,
-                    },
-                    legend: {
-                        visible:false
-                    },
-                    tooltip: {
-                        formatter: (datum) => {
-                            return { name: datum.name, value: datum.value };
-                        },
-                    },
-                    smooth: true,
-                });
-                that.items[el].render()
-            }
+  components: { ImportFile },
+  props: ["plm_item_throttleparamid"],
+  data() {
+    return {
+      errorUrl: "",
+      source: { dc: [], fl: [], kv: [], xt: [], zeta: [] },
+      items: { dc: null, fl: null, kv: null, xt: null, zeta: null },
+    };
+  },
+  methods: {
+    async bindImportOrder(id) {
+      const res = await this.$api.requested({
+        id: 2024060413385702,
+        content: {
+          plm_item_throttleparamid: this.plm_item_throttleparamid,
+          itemid: this.$route.query.id,
+          attachmentid: id[0],
         },
-        async excel(type) {
-            this.$confirm(this.$t('确认导出当前')+`‘${type}’`+this.$t('值吗?'), this.$t('提示'), {
-            confirmButtonText: this.$t('确定'),
-            cancelButtonText: this.$t('取消'),
-            type: 'warning'
-            }).then(async () => {
-                let res = await this.$api.requested({
-                    "id": 2024060516141102,
-                    "content": {
-                        "itemid": this.$route.query.id,
-                        type
-                    },
-                })
-                this.tool.showMessage(res,() => {
-                    console.log('出发');
-                    window.open(res.data[0].url,'_self')
-                })
-            })
+      });
+      if (res.data !== "成功") {
+        this.errorUrl = res.data;
+      }
+      this.tool.showMessage(res, () => {
+        this.$refs.importFile.clearFiles();
+        this.getData();
+      });
+    },
+    async getData(init = false) {
+      let res = await this.$api.requested({
+        id: 2024060511244902,
+        content: {
+          plm_item_throttleparamid: this.plm_item_throttleparamid,
         },
-        changeData (data) {
-            Object.keys(this.items).forEach(v => this.items[v].changeData(data[v]))
+      });
+      this.source = res.data;
+      init ? this.init() : this.changeData(this.source);
+      console.log(this.source, "参数");
+    },
+    init() {
+      let that = this;
+      console.log("this.source", this.source);
+      Object.keys(this.items).forEach((v) => _render(v));
+      function _render(el) {
+        const data = that.source[el];
+        let range = [0, 1];
+        const isDescending = data.every((item, index, arr) => {
+          return index === 0 || item.value <= arr[index - 1].value;
+        });
+        if (isDescending) {
+          range = [1, 0];
+        } else {
         }
+        that.items[el] = new Line(that.$refs[el], {
+          data: that.source[el],
+          padding: "auto",
+          xField: "li",
+          yField: "value",
+          seriesField: "name",
+          yAxis: {
+            tickCount: 8,
+            range,
+          },
+          legend: {
+            visible: false,
+          },
+          tooltip: {
+            formatter: (datum) => {
+              return { name: datum.name, value: datum.value };
+            },
+          },
+          smooth: true,
+        });
+        that.items[el].render();
+      }
     },
-    created () {
-        this.getData(true)
+    async excel(type) {
+      this.$confirm(
+        this.$t("确认导出当前") + `‘${type}’` + this.$t("值吗?"),
+        this.$t("提示"),
+        {
+          confirmButtonText: this.$t("确定"),
+          cancelButtonText: this.$t("取消"),
+          type: "warning",
+        }
+      ).then(async () => {
+        let res = await this.$api.requested({
+          id: 2024060516141102,
+          content: {
+            itemid: this.$route.query.id,
+            type,
+          },
+        });
+        this.tool.showMessage(res, () => {
+          console.log("出发");
+          window.open(res.data[0].url, "_self");
+        });
+      });
     },
-}
+    changeData(data) {
+      Object.keys(this.items).forEach((v) => this.items[v].changeData(data[v]));
+    },
+  },
+  created() {
+    this.getData(true);
+  },
+};
 </script>
 
 <style scoped>
-.attrite {}
 .attrite .item {
-    margin-bottom: 20px;
-    position: relative;
+  margin-top: 20px;
+  position: relative;
 }
 .attrite .title {
-    font-size: 16px;
-    font-weight: bolder;
-    color: #000000;
-    position: absolute;
-    top: 40px;
-    display: flex;
-    z-index: 2;
+  font-size: 16px;
+  font-weight: bolder;
+  color: #000000;
+  position: absolute;
+  top: 0px;
+  display: flex;
+  z-index: 2;
 }
 </style>