标头

src/views/cockpitNew1/borderTemplate.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="borderTemplate">
+    <div class="title">
+      <div class="icon"></div>
+      <span>{{ titleName }}</span>
+      <slot name="title"></slot>
+    </div>
+    <div class="borderContent">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "borderTemplate",
+  props: {
+    titleName: "",
+  },
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.borderTemplate {
+  border-width: 0px;
+  position: absolute;
+  right: 10px;
+  top: 68%;
+  width: 21.6%; //416px
+  height: calc((100% - 52px) / 3);
+  display: -ms-flexbox;
+  display: flex;
+}
+.title {
+  border-width: 0px;
+  width: 100%;
+  height: 40px;
+  // font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+  // font-weight: 700;
+  // font-style: normal;
+  // color: #fff;
+  // padding: 2%;
+  background: no-repeat;
+  background-image: url("/static/images/overview/标题框.png");
+
+  .icon {
+    background: no-repeat;
+    background-image: url("/static/images/overview/icon_标题框装饰.png");
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    background-position: 14px 7px;
+  }
+
+  span {
+    color: #fff;
+    font-size: 14px;
+    font-weight: bold;
+    position: relative;
+    bottom: 0.5rem;
+  }
+}
+.borderContent {
+  // border: #00FFFF 1px solid;
+  position: absolute;
+  left: 5%;
+  width: 100%;
+  height: calc(100% - 50px);
+  top: 40px;
+}
+</style>

src/views/cockpitNew1/datePicker.vue

@@ -1,13 +1,14 @@
 <template>
   <el-date-picker
     v-model="dateValue"
-    class="block"
+    class="timePicker"
     type="daterange"
     :picker-options="pickerOptions"
     value-format="yyyy-MM-dd"
     range-separator="-"
     start-placeholder="开始日期"
     end-placeholder="结束日期"
+    :clearable="false"
     align="left"
     @change="dateChange"
   >
@@ -15,6 +16,9 @@
 </template>
 
 <script>
+const nowYear = new Date().getFullYear();
+const nowMonth = new Date().getMonth() + 1;
+const nowDay = new Date().getDate();
 export default {
   data() {
     return {
@@ -23,45 +27,43 @@ export default {
           {
             text: "今年",
             onClick(picker) {
+              const start = new Date(`${nowYear}-01-01`);
               const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
               picker.$emit("pick", [start, end]);
             },
           },
           {
             text: "去年",
             onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              const start = new Date(`${nowYear - 1}-01-01`);
+              const end = new Date(`${nowYear - 1}-12-31`);
               picker.$emit("pick", [start, end]);
             },
           },
           {
             text: "近三年",
             onClick(picker) {
+              const start = new Date(`${nowYear - 3}-${nowMonth}-${nowDay}`);
               const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
               picker.$emit("pick", [start, end]);
             },
           },
           {
             text: "近五年",
             onClick(picker) {
+              const start = new Date(`${nowYear - 5}-${nowMonth}-${nowDay}`);
               const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
               picker.$emit("pick", [start, end]);
             },
           },
         ],
       },
-      dateValue: "",
+      dateValue: [`${nowYear}-01-01`, `${nowYear}-${nowMonth}-${nowDay}`],
     };
   },
-  mounted() {},
+  mounted() {
+    this.dateChange();
+  },
   methods: {
     dateChange() {
       this.$emit("dateChange", this.dateValue);
@@ -70,10 +72,116 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.block {
+</style>
+<style lang="scss">
+// 日期按选择器样式修改
+.timePicker {
   position: absolute;
   top: 10%;
   left: 30%;
   z-index: 100;
+  font-size: 14px;
+  padding: 0;
+  width: 220px !important;
+}
+.el-picker-panel__sidebar {
+  background: #002446;
+  border-color: #64daff;
+  border-radius: 6px 0 0 6px;
+  .el-picker-panel__shortcut {
+    color: rgba(255, 255, 255, 1);
+  }
+}
+//// 时间选择器  通用样式
+.el-date-editor--daterange.el-input__inner {
+  width: 200px;
+  background: #002446;
+}
+
+.el-date-editor .el-range-separator {
+  padding: 0;
+}
+
+.el-date-editor .el-range__close-icon {
+  line-height: 23px;
+}
+
+.el-date-editor .el-range__icon {
+  line-height: 22px;
+}
+
+.el-date-picker__header-label {
+  color: #fff;
+}
+
+.el-range-input {
+  background: #002446;
+  font-size: 12px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 1);
+}
+
+.el-range-separator {
+  line-height: 20px !important;
+  color: rgba(255, 255, 255, 1) !important;
+}
+
+.el-date-editor .el-range-input {
+  font-size: 12px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 1);
+}
+
+.el-picker-panel,
+.el-time-panel {
+  background: #002446 !important;
+  border: 1px solid #64daff;
+  color: #fff;
+  border-radius: 6px;
+}
+
+.el-time-spinner__item {
+  color: #fff;
+
+  &.active:not(.disabled) {
+    color: #fff;
+  }
+
+  &:hover {
+    background: transparent !important;
+    color: rgb(64, 158, 255);
+  }
+}
+
+.el-date-range-picker__content.is-left {
+  border-right: 1px solid #64daff;
+  color: #fff;
+}
+
+.el-date-table td.in-range div,
+.el-date-table td.in-range div:hover,
+.el-date-table.is-week-mode .el-date-table__row.current div,
+.el-date-table.is-week-mode .el-date-table__row:hover div {
+  background: rgba(23, 94, 165, 0.31) !important;
+}
+
+.el-date-table th {
+  color: #fff;
+}
+
+.el-date-table td.next-month,
+.el-date-table td.prev-month {
+  color: #747985;
+}
+
+// 选择器箭头方向
+.el-input__suffix-inner .el-icon-arrow-down:before {
+  content: " ";
+  border-top: 8px solid #64daff !important;
+  border-bottom: 8px solid transparent !important;
+  border-left: 5.5px solid transparent !important;
+  border-right: 5.5px solid transparent !important;
+  position: relative;
+  top: 12px;
 }
 </style>

src/views/cockpitNew1/stxf.vue

@@ -1,32 +1,33 @@
 <template>
-  <div class="stxf">
-    <div class="box">
-      <div class="title">生态修复</div>
-      <div class="item">
-        <p class="text">
-          <span>·</span>
-          综合整治项目
-          <span>66</span>
-          个
-        </p>
-        <p class="text">
-          <span>·</span>
-          土地整治面积
-          <span>354.56</span>
-          KM2
-        </p>
-      </div>
-      <!-- <Bar3d id="stxf_echart" ref="echartRef"></Bar3d> -->
+  <borderTemplate titleName="生态修复" class="stxf">
+    <template v-slot:title>
+      <!-- #content="row" -->
+    </template>
+    <div class="item">
+      <p class="text">
+        <span>·</span>
+        综合整治项目
+        <span>66</span>
+        个
+      </p>
+      <p class="text">
+        <span>·</span>
+        土地整治面积
+        <span>354.56</span>
+        KM2
+      </p>
     </div>
-  </div>
+    <!-- <Bar3d id="stxf_echart" ref="echartRef"></Bar3d> -->
+  </borderTemplate>
 </template>
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+import borderTemplate from "./borderTemplate.vue";
 // import Bar3d from "../../components/echartsTemplate/3dBar.vue";
 
 export default {
-  // components: { Bar3d },
+  components: { borderTemplate }, //Bar3d
   data() {
     return {};
   },
@@ -48,7 +49,7 @@ export default {
         legend: [""],
       };
       this.$nextTick(() => {
-        this.$refs.echartRef.setOptions(v);
+        // this.$refs.echartRef.setOptions(v);
       });
       // let option = this.options3d(v);
       // myChart.setOption(option);
@@ -63,56 +64,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .stxf {
-  border-width: 0px;
-  position: absolute;
-  left: 1366px;
-  top: 35%;
-  width: 534px;
-  height: 260px;
-  display: flex;
-}
-
-.title {
-  border-width: 0px;
-  width: 100%;
-  height: 40px;
-  font-family: "Arial Negreta", "Arial Normal", "Arial";
-  font-weight: 700;
-  font-style: normal;
-  color: #00ffff;
-  padding: 2%;
-  text-align: justify;
-}
-
-.box {
-  font-family: "Arial Normal", "Arial";
-  font-weight: 400;
-  font-style: normal;
-  font-size: 13px;
-  letter-spacing: normal;
-  color: #333333;
-  text-align: center;
-  line-height: normal;
-  text-transform: none;
-  border-width: 0px;
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  width: 535px;
-  height: 260px;
-  background: inherit;
-  background-color: rgba(3, 25, 67, 0.698039215686274);
-  border: none;
-  border-radius: 0px;
-  box-shadow: none;
-}
-
-#stxf_echart {
-  width: 100%;
-  height: calc(100% - 100px);
-  position: relative;
-  //   left: -28%;
-  //   top: 7%;
+  top: calc(33.3% + 20px) !important;
 }
 
 .item {
@@ -128,5 +80,12 @@ export default {
     color: #00ffff;
     font-weight: 1000;
   }
+  #stxf_echart {
+    width: 100%;
+    height: calc(100% - 100px);
+    position: relative;
+    //   left: -28%;
+    //   top: 7%;
+  }
 }
 </style>

src/views/cockpitNew1/wpjg.vue

@@ -1,23 +1,24 @@
 <template>
-  <div class="wpjg">
-    <div class="box">
-      <div class="title">卫片监管</div>
-      <div class="content">
-        <div class="item">
-          <span class="dlabel">图斑变化数量：</span>
-          <span class="dvalue">{{ sdata.value || 0 }}个</span>
-        </div>
-        <div class="item">
-          <span class="dlabel"> 图斑变化面积：</span>
-          <span class="dvalue">{{ sdata.value || 0 }}公顷</span>
-        </div>
+  <borderTemplate titleName="卫片监管" class="wpjg">
+    <template v-slot:title>
+      <!-- #content="row" -->
+    </template>
+    <div class="stacontent">
+      <div class="item">
+        <span class="dlabel">图斑变化数量：</span>
+        <span class="dvalue">{{ sdata.value || 0 }}个</span>
+      </div>
+      <div class="item">
+        <span class="dlabel"> 图斑变化面积：</span>
+        <span class="dvalue">{{ sdata.value || 0 }}公顷</span>
       </div>
-      <sankey id="wpjp_echart" ref="echartRef"></sankey>
     </div>
-  </div>
+    <sankey id="wpjp_echart" ref="echartRef"></sankey>
+  </borderTemplate>
 </template>
 
 <script>
+import borderTemplate from "./borderTemplate.vue";
 import sankey from "../../components/echartsTemplate/sankey.vue";
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 let lcolors = ["#1677CA", "#5BB57A", "#B1651F"];
@@ -33,7 +34,7 @@ let rcolors = [
   "#D4E0FF",
 ];
 export default {
-  components: { sankey },
+  components: { borderTemplate, sankey },
   data() {
     return {
       sdata: {},
@@ -46,146 +47,112 @@ export default {
 
   methods: {
     getComputedStyle() {
-      // let data = [
-      //   { name: "农用地", itemStyle: { color: lcolors[0] } },
-      //   { name: "林地", itemStyle: { color: lcolors[1] } },
-      //   { name: "耕地", itemStyle: { color: lcolors[2] } },
-      //   { name: "a1" },
-      //   { name: "a2" },
-      //   { name: "b1" },
-      //   { name: "c" },
-      // ];
-      // let data = [
-      //   { name: "耕地", v: 1 },
-      //   { name: "园地", v: 2 },
-      //   { name: "林地", v: 3 },
-      //   { name: "草地", v: 4 },
-      //   { name: "湿地", v: 5 },
-      //   { name: "农业设施用地", v: 6 },
-      //   {
-      //     name: "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
-      //     v: 7,
-      //   },
-      //   { name: "交通运输用地", v: 8 },
-      //   { name: "公共设施用地", v: 9 },
-      //   { name: "绿地与开敞空间用地", v: 10 },
-
-      //   { name: "陆地水城", v: 11 },
-      //   { name: "其他土地", v: 12 },
-      //   {
-      //     name: "渔业用海、工矿通信用海、交通运输用海、游憩用海、特殊用海、其他海域",
-      //     v: 13,
-      //   },
-      // ];
       let data = [
-        { name: "耕地" },
-        { name: "园地" },
-        { name: "林地" },
-        { name: "草地" },
-        { name: "湿地" },
+        { name: "t耕地" },
+        { name: "t园地" },
+        { name: "t林地" },
+        { name: "t草地" },
+        // { name: "t湿地" },
+        // { name: "t农业设施用地" },
+        {
+          name: "t居住用地",
+        },
+        { name: "t交通运输用地" },
+        // { name: "t公共设施用地" },
+        // { name: "t绿地与开敞空间用地" },
+
+        { name: "t陆地水城" },
+        // { name: "t其他土地" },
+        {
+          // name: "t渔业用海、工矿通信用海、交通运输用海、游憩用海、特殊用海、其他海域",
+        },
+        // { name: "耕地" },
+        // { name: "园地" },
+        // { name: "林地" },
+        // { name: "草地" },
+        // { name: "湿地" },
         { name: "农业设施用地" },
         {
-          name: "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+          name: "居住用地",
         },
         { name: "交通运输用地" },
-        { name: "公共设施用地" },
+        // { name: "公共设施用地" },
         { name: "绿地与开敞空间用地" },
 
         { name: "陆地水城" },
-        { name: "其他土地" },
+        // { name: "其他土地" },
         {
-          name: "渔业用海、工矿通信用海、交通运输用海、游憩用海、特殊用海、其他海域",
+          // name: "渔业用海、工矿通信用海、交通运输用海、游憩用海、特殊用海、其他海域",
         },
       ];
-      // let l = [
-      //   { source: "农用地", target: "a1", value: 5 },
-      //   { source: "农用地", target: "a2", value: 3 },
-      //   { source: "林地", target: "b1", value: 8 },
-      //   { source: "农用地", target: "b1", value: 3 },
-      //   { source: "林地", target: "a1", value: 1 },
-      //   { source: "林地", target: "c", value: 2 },
-      //   { source: "耕地", target: "c", value: 2 },
-      // ];
 
       let l = [
-        { source: "耕地", target: "陆地水城", value: 1 },
-        { source: "耕地", target: "农业设施用地", value: 1 },
+        { source: "t耕地", target: "陆地水城", value: 1 },
+        { source: "t耕地", target: "农业设施用地", value: 1 },
         {
-          source: "耕地",
-          target:
-            "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+          source: "t耕地",
+          target: "居住用地",
           value: 25,
         },
-        { source: "耕地", target: "交通运输用地", value: 16 },
+        { source: "t耕地", target: "交通运输用地", value: 16 },
         {
-          source: "陆地水城",
-          target:
-            "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+          source: "t陆地水城",
+          target: "居住用地",
           value: 1,
         },
-        { source: "陆地水城", target: "交通运输用地", value: 5 },
-        { source: "园地", target: "农业设施用地", value: 2 },
+        { source: "t陆地水城", target: "交通运输用地", value: 5 },
+        { source: "t园地", target: "农业设施用地", value: 2 },
         {
-          source: "园地",
-          target:
-            "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+          source: "t园地",
+          target: "居住用地",
           value: 3,
         },
-        { source: "林地", target: "陆地水城", value: 1 },
-        { source: "林地", target: "农业设施用地", value: 4 },
+        { source: "t林地", target: "陆地水城", value: 1 },
+        { source: "t林地", target: "农业设施用地", value: 4 },
         {
-          source: "林地",
-          target:
-            "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+          source: "t林地",
+          target: "居住用地",
           value: 56,
         },
-        { source: "林地", target: "交通运输用地", value: 6 },
-        { source: "草地", target: "农业设施用地", value: 1 },
+        { source: "t林地", target: "交通运输用地", value: 6 },
+        { source: "t草地", target: "农业设施用地", value: 1 },
         {
-          source: "草地",
-          target:
-            "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+          source: "t草地",
+          target: "居住用地",
           value: 89,
         },
-        { source: "草地", target: "交通运输用地", value: 8 },
+        { source: "t草地", target: "交通运输用地", value: 8 },
         {
-          source:
-            "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+          source: "t居住用地",
           target: "绿地与开敞空间用地",
           value: 3,
         },
-        // {
-        //   source:
-        //     "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
-        //   target: "陆地水城",
-        //   value: 1,
-        // },
         {
-          source:
-            "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+          source: "t居住用地",
+          target: "陆地水城",
+          value: 1,
+        },
+        {
+          source: "t居住用地",
           target: "农业设施用地",
           value: 2,
         },
-        // {
-        //   source:
-        //     "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
-        //   target:
-        //     "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
-        //   value: 170,
-        // },
         {
-          source:
-            "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+          source: "t居住用地",
+          target: "居住用地",
+          value: 170,
+        },
+        {
+          source: "t居住用地",
           target: "交通运输用地",
           value: 10,
         },
-        // {
-        //   source:
-        //     "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
-        //   target: "交通运输用地",
-        //   value: 1,
-        // },
-        // { source: "交通运输用地", target: "交通运输用地", value: 1 },
+        {
+          source: "t居住用地",
+          target: "交通运输用地",
+          value: 1,
+        },
+        { source: "t交通运输用地", target: "交通运输用地", value: 1 },
       ];
       // l.forEach((a)=>{
       //   data.push({name:a.source})
@@ -206,88 +173,40 @@ export default {
 </script>
 <style lang="scss" scoped>
 .wpjg {
-  border-width: 0px;
-  position: absolute;
-  left: 1366px;
-  top: 68%;
-  width: 534px;
-  height: 260px;
-  display: -ms-flexbox;
-  display: flex;
-
-  .box {
-    font-family: "Arial Normal", "Arial";
-    font-weight: 400;
-    font-style: normal;
-    font-size: 13px;
-    letter-spacing: normal;
-    color: #333333;
-    text-align: center;
-    line-height: normal;
-    text-transform: none;
-    border-width: 0px;
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    width: 535px;
-    height: 260px;
-    background: inherit;
-    background-color: rgba(3, 25, 67, 0.698039215686274);
-    border: none;
-    border-radius: 0px;
-    box-shadow: none;
-    // background-repeat: no-repeat;
-    // background-size: 100% 47%;
-    // background-image: url("/static/images/cockpitNew/wpjg.png");
-    .title {
-      border-width: 0px;
-      width: 100%;
-      height: 40px;
-      font-family: "Arial Negreta", "Arial Normal", "Arial";
-      font-weight: 700;
-      font-style: normal;
-      color: #00ffff;
-      padding: 2%;
-      text-align: justify;
-    }
-
-    .content {
-      width: 100%;
-      height: 24px;
-    }
+  top: calc(66.6% + 20px) !important;
+  .stacontent {
+    width: 100%;
+    height: 24px;
+  }
 
-    .item {
-      width: 45%;
-      height: 30%;
-      display: inline-block;
-      // border: #00FFFF 1px solid;
-    }
+  .item {
+    width: 45%;
+    height: 30%;
+    display: inline-block;
+    // border: #00FFFF 1px solid;
+  }
 
-    .dlabel {
-      font-family: HarmonyOS Sans Naskh Arabic UI,
-        HarmonyOS Sans Naskh Arabic UI;
-      font-weight: 400;
-      font-size: 14px;
-      color: #bcd3e5;
-      line-height: 24px;
-      text-align: left;
-    }
+  .dlabel {
+    font-family: HarmonyOS Sans Naskh Arabic UI, HarmonyOS Sans Naskh Arabic UI;
+    font-weight: 400;
+    font-size: 14px;
+    color: #bcd3e5;
+    line-height: 24px;
+    text-align: left;
+  }
 
-    .dvalue {
-      font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
-      font-weight: bold;
-      color: #64daff;
-      line-height: 16px;
-      text-align: left;
-    }
+  .dvalue {
+    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
+    font-weight: bold;
+    color: #64daff;
+    line-height: 16px;
+    text-align: left;
+  }
 
-    #wpjp_echart {
-      width: 100%;
-      height: calc(100% - 100px);
-      position: relative;
-      //   left: -28%;
-      //   top: 40%;
-    }
+  #wpjp_echart {
+    width: 100%;
+    height: calc(100% - 24px);
+    position: relative;
   }
 }
 </style>