首页读取静态JSON文件

src/components/chart/LineChart.vue

@@ -98,7 +98,7 @@ export default {
         yAxis: {
           min: dataMin,
           max: dataMax,
-          interval: dataMax - dataMin,
+          interval: dataMax === dataMin ? dataMax : dataMax - dataMin,
           type: "value",
           scale: true,
           splitLine: {

src/components/common/BottomForm/CreateTaskForm.vue

@@ -287,8 +287,8 @@ export default {
             .then(() => {
               // 开始提交
               let params = new FormData();
-              params.append("columnId", "32");
-              params.append("modelId", "30");
+              params.append("columnId", "48");
+              params.append("modelId", "51");
               params.append("content", JSON.stringify(this.createTaskForm));
               this.$Post(this.urlsCollection.addContent, params).then(
                 res => {

src/components/common/BottomForm/MyMission.vue

@@ -208,7 +208,7 @@ export default {
       if (!this.tableInitLoading) {
         this.tableInitLoading = true;
         let params = new FormData();
-        params.append("columnId", "32");
+        params.append("columnId", "48");
         params.append("pageSize", this.paginationData.pageSize);
         params.append("page", this.paginationData.currentPage - 1);
         let searchParam = [];

src/components/common/StepsMyBox.vue

@@ -218,7 +218,7 @@ export default {
     getAllTasks() {
       let params = new FormData();
       this.countUser = 0;
-      params.append("columnId", "32");
+      params.append("columnId", "48");
       params.append("states", "2,3");
       params.append("pageSize", 999);
       params.append("page", 0);

src/components/layout/MenuCard.vue

@@ -2,7 +2,7 @@
   <!-- 外边框 -->
   <div
     ref="menuCard"
-    v-loading="!menuData"
+    v-loading="dataInitLoading"
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)"
     :class="$ifLeftMenu(menuData.title != undefined ? menuData.title : '') ? 'menuMainBoxA' : 'menuMainBox'"
@@ -133,6 +133,7 @@ export default {
   components: { TagTableCard, ChartCard, TagCard },
   data() {
     return {
+      dataInitLoading: false,
       resData: [],
       chartCardDataIndex: 0
     };
@@ -140,12 +141,83 @@ export default {
   mounted() {
     this.$nextTick(() => {
       if (this.menuData && this.menuData.topSolt && this.menuData.topSolt.commonDataGetUrl) {
+        this.dataInitLoading = true;
         this.$Get("/static/json/home/" + this.menuData.topSolt.commonDataGetUrl).then(
           res => {
-            // this.resData = res;
+            let listMap = {};
+            let tableData = res;
+            tableData.forEach(item => {
+              if (!listMap[item.name]) {
+                // type,data
+                let listMap2 = {};
+                if (item.data) {
+                  item.data.forEach(item2 => {
+                    if (listMap2[item2.type]) {
+                      listMap2[item2.type]["categoryData"].push(item2.year);
+                      listMap2[item2.type]["valueData"].push(item2.area);
+                    } else {
+                      let listMapItem = {};
+                      listMapItem["categoryData"] = [item2.year];
+                      listMapItem["valueData"] = [item2.area];
+                      listMap2[item2.type] = listMapItem;
+                    }
+                  });
+                }
+                listMap[item.name] = listMap2;
+              } else {
+                console.error("json文件内容重复，重复街镇：", item.name);
+              }
+            });
+            if (listMap) {
+              let categoryData = [];
+              for (let listMapKeys in listMap) {
+                // type,data
+                categoryData = listMap[listMapKeys];
+                if (categoryData) {
+                  if (!listMap["全部"]) {
+                    listMap["全部"] = {};
+                  }
+                  for (let categoryDataKeys in categoryData) {
+                    if (categoryData[categoryDataKeys]) {
+                      let categoryDataItemData = categoryData[categoryDataKeys];
+                      if (listMap["全部"][categoryDataKeys]) {
+                        categoryDataItemData.valueData.forEach((valueIndexItem, index) => {
+                          if (listMap["全部"][categoryDataKeys].valueData[index]) {
+                            listMap["全部"][categoryDataKeys].valueData[index] += Number(valueIndexItem);
+                          } else {
+                            listMap["全部"][categoryDataKeys].valueData[index] = Number(valueIndexItem);
+                          }
+                        });
+                      } else {
+                        listMap["全部"][categoryDataKeys] = categoryDataItemData;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            this.resData = listMap;
+            if (this.resData["全部"]) {
+              let _index = 0;
+              let sum = 0;
+              for (let keys in this.resData["全部"]) {
+                this.menuData.topSolt.commonData[_index].title = keys;
+                this.menuData.topSolt.commonData[_index].categoryData = this.resData["全部"][keys].categoryData;
+                this.menuData.topSolt.commonData[_index].valueData = this.resData["全部"][keys].valueData;
+                this.menuData.topSolt.commonData[_index].value =
+                  this.resData["全部"][keys].valueData[this.resData["全部"][keys].valueData.length - 1];
+                sum += this.menuData.topSolt.commonData[_index].value;
+                _index++;
+              }
+              if (this.menuData.topSolt.commonData[4]) {
+                this.menuData.topSolt.commonData[4].valueData = [sum];
+              }
+            }
+            this.dataInitLoading = false;
           },
           error => {
             console.log("error:", error, this.menuData);
+            this.dataInitLoading = false;
           }
         );
       } else if (this.menuData && this.menuData.topSolt && this.menuData.topSolt.columnId) {
@@ -200,14 +272,18 @@ export default {
                 });
               }
               this.resData = listMap;
-              this.menuData.topSolt.commonData[0].categoryData = this.resData["全部"].categoryData;
-              this.menuData.topSolt.commonData[0].valueData = this.resData["全部"].valueData;
+              this.changeHomeSpecialTown();
             } else {
               this.resData = [];
+              this.changeHomeSpecialTown();
             }
+            this.dataInitLoading = false;
           },
           error => {
+            this.resData = [];
+            this.changeHomeSpecialTown();
             console.log("error:", error, this.menuData);
+            this.dataInitLoading = false;
           }
         );
       }
@@ -262,10 +338,41 @@ export default {
   methods: {
     // 切换街镇时
     changeHomeSpecialTown() {
-      if (this.resData[this.$store.state.homeSpecialTown]) {
-        this.menuData.topSolt.commonData[0].categoryData = this.resData[this.$store.state.homeSpecialTown].categoryData;
-        this.menuData.topSolt.commonData[0].valueData = this.resData[this.$store.state.homeSpecialTown].valueData;
-        console.log(this.menuData, this.resData, this.$store.state.homeSpecialTown);
+      if (this.resData[this.$store.state.homeSpecialTown] && this.menuData.topSolt.commonData) {
+        if (this.resData[this.$store.state.homeSpecialTown].categoryData) {
+          this.menuData.topSolt.commonData[0].categoryData = this.resData[this.$store.state.homeSpecialTown].categoryData;
+          this.menuData.topSolt.commonData[0].valueData = this.resData[this.$store.state.homeSpecialTown].valueData;
+        } else {
+          let _index = 0;
+          let sum = 0;
+          for (let keys in this.resData["全部"]) {
+            this.menuData.topSolt.commonData[_index].title = keys;
+            this.menuData.topSolt.commonData[_index].categoryData =
+              this.resData[this.$store.state.homeSpecialTown][keys].categoryData;
+            this.menuData.topSolt.commonData[_index].valueData =
+              this.resData[this.$store.state.homeSpecialTown][keys].valueData;
+            this.menuData.topSolt.commonData[_index].value =
+              this.resData[this.$store.state.homeSpecialTown][keys].valueData[
+                this.resData[this.$store.state.homeSpecialTown][keys].valueData.length - 1
+              ];
+            sum += this.menuData.topSolt.commonData[_index].value;
+            _index++;
+          }
+          if (this.menuData.topSolt.commonData[4]) {
+            this.menuData.topSolt.commonData[4].valueData = [sum];
+          }
+        }
+      } else if (this.menuData && this.menuData.topSolt && this.menuData.topSolt.commonData) {
+        this.menuData.topSolt.commonData.forEach((item, index) => {
+          this.menuData.topSolt.commonData[index].categoryData = [];
+          this.menuData.topSolt.commonData[index].valueData = [];
+          if (this.menuData.topSolt.commonData[index].valueData) {
+            this.menuData.topSolt.commonData[index].valueData = 0;
+          }
+          if (this.menuData.topSolt.commonData[index].value) {
+            this.menuData.topSolt.commonData[index].value = 0;
+          }
+        });
       }
     },
     // 当用户使用光标切换交互组件时触发

src/config/common.js

@@ -619,11 +619,11 @@ export const menusMap = {
       gotoPageInfo: { index: "2", subIndex: "2", name: "水资源" },
       topSolt: {
         commonName: "TagCard",
+        commonDataGetUrl: "layout_water.json",
         commonData: [
           {
             type: "tb",
             title: "水域数量",
-            value: 654,
             unit: "条",
             categoryData: ["2019", "2020", "2021"],
             valueData: [40, 420, 654],
@@ -631,7 +631,6 @@ export const menusMap = {
           {
             type: "tb",
             title: "区管河道数量",
-            value: 654,
             unit: "条",
             categoryData: ["2019", "2020", "2021"],
             valueData: [400, 420, 654],
@@ -639,7 +638,6 @@ export const menusMap = {
           {
             type: "tb",
             title: "镇管河道数量",
-            value: 654,
             unit: "条",
             categoryData: ["2019", "2020", "2021"],
             valueData: [400, 40, 654],
@@ -659,11 +657,11 @@ export const menusMap = {
       gotoPageInfo: { index: "2", subIndex: "3", name: "林地资源" },
       topSolt: {
         commonName: "TagCard",
+        commonDataGetUrl: "layout_forest.json",
         commonData: [
           {
             type: "lr",
             title: "林地面积",
-            value: 654,
             unit: "公顷",
             categoryData: ["2019", "2020", "2021"],
             valueData: [40, 420, 654],
@@ -671,7 +669,6 @@ export const menusMap = {
           {
             type: "lr",
             title: "公益林面积",
-            value: 654,
             unit: "公顷",
             categoryData: ["2019", "2020", "2021"],
             valueData: [400, 420, 654],
@@ -684,59 +681,60 @@ export const menusMap = {
     },
   ],
   leftW: [
-    {
-      type: "imageMenu",
-      index: 0,
-      title: "基本农田被违规占用",
-      titleWidth: 81,
-      boxHeight: 236,
-      imageUrl: "/static/images/2.png",
-      menuIndex: "2",
-      subMenuIndex: "1",
-      menuName: "土地资源",
-      position: "left",
-      gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
-    },
-    {
-      type: "imageMenu",
-      index: 1,
-      title: "基本农田种林",
-      titleWidth: 81,
-      boxHeight: 236,
-      imageUrl: "/static/images/3.png",
-      menuIndex: "2",
-      subMenuIndex: "1",
-      menuName: "土地资源",
-      position: "left",
-      gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
-    },
-    {
-      type: "imageMenu",
-      index: 2,
-      title: "基本农田抛荒",
-      titleWidth: 81,
-      boxHeight: 236,
-      imageUrl: "/static/images/1.png",
-      menuIndex: "2",
-      subMenuIndex: "1",
-      menuName: "土地资源",
-      position: "left",
-      gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
-    },
-    {
-      type: "imageMenu",
-      index: 3,
-      title: "一般耕地被违规占用",
-      titleWidth: 81,
-      boxHeight: 236,
-      imageUrl: "/static/images/4.png",
-      menuIndex: "2",
-      subMenuIndex: "1",
-      menuName: "土地资源",
-      position: "left",
-      gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
-    },
-    {
+    [
+      {
+        type: "imageMenu",
+        index: 0,
+        title: "基本农田被违规占用",
+        titleWidth: 81,
+        boxHeight: 236,
+        imageUrl: "/static/images/2.png",
+        menuIndex: "2",
+        subMenuIndex: "1",
+        menuName: "土地资源",
+        position: "left",
+        gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
+      },
+      {
+        type: "imageMenu",
+        index: 1,
+        title: "基本农田种林",
+        titleWidth: 81,
+        boxHeight: 236,
+        imageUrl: "/static/images/3.png",
+        menuIndex: "2",
+        subMenuIndex: "1",
+        menuName: "土地资源",
+        position: "left",
+        gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
+      },
+      {
+        type: "imageMenu",
+        index: 2,
+        title: "基本农田抛荒",
+        titleWidth: 81,
+        boxHeight: 236,
+        imageUrl: "/static/images/1.png",
+        menuIndex: "2",
+        subMenuIndex: "1",
+        menuName: "土地资源",
+        position: "left",
+        gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
+      },
+      {
+        type: "imageMenu",
+        index: 3,
+        title: "一般耕地被违规占用",
+        titleWidth: 81,
+        boxHeight: 236,
+        imageUrl: "/static/images/4.png",
+        menuIndex: "2",
+        subMenuIndex: "1",
+        menuName: "土地资源",
+        position: "left",
+        gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
+      }],
+    [{
       type: "imageMenu",
       index: 0,
       title: "水域数量",
@@ -774,8 +772,8 @@ export const menusMap = {
       menuName: "水资源",
       position: "left",
       gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
-    },
-    {
+    }],
+    [{
       type: "imageMenu",
       index: 0,
       title: "林地面积",
@@ -800,7 +798,7 @@ export const menusMap = {
       menuName: "林地资源",
       position: "left",
       gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" },
-    },
+    }]
   ],
   main: [
     {
@@ -824,7 +822,8 @@ export const menusMap = {
       minDomWidth: 1000,
       topSolt: {
         commonName: "TagCard",
-        columnId: 91,
+        // columnId: 31,
+        commonDataGetUrl: "layout_money.json",
         commonData: [
           {
             type: "lr",
@@ -849,6 +848,7 @@ export const menusMap = {
       minDomWidth: 1000,
       topSolt: {
         commonName: "TagCard",
+        commonDataGetUrl: "layout_project.json",
         commonData: [
           {
             type: "tb",

src/views/HomeView.vue

@@ -23,7 +23,7 @@
           menuIndex: '2',
           subMenuIndex: '5',
           legendIcon: legendIcon,
-          legendTitle: legendTitle,
+          legendTitle: legendTitle
         }"
       />
       <div class="select-title">所属街道</div>
@@ -41,16 +41,12 @@
               type: 'card',
               title: streetSelectVal + '资源问题',
               titleWidth: 40,
-              boxWidth: '780',
+              boxWidth: '780'
             }"
           >
             <template slot="top">
               <div class="town-problems-top-inner">
-                <TagProblemCard
-                  class="problem-item"
-                  v-for="n in townCollection"
-                  :key="n.name" :data="n"
-                />
+                <TagProblemCard class="problem-item" v-for="n in townCollection" :key="n.name" :data="n" />
               </div>
             </template>
           </MenuCard>
@@ -61,7 +57,7 @@
               type: 'card',
               title: '资金投入TOP10',
               titleWidth: 85,
-              boxWidth: '400',
+              boxWidth: '400'
             }"
             ><template slot="top"><TopCard :dataSize="10" /></template
           ></MenuCard>
@@ -70,7 +66,7 @@
               type: 'card',
               title: '历年频发问题TOP10',
               titleWidth: 85,
-              boxWidth: '400',
+              boxWidth: '400'
             }"
             ><template slot="top"><TopCard :dataSize="10" /></template
           ></MenuCard>
@@ -79,10 +75,7 @@
     </div>
 
     <!-- 综合分析 -->
-    <ComprehensiveAnalysis
-      id="ComprehensiveContainer"
-      v-if="$ifMenu('3', '')"
-    />
+    <ComprehensiveAnalysis id="ComprehensiveContainer" v-if="$ifMenu('3', '')" />
 
     <!-- 法律法规 -->
     <LawView id="LawContainer" v-if="$ifMenu('5', '1')" />
@@ -96,9 +89,8 @@
       <MenuCard v-for="item in menus.left" :menuData="item" :key="item.title" />
     </div>
     <!-- 左侧菜单列(较宽，两列) -- 疑点筛查 -->
-    <div id="leftMenusW">
-      <MenuCard v-for="item in menus.leftW" :menuData="item" :key="item.title">
-      </MenuCard>
+    <div id="leftMenusW" v-for="(item, index) in menus.leftW" :key="index">
+      <MenuCard :menuData="item2" v-for="item2 in item" :key="item2.title"> </MenuCard>
     </div>
     <!-- 中部菜单列 -->
     <div id="mainMenus">
@@ -144,7 +136,7 @@
           boxHeight: '180',
           menuIndex: '1',
           legendIcon: legendIcon,
-          legendTitle: legendTitle,
+          legendTitle: legendTitle
         }"
       />
     </div>
@@ -175,14 +167,7 @@ import Header from "@/components/layout/Header.vue";
 import MenuCard from "@/components/layout/MenuCard.vue";
 import NewSelect from "@/components/common/NewSelect.vue";
 import BarChart from "@/components/chart/BarChart.vue";
-import {
-  street,
-  streetLocation,
-  soilData,
-  waterData,
-  forestryData,
-  menusMap,
-} from "@/config/common";
+import { street, streetLocation, soilData, waterData, forestryData, menusMap } from "@/config/common";
 import publicFun from "@/utils/publicFunction.js";
 import TagCard from "@/components/common/TagCard";
 import ChartCard from "@/components/common/ChartCard.vue";
@@ -217,7 +202,7 @@ export default {
     Legend,
     WholeProcessManagement,
     FrequencyView,
-    LawView,
+    LawView
   },
   data() {
     return {
@@ -225,7 +210,7 @@ export default {
         type: "lr",
         title: "林地面积",
         value: 654,
-        unit: "公顷",
+        unit: "公顷"
       },
       testTitle: "土地资源",
       activeIndex: 1,
@@ -236,31 +221,31 @@ export default {
       legendTitle: [
         {
           name: "A类",
-          info: "耕地林地总和占镇域面积约 45%以上,或超过3000公顷",
+          info: "耕地林地总和占镇域面积约 45%以上,或超过3000公顷"
         },
         {
           name: "B类",
-          info: "有一定的自然资源资产(耕地林地总和 900-3000公项)",
+          info: "有一定的自然资源资产(耕地林地总和 900-3000公项)"
         },
         {
           name: "C类",
-          info: "自然资源资产较少(耕地林地总和低于 900公项)",
-        },
+          info: "自然资源资产较少(耕地林地总和低于 900公项)"
+        }
       ],
       // legendData: ["#E565FF", "#0055FF", "#00FFD5"],
       legendIcon: [
         {
           background: "#E565FF",
-          border: "none",
+          border: "none"
         },
         {
           background: "#0055FF",
-          border: "none",
+          border: "none"
         },
         {
           background: "#00FFD5",
-          border: "none",
-        },
+          border: "none"
+        }
       ],
       btnChecked: "A",
       soil: [],
@@ -271,19 +256,19 @@ export default {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: [],
+        categoryData: []
       },
       BData: {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: [],
+        categoryData: []
       },
       CData: {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: [],
+        categoryData: []
       },
       streetSelectVal: "全部",
       streetOptions: [],
@@ -292,12 +277,12 @@ export default {
         { name: "土地资源问题", num: 67 },
         { name: "水资源问题", num: 37 },
         { name: "林地资源问题", num: 60 },
-        { name: "生态资源问题", num: 55 },
+        { name: "生态资源问题", num: 55 }
       ],
       // 综合分析
       analysis: {
-        searchInput: "",
-      },
+        searchInput: ""
+      }
     };
   },
   methods: {
@@ -357,10 +342,10 @@ export default {
         columnId: 30,
         states: 3,
         pageSize: 30,
-        page: 0,
+        page: 0
       };
       this.$Post(this.urlsCollection.selectContentList, params)
-        .then((res) => {
+        .then(res => {
           if (res.code === 200 && res.content.data.length > 0) {
             // console.log(res.content.data, "getSourcesData接口获取成功");
             this.soil = [];
@@ -370,14 +355,14 @@ export default {
             let ADataArr = [];
             let BDataArr = [];
             let CDataArr = [];
-            data.map((v) => {
+            data.map(v => {
               if (v.zy_type === "0") {
                 ADataArr.push({
                   name: v.title,
                   soil: v.c_land_area,
                   water: v.c_water_area,
                   forest: v.c_forest_area,
-                  sum: v.c_land_area + v.c_water_area + v.c_forest_area,
+                  sum: v.c_land_area + v.c_water_area + v.c_forest_area
                 });
               }
               if (v.zy_type === "1") {
@@ -386,7 +371,7 @@ export default {
                   soil: v.c_land_area,
                   water: v.c_water_area,
                   forest: v.c_forest_area,
-                  sum: v.c_land_area + v.c_water_area + v.c_forest_area,
+                  sum: v.c_land_area + v.c_water_area + v.c_forest_area
                 });
               }
               if (v.zy_type === "2") {
@@ -395,7 +380,7 @@ export default {
                   soil: v.c_land_area,
                   water: v.c_water_area,
                   forest: v.c_forest_area,
-                  sum: v.c_land_area + v.c_water_area + v.c_forest_area,
+                  sum: v.c_land_area + v.c_water_area + v.c_forest_area
                 });
               }
             });
@@ -405,20 +390,20 @@ export default {
             CDataArr.sort(publicFun.compare("sum"));
 
             // 按A,B,C分出各自资源的排序数组
-            ADataArr.forEach((item) => {
+            ADataArr.forEach(item => {
               this.AData.soil.push(item.soil);
               this.AData.water.push(item.water);
               this.AData.forestry.push(item.forest);
               this.AData.categoryData.push(item.name);
             });
-            BDataArr.forEach((item) => {
+            BDataArr.forEach(item => {
               this.BData.soil.push(item.soil);
               this.BData.water.push(item.water);
               this.BData.forestry.push(item.forest);
               this.BData.categoryData.push(item.name);
             });
 
-            CDataArr.forEach((item) => {
+            CDataArr.forEach(item => {
               this.CData.soil.push(item.soil);
               this.CData.water.push(item.water);
               this.CData.forestry.push(item.forest);
@@ -437,10 +422,10 @@ export default {
             });
           }
         })
-        .catch((error) => {
+        .catch(error => {
           console.log(error, "getSourcesData");
         });
-    },
+    }
   },
   created() {
     this.menus = menusMap;
@@ -448,11 +433,11 @@ export default {
     for (let key in street) {
       this.streetOptions.push({
         value: street[key],
-        label: street[key],
+        label: street[key]
       });
     }
     this.getSourcesData();
-  },
+  }
 };
 </script>
 <style lang="less" scoped>
@@ -730,22 +715,14 @@ export default {
     transform: translate(-50%, -50%) rotate(45deg);
     width: 110px;
     height: 100px;
-    background: linear-gradient(to left, @commonBorderColor, @commonBorderColor)
-        left top no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left
-        top no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right top
-        no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) right
-        top no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) left
-        bottom no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left
-        bottom no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right
-        bottom no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right
-        bottom no-repeat;
+    background: linear-gradient(to left, @commonBorderColor, @commonBorderColor) left top no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left top no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right top no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) right top no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) left bottom no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left bottom no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right bottom no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right bottom no-repeat;
     background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
   }
 }